feat: allow to configure more client options via resource URL

Author: snitin315

client-src/index.js

@@ -58,6 +58,40 @@ if (parsedResourceQuery["live-reload"] === "true") {
   log.info("Live Reloading enabled.");
 }
 
+if (parsedResourceQuery.progress === "true") {
+  options.liveReload = true;
+
+  log.info("Progress reporting enabled.");
+}
+
+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,
+    };
+  }
+
+  if (
+    options.overlay === true ||
+    (options.overlay.errors && options.overlay.warnings)
+  ) {
+    log.info("Overlay is enabled for both errors and warnings.");
+  } else if (options.overlay.errors) {
+    log.info("Overlay is enabled for errors only.");
+  } else if (options.overlay.warnings) {
+    log.info("Overlay is enabled for warnings only.");
+  }
+}
+
 if (parsedResourceQuery.logging) {
   options.logging = parsedResourceQuery.logging;
 }

lib/Server.js

@@ -598,6 +598,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",

test/client/index.test.js

@@ -208,6 +208,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!!");
 

types/lib/Server.d.ts

@@ -1362,7 +1362,7 @@ declare class Server {
       "static-directory": {
         configs: {
           type: string;
-          multiple: boolean;
+          /** @type {ServerOptions} */ multiple: boolean;
           description: string;
           path: string;
         }[];
@@ -1389,7 +1389,7 @@ declare class Server {
           path: string;
         }[];
         description: string;
-        simpleType: string;
+        /** @type {any} */ simpleType: string;
         multiple: boolean;
       };
       "static-reset": {
@@ -2383,19 +2383,18 @@ declare class Server {
                       instanceof?: undefined;
                     }
                   | {
-                      /** @type {any} */
                       instanceof: string;
                       type?: undefined;
                     }
                 )[];
               };
             }
         )[];
-        /** @type {any} */
         description: string;
         link: string;
       };
       Server: {
+        /** @type {any} */
         anyOf: {
           $ref: string;
         }[];
@@ -2413,6 +2412,10 @@ declare class Server {
       };
       ServerString: {
         type: string;
+        /**
+         * @private
+         * @returns {Compiler["options"]}
+         */
         minLength: number;
         cli: {
           exclude: boolean;
@@ -2428,10 +2431,11 @@ declare class Server {
           };
           options: {
             $ref: string;
-          } /** @type {MultiCompiler} */;
+          };
         };
-        /** @type {MultiCompiler} */ additionalProperties: boolean;
+        additionalProperties: boolean /** @type {MultiCompiler} */;
       };
+      /** @type {MultiCompiler} */
       ServerOptions: {
         type: string;
         additionalProperties: boolean;
@@ -2837,7 +2841,6 @@ declare class Server {
               enum?: undefined;
             }
         )[];
-        /** @type {ServerOptions} */
         cli: {
           description: string;
         };
@@ -2847,7 +2850,6 @@ declare class Server {
       };
       WebSocketServerObject: {
         type: string;
-        /** @type {ServerOptions} */
         properties: {
           type: {
             anyOf: {
@@ -2857,6 +2859,7 @@ declare class Server {
           options: {
             type: string;
             additionalProperties: boolean;
+            /** @type {ServerOptions} */
             cli: {
               exclude: boolean;
             };
@@ -2872,7 +2875,7 @@ declare class Server {
     additionalProperties: boolean;
     properties: {
       allowedHosts: {
-        $ref: string;
+        $ref: string /** @type {ServerOptions} */;
       };
       bonjour: {
         $ref: string;
@@ -2898,9 +2901,11 @@ declare class Server {
       hot: {
         $ref: string;
       };
+      /** @type {any} */
       http2: {
-        $ref: string;
+        $ref: string /** @type {ServerOptions} */;
       };
+      /** @type {ServerOptions} */
       https: {
         $ref: string;
       };
@@ -2917,7 +2922,7 @@ declare class Server {
         $ref: string;
       };
       onBeforeSetupMiddleware: {
-        $ref: string /** @type {any} */;
+        $ref: string;
       };
       onListening: {
         $ref: string;