From 9cc28c4381e0b02a5924b069c76e8e4364c2c4e3 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Tue, 5 Apr 2022 15:30:49 +0200
Subject: [PATCH] Integrate React Fast Refresh with React

---
 src/wp-includes/script-loader.php | 34 +++++++++++++++++++++++++++++++
 tools/webpack/development.js      |  4 ++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index aabd7fc5ed697..b47a8add4dd09 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -214,6 +214,39 @@ function wp_get_script_polyfill( $scripts, $tests ) {
 	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 ) {
+		return;
+	}
+
+	$development_scripts = array(
+		'react-refresh-entry',
+		'react-refresh-runtime',
+	);
+
+	foreach ( $development_scripts as $script_name ) {
+		$assets = include ABSPATH . WPINC . "/js/dist/development/$script_name.php";
+		$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->query( 'react' )->deps[] = 'wp-react-refresh-entry';
+}
+
 /**
  * Registers all the WordPress packages scripts that are in the standardized
  * `js/dist/` location.
@@ -560,6 +593,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 );
 
diff --git a/tools/webpack/development.js b/tools/webpack/development.js
index 027b2f2882dcd..c0fbd722bbaf0 100644
--- a/tools/webpack/development.js
+++ b/tools/webpack/development.js
@@ -20,8 +20,8 @@ module.exports = function( env = { environment: 'production', buildTarget: false
 		mode: 'development',
 		target: 'browserslist',
 		output: {
-			filename: `[name]/index${ suffix }.js`,
-			path: join( baseDir, `${ buildTarget }/js/dist` ),
+			filename: `[name]${ suffix }.js`,
+			path: join( baseDir, `${ buildTarget }/js/dist/development` ),
 		},
 	};