Build: Fix script_debug modules and scripts (WordPress#72485)

Author: youknowriad

bin/packages/build.mjs

@@ -57,18 +57,18 @@ function getAllPackages() {
 
 const PACKAGES = getAllPackages();
 
-// Define global variables for feature flagging, matching webpack's DefinePlugin behavior
-const define = {
+const baseDefine = {
 	'globalThis.IS_GUTENBERG_PLUGIN': JSON.stringify(
 		Boolean( process.env.npm_package_config_IS_GUTENBERG_PLUGIN )
 	),
 	'globalThis.IS_WORDPRESS_CORE': JSON.stringify(
 		Boolean( process.env.npm_package_config_IS_WORDPRESS_CORE )
 	),
-	'globalThis.SCRIPT_DEBUG': JSON.stringify(
-		process.env.NODE_ENV === 'development'
-	),
 };
+const getDefine = ( scriptDebug ) => ( {
+	...baseDefine,
+	'globalThis.SCRIPT_DEBUG': JSON.stringify( scriptDebug ),
+} );
 
 /**
  * Create emotion babel plugin for esbuild.
@@ -561,14 +561,14 @@ async function bundlePackage( packageName ) {
 				...baseConfig,
 				outfile: path.join( outputDir, 'index.min.js' ),
 				minify: true,
-				define,
+				define: getDefine( false ),
 				plugins: bundlePlugins,
 			} ),
 			esbuild.build( {
 				...baseConfig,
 				outfile: path.join( outputDir, 'index.js' ),
 				minify: false,
-				define,
+				define: getDefine( true ),
 				plugins: bundlePlugins,
 			} )
 		);
@@ -596,7 +596,6 @@ async function bundlePackage( packageName ) {
 					: exportName.replace( /^\.\//, '' );
 			const entryPoint = path.join( packageDir, exportPath );
 			const baseFileName = path.basename( fileName );
-
 			const modulePlugins = [
 				wordpressExternalsPlugin( `${ baseFileName }.min`, 'esm' ),
 			];
@@ -614,7 +613,22 @@ async function bundlePackage( packageName ) {
 					target,
 					platform: 'browser',
 					minify: true,
-					define,
+					define: getDefine( false ),
+					plugins: modulePlugins,
+				} ),
+				esbuild.build( {
+					entryPoints: [ entryPoint ],
+					outfile: path.join(
+						rootBuildModuleDir,
+						`${ fileName }.js`
+					),
+					bundle: true,
+					sourcemap: true,
+					format: 'esm',
+					target,
+					platform: 'browser',
+					minify: false,
+					define: getDefine( true ),
 					plugins: modulePlugins,
 				} )
 			);
@@ -1115,7 +1129,9 @@ async function buildAll() {
 			const isBundled = await bundlePackage( packageName );
 			const buildTime = Date.now() - startBundleTime;
 			if ( isBundled ) {
-				console.log( `   ✔ Bundled ${ packageName } (${ buildTime }ms)` );
+				console.log(
+					`   ✔ Bundled ${ packageName } (${ buildTime }ms)`
+				);
 			}
 		} )
 	);

lib/client-assets.php

@@ -628,18 +628,24 @@ function gutenberg_default_script_modules() {
 	/*
 	 * Load individual asset files for esbuild-built packages.
 	 * Follows the same pattern as regular scripts in gutenberg_register_packages_scripts().
-	 * Uses RecursiveDirectoryIterator to find all *.min.js files at any nesting depth.
+	 * Uses RecursiveDirectoryIterator to find all *.js files at any nesting depth.
+	 * Only processes files matching the SCRIPT_DEBUG setting (either .js or .min.js).
 	 */
+	$extension        = SCRIPT_DEBUG ? '.js' : '.min.js';
 	$all_assets       = array();
 	$build_module_dir = gutenberg_dir_path() . 'build/modules';
 	if ( is_dir( $build_module_dir ) ) {
 		$iterator = new RecursiveIteratorIterator(
 			new RecursiveDirectoryIterator( $build_module_dir, RecursiveDirectoryIterator::SKIP_DOTS )
 		);
 		foreach ( $iterator as $file ) {
-			if ( $file->isFile() && preg_match( '/\.min\.js$/', $file->getFilename() ) ) {
-				$path       = $file->getPathname();
-				$asset_file = substr( $path, 0, -3 ) . '.asset.php';
+			if ( $file->isFile() && preg_match( '/\.(min\.)?js$/', $file->getFilename() ) ) {
+				$path = $file->getPathname();
+				if ( ! str_ends_with( $path, $extension ) ) {
+					continue;
+				}
+
+				$asset_file = substr( $path, 0, -strlen( $extension ) ) . '.min.asset.php';
 				if ( ! file_exists( $asset_file ) ) {
 					continue;
 				}
@@ -656,28 +662,10 @@ function gutenberg_default_script_modules() {
 		/*
 		 * 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
+		 *   - interactivity/index.min.js or interactivity/index.js => @wordpress/interactivity
+		 *   - block-library/query/view.min.js or 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 replace "/index" in development.
-			 */
-			case '@wordpress/interactivity/debug':
-				if ( ! SCRIPT_DEBUG ) {
-					continue 2;
-				}
-				$script_module_id = '@wordpress/interactivity';
-				break;
-			case '@wordpress/interactivity':
-				if ( SCRIPT_DEBUG ) {
-					continue 2;
-				}
-				break;
-		}
+		$script_module_id = '@wordpress/' . preg_replace( '~(?:/index)?\.(min\.)?js$~D', '', $file_name, 1 );
 
 		/*
 		 * All script modules in Gutenberg are (currently) related to the Interactivity API which prioritizes server-side rendering.

packages/interactivity/package.json

@@ -22,21 +22,16 @@
 		"node": ">=18.12.0",
 		"npm": ">=8.19.2"
 	},
-	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
-			"import": "./build-module/index.js",
-			"require": "./build/index.js"
+			"import": "./build-module/index.js"
 		},
 		"./package.json": "./package.json"
 	},
 	"react-native": "src/index",
-	"wpScriptModuleExports": {
-		".": "./build-module/index.js",
-		"./debug": "./build-module/debug.js"
-	},
+	"wpScriptModuleExports": "./build-module/index.js",
 	"types": "build-types",
 	"dependencies": {
 		"@preact/signals": "^1.3.0",

packages/interactivity/src/debug.ts

@@ -1,3 +1,7 @@
+if ( globalThis.SCRIPT_DEBUG ) {
+	await import( 'preact/debug' );
+}
+
 /**
  * External dependencies
  */