Changeset 54289

Timestamp:

09/23/2022 08:25:45 AM (4 years ago)

Author:

gziolo

Message:

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.

Location:

trunk

Files:

• .github/workflows/test-npm.yml (modified) (1 diff)
• .gitignore (modified) (1 diff)
• Gruntfile.js (modified) (1 diff)
• src/wp-includes/assets (modified) (1 prop)
• src/wp-includes/assets/script-loader-packages.min.php (added)
• src/wp-includes/assets/script-loader-packages.php (deleted)
• src/wp-includes/assets/script-loader-react-refresh-entry.php (deleted)
• src/wp-includes/assets/script-loader-react-refresh-runtime.php (deleted)
• src/wp-includes/script-loader.php (modified) (3 diffs)
• tests/phpunit/tests/dependencies/scripts.php (modified) (1 diff)
• tools/webpack/development.js (modified) (2 diffs)
• tools/webpack/packages.js (modified) (1 diff)

trunk/.github/workflows/test-npm.yml

@@ -56 +56 @@
     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

trunk/.gitignore

@@ -28 +28 @@
 /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

trunk/Gruntfile.js

@@ -126 +126 @@
                                 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: {

trunk/src/wp-includes/script-loader.php

@@ -228 +228 @@
                 ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG
                 || empty( $scripts->registered['react'] )
+                || defined( 'WP_RUN_CORE_TESTS' )
         ) {
                 return;
@@ -265 +266 @@
  */
 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:
@@ -274 +274 @@
          *     'api-fetch.js' => array(...
          */
-        $assets = include ABSPATH . WPINC . '/assets/script-loader-packages.php';
-
-        foreach ( $assets as $package_name => $package_data ) {
-                $basename = basename( $package_name, '.js' );
+        $assets = include ABSPATH . WPINC . "/assets/script-loader-packages{$suffix}.php";
+
+        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";

trunk/tests/phpunit/tests/dependencies/scripts.php

@@ -737 +737 @@
                 $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";

trunk/tools/webpack/development.js

@@ -36 +36 @@
                         },
                         plugins: [ new DependencyExtractionWebpackPlugin( {
-                                outputFilename: '../../../assets/script-loader-[name].php',
+                                outputFilename: `../../../assets/script-loader-[name]${ suffix }.php`,
                         } ) ],
                 },
@@ -54 +54 @@
                                 new DependencyExtractionWebpackPlugin( {
                                         useDefaults: false,
-                                        outputFilename: '../../../assets/script-loader-[name].php'
+                                        outputFilename: `../../../assets/script-loader-[name]${ suffix }.php`
                                 } ),
                         ],

trunk/tools/webpack/packages.js

@@ -159 +159 @@
                                 injectPolyfill: true,
                                 combineAssets: true,
-                                combinedOutputFile: '../../assets/script-loader-packages.php',
+                                combinedOutputFile: `../../assets/script-loader-packages${ suffix }.php`,
                         } ),
                         new CopyWebpackPlugin( {