Build: Prepare for more Script Modules

.gitignore

@@ -31,6 +31,7 @@ wp-tests-config.php
 /src/wp-admin/js
 /src/wp-includes/assets/*
 !/src/wp-includes/assets/script-loader-packages.min.php
+!/src/wp-includes/assets/script-modules-packages.min.php
 /src/wp-includes/js
 /src/wp-includes/css/dist
 /src/wp-includes/css/*.min.css

Gruntfile.js

@@ -56,6 +56,7 @@ module.exports = function(grunt) {
 			'wp-includes/css/dist',
 			'wp-includes/blocks/**/*.css',
 			'!wp-includes/assets/script-loader-packages.min.php',
+			'!wp-includes/assets/script-modules-packages.min.php',
 		],
 
 		// Prepend `dir` to `file`, and keep `!` in place.

src/wp-includes/assets/script-modules-packages.min.php

@@ -0,0 +1 @@
+<?php return array('interactivity/index.min.js' => array('dependencies' => array(), 'version' => '2d6d1fdbcb3fda39c768', 'type' => 'module'), 'interactivity/debug.min.js' => array('dependencies' => array(), 'version' => '1ccc67b05c275e51a8f8', 'type' => 'module'), 'interactivity-router/index.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => '64645ef3cd2d32860d7d', 'type' => 'module'), 'block-library/file/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => 'fdc2f6842e015af83140', 'type' => 'module'), 'block-library/image/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => 'acfec7b3c0be4a859b31', 'type' => 'module'), 'block-library/navigation/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => '8ff192874fc8910a284c', 'type' => 'module'), 'block-library/query/view.min.js' => array('dependencies' => array('@wordpress/interactivity', array('id' => '@wordpress/interactivity-router', 'import' => 'dynamic')), 'version' => 'f4c91c89fa5271f3dad9', 'type' => 'module'), 'block-library/search/view.min.js' => array('dependencies' => array('@wordpress/interactivity'), 'version' => '2a73400a693958f604de', 'type' => 'module'));

src/wp-includes/default-filters.php

@@ -570,6 +570,7 @@
 // Script Loader.
 add_action( 'wp_default_scripts', 'wp_default_scripts' );
 add_action( 'wp_default_scripts', 'wp_default_packages' );
+add_action( 'wp_default_scripts', 'wp_default_script_modules' );
 
 add_action( 'wp_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
 add_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );

src/wp-includes/interactivity-api/class-wp-interactivity-api.php

