feat: allow to set hot and live-reload for client using search pa…

…rams
webpack · Aug 20, 2021 · 1c57680 · 1c57680
1 parent 4ce1e1b
commit 1c57680
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 46 deletions.
diff --git a/client-src/index.js b/client-src/index.js
@@ -25,6 +25,18 @@ const options = {
 };
 const parsedResourceQuery = parseURL(__resourceQuery);
 
+if (parsedResourceQuery.hot === "true") {
+  options.hot = true;
+
+  log.info("Hot Module Replacement enabled.");
+}
+
+if (parsedResourceQuery["live-reload"] === "true") {
+  options.liveReload = true;
+
+  log.info("Live Reloading enabled.");
+}
+
 if (parsedResourceQuery.logging) {
   options.logging = parsedResourceQuery.logging;
 }

diff --git a/test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack4 b/test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack4
@@ -340,6 +340,13 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App hot update...",
+  "[HMR] Checking for updates on the server...",
+  "[HMR] Updated modules:",
+  "[HMR]  - ./main.css",
+  "[HMR]  - ../../../node_modules/css-loader/dist/cjs.js!./main.css",
+  "",
+  "[HMR] App is up to date.",
 ]
 `;
 
@@ -350,6 +357,9 @@ Array [
   "[HMR] Waiting for update signal from WDS...",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Live Reloading enabled.",
 ]
 `;
 
@@ -362,3 +372,31 @@ Array [
 `;
 
 exports[`hot and live reload should work with manual client setup and allow to disable live reload (default): page errors 1`] = `Array []`;
+
+exports[`hot and live reload should work with manual client setup and allow to enable hot module replacement (default): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App hot update...",
+  "[HMR] Checking for updates on the server...",
+  "[HMR] Updated modules:",
+  "[HMR]  - ./main.css",
+  "[HMR]  - ../../../node_modules/css-loader/dist/cjs.js!./main.css",
+  "",
+  "[HMR] App is up to date.",
+]
+`;
+
+exports[`hot and live reload should work with manual client setup and allow to enable hot module replacement (default): page errors 1`] = `Array []`;
+
+exports[`hot and live reload should work with manual client setup and allow to enable live reload (default): console messages 1`] = `
+Array [
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`hot and live reload should work with manual client setup and allow to enable live reload (default): page errors 1`] = `Array []`;
diff --git a/test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack5 b/test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack5
@@ -340,6 +340,13 @@ Array [
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App hot update...",
+  "[HMR] Checking for updates on the server...",
+  "[HMR] Updated modules:",
+  "[HMR]  - ./main.css",
+  "[HMR]  - ../../../node_modules/css-loader/dist/cjs.js!./main.css",
+  "",
+  "[HMR] App is up to date.",
 ]
 `;
 
@@ -350,6 +357,9 @@ Array [
   "[HMR] Waiting for update signal from WDS...",
   "[webpack-dev-server] Live Reloading enabled.",
   "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Live Reloading enabled.",
 ]
 `;
 
