Build: Add new Webpack plugin to handle library default export

lib/client-assets.php

@@ -1059,7 +1059,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	$script .= <<<JS
 		window._wpLoadGutenbergEditor = new Promise( function( resolve ) {
 			wp.api.init().then( function() {
-				wp.domReady.default( function() {
+				wp.domReady( function() {
 					resolve( wp.editPost.initializeEditor( 'editor', window._wpGutenbergPost, editorSettings ) );
 				} );
 			} );

packages/library-export-default-webpack-plugin/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/library-export-default-webpack-plugin/README.md

@@ -0,0 +1,45 @@
+# @wordpress/library-export-default-webpack-plugin
+
+Webpack plugin for exporting default property for selected libraries. Implementation is based on the Webpack's core plugin [ExportPropertyMainTemplatePlugin](https://github.com/webpack/webpack/blob/51b0df77e4f366163730ee465f01458bfad81f34/lib/ExportPropertyMainTemplatePlugin.js). The only difference is that this plugin allows to whitelist all entry point names where the default export of your entry point will be assigned to the library target.  
+
+**Note**: This plugin targets Webpack 4.0 and newer, and is not compatible with older versions.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/library-export-default-webpack-plugin@next --save
+```
+
+## Usage
+
+Construct an instance of `LibraryExportDefaultPlugin` in your Webpack configurations plugins entry, passing an array where values correspond to the entry point name.
+
+The following example selects `boo` entry point to be updated by the plugin. When compiled, the built file will ensure that `default` value exported for the chunk will be assigned to the global variable `wp.boo`. `foo` chunk will remain untouched.
+
+```js
+const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
+
+module.exports = {
+	// ...
+
+	entry: {
+		boo: './packages/boo',
+		foo: './packages/foo',
+	},
+
+	output: {
+		filename: 'build/[name].js',
+		path: __dirname,
+		library: [ 'wp', '[name]' ],
+		libraryTarget: 'this',
+	},
+
+	plugins: [
+		new LibraryExportDefaultPlugin( [ 'boo' ] ),
+	],
+}
+```
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/library-export-default-webpack-plugin/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@wordpress/library-export-default-webpack-plugin",
+	"version": "0.0.1",
+	"description": "Webpack plugin for exporting default property for selected libraries",
+	"author": "WordPress",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"webpack",
+		"webpack-plugin"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/library-export-default-webpack-plugin/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "src/index.js",
+	"dependencies": {
+		"lodash": "4.17.5",
+		"webpack-sources": "1.1.0"
+	},
+	"devDependencies": {
+		"rimraf": "2.6.2",
+		"webpack": "4.8.3"
+	},
+	"peerDependencies": {
+		"webpack": "^4.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/library-export-default-webpack-plugin/src/index.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+const { includes } = require( 'lodash' );
+const { ConcatSource } = require( 'webpack-sources' );
+
+module.exports = class LibraryExportDefaultPlugin {
+	constructor( entryPointNames ) {
+		this.entryPointNames = entryPointNames;
+	}
+
+	apply( compiler ) {
+		compiler.hooks.compilation.tap( 'LibraryExportDefaultPlugin', ( compilation ) => {
+			const { mainTemplate, chunkTemplate } = compilation;
+
+			const onRenderWithEntry = ( source, chunk ) => {
+				if ( ! includes( this.entryPointNames, chunk.name ) ) {
+					return source;
+				}
+				return new ConcatSource( source, '["default"]' );
+			};
+
+			for ( const template of [ mainTemplate, chunkTemplate ] ) {
+				template.hooks.renderWithEntry.tap(
+					'LibraryExportDefaultPlugin',
+					onRenderWithEntry
+				);
+			}
+
+			mainTemplate.hooks.hash.tap( 'LibraryExportDefaultPlugin', ( hash ) => {
+				hash.update( 'export property' );
+				hash.update( 'default' );
+			} );
+		} );
+	}
+};

packages/library-export-default-webpack-plugin/test/fixtures/boo/index.js

@@ -0,0 +1,3 @@
+export default function boo() {
+	return 'boo';
+}

packages/library-export-default-webpack-plugin/test/fixtures/foo/index.js

@@ -0,0 +1,3 @@
+export default function foo() {
+	return 'foo';
+}

packages/library-export-default-webpack-plugin/test/fixtures/webpack.config.js

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+const LibraryExportDefaultPlugin = require( '../../' );
+
+module.exports = {
+	mode: 'development',
+	context: __dirname,
+	entry: {
+		boo: './boo',
+		foo: './foo',
+	},
+	output: {
+		filename: 'build/[name].js',
+		path: __dirname,
+		library: [ 'wp', '[name]' ],
+		libraryTarget: 'global',
+	},
+	plugins: [
+		new LibraryExportDefaultPlugin( [ 'boo' ] ),
+	],
+};

packages/library-export-default-webpack-plugin/test/index.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const { promisify } = require( 'util' );
+const rimraf = promisify( require( 'rimraf' ) );
+const webpack = promisify( require( 'webpack' ) );
+
+/**
+ * Internal dependencies
+ */
+const config = require( './fixtures/webpack.config.js' );
+
+describe( 'LibraryExportDefaultPlugin', () => {
+	const buildDir = path.join( __dirname, '/fixtures/build' );
+
+	beforeAll( async () => {
+		await rimraf( buildDir );
+		await webpack( config );
+	} );
+
+	test( 'the default export of boo entry point is assigned to the library target', () => {
+		require( './fixtures/build/boo' );
+
+		expect( window.wp.boo() ).toBe( 'boo' );
+	} );
+
+	test( 'the default export of foo entry point is not assigned to the library target', () => {
+		require( './fixtures/build/foo' );
+
+		expect( window.wp.foo.default() ).toBe( 'foo' );
+	} );
+} );

webpack.config.js

@@ -3,13 +3,15 @@
  */
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
+
 const { get } = require( 'lodash' );
 const { basename } = require( 'path' );
 
 /**
  * WordPress dependencies
  */
 const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
+const LibraryExportDefaultPlugin = require( './packages/library-export-default-webpack-plugin' );
 
 // Main CSS loader for everything but blocks..
 const mainCSSExtractTextPlugin = new ExtractTextPlugin( {
@@ -273,6 +275,7 @@ const config = {
 				return path;
 			},
 		} ),
+		new LibraryExportDefaultPlugin( [ 'dom-ready' ].map( camelCaseDash ) ),
 	],
 	stats: {
 		children: false,