*preact-async-component.md

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.

import { lazy } from './preact-async-component.js';

const LazyRoute = lazy(() => import('./routes/about'));

function App() {
  return (
    <Router>
      <LazyRoute path="/about" />   // only loads when matched
    </Router>
  );
}

Option 2: <AsyncRoute>

This is the API from preact-async-route, it just supports Preact 10.

import { AsyncRoute } from './preact-async-component.js';

function App() {
  return (
    <Router>
      <AsyncRoute path="/about" getComponent={() => import('./routes/about')} />
    </Router>
  );
}

preact-async-component.js

import { h, Component } from 'preact';

const PENDING = {};

export function AsyncRoute({ component, getComponent, ...props }) {
  component = component || this.l || (this.l = lazy(getComponent));
  return h(component, props);
}

export function lazy(load) {
	let component;

	function AsyncComponent() {
		Component.call(this);

		if (!component) {
			this.componentWillMount = () => {
				load().then(mod => {
					component = (mod && mod.default) || mod;
					this.setState({});
				});
			};

			this.shouldComponentUpdate = () => component != null;
		}

		this.render = props => {
			if (component) {
				return h(component, props);
			}

			const prev = getPreviousSibling(this.__v);
			const me =
				(prev && prev.nextSibling) || (this.__P || this._parentDom).firstChild;

			if (!me) return;
			if (me.nodeType === 3) return me.data;
			return h(me.localName, {
				dangerouslySetInnerHTML: PENDING,
			});
		};
	}

	AsyncComponent.preload = load;
	(AsyncComponent.prototype = new Component()).constructor = AsyncComponent;

	return AsyncComponent;
}

// Given a VNode, finds its previous element sibling
function getPreviousSibling(vnode, inner) {
	// in an element parent with no preceeding siblings means we're the first child
	if (typeof vnode.type === 'string') return null;
	const parent = vnode.__;
	if (!parent) return;
	let children = parent.__k;
	if (children) {
		if (!Array.isArray(children)) children = [children];
		// only search previous children
		let end = children.indexOf(vnode);
		if (end === -1) end = children.length;
		for (let i = end; i--; ) {
			const child = children[i];
			const dom = (child && child.__e) || getPreviousSibling(child, true);
			if (dom) return dom;
		}
	}
	if (!inner) return getPreviousSibling(parent);
}