Changeset 61487

Timestamp:

01/15/2026 12:55:21 PM (9 months 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:wp-prettier@3.0.3",
                                 "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:wp-prettier@3.0.3",
                 "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;