From 960f6a6fb9af1e4e651495fffcd44bf0a351f3a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= <grzegorz@gziolo.pl>
Date: Fri, 2 Jun 2023 17:39:05 +0200
Subject: [PATCH] Scripts: Optimize updating render paths when developing
 blocks (#51162)

* Scripts: Optimize updating render paths when developing blocks

* Add CHANGELOG entry to `@wordpress/scripts`

* Update CHANGELOG.md
---
 packages/scripts/CHANGELOG.md             |  5 +++++
 packages/scripts/config/webpack.config.js | 27 +++++++++++++++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index dadafda617cd4..48b96674fd3ef 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -5,6 +5,11 @@
 ### Enhancements
 
 -   The bundled `terser-webpack-plugin` dependency has been updated from requiring `^5.1.4` to requiring `^5.3.9` ([#50994](https://github.com/WordPress/gutenberg/pull/50994)).
+-   Optimize updating render paths when developing blocks with the `start` command ([#51162](https://github.com/WordPress/gutenberg/pull/51162)).
+
+### Bug Fixes
+
+-   Ensure files listed in `render` field of `block.json` files are always copied to the build folder when using the `start` command ([#50939](https://github.com/WordPress/gutenberg/pull/50939)).
 
 ## 26.5.0 (2023-05-24)
 
diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
index bc3cb0d8d5cc2..c02fbfcbea2c9 100644
--- a/packages/scripts/config/webpack.config.js
+++ b/packages/scripts/config/webpack.config.js
@@ -38,8 +38,27 @@ if ( ! browserslist.findConfig( '.' ) ) {
 }
 const hasReactFastRefresh = hasArgInCLI( '--hot' ) && ! isProduction;
 
-// Get paths of the `render` props included in `block.json` files
-let renderPaths = getRenderPropPaths();
+/**
+ * The plugin recomputes the render paths once on each compilation. It is necessary to avoid repeating processing
+ * when filtering every discovered PHP file in the source folder. This is the most performant way to ensure that
+ * changes in `block.json` files are picked up in watch mode.
+ */
+class RenderPathsPlugin {
+	/**
+	 * Paths with the `render` props included in `block.json` files.
+	 *
+	 * @type {string[]}
+	 */
+	static renderPaths;
+
+	apply( compiler ) {
+		const pluginName = this.constructor.name;
+
+		compiler.hooks.thisCompilation.tap( pluginName, () => {
+			this.constructor.renderPaths = getRenderPropPaths();
+		} );
+	}
+}
 
 const cssLoaders = [
 	{
@@ -234,6 +253,7 @@ const config = {
 			// multiple configurations returned in the webpack config.
 			cleanStaleWebpackAssets: false,
 		} ),
+		new RenderPathsPlugin(),
 		new CopyWebpackPlugin( {
 			patterns: [
 				{
@@ -275,10 +295,9 @@ const config = {
 					context: getWordPressSrcDirectory(),
 					noErrorOnMissing: true,
 					filter: ( filepath ) => {
-						renderPaths = getRenderPropPaths();
 						return (
 							process.env.WP_COPY_PHP_FILES_TO_DIST ||
-							renderPaths.includes( filepath )
+							RenderPathsPlugin.renderPaths.includes( filepath )
 						);
 					},
 				},