Changeset 53140

Timestamp:

04/11/2022 04:08:12 PM (2 years ago)

Author:

gziolo

Message:

Build: Enable React Fast Refresh for block development

Brings the same functionality introduced in the Gutenberg plugin with ​https://github.com/WordPress/gutenberg/pull/28273. In effect, it brings React Fast Refresh support to WordPress core for block development with @wordpress/scripts.

Props walbo, antonvlasenko.
See #51750, #55505.
Follow-up [53135].

Location:

trunk

Files:

• Gruntfile.js (modified) (1 diff)
• package.json (modified) (2 diffs)
• src/wp-includes/assets/script-loader-react-refresh-entry.php (added)
• src/wp-includes/assets/script-loader-react-refresh-runtime.php (added)
• src/wp-includes/script-loader.php (modified) (2 diffs)
• tools/webpack/development.js (added)
• webpack.config.js (modified) (2 diffs)

trunk/Gruntfile.js

@@ -125 +125 @@
                 WORKING_DIR + 'wp-includes/assets/*',
                 WORKING_DIR + 'wp-includes/css/dist/',
-                '!' + WORKING_DIR + 'wp-includes/assets/script-loader-packages.php'
+                '!' + WORKING_DIR + 'wp-includes/assets/script-loader-*.php'
             ],
             dynamic: {

trunk/package.json

@@ -25 +25 @@
     ],
     "devDependencies": {
+        "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
         "@wordpress/babel-preset-default": "6.8.0",
         "@wordpress/dependency-extraction-webpack-plugin": "3.4.1",
@@ -63 +64 @@
         "prettier": "npm:wp-prettier@2.0.5",
         "qunit": "~2.18.1",
+        "react-refresh": "0.10.0",
         "sass": "^1.50.0",
         "sinon": "~13.0.1",

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

@@ -213 +213 @@
 
     return $polyfill;
+}
+
+/**
+ * Registers development scripts that integrate with `@wordpress/scripts`.
+ *
+ * @see https://github.com/WordPress/gutenberg/tree/trunk/packages/scripts#start
+ *
+ * @since 6.0.0
+ *
+ * @param WP_Scripts $scripts WP_Scripts object.
+ */
+function wp_register_development_scripts( $scripts ) {
+    if (
+        ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG
+        || empty( $scripts->registered['react'] )
+    ) {
+        return;
+    }
+
+    $development_scripts = array(
+        'react-refresh-entry',
+        'react-refresh-runtime',
+    );
+
+    foreach ( $development_scripts as $script_name ) {
+        $assets = include ABSPATH . WPINC . '/assets/script-loader-' . $script_name . '.php';
+        if ( ! is_array( $assets ) ) {
+            return;
+        }
+        $scripts->add(
+            'wp-' . $script_name,
+            '/wp-includes/js/dist/development/' . $script_name . '.js',
+            $assets['dependencies'],
+            $assets['version']
+        );
+    }
+
+    // See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react.
+    $scripts->registered['react']->deps[] = 'wp-react-refresh-entry';
 }
 
@@ -561 +600 @@
 function wp_default_packages( $scripts ) {
     wp_default_packages_vendor( $scripts );
+    wp_register_development_scripts( $scripts );
     wp_register_tinymce_scripts( $scripts );
     wp_default_packages_scripts( $scripts );

trunk/webpack.config.js

@@ -1 +1 @@
 const blocksConfig = require( './tools/webpack/blocks' );
+const developmentConfig = require( './tools/webpack/development' );
 const mediaConfig = require( './tools/webpack/media' );
 const packagesConfig = require( './tools/webpack/packages' );
@@ -14 +15 @@
     const config = [
         blocksConfig( env ),
+        ...developmentConfig( env ),
         mediaConfig( env ),
         packagesConfig( env ),