developit

comlinkage

Dynamic import, but where the module you import runs in a different thread.

Powered by Comlink and Module Workers.

Available via unpkg: https://unpkg.com/comlinkage

Usage

developit

Module Worker polyfill for Chrome 61+

Chrome 61+ supports dynamic import() within Classic Workers. We can use this to polyfill Module Workers to a reasonable degree of accuracy.

The only trick is that we need to queue up any messages received while we wait for the module tree to load in the Worker, since Module Workers load the entire dependency graph before flushing messages queued during Worker instantiation.

This polyfill comes in two versions:

module-workers-polyfill-inline.js is a single-file polyfill, but creates Workers with an Opaque Origin. If you're only loading dependencies from absolute URLs and not relying on storage like IndexedDB, this option is fine.

developit

import './style';
import { Component } from 'preact';

export default class App extends Component {
	render() {
		return (
			<div>
				<h1>Hello, World!</h1>
			</div>
		);

developit

import regexparam from 'https://unpkg.com/regexparam@1/dist/regexparam.mjs';

/**
 * <url-route href="/profile/:user">
 *   <div>some content here</div>
 * </url-route>
 */
customElements.define('url-route', class UrlRoute extends HTMLElement {
  connectedCallback() {
    this.route = regexparam(this.getAttribute('href'));

developit

if (!('trimStart' in String.prototype)) String.prototype.trimStart = String.prototype.trimLeft;
if (!('trimEnd' in String.prototype)) String.prototype.trimEnd = String.prototype.trimRight;

if (!('forEach' in NodeList.prototype)) NodeList.prototype.forEach = [].forEach;

if (!('description' in Symbol.prototype)) {
  Object.defineProperty(Symbol.prototype, 'description', {
    get() { return /\((.+)\)/.exec(this)[1] }
  });
}

developit

Polyfill dynamic import() in all ES Modules-supporting browsers.

Drop this polyfill into your page: https://github.com/GoogleChromeLabs/dynamic-import-polyfill

... then add the Babel transform:

import dynamicImportPolyfill from 'dynamic-import-polyfill';

developit

[native-url] webpack demonstration

Normal Build: 13.4 kB

With [native-url]: 5.95 kB

(less than half the size)

The result is functionally equivalent in Node 7+ and all modern browsers (Chrome 61+, Firefox 60+, Safari 10+, Edge 16+ and anything else with ES Modules support).

developit

const Component = require('preact/compat').Component;

const AUTOBIND_BLACKLIST = {
	constructor: 1,
	render: 1,
	shouldComponentUpdate: 1,
	componentWillReceiveProps: 1,
	componentWillUpdate: 1,
	componentDidUpdate: 1,
	componentWillMount: 1,

developit

import { h, options } from 'preact';

const X = 'props' in h('a');

export const getProps = X ? vnode => vnode.props : vnode => vnode.attributes;

export const setProps = X
  ? (vnode, props) => { vnode.props = props; }
  : (vnode, props) => { vnode.attributes = props; };

developit

package-lock.json
node_modules