Last active
January 26, 2019 16:02
-
-
Save christianwish/53edd8dc8dec9bd16550a995b56d4440 to your computer and use it in GitHub Desktop.
This happens when a JS developer works with PHP
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| include('./template-engine.php'); | |
| // Use functions to add dynamic data in Components | |
| function HtmlBasic ($headInner, $children) { | |
| return html( | |
| head($headInner), | |
| body($children) | |
| ); | |
| }; | |
| // Static components | |
| $Intro = _header(h1('This happens', small('... when a JS developer works with PHP'))); | |
| $Thanks = footer(h3('Thanks for watching!')); | |
| // Use functions to add dynamic data in Components | |
| function Item ($props) { | |
| return a( | |
| attr('href="' . $props['url'] . '"'), | |
| attr('target="_blank"'), | |
| hr, | |
| h5($props['title']) | |
| ); | |
| } | |
| // Create map functions | |
| $mapItems = makeMap(Item); | |
| // Just data | |
| $data = [ | |
| [ title => 'JavaScript', url => 'https://developer.mozilla.org/de/docs/Web/JavaScript'], | |
| [ title => 'Haskell', url => 'https://www.haskell.org/'], | |
| [ title => 'Common Lisp', url => 'https://lisp-lang.org/'], | |
| [ title => 'C++', url => 'https://isocpp.org/'], | |
| [ title => 'Python', url => 'https://www.python.org/'], | |
| [ title => 'PHP', url => 'http://www.php.net/'] | |
| ]; | |
| $normalizeCss = "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"; | |
| $View = HtmlBasic( | |
| css($normalizeCss), | |
| fragment( | |
| $Intro, | |
| $mapItems($data), | |
| hr, | |
| $Thanks | |
| ) | |
| ); | |
| render($View); // renders output.html (not beautified) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" /> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>This happens<small>... when a JS developer works with PHP</small></h1> | |
| </header> | |
| <a href="https://developer.mozilla.org/de/docs/Web/JavaScript" target="_blank"> | |
| <hr /> | |
| <h5>JavaScript</h5> | |
| </a> | |
| <a href="https://www.haskell.org/" target="_blank"> | |
| <hr /> | |
| <h5>Haskell</h5> | |
| </a> | |
| <a href="https://lisp-lang.org/" target="_blank"> | |
| <hr /> | |
| <h5>Common Lisp</h5> | |
| </a> | |
| <a href="https://isocpp.org/" target="_blank"> | |
| <hr /> | |
| <h5>C++</h5> | |
| </a> | |
| <a href="https://www.python.org/" target="_blank"> | |
| <hr /> | |
| <h5>Python</h5> | |
| </a> | |
| <a href="http://www.php.net/" target="_blank"> | |
| <hr /> | |
| <h5>PHP</h5> | |
| </a> | |
| <hr /> | |
| <footer> | |
| <h3>Thanks for watching!</h3> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function attr ($x) { return [__IS_ATTR__ => true, value => $x]; } | |
| function _isAttr($x) { return (is_array($x) && $x['__IS_ATTR__']); } | |
| function _areAttrs($xs) { return array_filter($xs, _isAttr); } | |
| function _isNotAttr($x) { return !_isAttr($x); } | |
| function _reduceAttr($acc, $x) { return $acc . ' ' . $x['value']; } | |
| function _getAttr($xs) { return array_reduce(_areAttrs($xs), _reduceAttr, ''); } | |
| function _getChildren($xs) { return array_filter($xs, _isNotAttr); } | |
| function _reduceCallable($acc, $x) { return $acc . ((is_callable($x)) ? $x() : $x); } | |
| function _reduceChildren($xs) { return array_reduce($xs, _reduceCallable, ''); } | |
| function _renderChild($x) { | |
| return (is_callable($x)) ? $x() : (is_array($x) ? _reduceChildren($x) : $x); | |
| } | |
| function _mkTag($tagName, $selfClosing = false) { | |
| return function(...$xs) use ($tagName) { | |
| $attrs = _getAttr($xs); | |
| $children = _getChildren($xs); | |
| $startTag = '<' . $tagName . $attrs; | |
| return ($selfClosing) | |
| ? $startTag .' />' | |
| : $startTag .'>' . _renderChild($children) . '</' . $tagName . '>'; | |
| }; | |
| } | |
| function fragment(...$c) { return _renderChild($c); } | |
| // With attributes | |
| function html(...$a) { return _mkTag('html')(...$a); } | |
| function body(...$a) { return _mkTag('body')(...$a); } | |
| function head(...$a) { return _mkTag('head')(...$a); } | |
| function _link(...$a) { return _mkTag('link', true)(...$a); } | |
| function _header(...$a) { return _mkTag('header')(...$a); } | |
| function style(...$a) { return _mkTag('style')(...$a); } | |
| function script(...$a) { return _mkTag('script')(...$a); } | |
| function title(...$a) { return _mkTag('title')(...$a); } | |
| function footer(...$a) { return _mkTag('footer')(...$a); } | |
| function img(...$a) { return _mkTag('img', true)(...$a); } | |
| function span(...$a) { return _mkTag('span')(...$a); } | |
| function div(...$a) { return _mkTag('div')(...$a); } | |
| function section(...$a) { return _mkTag('section')(...$a); } | |
| function button(...$a) { return _mkTag('button')(...$a); } | |
| function table(...$a) { return _mkTag('table')(...$a); } | |
| function tr(...$a) { return _mkTag('tr')(...$a); } | |
| function th(...$a) { return _mkTag('th')(...$a); } | |
| function td(...$a) { return _mkTag('td')(...$a); } | |
| function h1(...$a) { return _mkTag('h1')(...$a); } | |
| function h2(...$a) { return _mkTag('h2')(...$a); } | |
| function h3(...$a) { return _mkTag('h3')(...$a); } | |
| function h4(...$a) { return _mkTag('h4')(...$a); } | |
| function h5(...$a) { return _mkTag('h5')(...$a); } | |
| function h6(...$a) { return _mkTag('h6')(...$a); } | |
| function small(...$a) { return _mkTag('small')(...$a); } | |
| function p(...$a) { return _mkTag('p')(...$a); } | |
| function i(...$a) { return _mkTag('i')(...$a); } | |
| function b(...$a) { return _mkTag('b')(...$a); } | |
| function a(...$a) { return _mkTag('a')(...$a); } | |
| function hr(...$a) { return _mkTag('hr', true)(...$a); } | |
| function code(...$a) { return _mkTag('code')(...$a); } | |
| // Shortcuts | |
| function css($href) { return _link(attr('rel="stylesheet" type="text/css" href="' . $href . '"')); } | |
| // Data map | |
| function makeMap ($fn) { | |
| return function ($arr) use ($fn) { return fragment(...array_map($fn, $arr)); }; | |
| } | |
| function render($str) { echo $str; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment