diff --git a/src/wp-includes/script-modules.php b/src/wp-includes/script-modules.php index 56140c6b48fba..a760e226367f2 100644 --- a/src/wp-includes/script-modules.php +++ b/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' ); diff --git a/tools/webpack/packages-proxy-module-gen-plugin.js b/tools/webpack/packages-proxy-module-gen-plugin.js index 901d82d5da292..050aa02aeec05 100644 --- a/tools/webpack/packages-proxy-module-gen-plugin.js +++ b/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 ), diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index d23b8c553c3d5..e9aeccd10e2e9 100644 --- a/tools/webpack/packages.js +++ b/tools/webpack/packages.js @@ -228,9 +228,9 @@ module.exports = function ( ), library: { type: 'module', - export: exportDefaultPackages.includes( packageName ) - ? 'default' - : undefined, + // export: exportDefaultPackages.includes( packageName ) + // ? 'default' + // : undefined, }, }; @@ -238,8 +238,8 @@ module.exports = function ( }, {} ), 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: { diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js index 6c1397db40f09..a246253659027 100644 --- a/tools/webpack/shared.js +++ b/tools/webpack/shared.js @@ -19,6 +19,7 @@ const getBaseConfig = ( env ) => { minimizer: [ new TerserPlugin( { extractComments: false, + exclude: /-esm-proxy(?:\.min)?\.js$/, } ), ], }, diff --git a/webpack.config.js b/webpack.config.js index 963117a7a52de..cb13e2fc820e3 100644 --- a/webpack.config.js +++ b/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 ), ];