WordPress Async Components

components|async-component|index.js

class AsyncComponent extends Component {
	constructor() {
		super( ...arguments );

		this.state = {
			component: null,
		};
	}

	componentWillMount() {
		this.startResolution();
	}

	async startResolution() {
		const component = await this.resolve();
		this.setState( () => ( { component } ) );
	}

	render() {
		if ( this.state.component ) {
			return <this.state.component { ...this.props } />;
		}

		return <div className="components-async-component__placeholder" />;
	}
}

components|script-dependency|index.js

class ScriptDependency extends AsyncComponent {
	resolve() {
		return new Promise( ( resolve, reject ) => {
			const script = document.createElement( 'script' );
			script.src = this.props.src;
			script.onload = resolve;
			script.onerror = reject;

			document.head.appendChild( script );
		} );
	}
}

core-blocks|code|edit.js

import { CodeEditor } from '@wordpress/components';
// Effectively (transformed by Babel):
// 
//  import { ScriptDependency } from '@wordpress/components';
//  const _wordpress_components_CodeEditor_dependency = window._wpSiteURL + '/wp-admin/wp-admin/load-scripts.php?load=wp-codemirror,code-editor,htmlhint,htmlhint-kses,csslint,jshint';
//  const CodeEditor = ( { ...props } ) => <ScriptDependency src={ _wordpress_components_CodeEditor_dependency } />;

gutenberg|.babelrc

[ "@wordpress/babel-plugin-component-dependency", {
	"siteURLSource": "_wpSiteURL",
	"dependencies": {
		"@wordpress/components": {
			"CodeEditor": [
				"wp-codemirror",
				"code-editor",
				"htmlhint",
				"htmlhint-kses",
				"csslint",
				"jshint"
			]
		}
	}
} ]

gutenberg|lib|client-assets.php

wp_add_inline_script(
	'wp-components',
	sprintf( 'window._wpSiteURL = %s;', json_encode( site_url() )
);