@@ -362,3 +372,31 @@ Array [
 `;
 
 exports[`hot and live reload should work with manual client setup and allow to disable live reload (default): page errors 1`] = `Array []`;
+
+exports[`hot and live reload should work with manual client setup and allow to enable hot module replacement (default): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App hot update...",
+  "[HMR] Checking for updates on the server...",
+  "[HMR] Updated modules:",
+  "[HMR]  - ./main.css",
+  "[HMR]  - ../../../node_modules/css-loader/dist/cjs.js!./main.css",
+  "",
+  "[HMR] App is up to date.",
+]
+`;
+
+exports[`hot and live reload should work with manual client setup and allow to enable hot module replacement (default): page errors 1`] = `Array []`;
+
+exports[`hot and live reload should work with manual client setup and allow to enable live reload (default): console messages 1`] = `
+Array [
+  "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`hot and live reload should work with manual client setup and allow to enable live reload (default): page errors 1`] = `Array []`;
diff --git a/test/e2e/hot-and-live-reload.test.js b/test/e2e/hot-and-live-reload.test.js
@@ -238,6 +238,23 @@ describe("hot and live reload", () => {
       },
     },
     // TODO we still output logs from webpack, need to improve this
+    {
+      title:
+        "should work with manual client setup and allow to enable hot module replacement",
+      webpackOptions: {
+        entry: [
+          "webpack/hot/dev-server",
+          `${require.resolve("../../client-src/index.js")}?hot=true`,
+          require.resolve("../fixtures/reload-config/foo.js"),
+        ],
+        plugins: [new webpack.HotModuleReplacementPlugin()],
+      },
+      options: {
+        client: false,
+        liveReload: false,
+        hot: false,
+      },
+    },
     {
       title:
         "should work with manual client setup and allow to disable hot module replacement",
@@ -253,6 +270,21 @@ describe("hot and live reload", () => {
         hot: true,
       },
     },
+    {
+      title:
+        "should work with manual client setup and allow to enable live reload",
+      webpackOptions: {
+        entry: [
+          `${require.resolve("../../client-src/index.js")}?live-reload=true`,
+          require.resolve("../fixtures/reload-config/foo.js"),
+        ],
+      },
+      options: {
+        client: false,
+        liveReload: false,
+        hot: false,
+      },
+    },
     {
       title:
         "should work with manual client setup and allow to disable live reload",
@@ -307,14 +339,6 @@ describe("hot and live reload", () => {
           });
       });
 
-      const hot =
-        typeof testDevServerOptions.hot !== "undefined"
-          ? testDevServerOptions.hot
-          : true;
-      const liveReload =
-        typeof testDevServerOptions.liveReload !== "undefined"
-          ? testDevServerOptions.liveReload
-          : true;
       const webSocketServerLaunched =
         testDevServerOptions.webSocketServer !== false;
 
@@ -451,65 +475,76 @@ describe("hot and live reload", () => {
         "body { background-color: rgb(255, 0, 0); }"
       );
 
-      let doNothing = false;
+      let waitHot =
+        typeof testDevServerOptions.hot !== "undefined"
+          ? testDevServerOptions.hot
+          : true;
+      let waitLiveReload =
+        typeof testDevServerOptions.liveReload !== "undefined"
+          ? testDevServerOptions.liveReload
+          : true;
 
-      const query = mode.query || "";
-      let allowToHotModuleReplacement = true;
+      if (webSocketServerLaunched === false) {
+        waitHot = false;
+        waitLiveReload = false;
+      }
 
-      if (query.indexOf("webpack-dev-server-hot=false") !== -1) {
-        allowToHotModuleReplacement = false;
+      if (Array.isArray(webpackOptions.entry)) {
+        if (webpackOptions.entry.some((item) => item.includes("hot=true"))) {
+          waitHot = true;
+        } else if (
+          webpackOptions.entry.some((item) => item.includes("hot=false"))
+        ) {
+          waitHot = false;
+        }
       }
 
-      if (
-        Array.isArray(webpackOptions.entry) &&
-        webpackOptions.entry.map((item) => item.includes("hot=false"))
-      ) {
-        allowToHotModuleReplacement = false;
+      if (Array.isArray(webpackOptions.entry)) {
+        if (
+          webpackOptions.entry.some((item) => item.includes("live-reload=true"))
+        ) {
+          waitLiveReload = true;
+        } else if (
+          webpackOptions.entry.some((item) =>
+            item.includes("live-reload=false")
+          )
+        ) {
+          waitLiveReload = false;
+        }
       }
 
-      let allowToLiveReload = true;
+      const query = mode.query || "";
 
-      if (query.indexOf("webpack-dev-server-live-reload=false") !== -1) {
-        allowToLiveReload = false;
+      if (query.includes("webpack-dev-server-hot=false")) {
+        waitHot = false;
       }
 
-      if (
-        Array.isArray(webpackOptions.entry) &&
-        webpackOptions.entry.map((item) => item.includes("live-reload=false"))
-      ) {
-        allowToLiveReload = false;
+      if (query.includes("webpack-dev-server-live-reload=false")) {
+        waitLiveReload = false;
       }
 
-      if (
-        webSocketServerLaunched &&
-        allowToHotModuleReplacement &&
-        ((hot && liveReload) || (hot && !liveReload))
-      ) {
+      if (waitHot) {
         await page.waitForFunction(
           () =>
             getComputedStyle(document.body)["background-color"] ===
             "rgb(255, 0, 0)"
         );
 
         expect(doneHotUpdate).toBe(true);
-      } else if (webSocketServerLaunched && liveReload && allowToLiveReload) {
+      } else if (waitLiveReload) {
         await page.waitForNavigation({
           waitUntil: "networkidle0",
         });
-      } else {
-        if (webSocketServerLaunched) {
-          await new Promise((resolve) => {
-            const interval = setInterval(() => {
-              if (consoleMessages.includes(INVALID_MESSAGE)) {
-                clearInterval(interval);
-
-                resolve();
-              }
-            }, 100);
-          });
-        }
+      } else if (webSocketServerLaunched) {
+        await new Promise((resolve) => {
+          const interval = setInterval(() => {
+            if (consoleMessages.includes(INVALID_MESSAGE)) {
+              clearInterval(interval);
 
-        doNothing = true;
+              resolve();
+            }
+          }, 100);
+        });
       }
 
       const backgroundColorAfter = await page.evaluate(() => {
@@ -518,7 +553,7 @@ describe("hot and live reload", () => {
         return getComputedStyle(body)["background-color"];
       });
 
-      if (doNothing) {
+      if (!waitHot && !waitLiveReload) {
         expect(backgroundColorAfter).toEqual("rgb(0, 0, 255)");
       } else {
         expect(backgroundColorAfter).toEqual("rgb(255, 0, 0)");