feat(client): collapse the updated-modules list in the console (#2361)

The success path now logs a one-line summary with the module count at
the default "info" level, and the per-module detail as a collapsed
console group visible from the "log" level up (webpack's runtime
logger gates groups below that level). The unaccepted-modules warning
list stays flat: it is diagnostic output for the failing case.

Ref webpack/webpack-hot-middleware#311

Author: bjohansebas

client-src/process-update.js

@@ -108,10 +108,13 @@ export default function applyUpdate(hash, options) {
     if (!renewedModules || renewedModules.length === 0) {
       log.info("Nothing hot updated.");
     } else {
-      log.info("Updated modules:");
+      log.info(`Hot updated ${renewedModules.length} modules.`);
+      // Detail as a collapsed group, visible from the "log" level up.
+      log.groupCollapsed("Updated modules:");
       for (const moduleId of renewedModules) {
-        log.info(` - ${moduleId}`);
+        log.log(` - ${moduleId}`);
       }
+      log.groupEnd();
     }
 
     if (upToDate()) {

test/process-update.test.js

@@ -189,21 +189,58 @@ describe("process-update", () => {
       return spy.mock.calls.some((call) => call.join(" ").includes(text));
     }
 
-    it("lists the updated modules at the default info level", async () => {
+    beforeEach(() => {
+      if (typeof console.groupCollapsed !== "function") {
+        console.groupCollapsed = () => {};
+      }
+      if (typeof console.groupEnd !== "function") {
+        console.groupEnd = () => {};
+      }
+      jest.spyOn(console, "groupCollapsed").mockImplementation(() => {});
+      jest.spyOn(console, "groupEnd").mockImplementation(() => {});
+    });
+
+    it("logs a one-line summary at the default info level", async () => {
+      applyUpdate = loadApplyUpdate(
+        makeFakeHot({
+          checkResult: ["./a.js", "./b.js"],
+          applyImpl: () => Promise.resolve(["./a.js", "./b.js"]),
+        }),
+      );
+
+      applyUpdate("new-hash", { reload: true });
+      globalThis.__webpack_hash__ = "new-hash";
+      await flushPromises();
+
+      expect(logged(console.info, "Hot updated 2 modules.")).toBe(true);
+      // Groups are gated below the "log" level.
+      expect(console.groupCollapsed).not.toHaveBeenCalled();
+      expect(logged(console.log, "./a.js")).toBe(false);
+    });
+
+    it("adds a collapsed group with the module detail at the log level", async () => {
       applyUpdate = loadApplyUpdate(
         makeFakeHot({
           checkResult: ["./a.js", "./b.js"],
           applyImpl: () => Promise.resolve(["./a.js", "./b.js"]),
         }),
       );
+      setLogLevel("log");
 
       applyUpdate("new-hash", { reload: true });
       globalThis.__webpack_hash__ = "new-hash";
       await flushPromises();
 
-      expect(logged(console.info, "Updated modules:")).toBe(true);
-      expect(logged(console.info, "./a.js")).toBe(true);
-      expect(logged(console.info, "./b.js")).toBe(true);
+      expect(logged(console.info, "Hot updated 2 modules.")).toBe(true);
+      expect(
+        logged(
+          /** @type {jest.Mock} */ (console.groupCollapsed),
+          "Updated modules:",
+        ),
+      ).toBe(true);
+      expect(logged(console.log, "./a.js")).toBe(true);
+      expect(logged(console.log, "./b.js")).toBe(true);
+      expect(console.groupEnd).toHaveBeenCalled();
     });
   });
 });