more work

src/wp-includes/script-modules.php

@@ -133,6 +133,7 @@ function wp_deregister_script_module( string $id ) {
  */
 function wp_register_package_scripts_proxy_modules() {
 	$suffix = defined( 'WP_RUN_CORE_TESTS' ) ? '.min' : wp_scripts_get_suffix();
+
 	/*
 	 * Expects multidimensional array like:
 	 *
@@ -143,7 +144,7 @@ function wp_register_package_scripts_proxy_modules() {
 	$assets = include ABSPATH . WPINC . "/assets/script-loader-packages-proxy-modules{$suffix}.php";
 
 	foreach ( $assets as $file_name => $package_data ) {
-		$basename = str_replace( $suffix . '-esm.js', '', basename( $file_name ) );
+		$basename = str_replace( $suffix . '-esm-proxy.js', '', basename( $file_name ) );
 		$id   = '@wordpress/' . $basename;
 		$path     = "/wp-includes/js/dist/{$file_name}";
 
@@ -155,6 +156,29 @@ function wp_register_package_scripts_proxy_modules() {
 
 		wp_register_script_module( $id, $path, $dependencies, $package_data['version'] );
 	}
+
+	/*
+	 * Expects multidimensional array like:
+	 *
+	 *     'a11y-esm.js' => array('dependencies' => array(...), 'version' => '...'),
+	 *     'annotations-esm.js' => array('dependencies' => array(...), 'version' => '...'),
+	 *     'api-fetch-esm.js' => array(...
+	 */
+	$assets = include ABSPATH . WPINC . "/assets/script-loader-packages-esm{$suffix}.php";
+
+	foreach ( $assets as $file_name => $package_data ) {
+		$basename = str_replace( $suffix . '-esm.js', '', basename( $file_name ) );
+		$id   = '@wordpress-esm/' . $basename;
+		$path     = "/wp-includes/js/dist/{$file_name}";
+
+		if ( ! empty( $package_data['dependencies'] ) ) {
+			$dependencies = $package_data['dependencies'];
+		} else {
+			$dependencies = array();
+		}
+
+		wp_register_script_module( $id, $path, $dependencies, $package_data['version'] );
+	}
 }
 
 add_action( 'init', 'wp_register_package_scripts_proxy_modules' );

tools/webpack/packages-proxy-module-gen-plugin.js

@@ -133,33 +133,36 @@ class WpScriptsPackageProxyModuleWebpackPlugin {
 					.getPath( '[file]', {
 						filename: chunkJSFile,
 					} )
-					.replace( /\.m?js$/i, '-esm.js' );
+					.replace( /\.m?js$/i, '-esm-proxy.js' );
 				const libraryPath = libOpts.name.map(
 					( n ) => `[${ JSON.stringify( n ) }]`
 				);
-				let sourceString = `if ( 'undefined' === typeof ${
+
+				// let sourceString = `if ( 'undefined' === typeof ${
+				// 	libOpts.type
+				// }?.${ libraryPath.join(
+				// 	'?.'
+				// ) } ) {\n\tthrow new Error( 'Undefined dependency: ${
+				// 	libOpts.type
+				// }${ libraryPath.join( '' ) }' );\n}\n`;
+
+				let sourceString = `const __library__ = ${
 					libOpts.type
 				}?.${ libraryPath.join(
 					'?.'
-				) } ) {\n\tthrow new Error( 'Undefined dependency: ${
-					libOpts.type
-				}${ libraryPath.join( '' ) }' );\n}\n`;
-
-				if ( libOpts.exports === 'default' ) {
-					sourceString += `export default ${
-						libOpts.type
-					}${ libraryPath.join( '' ) };\n`;
-				} else {
-					for ( const exportName of exportsInfo.getProvidedExports() ) {
-						if ( exportName === 'default' ) {
-							sourceString += `export default ${
-								libOpts.type
-							}${ libraryPath.join( '' ) };\n`;
-						} else {
-							sourceString += `export const ${ exportName }=${
-								libOpts.type
-							}${ libraryPath.join( '' ) }.${ exportName };\n`;
-						}
+				) } ?? await import( '@wordpress-esm/${ chunk.name }' )${
+					'' //libOpts.export === 'default' ? '.default' : ''
+				};\n`;
+
+				console.log( {
+					n: chunk.name,
+					es: exportsInfo.getProvidedExports(),
+				} );
+				for ( const exportName of exportsInfo.getProvidedExports() ) {
+					if ( exportName === 'default' ) {
+						sourceString += `export default __library__.default;\n`;
+					} else {
+						sourceString += `export const ${ exportName } = __library__.${ exportName };\n`;
 					}
 				}
 
@@ -172,7 +175,13 @@ class WpScriptsPackageProxyModuleWebpackPlugin {
 				chunk.files.add( generatedProxyModuleFilename );
 
 				const assetData = {
-					dependencies: [ { id: `wp-${ chunk.name }`, import: 'wp-script' } ],
+					dependencies: [
+						// { id: `wp-${ chunk.name }`, import: 'wp-script' },
+						{
+							id: `@wordpress-esm/${ chunk.name }`,
+							import: 'dynamic',
+						},
+					],
 					version: contentHash
 						.digest( hashDigest )
 						.slice( 0, hashDigestLength ),

tools/webpack/packages.js

@@ -228,18 +228,18 @@ module.exports = function (
 					),
 					library: {
 						type: 'module',
-						export: exportDefaultPackages.includes( packageName )
-							? 'default'
-							: undefined,
+						// export: exportDefaultPackages.includes( packageName )
+						// 	? 'default'
+						// 	: undefined,
 					},
 				};
 
 				return memo;
 			}, {} ),
 			output: {
 				devtoolNamespace: '@wordpress',
-				filename: `[name]${ suffix }.js`,
-				path: normalizeJoin( baseDir, `${ buildTarget }/js/dist-esm` ),
+				filename: `[name]-esm${ suffix }.js`,
+				path: normalizeJoin( baseDir, `${ buildTarget }/js/dist` ),
 				module: true,
 				chunkFormat: 'module',
 				environment: {

tools/webpack/shared.js

@@ -19,6 +19,7 @@ const getBaseConfig = ( env ) => {
 			minimizer: [
 				new TerserPlugin( {
 					extractComments: false,
+					exclude: /-esm-proxy(?:\.min)?\.js$/,
 				} ),
 			],
 		},

webpack.config.js

@@ -4,20 +4,22 @@ const mediaConfig = require( './tools/webpack/media' );
 const packagesConfig = require( './tools/webpack/packages' );
 const modulesConfig = require( './tools/webpack/modules' );
 
-module.exports = function( env = { environment: "production", watch: false, buildTarget: false } ) {
+module.exports = function (
+	env = { environment: 'production', watch: false, buildTarget: false }
+) {
 	if ( ! env.watch ) {
 		env.watch = false;
 	}
 
 	if ( ! env.buildTarget ) {
-		env.buildTarget = ( env.mode === 'production' ? 'build/' : 'src/' );
+		env.buildTarget = env.mode === 'production' ? 'build/' : 'src/';
 	}
 
 	const config = [
 		blocksConfig( env ),
 		...developmentConfig( env ),
 		mediaConfig( env ),
-		packagesConfig( env ),
+		...packagesConfig( env ),
 		modulesConfig( env ),
 	];