Skip to content

Commit 1c57680

Browse files
alexander-akaitalexander-akait
authored
feat: allow to set hot and live-reload for client using search params
1 parent 4ce1e1b commit 1c57680

File tree

4 files changed

+169
-46
lines changed

4 files changed

+169
-46
lines changed

‎client-src/index.js

+12
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,18 @@ const options = {
2525
};
2626
const parsedResourceQuery = parseURL(__resourceQuery);
2727

28+
if (parsedResourceQuery.hot === "true") {
29+
options.hot = true;
30+
31+
log.info("Hot Module Replacement enabled.");
32+
}
33+
34+
if (parsedResourceQuery["live-reload"] === "true") {
35+
options.liveReload = true;
36+
37+
log.info("Live Reloading enabled.");
38+
}
39+
2840
if (parsedResourceQuery.logging) {
2941
options.logging = parsedResourceQuery.logging;
3042
}

‎test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack4

+38
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,13 @@ Array [
340340
"[webpack-dev-server] Hot Module Replacement enabled.",
341341
"[webpack-dev-server] Live Reloading enabled.",
342342
"[webpack-dev-server] App updated. Recompiling...",
343+
"[webpack-dev-server] App hot update...",
344+
"[HMR] Checking for updates on the server...",
345+
"[HMR] Updated modules:",
346+
"[HMR] - ./main.css",
347+
"[HMR] - ../../../node_modules/css-loader/dist/cjs.js!./main.css",
348+
"",
349+
"[HMR] App is up to date.",
343350
]
344351
`;
345352

@@ -350,6 +357,9 @@ Array [
350357
"[HMR] Waiting for update signal from WDS...",
351358
"[webpack-dev-server] Live Reloading enabled.",
352359
"[webpack-dev-server] App updated. Recompiling...",
360+
"[webpack-dev-server] App updated. Reloading...",
361+
"[HMR] Waiting for update signal from WDS...",
362+
"[webpack-dev-server] Live Reloading enabled.",
353363
]
354364
`;
355365