@@ -281,33 +281,20 @@ public function get_context( ?string $store_namespace = null ): array {
 	/**
 	 * Registers the `@wordpress/interactivity` script modules.
 	 *
+	 * @deprecated 6.7.0 Script Modules registration is handled by {@see wp_default_script_modules()}.
+	 *
 	 * @since 6.5.0
 	 */
 	public function register_script_modules() {
-		$suffix = wp_scripts_get_suffix();
-
-		wp_register_script_module(
-			'@wordpress/interactivity',
-			includes_url( "js/dist/interactivity$suffix.js" )
-		);
-
-		wp_register_script_module(
-			'@wordpress/interactivity-router',
-			includes_url( "js/dist/interactivity-router$suffix.js" ),
-			array( '@wordpress/interactivity' )
-		);
+		_deprecated_function( __METHOD__, '6.7.0', 'wp_default_script_modules' );
 	}
 
 	/**
 	 * Adds the necessary hooks for the Interactivity API.
 	 *
 	 * @since 6.5.0
-	 * @since 6.7.0 Use the {@see "script_module_data_{$module_id}"} filter to pass client-side data.
 	 */
 	public function add_hooks() {
-		add_action( 'wp_enqueue_scripts', array( $this, 'register_script_modules' ) );
-		add_action( 'admin_enqueue_scripts', array( $this, 'register_script_modules' ) );
-
 		add_filter( 'script_module_data_@wordpress/interactivity', array( $this, 'filter_script_module_interactivity_data' ) );
 	}
 

src/wp-includes/script-modules.php

@@ -123,3 +123,53 @@ function wp_dequeue_script_module( string $id ) {
 function wp_deregister_script_module( string $id ) {
 	wp_script_modules()->deregister( $id );
 }
+
+/**
+ * Registers all the default WordPress Script Modules.
+ *
+ * @since 6.7.0
+ */
+function wp_default_script_modules() {
+	$suffix = defined( 'WP_RUN_CORE_TESTS' ) ? '.min' : wp_scripts_get_suffix();
+
+	/*
+	 * Expects multidimensional array like:
+	 *
+	 *     'interactivity/index.min.js' => array('dependencies' => array(…), 'version' => '…'),
+	 *     'interactivity/debug.min.js' => array('dependencies' => array(…), 'version' => '…'),
+	 *     'interactivity-router/index.min.js' => …
+	 */
+	$assets = include ABSPATH . WPINC . "/assets/script-modules-packages{$suffix}.php";
+
+	foreach ( $assets as $file_name => $script_module_data ) {
+		/*
+		 * Build the WordPress Script Module ID from the file name.
+		 * Prepend `@wordpress/` and remove extensions and `/index` if present:
+		 *   - interactivity/index.min.js  => @wordpress/interactivity
+		 *   - interactivity/debug.min.js  => @wordpress/interactivity/debug
+		 *   - block-library/query/view.js => @wordpress/block-library/query/view
+		 */
+		$script_module_id = '@wordpress/' . preg_replace( '~(?:/index)?(?:\.min)?\.js$~D', '', $file_name, 1 );
+
+		switch ( $script_module_id ) {
+			/*
+			 * Interactivity exposes two entrypoints, "/index" and "/debug".
+			 * "/debug" should replalce "/index" in devlopment.
+			 */
+			case '@wordpress/interactivity/debug':
+				if ( ! SCRIPT_DEBUG ) {
+					continue 2;
+				}
+				$script_module_id = '@wordpress/interactivity';
+				break;
+			case '@wordpress/interactivity':
+				if ( SCRIPT_DEBUG ) {
+					continue 2;
+				}
+				break;
+		}
+
+		$path = "/wp-includes/js/dist/script-modules/{$file_name}";
+		wp_register_script_module( $script_module_id, $path, $script_module_data['dependencies'], $script_module_data['version'] );
+	}
+}

tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php

@@ -211,6 +211,17 @@ public function test_config_not_printed_when_empty() {
 		$this->expectOutputString( '' );
 	}
 
+	/**
+	 * Test that the deprecated register_script_modules method is deprecated but does not throw.
+	 *
+	 * @ticket 60647
+	 *
+	 * @expectedDeprecated WP_Interactivity_API::register_script_modules
+	 */
+	public function test_register_script_modules_deprecated() {
+		$this->interactivity->register_script_modules();
+	}
+
 	/**
 	 * Sets up an activity, runs an optional callback, and returns a MockAction for inspection.
 	 *
@@ -221,7 +232,6 @@ public function test_config_not_printed_when_empty() {
 	 */
 	private function get_script_data_filter_result( ?Closure $callback = null ): MockAction {
 		$this->interactivity->add_hooks();
-		$this->interactivity->register_script_modules();
 		wp_enqueue_script_module( '@wordpress/interactivity' );
 		$filter = new MockAction();
 		add_filter( 'script_module_data_@wordpress/interactivity', array( $filter, 'filter' ) );

tools/webpack/script-modules.js

@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+const { createRequire } = require( 'node:module' );
+const { dirname } = require( 'node:path' );
+
+/**
+ * WordPress dependencies
+ */
+const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+
+/**
+ * Internal dependencies
+ */
+const {
+	baseDir,
+	getBaseConfig,
+	normalizeJoin,
+	MODULES,
+	SCRIPT_AND_MODULE_DUAL_PACKAGES,
+	WORDPRESS_NAMESPACE,
+} = require( './shared' );
+
+/** @type {Map<string, string>} */
+const scriptModules = new Map();
+for ( const packageName of MODULES.concat( SCRIPT_AND_MODULE_DUAL_PACKAGES ) ) {
+	const packageRequire = createRequire(
+		`${ dirname( require.resolve( `${ packageName }/package.json` ) ) }/`
+	);
+
+	const depPackageJson = packageRequire( './package.json' );
+	if ( ! Object.hasOwn( depPackageJson, 'wpScriptModuleExports' ) ) {
+		continue;
+	}
+
+	const moduleName = packageName.substring( WORDPRESS_NAMESPACE.length );
+	let { wpScriptModuleExports } = depPackageJson;
+
+	// Special handling for { "wpScriptModuleExports": "./build-module/index.js" }.
+	if ( typeof wpScriptModuleExports === 'string' ) {
+		wpScriptModuleExports = { '.': wpScriptModuleExports };
+	}
+
+	if ( Object.getPrototypeOf( wpScriptModuleExports ) !== Object.prototype ) {
+		throw new Error( 'wpScriptModuleExports must be an object' );
+	}
+
+	for ( const [ exportName, exportPath ] of Object.entries(
+		wpScriptModuleExports
+	) ) {
+		if ( typeof exportPath !== 'string' ) {
+			throw new Error( 'wpScriptModuleExports paths must be strings' );
+		}
+
+		if ( ! exportPath.startsWith( './' ) ) {
+			throw new Error(
+				'wpScriptModuleExports paths must start with "./"'
+			);
+		}
+
+		const name =
+			exportName === '.' ? 'index' : exportName.replace( /^\.\/?/, '' );
+
+		scriptModules.set(
+			`${ moduleName }/${ name }`,
+			packageRequire.resolve( exportPath )
+		);
+	}
+}
+
+module.exports = function (
+	env = { environment: 'production', watch: false, buildTarget: false }
+) {
+	const mode = env.environment;
+	const suffix = mode === 'production' ? '.min' : '';
+	let buildTarget = env.buildTarget
+		? env.buildTarget
+		: mode === 'production'
+		? 'build'
+		: 'src';
+	buildTarget = buildTarget + '/wp-includes';
+
+	const baseConfig = getBaseConfig( env );
+	const config = {
+		...baseConfig,
+		entry: Object.fromEntries( scriptModules.entries() ),
+		experiments: {
+			outputModule: true,
+		},
+		output: {
+			devtoolNamespace: 'wp',
+			filename: `[name]${ suffix }.js`,
+			path: normalizeJoin(
+				baseDir,
+				`${ buildTarget }/js/dist/script-modules`
+			),
+			library: {
+				type: 'module',
+			},
+			environment: { module: true },
+			module: true,
+			chunkFormat: 'module',
+			asyncChunks: false,
+		},
+		plugins: [
+			...baseConfig.plugins,
+			new DependencyExtractionPlugin( {
+				injectPolyfill: false,
+				combineAssets: true,
+				combinedOutputFile: normalizeJoin(
+					baseDir,
+					`${ buildTarget }/assets/script-modules-packages${ suffix }.php`
+				),
+			} ),
+		],
+	};
+
+	return config;
+};

tools/webpack/shared.js

@@ -102,6 +102,9 @@ const MODULES = [
 	'@wordpress/interactivity',
 	'@wordpress/interactivity-router',
 ];
+const SCRIPT_AND_MODULE_DUAL_PACKAGES = [
+	'@wordpress/block-library',
+];
 const WORDPRESS_NAMESPACE = '@wordpress/';
 
 module.exports = {
@@ -111,5 +114,6 @@ module.exports = {
 	stylesTransform,
 	BUNDLED_PACKAGES,
 	MODULES,
+	SCRIPT_AND_MODULE_DUAL_PACKAGES,
 	WORDPRESS_NAMESPACE,
 };

webpack.config.js

@@ -2,7 +2,7 @@ const blocksConfig = require( './tools/webpack/blocks' );
 const developmentConfig = require( './tools/webpack/development' );
 const mediaConfig = require( './tools/webpack/media' );
 const packagesConfig = require( './tools/webpack/packages' );
-const modulesConfig = require( './tools/webpack/modules' );
+const scriptModulesConfig = require( './tools/webpack/script-modules' );
 const vendorsConfig = require( './tools/webpack/vendors' );
 
 module.exports = function( env = { environment: "production", watch: false, buildTarget: false } ) {
@@ -19,7 +19,7 @@ module.exports = function( env = { environment: "production", watch: false, buil
 		...developmentConfig( env ),
 		mediaConfig( env ),
 		packagesConfig( env ),
-		modulesConfig( env ),
+		scriptModulesConfig( env ),
 		...vendorsConfig( env ),
 	];