fix(hot): name building events and repair the client reconnect lifecycle

The building payload now carries the name of the compilation that
invalidated (tapped per child compiler, since the MultiCompiler hook
does not say which one fired), so clients can pair it with the built or
sync that follows — without it the building indicator registered every
build under "" and could never be hidden for named compilations.

On the client, the inactivity watchdog is restarted inside init(), so it
survives a reconnect instead of dying with the first clearInterval, and
the reconnect timeout handle is now stored and cleared by close(), so
disconnect() during the reconnect window no longer resurrects an
orphaned, uncloseable connection.

All three defects were inherited from webpack-hot-middleware.

Author: bjohansebas

client-src/index.js

@@ -143,6 +143,8 @@ function createEventSourceWrapper() {
   const listeners = [];
   /** @type {ReturnType<typeof setInterval>} */
   let timer;
+  /** @type {ReturnType<typeof setTimeout>} */
+  let reconnectTimer;
 
   const handleOnline = () => {
     log.info("connected");
@@ -161,37 +163,47 @@ function createEventSourceWrapper() {
 
   /**
    * Close the connection and stop the activity timer without scheduling a
-   * reconnection.
+   * reconnection. A reconnection that is already pending is cancelled too, so
+   * closing during the reconnect window really is final.
    */
   const close = () => {
     clearInterval(timer);
+    clearTimeout(reconnectTimer);
     source.close();
   };
 
   const handleDisconnect = () => {
     close();
-    setTimeout(init, /** @type {number} */ (options.timeout));
+    reconnectTimer = setTimeout(init, /** @type {number} */ (options.timeout));
   };
 
   /**
-   * Open the EventSource connection.
+   * Open the EventSource connection and (re)start the inactivity watchdog —
+   * `handleDisconnect` stops the watchdog, so a reconnected source has to
+   * bring its own.
    */
   function init() {
     source = new window.EventSource(/** @type {string} */ (options.path));
     source.addEventListener("open", handleOnline);
     source.addEventListener("error", handleDisconnect);
     source.addEventListener("message", handleMessage);
+
+    lastActivity = Date.now();
+    clearInterval(timer);
+    timer = setInterval(
+      () => {
+        if (
+          Date.now() - lastActivity >
+          /** @type {number} */ (options.timeout)
+        ) {
+          handleDisconnect();
+        }
+      },
+      /** @type {number} */ (options.timeout) / 2,
+    );
   }
 
   init();
-  timer = setInterval(
-    () => {
-      if (Date.now() - lastActivity > /** @type {number} */ (options.timeout)) {
-        handleDisconnect();
-      }
-    },
-    /** @type {number} */ (options.timeout) / 2,
-  );
 
   return {
     addMessageListener(fn) {

src/hot.js

@@ -322,16 +322,25 @@ function createHot(compiler, userOptions) {
     }).apply(compiler);
   }
 
-  /** @param {string | null=} fileName file that triggered the rebuild */
-  const onInvalid = (fileName) => {
+  /**
+   * @param {string=} name name of the compilation the hook belongs to
+   * @returns {(fileName?: string | null) => void} invalid hook handler
+   */
+  const onInvalid = (name) => (fileName) => {
     if (closed) return;
 
     valid = false;
     lastProgressPercent = -1;
 
-    /** @type {{ action: string, file?: string }} */
+    /** @type {{ action: string, name?: string, file?: string }} */
     const payload = { action: "building" };
 
+    // Named so clients can pair this event with the `built`/`sync` that
+    // follows it — the building indicator tracks in-flight builds per name.
+    if (name) {
+      payload.name = name;
+    }
+
     // The invalid hook reports which file changed — forward it so clients
     // can show what triggered the rebuild.
     if (typeof fileName === "string" && fileName) {
@@ -352,7 +361,13 @@ function createHot(compiler, userOptions) {
     valid = true;
   };
 
-  compiler.hooks.invalid.tap(PLUGIN_NAME, onInvalid);
+  // Tapped per child compiler rather than on the MultiCompiler hook, which
+  // does not say which compilation invalidated.
+  for (const child of "compilers" in compiler
+    ? compiler.compilers
+    : [compiler]) {
+    child.hooks.invalid.tap(PLUGIN_NAME, onInvalid(child.name));
+  }
   compiler.hooks.done.tap(PLUGIN_NAME, onDone);
 
   return {

test/client.test.js

@@ -1010,6 +1010,44 @@ describe("client", () => {
       expect(EventSourceStub.instances).toHaveLength(1);
     });
 
+    it("keeps the inactivity watchdog after a reconnect", () => {
+      jest.useFakeTimers({ doNotFake: ["nextTick"] });
+      delete globalThis.__wdmEventSourceWrapper;
+      EventSourceStub.instances.length = 0;
+      loadClient();
+
+      // First silent stall: the watchdog disconnects and a reconnect opens a
+      // second source 20s later.
+      jest.advanceTimersByTime(30 * 1000);
+      jest.advanceTimersByTime(20 * 1000);
+      expect(EventSourceStub.instances).toHaveLength(2);
+
+      // The reconnected source must be watched too: another silent stall has
+      // to close it and schedule a third connection.
+      const second = EventSourceStub.lastInstance();
+      jest.advanceTimersByTime(30 * 1000);
+      expect(second.closed).toBe(true);
+      jest.advanceTimersByTime(20 * 1000);
+      expect(EventSourceStub.instances).toHaveLength(3);
+    });
+
+    it("disconnect() during the reconnect window cancels the pending reconnect", () => {
+      jest.useFakeTimers({ doNotFake: ["nextTick"] });
+      delete globalThis.__wdmEventSourceWrapper;
+      EventSourceStub.instances.length = 0;
+      const freshClient = loadClient();
+
+      // A connection error schedules a reconnect `timeout` (20s) out.
+      const [first] = EventSourceStub.instances;
+      first.dispatch("error", {});
+      expect(first.closed).toBe(true);
+
+      // Disconnecting inside that window must cancel it — nothing may reopen.
+      freshClient.disconnect();
+      jest.advanceTimersByTime(60 * 1000);
+      expect(EventSourceStub.instances).toHaveLength(1);
+    });
+
     it("disconnect() drops the cached wrapper so a new connect starts fresh", () => {
       client.disconnect();
       expect(

test/hot.test.js

@@ -347,6 +347,42 @@ describe("createHot", () => {
     hot.close();
   });
 
+  it("includes the compilation name in the building payload", () => {
+    const compiler = makeFakeCompiler();
+    compiler.name = "main";
+    const hot = createHot(compiler, {});
+    const { writes } = attachClient({ handler: hot.handle });
+
+    compiler.emitInvalid();
+
+    // The client pairs `building` with the `built`/`sync` that follows by
+    // name — without it the building indicator can never be hidden.
+    const building = writes.find((w) => w.includes('"action":"building"'));
+    expect(building).toContain('"name":"main"');
+
+    hot.close();
+  });
+
+  it("names the building payload after the compiler that invalidated in a multi-compiler", () => {
+    const app = makeFakeCompiler();
+    app.name = "app";
+    const widget = makeFakeCompiler();
+    widget.name = "widget";
+    const multi = makeFakeCompiler();
+    multi.compilers = [app, widget];
+    const hot = createHot(multi, {});
+    const { writes } = attachClient({ handler: hot.handle });
+
+    widget.emitInvalid("/src/widget.js");
+
+    const building = writes.filter((w) => w.includes('"action":"building"'));
+    expect(building).toHaveLength(1);
+    expect(building[0]).toContain('"name":"widget"');
+    expect(building[0]).toContain('"file":"/src/widget.js"');
+
+    hot.close();
+  });
+
   it("publishes sync instead of built when a bundle's hash did not change", () => {
     const compiler = makeFakeCompiler();
     const hot = createHot(compiler, {});