Skip to content

Commit 1768d6b

Browse files
alexander-akaitalexander-akait
authored
fix: initial reloading for lazy compilation (#3662)
1 parent 4f5bab1 commit 1768d6b

File tree

8 files changed

+140
-65
lines changed

8 files changed

+140
-65
lines changed

‎client-src/index.js‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* global __resourceQuery */
1+
/* global __resourceQuery, __webpack_hash__ */
22

33
import webpackHotLog from "webpack/hot/log.js";
44
import stripAnsi from "./modules/strip-ansi/index.js";
@@ -10,11 +10,16 @@ import sendMessage from "./utils/sendMessage.js";
1010
import reloadApp from "./utils/reloadApp.js";
1111
import createSocketURL from "./utils/createSocketURL.js";
1212

13-
const status = { isUnloading: false, currentHash: "" };
13+
const status = {
14+
isUnloading: false,
15+
// TODO Workaround for webpack v4, `__webpack_hash__` is not replaced without HotModuleReplacement
16+
// eslint-disable-next-line camelcase
17+
currentHash: typeof __webpack_hash__ !== "undefined" ? __webpack_hash__ : "",
18+
};
19+
// console.log(__webpack_hash__);
1420
const options = {
1521
hot: false,
1622
liveReload: false,
17-
initial: true,
1823
progress: false,
1924
overlay: false,
2025
};
@@ -110,10 +115,6 @@ const onSocketMessage = {
110115
hide();
111116
}
112117

113-
if (options.initial) {
114-
return (options.initial = false);
115-
}
116-
117118
reloadApp(options, status);
118119
},
119120
// TODO: remove in v5 in favor of 'static-changed'
@@ -157,10 +158,6 @@ const onSocketMessage = {
157158
show(warnings, "warnings");
158159
}
159160

