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` ), }, };