Build: Improve how combined assets are generated

Allows to revert changes applied in [54277] - temporary workaround for the failing Test NPM CI check on Windows.

Improvements included:
- generate combined asset files for both production and development
- store in the repository only the production version of the combined assets for packages, we use everything else only in development
- to make unit tests work, ensure that they ignore react fast refresh and use the production version of combined assets that are present in the source code

Props bernhard-reiter, jsnajdr, clorith, wildworks.
Fixes #56615.



git-svn-id: https://develop.svn.wordpress.org/trunk@54289 602fd350-edb4-49c9-b593-d223f7449a82

.github/workflows/test-npm.yml

@@ -55,7 +55,6 @@ jobs:
     runs-on: ${{ matrix.os }}
     timeout-minutes: 20
     if: ${{ github.repository == 'WordPress/wordpress-develop' || github.event_name == 'pull_request' }}
-    continue-on-error: ${{ matrix.os == 'windows-latest' }}
     strategy:
       fail-fast: false
       matrix:

.gitignore

@@ -27,6 +27,8 @@ wp-tests-config.php
 /src/wp-admin/css/*-rtl.css
 /src/wp-admin/css/colors/*/*.css
 /src/wp-admin/js
+/src/wp-includes/assets/*
+!/src/wp-includes/assets/script-loader-packages.min.php
 /src/wp-includes/js
 /src/wp-includes/css/dist
 /src/wp-includes/css/*.min.css

Gruntfile.js

@@ -125,7 +125,7 @@ module.exports = function(grunt) {
 			'webpack-assets': [
 				WORKING_DIR + 'wp-includes/assets/*',
 				WORKING_DIR + 'wp-includes/css/dist/',
-				'!' + WORKING_DIR + 'wp-includes/assets/script-loader-*.php'
+				'!' + WORKING_DIR + 'wp-includes/assets/script-loader-packages.min.php'
 			],
 			dynamic: {
 				dot: true,

src/wp-includes/assets/script-loader-react-refresh-entry.php

@@ -1 +0,0 @@
-<?php return array('dependencies' => array('wp-react-refresh-runtime'), 'version' => '794dd7047e2302828128');

src/wp-includes/assets/script-loader-react-refresh-runtime.php

@@ -1 +0,0 @@
-<?php return array('dependencies' => array(), 'version' => 'd4cdced5a2afff4a8cc2');

src/wp-includes/script-loader.php

@@ -227,6 +227,7 @@ function wp_register_development_scripts( $scripts ) {
 	if (
 		! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG
 		|| empty( $scripts->registered['react'] )
+		|| defined( 'WP_RUN_CORE_TESTS' )
 	) {
 		return;
 	}
@@ -264,8 +265,7 @@ function wp_register_development_scripts( $scripts ) {
  * @param WP_Scripts $scripts WP_Scripts object.
  */
 function wp_default_packages_scripts( $scripts ) {
-	$suffix = wp_scripts_get_suffix();
-
+	$suffix = defined( 'WP_RUN_CORE_TESTS' ) ? '.min' : wp_scripts_get_suffix();
 	/*
 	 * Expects multidimensional array like:
 	 *
@@ -273,10 +273,10 @@ function wp_default_packages_scripts( $scripts ) {
 	 *     'annotations.js' => array('dependencies' => array(...), 'version' => '...'),
 	 *     'api-fetch.js' => array(...
 	 */
-	$assets = include ABSPATH . WPINC . '/assets/script-loader-packages.php';
+	$assets = include ABSPATH . WPINC . "/assets/script-loader-packages{$suffix}.php";
 
-	foreach ( $assets as $package_name => $package_data ) {
-		$basename = basename( $package_name, '.js' );
+	foreach ( $assets as $file_name => $package_data ) {
+		$basename = str_replace( $suffix . '.js', '', basename( $file_name ) );
 		$handle   = 'wp-' . $basename;
 		$path     = "/wp-includes/js/dist/{$basename}{$suffix}.js";
 

tests/phpunit/tests/dependencies/scripts.php

@@ -736,11 +736,11 @@ JS;
 		$expected  = "<script type='text/javascript' src='/wp-admin/load-scripts.php?c=0&amp;load%5Bchunk_0%5D=jquery-core,jquery-migrate,regenerator-runtime,wp-polyfill,wp-dom-ready,wp-hooks&amp;ver={$ver}'></script>\n";
 		$expected .= "<script type='text/javascript' id='test-example-js-before'>\nconsole.log(\"before\");\n</script>\n";
 		$expected .= "<script type='text/javascript' src='http://example.com' id='test-example-js'></script>\n";
-		$expected .= "<script type='text/javascript' src='/wp-includes/js/dist/i18n{$suffix}.js' id='wp-i18n-js'></script>\n";
+		$expected .= "<script type='text/javascript' src='/wp-includes/js/dist/i18n.min.js' id='wp-i18n-js'></script>\n";
 		$expected .= "<script type='text/javascript' id='wp-i18n-js-after'>\n";
 		$expected .= "wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );\n";
 		$expected .= "</script>\n";
-		$expected .= "<script type='text/javascript' src='/wp-includes/js/dist/a11y{$suffix}.js' id='wp-a11y-js'></script>\n";
+		$expected .= "<script type='text/javascript' src='/wp-includes/js/dist/a11y.min.js' id='wp-a11y-js'></script>\n";
 		$expected .= "<script type='text/javascript' src='http://example2.com' id='test-example2-js'></script>\n";
 		$expected .= "<script type='text/javascript' id='test-example2-js-after'>\nconsole.log(\"after\");\n</script>\n";
 

tools/webpack/development.js

@@ -35,7 +35,7 @@ module.exports = function( env = { environment: 'production', buildTarget: false
 				'@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
 			},
 			plugins: [ new DependencyExtractionWebpackPlugin( {
-				outputFilename: '../../../assets/script-loader-[name].php',
+				outputFilename: `../../../assets/script-loader-[name]${ suffix }.php`,
 			} ) ],
 		},
 		{
@@ -53,7 +53,7 @@ module.exports = function( env = { environment: 'production', buildTarget: false
 			plugins: [
 				new DependencyExtractionWebpackPlugin( {
 					useDefaults: false,
-					outputFilename: '../../../assets/script-loader-[name].php'
+					outputFilename: `../../../assets/script-loader-[name]${ suffix }.php`
 				} ),
 			],
 		},

tools/webpack/packages.js

@@ -158,7 +158,7 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 			new DependencyExtractionPlugin( {
 				injectPolyfill: true,
 				combineAssets: true,
-				combinedOutputFile: '../../assets/script-loader-packages.php',
+				combinedOutputFile: `../../assets/script-loader-packages${ suffix }.php`,
 			} ),
 			new CopyWebpackPlugin( {
 				patterns: [