fix(compiler): fix file watcher sometimes doesn't trigger rebuild (#6191)

* fix(compiler): fix file watcher sometimes doesn't trigger rebuild

The existing implementation was running into the `lastTsBuilder && !timeoutId` condition with a `timeoutId` being present
even though there was no running build or any other good reason not to rebuild.

The change simplifies the implementation by using a recursive `setTimeout` to wait for pending builds.

This allows to:

  - remove the extra `rebuildTimer` which was arguably confusing
  - remove the clearTimeout override

Since we immediately call `clearTimeout(timeoutId)` in the `setTimeout` override, we don't stack up rebuild requests.

After applying these changes the watcher behaves beautifully.

fixes: #6190

* style(compiler): fix code formatting

Author: hettiger

src/compiler/transpile/create-watch-program.ts

@@ -24,7 +24,6 @@ export const createTsWatchProgram = async (
   let isRunning = false;
   let lastTsBuilder: any;
   let timeoutId: any;
-  let rebuildTimer: any;
 
   // Get the pre-baked TS options we want to use for our builder program
   const optionsToExtend = getTsOptionsToExtend(config);
@@ -44,19 +43,18 @@ export const createTsWatchProgram = async (
      * @returns A {@link NodeJs.Timer} instance
      */
     setTimeout(callback, time) {
-      clearInterval(rebuildTimer);
-      const t = (timeoutId = setInterval(() => {
+      clearTimeout(timeoutId);
+      const delay = config.sys.watchTimeout || time;
+      const tick = () => {
         if (!isRunning) {
           callback();
-          clearInterval(t);
-          timeoutId = rebuildTimer = null;
+          timeoutId = null;
+        } else {
+          timeoutId = setTimeout(tick, delay);
         }
-      }, config.sys.watchTimeout || time));
-      return t;
-    },
-
-    clearTimeout(id) {
-      return clearInterval(id);
+      };
+      timeoutId = setTimeout(tick, delay);
+      return timeoutId;
     },
   };
 
@@ -111,8 +109,8 @@ export const createTsWatchProgram = async (
     // This will be called via a callback on the watch build whenever a file
     // change is detected
     rebuild: () => {
-      if (lastTsBuilder && !timeoutId) {
-        rebuildTimer = tsWatchSys.setTimeout(() => tsWatchHost.afterProgramCreate(lastTsBuilder), 300);
+      if (lastTsBuilder) {
+        tsWatchSys.setTimeout(() => tsWatchHost.afterProgramCreate(lastTsBuilder), 300);
       }
     },
   };