From fb4ead2ce0de824eef46ce8e27a8f6cc1d08c744 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Fri, 28 Oct 2022 13:58:58 -0400
Subject: [PATCH] fix(@angular-devkit/build-angular): wait during file watching
 to improve multi-save rebuilds for esbuild builder

When using the experimental esbuild-based browser application builder in watch mode, the file watcher will now
wait 250ms from a reported file event before triggering a rebuild. The change allows the rebuild to better
capture groups of file changes. This can happen when using an IDE while editing multiple files and would otherwise
result in multiple rebuilds where a single rebuild would be ideal.

(cherry picked from commit 7c2b846199324426c17c41f31d0989f464221403)
---
 .../src/builders/browser-esbuild/watcher.ts   | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/watcher.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/watcher.ts
index 4d11fb5e7bf6..2fd26ee56f2e 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/watcher.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/watcher.ts
@@ -43,6 +43,7 @@ export function createWatcher(options?: {
 
   const nextQueue: ((value?: ChangedFiles) => void)[] = [];
   let currentChanges: ChangedFiles | undefined;
+  let nextWaitTimeout: NodeJS.Timeout | undefined;
 
   watcher.on('all', (event, path) => {
     switch (event) {
@@ -62,11 +63,18 @@ export function createWatcher(options?: {
         return;
     }
 
-    const next = nextQueue.shift();
-    if (next) {
-      const value = currentChanges;
-      currentChanges = undefined;
-      next(value);
+    // Wait 250ms from next change to better capture groups of file save operations.
+    if (!nextWaitTimeout) {
+      nextWaitTimeout = setTimeout(() => {
+        nextWaitTimeout = undefined;
+        const next = nextQueue.shift();
+        if (next) {
+          const value = currentChanges;
+          currentChanges = undefined;
+          next(value);
+        }
+      }, 250);
+      nextWaitTimeout?.unref();
     }
   });
 
@@ -99,6 +107,9 @@ export function createWatcher(options?: {
     async close() {
       try {
         await watcher.close();
+        if (nextWaitTimeout) {
+          clearTimeout(nextWaitTimeout);
+        }
       } finally {
         let next;
         while ((next = nextQueue.shift()) !== undefined) {