hydrate-root.js

import { h, hydrate } from 'preact';

let C = 0;
export function Root({ href, data, children }) {
  let json = data && JSON.stringify(data);
  let id = 'root:'+++C;
  return [
    h(`!--${id}--`),
    children,
    h('component-root', { href, id },
      json && h('script', { type: 'text/props' }, json)
    )
  ];
}

if (typeof customElements !== 'undefined') {
  customElements.define('component-root', class extends HTMLElement {
    connectedCallback() {
      let id = this.getAttribute('id');
      // hydrate any serialized props/data:
      try {
        var data = JSON.parse(this.firstElementChild.textContent)
      } catch (e) {}
      // walk back to the comment marker to collect owned root nodes:
      let childNodes = [], child = this, p = this.parentNode;
      while ((child = child.previousSibling)) {
        if (child.nodeType !== 8) childNodes.unshift(child);
        else if (child.data === id) break;
      }
      // create a fake DOM root housing only owned root nodes:
      let frag = {
        childNodes,
        removeChild: c => p.removeChild(c),
        appendChild: c => p.insertBefore(c, this),
        insertBefore: (c, i) => p.insertBefore(c, i || this)
      };
      // import the component, then hydrate its DOM subtree:
      let [url, exportName] = this.getAttribute('href').split('#');
      import(url).then(m => {
        let component = m[exportName] || m.default;
        hydrate(h(component, data), frag);
      });
    }
  });
}