@@ -362,3 +372,31 @@ Array [
362372
`;
363373

364374
exports[`hot and live reload should work with manual client setup and allow to disable live reload (default): page errors 1`] = `Array []`;
375+
376+
exports[`hot and live reload should work with manual client setup and allow to enable hot module replacement (default): console messages 1`] = `
377+
Array [
378+
"[HMR] Waiting for update signal from WDS...",
379+
"[webpack-dev-server] Hot Module Replacement enabled.",
380+
"[webpack-dev-server] App updated. Recompiling...",
381+
"[webpack-dev-server] App hot update...",
382+
"[HMR] Checking for updates on the server...",
383+
"[HMR] Updated modules:",
384+
"[HMR] - ./main.css",
385+
"[HMR] - ../../../node_modules/css-loader/dist/cjs.js!./main.css",
386+
"",
387+
"[HMR] App is up to date.",
388+
]
389+
`;
390+
391+
exports[`hot and live reload should work with manual client setup and allow to enable hot module replacement (default): page errors 1`] = `Array []`;
392+
393+
exports[`hot and live reload should work with manual client setup and allow to enable live reload (default): console messages 1`] = `
394+
Array [
395+
"[webpack-dev-server] Live Reloading enabled.",
396+
"[webpack-dev-server] App updated. Recompiling...",
397+
"[webpack-dev-server] App updated. Reloading...",
398+
"[webpack-dev-server] Live Reloading enabled.",
399+
]
400+
`;
401+
402+
exports[`hot and live reload should work with manual client setup and allow to enable live reload (default): page errors 1`] = `Array []`;

‎test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack5

+38
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,13 @@ Array [
340340
"[webpack-dev-server] Hot Module Replacement enabled.",
341341
"[webpack-dev-server] Live Reloading enabled.",
342342
"[webpack-dev-server] App updated. Recompiling...",
343+
"[webpack-dev-server] App hot update...",
344+
"[HMR] Checking for updates on the server...",
345+
"[HMR] Updated modules:",
346+
"[HMR] - ./main.css",
347+
"[HMR] - ../../../node_modules/css-loader/dist/cjs.js!./main.css",
348+
"",
349+
"[HMR] App is up to date.",
343350
]
344351
`;
345352

@@ -350,6 +357,9 @@ Array [
350357
"[HMR] Waiting for update signal from WDS...",
351358
"[webpack-dev-server] Live Reloading enabled.",
352359
"[webpack-dev-server] App updated. Recompiling...",
360+
"[webpack-dev-server] App updated. Reloading...",
361+
"[HMR] Waiting for update signal from WDS...",
362+
"[webpack-dev-server] Live Reloading enabled.",
353363
]
354364
`;
355365

@@ -362,3 +372,31 @@ Array [
362372
`;
363373

364374
exports[`hot and live reload should work with manual client setup and allow to disable live reload (default): page errors 1`] = `Array []`;
375+
376+
exports[`hot and live reload should work with manual client setup and allow to enable hot module replacement (default): console messages 1`] = `
377+
Array [
378+
"[HMR] Waiting for update signal from WDS...",
379+
"[webpack-dev-server] Hot Module Replacement enabled.",
380+
"[webpack-dev-server] App updated. Recompiling...",
381+
"[webpack-dev-server] App hot update...",
382+
"[HMR] Checking for updates on the server...",
383+
"[HMR] Updated modules:",
384+
"[HMR] - ./main.css",
385+
"[HMR] - ../../../node_modules/css-loader/dist/cjs.js!./main.css",
386+
"",
387+
"[HMR] App is up to date.",
388+
]
389+
`;
390+
391+
exports[`hot and live reload should work with manual client setup and allow to enable hot module replacement (default): page errors 1`] = `Array []`;
392+
393+
exports[`hot and live reload should work with manual client setup and allow to enable live reload (default): console messages 1`] = `
394+
Array [
395+
"[webpack-dev-server] Live Reloading enabled.",
396+
"[webpack-dev-server] App updated. Recompiling...",
397+
"[webpack-dev-server] App updated. Reloading...",
398+
"[webpack-dev-server] Live Reloading enabled.",
399+
]
400+
`;
401+
402+
exports[`hot and live reload should work with manual client setup and allow to enable live reload (default): page errors 1`] = `Array []`;

‎test/e2e/hot-and-live-reload.test.js

+81-46
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,23 @@ describe("hot and live reload", () => {
238238
},
239239
},
240240
// TODO we still output logs from webpack, need to improve this
241+
{
242+
title:
243+
"should work with manual client setup and allow to enable hot module replacement",
244+
webpackOptions: {
245+
entry: [
246+
"webpack/hot/dev-server",
247+
`${require.resolve("../../client-src/index.js")}?hot=true`,
248+
require.resolve("../fixtures/reload-config/foo.js"),
249+
],
250+
plugins: [new webpack.HotModuleReplacementPlugin()],
251+
},
252+
options: {
253+
client: false,
254+
liveReload: false,
255+
hot: false,
256+
},
257+
},
241258
{
242259
title:
243260
"should work with manual client setup and allow to disable hot module replacement",
@@ -253,6 +270,21 @@ describe("hot and live reload", () => {
253270
hot: true,
254271
},
255272
},
273+
{
274+
title:
275+
"should work with manual client setup and allow to enable live reload",
276+
webpackOptions: {
277+
entry: [
278+
`${require.resolve("../../client-src/index.js")}?live-reload=true`,
279+
require.resolve("../fixtures/reload-config/foo.js"),
280+
],
281+
},
282+
options: {
283+
client: false,
284+
liveReload: false,
285+
hot: false,
286+
},
287+
},
256288
{
257289
title:
258290
"should work with manual client setup and allow to disable live reload",
@@ -307,14 +339,6 @@ describe("hot and live reload", () => {
307339
});
308340
});
309341

310-
const hot =
311-
typeof testDevServerOptions.hot !== "undefined"
312-
? testDevServerOptions.hot
313-
: true;
314-
const liveReload =
315-
typeof testDevServerOptions.liveReload !== "undefined"
316-
? testDevServerOptions.liveReload
317-
: true;
318342
const webSocketServerLaunched =
319343
testDevServerOptions.webSocketServer !== false;
320344

@@ -451,65 +475,76 @@ describe("hot and live reload", () => {
451475
"body { background-color: rgb(255, 0, 0); }"
452476
);
453477

454-
let doNothing = false;
478+
let waitHot =
479+
typeof testDevServerOptions.hot !== "undefined"
480+
? testDevServerOptions.hot
481+
: true;
482+
let waitLiveReload =
483+
typeof testDevServerOptions.liveReload !== "undefined"
484+
? testDevServerOptions.liveReload
485+
: true;
455486

456-
const query = mode.query || "";
457-
let allowToHotModuleReplacement = true;
487+
if (webSocketServerLaunched === false) {
488+
waitHot = false;
489+
waitLiveReload = false;
490+
}
458491

459-
if (query.indexOf("webpack-dev-server-hot=false") !== -1) {
460-
allowToHotModuleReplacement = false;
492+
if (Array.isArray(webpackOptions.entry)) {
493+
if (webpackOptions.entry.some((item) => item.includes("hot=true"))) {
494+
waitHot = true;
495+
} else if (
496+
webpackOptions.entry.some((item) => item.includes("hot=false"))
497+
) {
498+
waitHot = false;
499+
}
461500
}
462501

463-
if (
464-
Array.isArray(webpackOptions.entry) &&
465-
webpackOptions.entry.map((item) => item.includes("hot=false"))
466-
) {
467-
allowToHotModuleReplacement = false;
502+
if (Array.isArray(webpackOptions.entry)) {
503+
if (
504+
webpackOptions.entry.some((item) => item.includes("live-reload=true"))
505+
) {
506+
waitLiveReload = true;
507+
} else if (
508+
webpackOptions.entry.some((item) =>
509+
item.includes("live-reload=false")
510+
)
511+
) {
512+
waitLiveReload = false;
513+
}
468514
}
469515

470-
let allowToLiveReload = true;
516+
const query = mode.query || "";
471517

472-
if (query.indexOf("webpack-dev-server-live-reload=false") !== -1) {
473-
allowToLiveReload = false;
518+
if (query.includes("webpack-dev-server-hot=false")) {
519+
waitHot = false;
474520
}
475521

476-
if (
477-
Array.isArray(webpackOptions.entry) &&
478-
webpackOptions.entry.map((item) => item.includes("live-reload=false"))
479-
) {
480-
allowToLiveReload = false;
522+
if (query.includes("webpack-dev-server-live-reload=false")) {
523+
waitLiveReload = false;
481524
}
482525

483-
if (
484-
webSocketServerLaunched &&
485-
allowToHotModuleReplacement &&
486-
((hot && liveReload) || (hot && !liveReload))
487-
) {
526+
if (waitHot) {
488527
await page.waitForFunction(
489528
() =>
490529
getComputedStyle(document.body)["background-color"] ===
491530
"rgb(255, 0, 0)"
492531
);
493532

494533
expect(doneHotUpdate).toBe(true);
495-
} else if (webSocketServerLaunched && liveReload && allowToLiveReload) {
534+
} else if (waitLiveReload) {
496535
await page.waitForNavigation({
497536
waitUntil: "networkidle0",
498537
});
499-
} else {
500-
if (webSocketServerLaunched) {
501-
await new Promise((resolve) => {
502-
const interval = setInterval(() => {
503-
if (consoleMessages.includes(INVALID_MESSAGE)) {
504-
clearInterval(interval);
505-
506-
resolve();
507-
}
508-
}, 100);
509-
});
510-
}
538+
} else if (webSocketServerLaunched) {
539+
await new Promise((resolve) => {
540+
const interval = setInterval(() => {
541+
if (consoleMessages.includes(INVALID_MESSAGE)) {
542+
clearInterval(interval);
511543

512-
doNothing = true;
544+
resolve();
545+
}
546+
}, 100);
547+
});
513548
}
514549

515550
const backgroundColorAfter = await page.evaluate(() => {
@@ -518,7 +553,7 @@ describe("hot and live reload", () => {
518553
return getComputedStyle(body)["background-color"];
519554
});
520555

521-
if (doNothing) {
556+
if (!waitHot && !waitLiveReload) {
522557
expect(backgroundColorAfter).toEqual("rgb(0, 0, 255)");
523558
} else {
524559
expect(backgroundColorAfter).toEqual("rgb(255, 0, 0)");

0 commit comments

Comments
 (0)