A couple of variants for preact split points

split-point.js

import { h, Component } from 'preact';

/**
 *	<SplitPoint load={require('bundle?lazy!./foo')} fallbackContent={(
 *		<div class="loading" />
 *	)} />
 */
class SplitPoint extends Component {
	componentWillMount() {
		let cb = this.linkState('child'),
			r = this.props.load(cb);
		if (r.then) r.then(cb);
	}
	render({ load, fallbackContent, ...props }, { child }) {
		return child ? h(child, props) : fallbackContent || null;
	}
}





class SplitPoint extends Component {
	componentWillMount() {
		let cb = this.linkState('child'),
			r = this.props.load();
		r.then ? r.then(cb) : cb(r);
	}
	render(props, { child }) {
		return child ? h(child, props) : null;
	}
}


class Split extends Component {
	render({ load, ...props }, { child }) {
		if (!child && !this.child) {
			let c = this.child = load();
			c.then ? c.then(this.linkState('child')) : (child = c);
		}
		return child ? h(child, props) : null;
	}
}