Scripts: Make React Fast Refresh Work with multiple blocks

WordPress · Dec 2, 2024 · 4010850 · 4010850
1 parent 358fb8e
commit 4010850
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/packages/dependency-extraction-webpack-plugin/lib/index.js b/packages/dependency-extraction-webpack-plugin/lib/index.js
@@ -337,7 +337,7 @@ class DependencyExtractionWebpackPlugin {
 			// `RealContentHashPlugin` after minification, but it only modifies
 			// already-produced asset filenames and the updated hash is not
 			// available to plugins.
-			const { hashFunction, hashDigest, hashDigestLength } =
+			const { hashFunction, hashDigest, hashDigestLength, uniqueName } =
 				compilation.outputOptions;
 
 			const hashBuilder = createHash( hashFunction );
@@ -387,6 +387,15 @@ class DependencyExtractionWebpackPlugin {
 				assetData.type = 'module';
 			}
 
+			if ( compilation.options?.optimization?.runtimeChunk !== false ) {
+				assetData.handle =
+					uniqueName +
+					'-' +
+					chunkJSFile
+						.replace( /\\/g, '/' )
+						.replace( jsExtensionRegExp, '' );
+			}
+
 			if ( combineAssets ) {
 				combinedAssetsData[ chunkJSFile ] = assetData;
 				continue;

diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
@@ -7,7 +7,7 @@ const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 const webpack = require( 'webpack' );
 const browserslist = require( 'browserslist' );
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
-const { basename, dirname, resolve } = require( 'path' );
+const { basename, dirname, relative, resolve, sep } = require( 'path' );
 const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
 const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
@@ -115,6 +115,7 @@ const baseConfig = {
 	optimization: {
 		// Only concatenate modules in production, when not analyzing bundles.
 		concatenateModules: isProduction && ! process.env.WP_BUNDLE_ANALYZER,
+		runtimeChunk: hasReactFastRefresh && 'single',
 		splitChunks: {
 			cacheGroups: {
 				style: {
@@ -340,6 +341,31 @@ const scriptConfig = {
 								}
 							} );
 
+							if ( hasReactFastRefresh ) {
+								const runtimePath = relative(
+									dirname( absoluteFrom ),
+									fromProjectRoot(
+										getWordPressSrcDirectory() +
+											sep +
+											'runtime.js'
+									)
+								);
+								const fields =
+									getBlockJsonScriptFields( blockJson );
+								for ( const [ fieldName ] of Object.entries(
+									fields
+								) ) {
+									blockJson[ fieldName ] = [
+										`file:${ runtimePath }`,
+										...( Array.isArray(
+											blockJson[ fieldName ]
+										)
+											? blockJson[ fieldName ]
+											: [ blockJson[ fieldName ] ] ),
+									];
+								}
+							}
+
 							return JSON.stringify( blockJson, null, 2 );
 						}