From 9e04602610a08cf1fa10c23431bc77a5fc72f2bb Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 5 Apr 2022 14:49:31 +0200 Subject: [PATCH 1/5] Build: Enable React Fast Refresh for block development --- package.json | 2 ++ tools/webpack/development.js | 58 ++++++++++++++++++++++++++++++++++++ webpack.config.js | 2 ++ 3 files changed, 62 insertions(+) create mode 100644 tools/webpack/development.js diff --git a/package.json b/package.json index 7d2d76c1daed4..2e2ec63a9e7ad 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "last 2 Opera versions" ], "devDependencies": { + "@pmmmwh/react-refresh-webpack-plugin": "0.5.5", "@wordpress/babel-preset-default": "6.8.0", "@wordpress/dependency-extraction-webpack-plugin": "3.4.1", "@wordpress/e2e-test-utils": "5.4.10", @@ -62,6 +63,7 @@ "matchdep": "~2.0.0", "prettier": "npm:wp-prettier@2.0.5", "qunit": "~2.18.1", + "react-refresh": "0.10.0", "sass": "^1.50.0", "sinon": "~13.0.1", "sinon-test": "~3.1.3", diff --git a/tools/webpack/development.js b/tools/webpack/development.js new file mode 100644 index 0000000000000..027b2f2882dcd --- /dev/null +++ b/tools/webpack/development.js @@ -0,0 +1,58 @@ +/** + * External dependencies + */ +const { join } = require( 'path' ); + +/** + * WordPress dependencies + */ +const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); + +const baseDir = join( __dirname, '../../' ); + +module.exports = function( env = { environment: 'production', buildTarget: false } ) { + const mode = env.environment; + const suffix = mode === 'production' ? '.min' : ''; + let buildTarget = env.buildTarget ? env.buildTarget : ( mode === 'production' ? 'build' : 'src' ); + buildTarget = buildTarget + '/wp-includes'; + + const sharedConfig = { + mode: 'development', + target: 'browserslist', + output: { + filename: `[name]/index${ suffix }.js`, + path: join( baseDir, `${ buildTarget }/js/dist` ), + }, + }; + + // See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react. + return [ + { + ...sharedConfig, + name: 'react-refresh-entry', + entry: { + 'react-refresh-entry': + '@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js', + }, + plugins: [ new DependencyExtractionWebpackPlugin() ], + }, + { + ...sharedConfig, + name: 'react-refresh-runtime', + entry: { + 'react-refresh-runtime': { + import: 'react-refresh/runtime.js', + library: { + name: 'ReactRefreshRuntime', + type: 'window', + }, + }, + }, + plugins: [ + new DependencyExtractionWebpackPlugin( { + useDefaults: false, + } ), + ], + }, + ]; +}; diff --git a/webpack.config.js b/webpack.config.js index 5b7b7b632de02..5e7c88a2cfc60 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,5 @@ const blocksConfig = require( './tools/webpack/blocks' ); +const developmentConfig = require( './tools/webpack/development' ); const mediaConfig = require( './tools/webpack/media' ); const packagesConfig = require( './tools/webpack/packages' ); @@ -13,6 +14,7 @@ module.exports = function( env = { environment: "production", watch: false, buil const config = [ blocksConfig( env ), + ...developmentConfig( env ), mediaConfig( env ), packagesConfig( env ), ]; From 4f67b8e473eb99269db60ed002b32a868a8ddaac Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Tue, 5 Apr 2022 15:30:49 +0200 Subject: [PATCH 2/5] 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 12a842a0262f7..eeffee1d257aa 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` ), }, }; From b1f706591c976358b5c3b1f1ef6dc5ddfb506c9e Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 11 Apr 2022 15:39:06 +0200 Subject: [PATCH 3/5] Improve webpack configuration for the development scripts --- .../assets/development/react-refresh-entry.php | 1 + .../assets/development/react-refresh-runtime.php | 1 + src/wp-includes/script-loader.php | 12 +++++++++--- tools/webpack/development.js | 5 ++++- 4 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 src/wp-includes/assets/development/react-refresh-entry.php create mode 100644 src/wp-includes/assets/development/react-refresh-runtime.php diff --git a/src/wp-includes/assets/development/react-refresh-entry.php b/src/wp-includes/assets/development/react-refresh-entry.php new file mode 100644 index 0000000000000..f595680f32219 --- /dev/null +++ b/src/wp-includes/assets/development/react-refresh-entry.php @@ -0,0 +1 @@ + array('wp-react-refresh-runtime'), 'version' => '8151afc94a5ebc73b7a8229f0d7ee352'); \ No newline at end of file diff --git a/src/wp-includes/assets/development/react-refresh-runtime.php b/src/wp-includes/assets/development/react-refresh-runtime.php new file mode 100644 index 0000000000000..80fcd1cd2f87a --- /dev/null +++ b/src/wp-includes/assets/development/react-refresh-runtime.php @@ -0,0 +1 @@ + array(), 'version' => '4fb86f241c3b2d9d9e0411b507079823'); \ No newline at end of file diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index eeffee1d257aa..94d456ab644ce 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -224,7 +224,10 @@ function wp_get_script_polyfill( $scripts, $tests ) { * @param WP_Scripts $scripts WP_Scripts object. */ function wp_register_development_scripts( $scripts ) { - if ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) { + if ( + ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG + || empty( $scripts->registered['react'] ) + ) { return; } @@ -234,7 +237,10 @@ function wp_register_development_scripts( $scripts ) { ); foreach ( $development_scripts as $script_name ) { - $assets = include ABSPATH . WPINC . "/js/dist/development/$script_name.php"; + $assets = include ABSPATH . WPINC . "/assets/development/$script_name.php"; + if ( ! is_array( $assets ) ) { + return; + } $scripts->add( 'wp-' . $script_name, "/wp-includes/js/dist/development/$script_name.js", @@ -244,7 +250,7 @@ function wp_register_development_scripts( $scripts ) { } // See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react. - $scripts->query( 'react' )->deps[] = 'wp-react-refresh-entry'; + $scripts->registered['react']->deps[] = 'wp-react-refresh-entry'; } /** diff --git a/tools/webpack/development.js b/tools/webpack/development.js index c0fbd722bbaf0..82e5320eb7106 100644 --- a/tools/webpack/development.js +++ b/tools/webpack/development.js @@ -34,7 +34,9 @@ module.exports = function( env = { environment: 'production', buildTarget: false 'react-refresh-entry': '@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js', }, - plugins: [ new DependencyExtractionWebpackPlugin() ], + plugins: [ new DependencyExtractionWebpackPlugin( { + outputFilename: '../../../assets/development/[name].php', + } ) ], }, { ...sharedConfig, @@ -51,6 +53,7 @@ module.exports = function( env = { environment: 'production', buildTarget: false plugins: [ new DependencyExtractionWebpackPlugin( { useDefaults: false, + outputFilename: '../../../assets/development/[name].php' } ), ], }, From b333acb829877b1333b72e9c6e183f7760312a43 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 11 Apr 2022 15:42:59 +0200 Subject: [PATCH 4/5] Address feedback from review --- src/wp-includes/script-loader.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 94d456ab644ce..dc834b2148134 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -237,13 +237,13 @@ function wp_register_development_scripts( $scripts ) { ); foreach ( $development_scripts as $script_name ) { - $assets = include ABSPATH . WPINC . "/assets/development/$script_name.php"; + $assets = include ABSPATH . WPINC . '/assets/development/' . $script_name . '.php'; if ( ! is_array( $assets ) ) { return; } $scripts->add( 'wp-' . $script_name, - "/wp-includes/js/dist/development/$script_name.js", + '/wp-includes/js/dist/development/' . $script_name . '.js', $assets['dependencies'], $assets['version'] ); From 7e75918b54c7e725e1f205cfd4e3a2f6188b450e Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 11 Apr 2022 16:05:40 +0200 Subject: [PATCH 5/5] Rename script loader files --- Gruntfile.js | 2 +- ...efresh-entry.php => script-loader-react-refresh-entry.php} | 0 ...sh-runtime.php => script-loader-react-refresh-runtime.php} | 0 src/wp-includes/script-loader.php | 2 +- tools/webpack/development.js | 4 ++-- 5 files changed, 4 insertions(+), 4 deletions(-) rename src/wp-includes/assets/{development/react-refresh-entry.php => script-loader-react-refresh-entry.php} (100%) rename src/wp-includes/assets/{development/react-refresh-runtime.php => script-loader-react-refresh-runtime.php} (100%) diff --git a/Gruntfile.js b/Gruntfile.js index f2b93adc4c26e..2919420701d34 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -124,7 +124,7 @@ module.exports = function(grunt) { 'webpack-assets': [ WORKING_DIR + 'wp-includes/assets/*', WORKING_DIR + 'wp-includes/css/dist/', - '!' + WORKING_DIR + 'wp-includes/assets/script-loader-packages.php' + '!' + WORKING_DIR + 'wp-includes/assets/script-loader-*.php' ], dynamic: { dot: true, diff --git a/src/wp-includes/assets/development/react-refresh-entry.php b/src/wp-includes/assets/script-loader-react-refresh-entry.php similarity index 100% rename from src/wp-includes/assets/development/react-refresh-entry.php rename to src/wp-includes/assets/script-loader-react-refresh-entry.php diff --git a/src/wp-includes/assets/development/react-refresh-runtime.php b/src/wp-includes/assets/script-loader-react-refresh-runtime.php similarity index 100% rename from src/wp-includes/assets/development/react-refresh-runtime.php rename to src/wp-includes/assets/script-loader-react-refresh-runtime.php diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index dc834b2148134..ad3ecee5d9d0e 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -237,7 +237,7 @@ function wp_register_development_scripts( $scripts ) { ); foreach ( $development_scripts as $script_name ) { - $assets = include ABSPATH . WPINC . '/assets/development/' . $script_name . '.php'; + $assets = include ABSPATH . WPINC . '/assets/script-loader-' . $script_name . '.php'; if ( ! is_array( $assets ) ) { return; } diff --git a/tools/webpack/development.js b/tools/webpack/development.js index 82e5320eb7106..1b871ee665e2a 100644 --- a/tools/webpack/development.js +++ b/tools/webpack/development.js @@ -35,7 +35,7 @@ module.exports = function( env = { environment: 'production', buildTarget: false '@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js', }, plugins: [ new DependencyExtractionWebpackPlugin( { - outputFilename: '../../../assets/development/[name].php', + outputFilename: '../../../assets/script-loader-[name].php', } ) ], }, { @@ -53,7 +53,7 @@ module.exports = function( env = { environment: 'production', buildTarget: false plugins: [ new DependencyExtractionWebpackPlugin( { useDefaults: false, - outputFilename: '../../../assets/development/[name].php' + outputFilename: '../../../assets/script-loader-[name].php' } ), ], },