Untitled

<!DOCTYPE html>
<title>Dom expression binding</title>
<body>
  <script>
    /**
     * placeholder element
     */
    function $() {
      const DOMNode = document.createTextNode('{{}}');
      return {
        DOMNode,
        placeholders: [DOMNode]
      };
    }

    function t(text) {
      return {
        DOMNode: document.createTextNode(text),
        placeholders: []
      };
    }

    function click(element, handler) {
      element.DOMNode.addEventListener('mousedown', handler);
      return element;
    }

    function h(tagname, ...children) {
      const l = children.length;
      const DOMNode = document.createElement(tagname);
      let i = 0,
        placeholders = [];

      for (let i = 0; i < l; i++) {
        DOMNode.appendChild(children[i].DOMNode);
        placeholders = placeholders.concat(children[i].placeholders);
      }

      return { DOMNode, placeholders };
    }

    function wire(template, ...expressions) {
      const l = template.placeholders.length;
      let placeholders = template.placeholders;
      for (let i = 0; i < l; i++) {
        placeholders[i].parentNode.replaceChild(expressions[i].DOMNode, placeholders[i]);
      }
      return {
        ...template,
        placeholders: expressions.map(e => e.DOMNode)
      };
    }

    function createComponent(template, setprops) {
      let tmpl = template;
      return function(props) {
        return tmpl = wire(tmpl, ...(setprops(props)));
      };
    }

    function bind(parent, component) {
      parent.appendChild(component.DOMNode);
    }

    function test() {
      const myComp = createComponent(
        h('div',
          h('ul',
            h('li', $())),
          $(),
          click(
            h('button',
              t('click me')),
            () => console.log('ahoj'))),
        ({text, div}) =>
          [t(text), div, ]
      );

      bind(document.body, myComp({ text: 'ahoj', div: h('div', t('ahoj z divu'))}));

      setTimeout(() => myComp({ text: 'ahodsfsj', div: h('div', t(' jak se mas'))}), 3000);
    }

    test();
  </script>