feat: allow to configure more client options via resource URL (#4274)

webpack · Jul 25, 2022 · 216e3cb · 216e3cb
1 parent cffffba
commit 216e3cb
Show file tree

Hide file tree

Showing 50 changed files with 854 additions and 1,187 deletions.
diff --git a/client-src/index.js b/client-src/index.js
@@ -5,7 +5,7 @@ import stripAnsi from "./utils/stripAnsi.js";
 import parseURL from "./utils/parseURL.js";
 import socket from "./socket.js";
 import { formatProblem, show, hide } from "./overlay.js";
-import { log, setLogLevel } from "./utils/log.js";
+import { log, logEnabledFeatures, setLogLevel } from "./utils/log.js";
 import sendMessage from "./utils/sendMessage.js";
 import reloadApp from "./utils/reloadApp.js";
 import createSocketURL from "./utils/createSocketURL.js";
@@ -46,16 +46,44 @@ const options = {
 };
 const parsedResourceQuery = parseURL(__resourceQuery);
 
+const enabledFeatures = {
+  "Hot Module Replacement": false,
+  "Live Reloading": false,
+  Progress: false,
+  Overlay: false,
+};
+
 if (parsedResourceQuery.hot === "true") {
   options.hot = true;
-
-  log.info("Hot Module Replacement enabled.");
+  enabledFeatures["Hot Module Replacement"] = true;
 }
 
 if (parsedResourceQuery["live-reload"] === "true") {
   options.liveReload = true;
+  enabledFeatures["Live Reloading"] = true;
+}
 
-  log.info("Live Reloading enabled.");
+if (parsedResourceQuery.progress === "true") {
+  options.progress = true;
+  enabledFeatures.Progress = true;
+}
+
+if (parsedResourceQuery.overlay) {
+  try {
+    options.overlay = JSON.parse(parsedResourceQuery.overlay);
+  } catch (e) {
+    log.error("Error parsing overlay options from resource query:", e);
+  }
+
+  // Fill in default "true" params for partially-specified objects.
+  if (typeof options.overlay === "object") {
+    options.overlay = {
+      errors: true,
+      warnings: true,
+      ...options.overlay,
+    };
+  }
+  enabledFeatures.Overlay = true;
 }
 
 if (parsedResourceQuery.logging) {
@@ -66,6 +94,8 @@ if (typeof parsedResourceQuery.reconnect !== "undefined") {
   options.reconnect = Number(parsedResourceQuery.reconnect);
 }
 
+logEnabledFeatures(enabledFeatures);
+
 /**
  * @param {string} level
  */
@@ -92,17 +122,13 @@ const onSocketMessage = {
     }
 
     options.hot = true;
-
-    log.info("Hot Module Replacement enabled.");
   },
   liveReload() {
     if (parsedResourceQuery["live-reload"] === "false") {
       return;
     }
 
     options.liveReload = true;
-
-    log.info("Live Reloading enabled.");
   },
   invalid() {
     log.info("App updated. Recompiling...");

diff --git a/client-src/utils/log.js b/client-src/utils/log.js
@@ -18,4 +18,22 @@ setLogLevel(defaultLevel);
 
 const log = logger.getLogger(name);
 
-export { log, setLogLevel };
+const logEnabledFeatures = (features) => {
+  const enabledFeatures = Object.entries(features);
+  if (!features || enabledFeatures.length === 0) {
+    return;
+  }
+
+  let logString = "Server started:";
+
+  // Server started: Hot Module Replacement enabled, Live Reloading enabled, Overlay disabled.
+  for (const [key, value] of Object.entries(features)) {
+    logString += ` ${key} ${value ? "enabled" : "disabled"},`;
+  }
+  // replace last comma with a period
+  logString = logString.slice(0, -1).concat(".");
+
+  log.info(logString);
+};
+
+export { log, logEnabledFeatures, setLogLevel };
diff --git a/lib/Server.js b/lib/Server.js
@@ -597,6 +597,19 @@ class Server {
           searchParams.set("logging", client.logging);
         }
 
+        if (typeof client.progress !== "undefined") {
+          searchParams.set("progress", String(client.progress));
+        }
+
+        if (typeof client.overlay !== "undefined") {
+          searchParams.set(
+            "overlay",
+            typeof client.overlay === "boolean"
+              ? String(client.overlay)
+              : JSON.stringify(client.overlay)
+          );
+        }
+
         if (typeof client.reconnect !== "undefined") {
           searchParams.set(
             "reconnect",
@@ -606,6 +619,14 @@ class Server {
           );
         }
 
+        if (typeof this.options.hot !== "undefined") {
+          searchParams.set("hot", String(this.options.hot));
+        }
+
+        if (typeof this.options.liveReload !== "undefined") {
+          searchParams.set("live-reload", String(this.options.liveReload));
+        }
+
         webSocketURLStr = searchParams.toString();
       }
 

diff --git a/test/client/__snapshots__/index.test.js.snap.webpack4 b/test/client/__snapshots__/index.test.js.snap.webpack4
@@ -14,10 +14,6 @@ exports[`index should run onSocketMessage.close 2`] = `"Close"`;
 
 exports[`index should run onSocketMessage.error 1`] = `"error!!"`;
 
-exports[`index should run onSocketMessage.hot 1`] = `"Hot Module Replacement enabled."`;
-
-exports[`index should run onSocketMessage.liveReload 1`] = `"Live Reloading enabled."`;
-
 exports[`index should run onSocketMessage.ok 1`] = `"Ok"`;
 
 exports[`index should run onSocketMessage.ok 2`] = `

diff --git a/test/client/__snapshots__/index.test.js.snap.webpack5 b/test/client/__snapshots__/index.test.js.snap.webpack5
@@ -14,10 +14,6 @@ exports[`index should run onSocketMessage.close 2`] = `"Close"`;
 
 exports[`index should run onSocketMessage.error 1`] = `"error!!"`;
 
-exports[`index should run onSocketMessage.hot 1`] = `"Hot Module Replacement enabled."`;
-
-exports[`index should run onSocketMessage.liveReload 1`] = `"Live Reloading enabled."`;
-
 exports[`index should run onSocketMessage.ok 1`] = `"Ok"`;
 
 exports[`index should run onSocketMessage.ok 2`] = `

diff --git a/test/client/index.test.js b/test/client/index.test.js
@@ -25,6 +25,7 @@ describe("index", () => {
         warn: jest.fn(),
         error: jest.fn(),
       },
+      logEnabledFeatures: jest.fn(),
       setLogLevel: jest.fn(),
     });
 
@@ -83,18 +84,6 @@ describe("index", () => {
     expect(socket.mock.calls[0]).toMatchSnapshot();
   });
 
-  test("should run onSocketMessage.hot", () => {
-    onSocketMessage.hot();
-
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
-  });
-
-  test("should run onSocketMessage.liveReload", () => {
-    onSocketMessage.liveReload();
-
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
-  });
-
   test("should run onSocketMessage['still-ok']", () => {
     onSocketMessage["still-ok"]();
 
@@ -207,6 +196,60 @@ describe("index", () => {
     expect(overlay.show).toBeCalled();
   });
 
+  test("should parse overlay options from resource query", () => {
+    jest.isolateModules(() => {
+      // Pass JSON config with warnings disabled
+      global.__resourceQuery = `?overlay=${encodeURIComponent(
+        `{"warnings": false}`
+      )}`;
+      overlay.show.mockReset();
+      socket.mockReset();
+      jest.unmock("../../client-src/utils/parseURL.js");
+      require("../../client-src");
+      onSocketMessage = socket.mock.calls[0][1];
+
+      onSocketMessage.warnings(["warn1"]);
+      expect(overlay.show).not.toBeCalled();
+
+      onSocketMessage.errors(["error1"]);
+      expect(overlay.show).toBeCalledTimes(1);
+    });
+
+    jest.isolateModules(() => {
+      // Pass JSON config with errors disabled
+      global.__resourceQuery = `?overlay=${encodeURIComponent(
+        `{"errors": false}`
+      )}`;
+      overlay.show.mockReset();
+      socket.mockReset();
+      jest.unmock("../../client-src/utils/parseURL.js");
+      require("../../client-src");
+      onSocketMessage = socket.mock.calls[0][1];
+
+      onSocketMessage.errors(["error1"]);
+      expect(overlay.show).not.toBeCalled();
+
+      onSocketMessage.warnings(["warn1"]);
+      expect(overlay.show).toBeCalledTimes(1);
+    });
+
+    jest.isolateModules(() => {
+      // Use simple boolean
+      global.__resourceQuery = "?overlay=true";
+      jest.unmock("../../client-src/utils/parseURL.js");
+      socket.mockReset();
+      overlay.show.mockReset();
+      require("../../client-src");
+      onSocketMessage = socket.mock.calls[0][1];
+
+      onSocketMessage.warnings(["warn2"]);
+      expect(overlay.show).toBeCalledTimes(1);
+
+      onSocketMessage.errors(["error2"]);
+      expect(overlay.show).toBeCalledTimes(2);
+    });
+  });
+
   test("should run onSocketMessage.error", () => {
     onSocketMessage.error("error!!");
 
@@ -225,7 +268,7 @@ describe("index", () => {
     onSocketMessage.hot();
     onSocketMessage.close();
 
-    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
   });
 
@@ -234,7 +277,7 @@ describe("index", () => {
     onSocketMessage.liveReload();
     onSocketMessage.close();
 
-    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
   });