Skip to content

Commit c3b532c

Browse files
alexander-akaitalexander-akait
authoredAug 16, 2024··
fix: check the platform property to determinate the target (#5269)
·
v5.2.1v5.1.0
1 parent 6509a3f commit c3b532c

File tree

8 files changed

+209
-89
lines changed

8 files changed

+209
-89
lines changed
 

‎client-src/progress.js

+87-87
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,40 @@
1-
class WebpackDevServerProgress extends HTMLElement {
2-
constructor() {
3-
super();
4-
this.attachShadow({ mode: "open" });
5-
this.maxDashOffset = -219.99078369140625;
6-
this.animationTimer = null;
1+
export function isProgressSupported() {
2+
return "customElements" in self && !!HTMLElement.prototype.attachShadow;
3+
}
4+
5+
export function defineProgressElement() {
6+
if (customElements.get("wds-progress")) {
7+
return;
78
}
89

9-
#reset() {
10-
clearTimeout(this.animationTimer);
11-
this.animationTimer = null;
10+
class WebpackDevServerProgress extends HTMLElement {
11+
constructor() {
12+
super();
13+
this.attachShadow({ mode: "open" });
14+
this.maxDashOffset = -219.99078369140625;
15+
this.animationTimer = null;
16+
}
1217

13-
const typeAttr = this.getAttribute("type")?.toLowerCase();
14-
this.type = typeAttr === "circular" ? "circular" : "linear";
18+
#reset() {
19+
clearTimeout(this.animationTimer);
20+
this.animationTimer = null;
1521

16-
const innerHTML =
17-
this.type === "circular"
18-
? WebpackDevServerProgress.#circularTemplate()
19-
: WebpackDevServerProgress.#linearTemplate();
20-
this.shadowRoot.innerHTML = innerHTML;
22+
const typeAttr = this.getAttribute("type")?.toLowerCase();
23+
this.type = typeAttr === "circular" ? "circular" : "linear";
2124

22-
this.initialProgress = Number(this.getAttribute("progress")) ?? 0;
25+
const innerHTML =
26+
this.type === "circular"
27+
? WebpackDevServerProgress.#circularTemplate()
28+
: WebpackDevServerProgress.#linearTemplate();
29+
this.shadowRoot.innerHTML = innerHTML;
2330

24-
this.#update(this.initialProgress);
25-
}
31+
this.initialProgress = Number(this.getAttribute("progress")) ?? 0;
2632

27-
static #circularTemplate() {
28-
return `
33+
this.#update(this.initialProgress);
34+
}
35+
36+
static #circularTemplate() {
37+
return `
2938
<style>
3039
:host {
3140
width: 200px;
@@ -88,10 +97,10 @@ class WebpackDevServerProgress extends HTMLElement {
8897
</text>
8998
</svg>
9099
`;
91-
}
100+
}
92101

93-
static #linearTemplate() {
94-
return `
102+
static #linearTemplate() {
103+
return `
95104
<style>
96105
:host {
97106
position: fixed;
@@ -125,80 +134,71 @@ class WebpackDevServerProgress extends HTMLElement {
125134
</style>
126135
<div id="progress"></div>
127136
`;
128-
}
129-
130-
connectedCallback() {
131-
this.#reset();
132-
}
133-
134-
static get observedAttributes() {
135-
return ["progress", "type"];
136-
}
137+
}
137138

138-
attributeChangedCallback(name, oldValue, newValue) {
139-
if (name === "progress") {
140-
this.#update(Number(newValue));
141-
} else if (name === "type") {
139+
connectedCallback() {
142140
this.#reset();
143141
}
144-
}
145142

146-
#update(percent) {
147-
const element = this.shadowRoot.querySelector("#progress");
148-
if (this.type === "circular") {
149-
const path = this.shadowRoot.querySelector("path");
150-
const value = this.shadowRoot.querySelector("#percent-value");
151-
const offset = ((100 - percent) / 100) * this.maxDashOffset;
152-
153-
path.style.strokeDashoffset = offset;
154-
value.textContent = percent;
155-
} else {
156-
element.style.width = `${percent}%`;
143+
static get observedAttributes() {
144+
return ["progress", "type"];
157145
}
158146

159-
if (percent >= 100) {
160-
this.#hide();
161-
} else if (percent > 0) {
162-
this.#show();
147+
attributeChangedCallback(name, oldValue, newValue) {
148+
if (name === "progress") {
149+
this.#update(Number(newValue));
150+
} else if (name === "type") {
151+
this.#reset();
152+
}
163153
}
164-
}
165-
166-
#show() {
167-
const element = this.shadowRoot.querySelector("#progress");
168-
element.classList.remove("hidden");
169-
}
170154

171-
#hide() {
172-
const element = this.shadowRoot.querySelector("#progress");
173-
if (this.type === "circular") {
174-
element.classList.add("disappear");
175-
element.addEventListener(
176-
"animationend",
177-
() => {
178-
element.classList.add("hidden");
179-
this.#update(0);
180-
},
181-
{ once: true },
182-
);
183-
} else if (this.type === "linear") {
184-
element.classList.add("disappear");
185-
this.animationTimer = setTimeout(() => {
186-
element.classList.remove("disappear");
187-
element.classList.add("hidden");
188-
element.style.width = "0%";
189-
this.animationTimer = null;
190-
}, 800);
155+
#update(percent) {
156+
const element = this.shadowRoot.querySelector("#progress");
157+
if (this.type === "circular") {
158+
const path = this.shadowRoot.querySelector("path");
159+
const value = this.shadowRoot.querySelector("#percent-value");
160+
const offset = ((100 - percent) / 100) * this.maxDashOffset;
161+
162+
path.style.strokeDashoffset = offset;
163+
value.textContent = percent;
164+
} else {
165+
element.style.width = `${percent}%`;
166+
}
167+
168+
if (percent >= 100) {
169+
this.#hide();
170+
} else if (percent > 0) {
171+
this.#show();
172+
}
191173
}
192-
}
193-
}
194174

195-
export function isProgressSupported() {
196-
return "customElements" in window && !!HTMLElement.prototype.attachShadow;
197-
}
175+
#show() {
176+
const element = this.shadowRoot.querySelector("#progress");
177+
element.classList.remove("hidden");
178+
}
198179

199-
export function defineProgressElement() {
200-
if (customElements.get("wds-progress")) {
201-
return;
180+
#hide() {
181+
const element = this.shadowRoot.querySelector("#progress");
182+
if (this.type === "circular") {
183+
element.classList.add("disappear");
184+
element.addEventListener(
185+
"animationend",
186+
() => {
187+
element.classList.add("hidden");
188+
this.#update(0);
189+
},
190+
{ once: true },
191+
);
192+
} else if (this.type === "linear") {
193+
element.classList.add("disappear");
194+
this.animationTimer = setTimeout(() => {
195+
element.classList.remove("disappear");
196+
element.classList.add("hidden");
197+
element.style.width = "0%";
198+
this.animationTimer = null;
199+
}, 800);
200+
}
201+
}
202202
}
203203

204204
customElements.define("wds-progress", WebpackDevServerProgress);

‎lib/Server.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -560,7 +560,11 @@ class Server {
560560
* @returns bool
561561
*/
562562
static isWebTarget(compiler) {
563-
// TODO improve for the next major version - we should store `web` and other targets in `compiler.options.environment`
563+
if (compiler.platform && compiler.platform.web) {
564+
return compiler.platform.web;
565+
}
566+
567+
// TODO improve for the next major version and keep only `webTargets` to fallback for old versions
564568
if (
565569
compiler.options.externalsPresets &&
566570
compiler.options.externalsPresets.web
@@ -580,6 +584,7 @@ class Server {
580584
"webworker",
581585
"electron-preload",
582586
"electron-renderer",
587+
"nwjs",
583588
"node-webkit",
584589
// eslint-disable-next-line no-undefined
585590
undefined,

‎test/e2e/__snapshots__/target.test.js.snap.webpack5

+13
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,16 @@ exports[`target should work using "webworker" target: console messages 1`] = `
7171
`;
7272

7373
exports[`target should work using "webworker" target: page errors 1`] = `[]`;
74+
75+
exports[`target should work using multi compiler mode with \`web\` and \`webworker\` targets: console messages 1`] = `
76+
[
77+
"[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
78+
"[HMR] Waiting for update signal from WDS...",
79+
"[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
80+
"[HMR] Waiting for update signal from WDS...",
81+
"Worker said: I'm working before postMessage",
82+
"Worker said: Message sent: message",
83+
]
84+
`;
85+
86+
exports[`target should work using multi compiler mode with \`web\` and \`webworker\` targets: page errors 1`] = `[]`;

‎test/e2e/target.test.js

+41
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
const webpack = require("webpack");
44
const Server = require("../../lib/Server");
55
const config = require("../fixtures/client-config/webpack.config");
6+
const workerConfig = require("../fixtures/worker-config/webpack.config");
67
const runBrowser = require("../helpers/run-browser");
78
const port = require("../ports-map").target;
89

@@ -89,4 +90,44 @@ describe("target", () => {
8990
}
9091
});
9192
}
93+
94+
it("should work using multi compiler mode with `web` and `webworker` targets", async () => {
95+
const compiler = webpack(workerConfig);
96+
const devServerOptions = {
97+
port,
98+
};
99+
const server = new Server(devServerOptions, compiler);
100+
101+
await server.start();
102+
103+
const { page, browser } = await runBrowser();
104+
105+
try {
106+
const pageErrors = [];
107+
const consoleMessages = [];
108+
109+
page
110+
.on("console", (message) => {
111+
consoleMessages.push(message);
112+
})
113+
.on("pageerror", (error) => {
114+
pageErrors.push(error);
115+
});
116+
117+
await page.goto(`http://127.0.0.1:${port}/`, {
118+
waitUntil: "networkidle0",
119+
});
120+
121+
expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
122+
"console messages",
123+
);
124+
125+
expect(pageErrors).toMatchSnapshot("page errors");
126+
} catch (error) {
127+
throw error;
128+
} finally {
129+
await browser.close();
130+
await server.stop();
131+
}
132+
});
92133
});

‎test/fixtures/client-config/webpack.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
const HTMLGeneratorPlugin = require("../../helpers/html-generator-plugin");
44

55
module.exports = {
6-
devtool: "eval-nosources-cheap-source-map",
6+
devtool: false,
77
mode: "development",
88
context: __dirname,
99
stats: "none",

‎test/fixtures/worker-config/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
"use strict";
2+
3+
const myWorker = new Worker("./worker.js");
4+
5+
myWorker.onmessage = (event) => {
6+
console.log(`Worker said: ${event.data}`);
7+
};
8+
9+
myWorker.postMessage("message");

‎test/fixtures/worker-config/webpack.config.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use strict";
2+
3+
const HTMLGeneratorPlugin = require("../../helpers/html-generator-plugin");
4+
5+
module.exports = [
6+
{
7+
name: "app",
8+
dependencies: ["worker"],
9+
devtool: false,
10+
target: "web",
11+
entry: "./index.js",
12+
mode: "development",
13+
context: __dirname,
14+
stats: "none",
15+
output: {
16+
path: "/",
17+
},
18+
infrastructureLogging: {
19+
level: "info",
20+
stream: {
21+
write: () => {},
22+
},
23+
},
24+
plugins: [new HTMLGeneratorPlugin()],
25+
},
26+
{
27+
name: "worker",
28+
devtool: false,
29+
target: "webworker",
30+
entry: "./worker.js",
31+
mode: "development",
32+
context: __dirname,
33+
stats: "none",
34+
output: {
35+
path: "/",
36+
filename: "worker.js",
37+
},
38+
infrastructureLogging: {
39+
level: "info",
40+
stream: {
41+
write: () => {},
42+
},
43+
},
44+
},
45+
];

‎test/fixtures/worker-config/worker.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use strict";
2+
3+
postMessage("I'm working before postMessage");
4+
5+
onmessage = (event) => {
6+
postMessage(`Message sent: ${event.data}`);
7+
};

0 commit comments

Comments
 (0)
Please sign in to comment.