Changeset 61487

Timestamp:

01/15/2026 12:55:21 PM (5 weeks ago)

Author:

youknowriad

Message:

Build/Test Tools: Restore React Refresh scripts for hot reloading.

Restores the wp_register_development_scripts() function and associated
build infrastructure to enable hot module replacement (HMR) when using
@wordpress/scripts with the --hot flag.

The React Refresh scripts were removed in [61438] as part of the Gutenberg
build restructuring, but they are still needed for plugin developers using
wp-scripts start --hot for block development.

Props jsnajdr, wildworks, manzoorwanijk.
See #64393.

Location:

trunk

Files:

• package-lock.json (modified) (4 diffs)
• package.json (modified) (2 diffs)
• src/wp-includes/deprecated.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (2 diffs)
• webpack.config.js (modified) (2 diffs)

trunk/package-lock.json

@@ -39 +39 @@
                 "@lodder/grunt-postcss": "^3.1.1",
                 "@playwright/test": "1.56.1",
+                "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
                 "@wordpress/e2e-test-utils-playwright": "1.33.2",
                 "@wordpress/prettier-config": "4.33.1",
@@ -71 +72 @@
                 "prettier": "npm:[email protected]",
                 "qunit": "~2.24.2",
+                "react-refresh": "0.14.0",
                 "sass": "1.94.0",
                 "sinon": "16.1.3",
@@ -4009 +4011 @@
             }
         },
+        "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.6.1.tgz",
+            "integrity": "sha512-95DXXJxNkpYu+sqmpDp7vbw9JCyiNpHuCsvuMuOgVFrKQlwEIn9Y1+NNIQJq+zFL+eWyxw6htthB5CtdwJupNA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "anser": "^2.1.1",
+                "core-js-pure": "^3.23.3",
+                "error-stack-parser": "^2.0.6",
+                "html-entities": "^2.1.0",
+                "schema-utils": "^4.2.0",
+                "source-map": "^0.7.3"
+            },
+            "engines": {
+                "node": ">=18.12"
+            },
+            "peerDependencies": {
+                "@types/webpack": "5.x",
+                "react-refresh": ">=0.10.0 <1.0.0",
+                "sockjs-client": "^1.4.0",
+                "type-fest": ">=0.17.0 <5.0.0",
+                "webpack": "^5.0.0",
+                "webpack-dev-server": "^4.8.0 || 5.x",
+                "webpack-hot-middleware": "2.x",
+                "webpack-plugin-serve": "1.x"
+            },
+            "peerDependenciesMeta": {
+                "@types/webpack": {
+                    "optional": true
+                },
+                "sockjs-client": {
+                    "optional": true
+                },
+                "type-fest": {
+                    "optional": true
+                },
+                "webpack-dev-server": {
+                    "optional": true
+                },
+                "webpack-hot-middleware": {
+                    "optional": true
+                },
+                "webpack-plugin-serve": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/ajv": {
+            "version": "8.17.1",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+            "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3",
+                "fast-uri": "^3.0.1",
+                "json-schema-traverse": "^1.0.0",
+                "require-from-string": "^2.0.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/epoberezkin"
+            }
+        },
+        "node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/ajv-keywords": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+            "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3"
+            },
+            "peerDependencies": {
+                "ajv": "^8.8.2"
+            }
+        },
+        "node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/json-schema-traverse": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/schema-utils": {
+            "version": "4.3.3",
+            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
+            "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/json-schema": "^7.0.9",
+                "ajv": "^8.9.0",
+                "ajv-formats": "^2.1.1",
+                "ajv-keywords": "^5.1.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            }
+        },
+        "node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map": {
+            "version": "0.7.6",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+            "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">= 12"
+            }
+        },
         "node_modules/@polka/url": {
             "version": "1.0.0-next.24",
@@ -7450 +7567 @@
             }
         },
+        "node_modules/anser": {
+            "version": "2.3.5",
+            "resolved": "https://registry.npmjs.org/anser/-/anser-2.3.5.tgz",
+            "integrity": "sha512-vcZjxvvVoxTeR5XBNJB38oTu/7eDCZlwdz32N1eNgpyPF7j/Z7Idf+CUwQOkKKpJ7RJyjxgLHCM7vdIK0iCNMQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/ansi-colors": {
             "version": "4.1.3",

trunk/package.json

@@ -29 +29 @@
     "devDependencies": {
         "@lodder/grunt-postcss": "^3.1.1",
+        "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
         "@playwright/test": "1.56.1",
         "@wordpress/e2e-test-utils-playwright": "1.33.2",
@@ -62 +63 @@
         "prettier": "npm:[email protected]",
         "qunit": "~2.24.2",
+        "react-refresh": "0.14.0",
         "sass": "1.94.0",
         "sinon": "16.1.3",

trunk/src/wp-includes/deprecated.php

@@ -6480 +6480 @@
     <?php
 }
-
-/**
- * Registers development scripts that integrate with `@wordpress/scripts`.
- *
- * @see https://github.com/WordPress/gutenberg/tree/trunk/packages/scripts#start
- *
- * @since 6.0.0
- * @deprecated 7.0.0 Obsolete due to a change in how Gutenberg is included in Core. See #64393.
- *
- * @param WP_Scripts $scripts WP_Scripts object.
- */
-function wp_register_development_scripts( $scripts ) {
-    _deprecated_function( __FUNCTION__, '7.0.0' );
-}

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

@@ -164 +164 @@
         'after'
     );
+}
+
+/**
+ * Registers development scripts that integrate with `@wordpress/scripts`.
+ *
+ * These scripts enable hot module replacement (HMR) for block development
+ * when using `wp-scripts start --hot`.
+ *
+ * @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'] )
+        || defined( 'WP_RUN_CORE_TESTS' )
+    ) {
+        return;
+    }
+
+    // React Refresh runtime - exposes ReactRefreshRuntime global.
+    // No dependencies.
+    $scripts->add(
+        'wp-react-refresh-runtime',
+        '/wp-includes/js/dist/development/react-refresh-runtime.js',
+        array(),
+        '0.14.0'
+    );
+
+    // React Refresh entry - injects runtime into global hook.
+    // Must load before React to set up hooks.
+    $scripts->add(
+        'wp-react-refresh-entry',
+        '/wp-includes/js/dist/development/react-refresh-entry.js',
+        array( 'wp-react-refresh-runtime' ),
+        '0.14.0'
+    );
+
+    // Add entry as a dependency of React so it loads first.
+    // See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react.
+    $scripts->registered['react']->deps[] = 'wp-react-refresh-entry';
 }
 
@@ -619 +663 @@
 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 mediaConfig = require( './tools/webpack/media' );
+const developmentConfig = require( './tools/webpack/development' );
 
 module.exports = function (
@@ -12 +13 @@
     }
 
-    // Only building Core-specific media files.
+    // Only building Core-specific media files and development scripts.
     // Blocks, packages, script modules, and vendors are now sourced from
     // the Gutenberg build (see tools/gutenberg/copy-gutenberg-build.js).
-    const config = [ mediaConfig( env ) ];
+    const config = [
+        mediaConfig( env ),
+        developmentConfig( env ),
+    ];
 
     return config;