Add an example esm-example package and use it in edit-post

bin/esm/build.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+const esbuild = require( 'esbuild' );
+const path = require( 'path' );
+
+const args = process.argv.slice( 2 );
+const packages = [ 'esm-example' ];
+
+esbuild
+	.build( {
+		entryPoints: packages.map( ( pkg ) => `./packages/${ pkg }` ),
+		bundle: true,
+		outdir: path.resolve( __dirname, '../../build/esm' ),
+		format: 'esm',
+		logLevel: 'info',
+		external: packages.map( ( pkg ) => `@wordpress/${ pkg }` ),
+		define: {},
+		watch: args[ 0 ] === '--watch',
+	} )
+	.catch( () => process.exit( 1 ) );

bin/packages/build-worker.js

@@ -139,9 +139,20 @@ async function buildCSS( file ) {
 }
 
 async function buildJS( file ) {
+	const pkgName = getPackageName( file );
+	const pkgConfig = JSON.parse(
+		await readFile(
+			path.resolve( PACKAGES_DIR, pkgName, 'package.json' ),
+			'utf8'
+		)
+	);
+
 	for ( const [ environment, buildDir ] of Object.entries(
 		JS_ENVIRONMENTS
 	) ) {
+		if ( ! pkgConfig[ environment ] ) {
+			continue;
+		}
 		const destPath = getBuildPath(
 			file.replace( /\.tsx?$/, '.js' ),
 			buildDir

lib/import-map.php

@@ -0,0 +1,67 @@
+<?php
+/**
+ * Add import map support.
+ *
+ * @package gutenberg
+ */
+
+// phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+$import_map_entries = array();
+
+/**
+ * Registers an import map entry.
+ *
+ * @since 5.6.0
+ *
+ * @global array $import_map_entries The registered import map entries.
+ *
+ * @param string $key   Import map item key.
+ * @param string $value Import map item value.
+ */
+function gutenberg_register_import_map_entry( $key, $value ) {
+	global $import_map_entries;
+
+	$import_map_entries[ $key ] = $value;
+}
+
+/**
+ * Injects the import map to admin pages.
+ */
+function gutenberg_inject_import_map() {
+	global $import_map_entries;
+
+	if ( empty( $import_map_entries ) ) {
+		return;
+	}
+
+	echo '
+<script defer src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+<script type="importmap-shim">
+{
+	"imports": ' . json_encode( $import_map_entries ) . '
+}
+</script>
+	';
+}
+
+add_action( 'admin_enqueue_scripts', 'gutenberg_inject_import_map' );
+
+/**
+ * Convert string to in camel-case, useful for class name patterns.
+ *
+ * @param string $string Target string.
+ *
+ * @return string Camel-case string.
+ */
+function gutenberg_to_camel_case( $string ) {
+	$string = str_replace( '-', ' ', $string );
+	$string = str_replace( '_', ' ', $string );
+	$string = lcfirst( ucwords( strtolower( $string ) ) );
+	$string = str_replace( ' ', '', $string );
+	return $string;
+}
+
+foreach ( glob( gutenberg_dir_path() . 'build/esm/*.js' ) as $path ) {
+	$package_name = substr( basename( $path ), 0, -3 );
+	gutenberg_register_import_map_entry( '@wordpress/' . $package_name, plugins_url( 'build/esm', __DIR__ ) . '/' . $package_name . '.js' );
+}

lib/load.php

@@ -119,6 +119,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experiments-page.php';
 require __DIR__ . '/global-styles.php';
 require __DIR__ . '/pwa.php';
+require __DIR__ . '/import-map.php';
 
 require __DIR__ . '/block-supports/generated-classname.php';
 require __DIR__ . '/block-supports/elements.php';

package.json

@@ -167,6 +167,7 @@
 		"deep-freeze": "0.0.1",
 		"enzyme": "3.11.0",
 		"equivalent-key-map": "0.2.2",
+		"esbuild": "0.12.21",
 		"eslint-import-resolver-node": "0.3.4",
 		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.23.4",
@@ -225,12 +226,12 @@
 		"build:packages": "npm run build:package-types && node ./bin/packages/build.js",
 		"build:package-types": "node ./bin/packages/validate-typescript-version.js && tsc --build",
 		"build:plugin-zip": "./bin/build-plugin-zip.sh",
-		"build": "npm run build:packages && wp-scripts build",
+		"build": "npm run build:packages && ./bin/esm/build.js && wp-scripts build",
 		"changelog": "./bin/plugin/cli.js changelog",
 		"check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
 		"precheck-local-changes": "npm run docs:build",
 		"check-local-changes": "( git diff -U0 | xargs -0 node bin/process-git-diff ) || ( echo \"There are local uncommitted changes after one or both of 'npm install' or 'npm run docs:build'!\" && git diff --exit-code && exit 1 );",
-		"dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
+		"dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\" \"./bin/esm/build.js --watch\"",
 		"dev:packages": "node ./bin/packages/watch.js",
 		"distclean": "rimraf node_modules packages/*/node_modules",
 		"docs:build": "node ./docs/tool/index.js && node ./bin/api-docs/update-api-docs.js",

packages/dependency-extraction-webpack-plugin/lib/index.js

@@ -92,6 +92,9 @@ class DependencyExtractionWebpackPlugin {
 			if ( scriptDependency ) {
 				return scriptDependency;
 			}
+			if ( false === scriptDependency ) {
+				return;
+			}
 		}
 
 		// Fall back to the request name
@@ -158,7 +161,9 @@ class DependencyExtractionWebpackPlugin {
 					const scriptDependency = this.mapRequestToDependency(
 						userRequest
 					);
-					entrypointExternalizedWpDeps.add( scriptDependency );
+					if ( scriptDependency ) {
+						entrypointExternalizedWpDeps.add( scriptDependency );
+					}
 				}
 			};
 

packages/dependency-extraction-webpack-plugin/lib/util.js

@@ -1,5 +1,6 @@
 const WORDPRESS_NAMESPACE = '@wordpress/';
 const BUNDLED_PACKAGES = [ '@wordpress/icons', '@wordpress/interface' ];
+const ESM_PACKAGES = [ '@wordpress/esm-example' ];
 
 /**
  * Default request to global transformation
@@ -34,6 +35,10 @@ function defaultRequestToExternal( request ) {
 			return 'ReactDOM';
 	}
 
+	if ( ESM_PACKAGES.includes( request ) ) {
+		return 'import ' + request;
+	}
+
 	if ( BUNDLED_PACKAGES.includes( request ) ) {
 		return undefined;
 	}
@@ -66,6 +71,10 @@ function defaultRequestToHandle( request ) {
 			return 'lodash';
 	}
 
+	if ( ESM_PACKAGES.includes( request ) ) {
+		return false;
+	}
+
 	if ( request.startsWith( WORDPRESS_NAMESPACE ) ) {
 		return 'wp-' + request.substring( WORDPRESS_NAMESPACE.length );
 	}

packages/edit-post/package.json

@@ -39,6 +39,7 @@
 		"@wordpress/data-controls": "file:../data-controls",
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
+		"@wordpress/esm-example": "file:../esm-example",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",

packages/edit-post/src/index.js

@@ -147,6 +147,11 @@ export function initializeEditor(
 	);
 }
 
+// es-lint-disable-next-line
+window.wp?.domReady( () => {
+	window.importShim( '@wordpress/esm-example' ).then( ( mod ) => mod.run() );
+} );
+
 export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item';
 export { default as PluginDocumentSettingPanel } from './components/sidebar/plugin-document-setting-panel';
 export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';

packages/esm-example/.npmrc

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

packages/esm-example/README.md

@@ -0,0 +1,5 @@
+# ESM Example
+
+This is an example of an ESM module. The module does nothing but it shows contributors how to build an esm ready package in Gutenberg.
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/esm-example/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@wordpress/esm-example",
+	"version": "0.1.0",
+	"description": "An example esm package. Useless, just a poc for ESM modules.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"private": true,
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"esm"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/esm-example/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/esm-example"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=12"
+	},
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "^7.13.10"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/esm-example/src/index.js

@@ -0,0 +1,4 @@
+export function run() {
+	// eslint-disable-next-line no-console
+	console.log( 'you successfully run a function from the ESM package.' );
+}

packages/esm-example/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types"
+	},
+	"references": [],
+	"include": [ "src/**/*" ]
+}

tools/webpack/shared.js

@@ -19,7 +19,7 @@ const {
 } = process.env;
 
 const baseConfig = {
-	target: 'browserslist',
+	target: 'browserslist:last 2 Chrome versions',
 	optimization: {
 		// Only concatenate modules in production, when not analyzing bundles.
 		concatenateModules: