developit

Note

This gist has graduated to a proper repo: preactjs/preact-root-fragment

preact-root-fragment: partial root rendering for Preact

This is a standalone Preact 10+ implementation of the deprecated replaceNode parameter from Preact 10.

It provides a way to render or hydrate a Preact tree using a subset of the children within the parent element passed to render():

developit

import ReactDOM from "react-dom";
import { RemixBrowser } from "remix";

// hydrate a fake Document with the patch:
ReactDOM.hydrate(<RemixBrowser />, {
    childNodes: [document.documentElement],
    firstChild: document.documentElement,
    appendChild(n) { document.replaceChild(n, document.documentElement); },
    insertBefore(n) { this.appendChild(n); }
});

developit

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 },

developit

AsyncComponent for preact

This is the guts of preact-cli's import X from 'async!./x' feature, extracted into a standalone library.

It creates a wrapper component that, when rendered, lazy-loads your real component. While loading, any SSR'd DOM is preserved intact.

Option 1: lazy()

This is the API of React.lazy() or preact-iso's lazy(), but it does not use Suspense.

developit

Rendering Interactive HTML using Preact

It's possible to render HTML in Preact using the dangerouslySetInnerHTML prop, however doing so bypasses the Virtual DOM entirely. This may be reasonable for static HTML, but interactivity can be a little painful to graft on without VDOM.

There is another technique available that melds HTML to Virtual DOM without such limitations.

Enter DOMParser

developit

Horrible JSX Transform

import { jsx } from './jsx.js';

const out = jsx(`
  const App = props => (
    <div class="app">
      <h1>Hello {"World"}</h1>
      <ul>{['a','b','c'].map(item => <li>{item}</li>)}</ul>

developit

import { options } from 'preact';

// Fix Preact rendering when Google Translate breaks the DOM
const FONT_AS_TEXT = {
  localName: {
    value: null
  },
  nodeType: {
    value: 3
  },

developit

/**
 * Usage:
 * class FancyButton extends HTMLElement {
 *   constructor() {
 *     super();
 *     ensureShadowRoot(el);
 *     // if a declarative shadow root was present, it'll be here:
 *     console.log(this.shadowRoot);
 *   }
 * }

developit

if (!Element.prototype.getInnerHTML) {
  Element.prototype.getInnerHTML = function(opts) {
    var html = this.innerHTML;
    if (!opts || !opts.includeShadowRoots) return html;
    var m = new (self.WeakMap || Map)();
    for (var c of (opts.closedRoots || [])) m.set(c.host, c);
    var p = [];
    function walk(node) {
      var c, shadow = node.shadowRoot || m.get(node);
      if (shadow) p.push(node.innerHTML, `<template shadowroot="${shadow.mode}">${shadow.innerHTML}</template>`);

developit

/**
 * cloneNode(true), but also clones shadow roots.
 * @param {Element}
 * @param {ShadowRoot[]} [shadowRoots] Any closed shadow roots passed here will be included.
 */
function cloneWithShadowRoots(node, shadowRoots) {
  function walk(node, clone) {
    let shadow = node.shadowRoot || shadowRoots.find(r => r.host === node);
    if (shadow) {
      clone.attachShadow({ mode: shadow.mode }).append(...[].map.call(shadow.childNodes, c => c.cloneNode(true)));