From c75b0d9fec6cc6769b5f35a9455bb06588a68bbf Mon Sep 17 00:00:00 2001
From: Zach Wily <zach@zwily.com>
Date: Tue, 1 Oct 2024 07:15:54 -0600
Subject: [PATCH] [wrangler] debounce restarts when changes are made to the
 assets directory (#6866)

* debounce restarts when changes are made to the assets directory

closes #6865

* add changeset
---
 .changeset/thin-shirts-fail.md |  5 +++++
 packages/wrangler/src/dev.tsx  | 13 +++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/thin-shirts-fail.md

diff --git a/.changeset/thin-shirts-fail.md b/.changeset/thin-shirts-fail.md
new file mode 100644
index 000000000000..b0038f969fa1
--- /dev/null
+++ b/.changeset/thin-shirts-fail.md
@@ -0,0 +1,5 @@
+---
+"wrangler": patch
+---
+
+fix: debounce restarting worker on assets dir file changes
diff --git a/packages/wrangler/src/dev.tsx b/packages/wrangler/src/dev.tsx
index 5f81f8c4b701..130b516dd271 100644
--- a/packages/wrangler/src/dev.tsx
+++ b/packages/wrangler/src/dev.tsx
@@ -27,6 +27,7 @@ import { run } from "./experimental-flags";
 import isInteractive from "./is-interactive";
 import { logger } from "./logger";
 import * as metrics from "./metrics";
+import { debounce } from "./pages/utils";
 import { getLegacyAssetPaths, getSiteAssetPaths } from "./sites";
 import {
 	getAccountFromCache,
@@ -858,6 +859,10 @@ export async function startDev(args: StartDevOptions) {
 						await assetsWatcher?.close();
 
 						if (assetsOptions) {
+							const debouncedRerender = debounce(async () => {
+								rerender(await getDevReactElement(config));
+							}, 100);
+
 							assetsWatcher = watch(assetsOptions.directory, {
 								persistent: true,
 								ignoreInitial: true,
@@ -865,7 +870,7 @@ export async function startDev(args: StartDevOptions) {
 								const message = getAssetChangeMessage(eventName, changedPath);
 
 								logger.log(`🌀 ${message}...`);
-								rerender(await getDevReactElement(config));
+								debouncedRerender();
 							});
 						}
 					}
@@ -998,6 +1003,10 @@ export async function startDev(args: StartDevOptions) {
 		rerender = devReactElement.rerender;
 
 		if (assetsOptions && !args.experimentalDevEnv) {
+			const debouncedRerender = debounce(async () => {
+				rerender(await getDevReactElement(config));
+			}, 100);
+
 			assetsWatcher = watch(assetsOptions.directory, {
 				persistent: true,
 				ignoreInitial: true,
@@ -1005,7 +1014,7 @@ export async function startDev(args: StartDevOptions) {
 				const message = getAssetChangeMessage(eventName, filePath);
 
 				logger.log(`🌀 ${message}...`);
-				rerender(await getDevReactElement(config));
+				debouncedRerender();
 			});
 		}