160-
if (options.initial) {
161-
return (options.initial = false);
162-
}
163-
164161
reloadApp(options, status);
165162
},
166163
errors(errors) {
@@ -184,8 +181,6 @@ const onSocketMessage = {
184181
if (needShowOverlay) {
185182
show(errors, "errors");
186183
}
187-
188-
options.initial = false;
189184
},
190185
error(error) {
191186
log.error(error);

‎client-src/utils/reloadApp.js‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
1+
/* global __webpack_hash__ */
2+
13
import hotEmitter from "webpack/hot/emitter.js";
24
import { log } from "./log.js";
35

4-
function reloadApp({ hot, liveReload }, { isUnloading, currentHash }) {
5-
if (isUnloading) {
6+
function reloadApp({ hot, liveReload }, status) {
7+
if (status.isUnloading) {
8+
return;
9+
}
10+
11+
// TODO Workaround for webpack v4, `__webpack_hash__` is not replaced without HotModuleReplacement plugin
12+
const webpackHash =
13+
// eslint-disable-next-line camelcase
14+
typeof __webpack_hash__ !== "undefined"
15+
? // eslint-disable-next-line camelcase
16+
__webpack_hash__
17+
: status.previousHash || "";
18+
const isInitial = status.currentHash.indexOf(webpackHash) === 0;
19+
20+
if (isInitial) {
21+
const isLegacyInitial =
22+
webpackHash === "" && hot === false && liveReload === true;
23+
24+
if (isLegacyInitial) {
25+
status.previousHash = status.currentHash;
26+
}
27+
628
return;
729
}
830

@@ -22,11 +44,11 @@ function reloadApp({ hot, liveReload }, { isUnloading, currentHash }) {
2244
if (hot && allowToHot) {
2345
log.info("App hot update...");
2446

25-
hotEmitter.emit("webpackHotUpdate", currentHash);
47+
hotEmitter.emit("webpackHotUpdate", status.currentHash);
2648

2749
if (typeof self !== "undefined" && self.window) {
2850
// broadcast update to window
29-
self.postMessage(`webpackHotUpdate${currentHash}`, "*");
51+
self.postMessage(`webpackHotUpdate${status.currentHash}`, "*");
3052
}
3153
}
3254
// allow refreshing the page only if liveReload isn't disabled

‎test/client/__snapshots__/index.test.js.snap.webpack4‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ exports[`index should run onSocketMessage.ok 1`] = `"Ok"`;
2323
exports[`index should run onSocketMessage.ok 2`] = `
2424
Object {
2525
"hot": false,
26-
"initial": false,
2726
"liveReload": false,
2827
"logging": "info",
2928
"overlay": false,

‎test/client/__snapshots__/index.test.js.snap.webpack5‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ exports[`index should run onSocketMessage.ok 1`] = `"Ok"`;
2323
exports[`index should run onSocketMessage.ok 2`] = `
2424
Object {
2525
"hot": false,
26-
"initial": false,
2726
"liveReload": false,
2827
"logging": "info",
2928
"overlay": false,

‎test/client/index.test.js‎

Lines changed: 35 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ describe("index", () => {
1616

1717
beforeEach(() => {
1818
global.__resourceQuery = "foo";
19+
global.__webpack_hash__ = "mock-hash";
1920

2021
// log
2122
jest.setMock("../../client-src/utils/log.js", {
@@ -61,10 +62,8 @@ describe("index", () => {
6162

6263
// issue: https://github.com/jsdom/jsdom/issues/2112
6364
delete window.location;
64-
window.location = {
65-
...locationValue,
66-
reload: jest.fn(),
67-
};
65+
66+
window.location = { ...locationValue, reload: jest.fn() };
6867

6968
require("../../client-src");
7069
onSocketMessage = socket.mock.calls[0][1];
@@ -83,23 +82,27 @@ describe("index", () => {
8382

8483
test("should run onSocketMessage.hot", () => {
8584
onSocketMessage.hot();
85+
8686
expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
8787
});
8888

8989
test("should run onSocketMessage.liveReload", () => {
9090
onSocketMessage.liveReload();
91+
9192
expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
9293
});
9394

9495
test("should run onSocketMessage['still-ok']", () => {
9596
onSocketMessage["still-ok"]();
97+
9698
expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
9799
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
98100
expect(overlay.hide).not.toBeCalled();
99101

100102
// change flags
101103
onSocketMessage.overlay(true);
102104
onSocketMessage["still-ok"]();
105+
103106
expect(overlay.hide).toBeCalled();
104107
});
105108

@@ -109,6 +112,7 @@ describe("index", () => {
109112
msg: "mock-msg",
110113
percent: "12",
111114
});
115+
112116
expect(log.log.info).not.toBeCalled();
113117
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
114118

@@ -117,6 +121,7 @@ describe("index", () => {
117121
msg: "mock-msg",
118122
percent: "12",
119123
});
124+
120125
expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
121126
});
122127

@@ -127,6 +132,7 @@ describe("index", () => {
127132
percent: "12",
128133
pluginName: "mock-plugin",
129134
});
135+
130136
expect(log.log.info).not.toBeCalled();
131137
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
132138

@@ -136,27 +142,24 @@ describe("index", () => {
136142
percent: "12",
137143
pluginName: "mock-plugin",
138144
});
145+
139146
expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
140147
});
141148

142149
test("should run onSocketMessage.ok", () => {
143-
{
144-
const res = onSocketMessage.ok();
145-
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
146-
expect(res).toEqual(false);
147-
}
150+
onSocketMessage.ok();
148151

149-
// change flags
150-
{
151-
onSocketMessage.errors([]);
152-
onSocketMessage.hash("mock-hash");
152+
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
153+
154+
onSocketMessage.errors([]);
155+
onSocketMessage.hash("mock-hash");
156+
157+
const res = onSocketMessage.ok();
153158

154-
const res = onSocketMessage.ok();
155-
expect(reloadApp).toBeCalled();
156-
expect(reloadApp.mock.calls[0][0]).toMatchSnapshot();
157-
// eslint-disable-next-line no-undefined
158-
expect(res).toEqual(undefined);
159-
}
159+
expect(reloadApp).toBeCalled();
160+
expect(reloadApp.mock.calls[0][0]).toMatchSnapshot();
161+
// eslint-disable-next-line no-undefined
162+
expect(res).toEqual(undefined);
160163
});
161164

162165
test("should run onSocketMessage['content-changed']", () => {
@@ -188,40 +191,29 @@ describe("index", () => {
188191
});
189192

190193
test("should run onSocketMessage.warnings", () => {
191-
{
192-
const res = onSocketMessage.warnings([
193-
"warn1",
194-
"\u001B[4mwarn2\u001B[0m",
195-
"warn3",
196-
]);
197-
expect(res).toEqual(false);
198-
199-
expect(log.log.warn.mock.calls[0][0]).toMatchSnapshot();
200-
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
201-
expect(log.log.warn.mock.calls.splice(1)).toMatchSnapshot();
202-
}
194+
onSocketMessage.warnings(["warn1", "\u001B[4mwarn2\u001B[0m", "warn3"]);
195+
196+
expect(log.log.warn.mock.calls[0][0]).toMatchSnapshot();
197+
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
198+
expect(log.log.warn.mock.calls.splice(1)).toMatchSnapshot();
203199

204200
// change flags
205-
{
206-
onSocketMessage.overlay({
207-
warnings: true,
208-
});
209-
const res = onSocketMessage.warnings([]);
210-
// eslint-disable-next-line no-undefined
211-
expect(res).toEqual(undefined);
201+
onSocketMessage.overlay({ warnings: true });
202+
onSocketMessage.warnings([]);
212203

213-
expect(overlay.show).toBeCalled();
214-
expect(reloadApp).toBeCalled();
215-
}
204+
expect(overlay.show).toBeCalled();
205+
expect(reloadApp).toBeCalled();
216206
});
217207

218208
test("should run onSocketMessage.error", () => {
219209
onSocketMessage.error("error!!");
210+
220211
expect(log.log.error.mock.calls[0][0]).toMatchSnapshot();
221212
});
222213

223214
test("should run onSocketMessage.close", () => {
224215
onSocketMessage.close();
216+
225217
expect(log.log.error.mock.calls[0][0]).toMatchSnapshot();
226218
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
227219
});
@@ -230,6 +222,7 @@ describe("index", () => {
230222
// enabling hot
231223
onSocketMessage.hot();
232224
onSocketMessage.close();
225+
233226
expect(log.log.error.mock.calls[0][0]).toMatchSnapshot();
234227
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
235228
});
@@ -238,6 +231,7 @@ describe("index", () => {
238231
// enabling liveReload
239232
onSocketMessage.liveReload();
240233
onSocketMessage.close();
234+
241235
expect(log.log.error.mock.calls[0][0]).toMatchSnapshot();
242236
expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
243237
});

‎test/client/utils/reloadApp.test.js‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ describe("'reloadApp' function", () => {
1010
let locationValue;
1111

1212
beforeEach(() => {
13+
global.__webpack_hash__ = "mock-hash";
14+
1315
locationValue = self.location;
1416

1517
self.postMessage = jest.fn();
@@ -38,10 +40,19 @@ describe("'reloadApp' function", () => {
3840
});
3941

4042
test("should do nothing when isUnloading is true or hotReload is false", () => {
41-
// eslint-disable-next-line no-undefined
42-
expect(reloadApp({}, { isUnloading: false })).toEqual(undefined);
43+
expect(
44+
reloadApp({}, { isUnloading: false, currentHash: "mock-hash" })
45+
).toEqual(
46+
// eslint-disable-next-line no-undefined
47+
undefined
48+
);
4349
expect(log.getLogger.mock.results[0].value.info).not.toBeCalled();
44-
expect(reloadApp({ hotReload: false }, { isUnloading: false })).toEqual(
50+
expect(
51+
reloadApp(
52+
{ hotReload: false },
53+
{ isUnloading: false, currentHash: "other-mock-hash" }
54+
)
55+
).toEqual(
4556
// eslint-disable-next-line no-undefined
4657
undefined
4758
);
@@ -75,7 +86,7 @@ describe("'reloadApp' function", () => {
7586

7687
reloadApp(
7788
{ hot: false, hotReload: true, liveReload: true },
78-
{ isUnloading: false }
89+
{ isUnloading: false, currentHash: "other-mock-hash" }
7990
);
8091

8192
setTimeout(() => {
@@ -90,7 +101,7 @@ describe("'reloadApp' function", () => {
90101
test("should run liveReload when protocol is http:", (done) => {
91102
reloadApp(
92103
{ hot: false, hotReload: true, liveReload: true },
93-
{ isUnloading: false }
104+
{ isUnloading: false, currentHash: "other-mock-hash" }
94105
);
95106

96107
setTimeout(() => {

0 commit comments

Comments
 (0)