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

package.json

@@ -28,6 +28,7 @@
 	],
 	"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",
 		"@wordpress/prettier-config": "4.33.1",
@@ -61,6 +62,7 @@
 		"postcss": "8.5.6",
 		"prettier": "npm:wp-prettier@3.0.3",
 		"qunit": "~2.24.2",
+		"react-refresh": "0.14.0",
 		"sass": "1.94.0",
 		"sinon": "16.1.3",
 		"sinon-test": "~3.1.6",

src/wp-includes/deprecated.php

@@ -6479,17 +6479,3 @@ function wp_print_auto_sizes_contain_css_fix() {
 	<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
 	<?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' );
-}

src/wp-includes/script-loader.php

@@ -165,6 +165,50 @@ function wp_default_packages_vendor( $scripts ) {
 	);
 }
 
+/**
+ * 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';
+}
+
 /**
  * Returns contents of an inline script used in appending polyfill scripts for
  * browsers which fail the provided tests. The provided array is a mapping from
@@ -618,6 +662,7 @@ function wp_tinymce_inline_scripts() {
  */
 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 );
 

tools/webpack/development.js

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+const TerserPlugin = require( 'terser-webpack-plugin' );
+
+/**
+ * Internal dependencies
+ */
+const { baseDir } = require( './shared' );
+
+/**
+ * Webpack configuration for development scripts (React Refresh).
+ *
+ * These scripts enable hot module replacement for block development
+ * when using `@wordpress/scripts` with the `--hot` flag.
+ *
+ * @param {Object} env             Environment options.
+ * @param {string} env.buildTarget Build target directory.
+ * @param {boolean} env.watch      Whether to watch for changes.
+ * @return {Object} Webpack configuration object.
+ */
+module.exports = function( env = { buildTarget: 'src/', watch: false } ) {
+	const buildTarget = env.buildTarget || 'src/';
+
+	const entry = {
+		// React Refresh runtime - exposes ReactRefreshRuntime global.
+		[ buildTarget + 'wp-includes/js/dist/development/react-refresh-runtime.js' ]: {
+			import: 'react-refresh/runtime',
+			library: {
+				name: 'ReactRefreshRuntime',
+				type: 'window',
+			},
+		},
+		[ buildTarget + 'wp-includes/js/dist/development/react-refresh-runtime.min.js' ]: {
+			import: 'react-refresh/runtime',
+			library: {
+				name: 'ReactRefreshRuntime',
+				type: 'window',
+			},
+		},
+		// React Refresh entry - injects runtime into global hook before React loads.
+		[ buildTarget + 'wp-includes/js/dist/development/react-refresh-entry.js' ]:
+			'@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
+		[ buildTarget + 'wp-includes/js/dist/development/react-refresh-entry.min.js' ]:
+			'@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
+	};
+
+	return {
+		target: 'browserslist',
+		// Must use development mode to preserve process.env.NODE_ENV checks
+		// in the source files. These scripts are only used during development.
+		mode: 'development',
+		devtool: false,
+		cache: true,
+		entry,
+		output: {
+			path: baseDir,
+			filename: '[name]',
+		},
+		optimization: {
+			minimize: true,
+			moduleIds: 'deterministic',
+			minimizer: [
+				new TerserPlugin( {
+					include: /\.min\.js$/,
+					extractComments: false,
+				} ),
+			],
+		},
+		watch: env.watch,
+	};
+};

webpack.config.js

@@ -1,4 +1,5 @@
 const mediaConfig = require( './tools/webpack/media' );
+const developmentConfig = require( './tools/webpack/development' );
 
 module.exports = function (
 	env = { environment: 'production', watch: false, buildTarget: false }
@@ -11,10 +12,13 @@ module.exports = function (
 		env.buildTarget = env.mode === 'production' ? 'build/' : 'src/';
 	}
 
-	// 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;
 };