From 5e683b7b4815749392852325d72d1d0f2fbb9d3f Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 7 Feb 2024 17:25:17 +0100
Subject: [PATCH] Scripts: Detect block.json changes from modules build
 (#57927)

* Add BlockJsonDependenciesPlugin to modules build

Add a plugin that finds block.json files and adds them as
fileDependencies of the module build. This ensures that changes to
block.json files trigger updates to the module build.

See https://webpack.js.org/contribute/plugin-patterns/

> You may also feed new file paths into the watch graph to receive
> compilation triggers when those files change. Add valid file paths
> into the `compilation.fileDependencies` Set to add them to the
> watched files.
---
 packages/scripts/CHANGELOG.md             |  4 +++
 packages/scripts/config/webpack.config.js | 34 +++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 20948b9963794..f0a877100efc2 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   Add experimental support for `viewScriptModule` field in block.json for `build` and `start` scripts ([#57437](https://github.com/WordPress/gutenberg/pull/57437)).
 
+### Enhancements
+
+-   Ensure that watched module builds detect block.json changes ([#57927](https://github.com/WordPress/gutenberg/pull/57927)).
+
 ### Deprecations
 
 -   Experimental support for `viewModule` field in block.json is deprecated in favor of `viewScriptModule` ([#57437](https://github.com/WordPress/gutenberg/pull/57437)).
diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
index cc76568f6fb1b..386cc1be49d40 100644
--- a/packages/scripts/config/webpack.config.js
+++ b/packages/scripts/config/webpack.config.js
@@ -11,6 +11,7 @@ const { basename, dirname, resolve } = require( 'path' );
 const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const { realpathSync } = require( 'fs' );
+const { sync: glob } = require( 'fast-glob' );
 
 /**
  * WordPress dependencies
@@ -33,6 +34,7 @@ const {
 	getAsBooleanFromENV,
 	getBlockJsonModuleFields,
 	getBlockJsonScriptFields,
+	fromProjectRoot,
 } = require( '../utils' );
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -390,6 +392,37 @@ const scriptConfig = {
 };
 
 if ( hasExperimentalModulesFlag ) {
+	/**
+	 * Add block.json files to compilation to ensure changes trigger rebuilds when watching
+	 */
+	class BlockJsonDependenciesPlugin {
+		constructor() {
+			/** @type {ReadonlyArray<string>} */
+			this.blockJsonFiles = glob( '**/block.json', {
+				absolute: true,
+				cwd: fromProjectRoot( getWordPressSrcDirectory() ),
+			} );
+		}
+
+		/**
+		 * Apply the plugin
+		 * @param {webpack.Compiler} compiler the compiler instance
+		 * @return {void}
+		 */
+		apply( compiler ) {
+			if ( this.blockJsonFiles.length ) {
+				compiler.hooks.compilation.tap(
+					'BlockJsonDependenciesPlugin',
+					( compilation ) => {
+						compilation.fileDependencies.addAll(
+							this.blockJsonFiles
+						);
+					}
+				);
+			}
+		}
+	}
+
 	/** @type {webpack.Configuration} */
 	const moduleConfig = {
 		...baseConfig,
@@ -429,6 +462,7 @@ if ( hasExperimentalModulesFlag ) {
 			// generated, and the default externals set.
 			! process.env.WP_NO_EXTERNALS &&
 				new DependencyExtractionWebpackPlugin(),
+			new BlockJsonDependenciesPlugin(),
 		].filter( Boolean ),
 	};