webpack-dev-server 4.7.0 → 4.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/client/clients/SockJSClient.js +5 -1
- package/client/index.js +50 -2
- package/client/overlay.js +38 -3
- package/client/socket.js +14 -2
- package/client/utils/createSocketURL.js +71 -4
- package/client/utils/getCurrentScriptSource.js +3 -0
- package/client/utils/parseURL.js +17 -19
- package/client/utils/reloadApp.js +15 -2
- package/client/utils/sendMessage.js +1 -1
- package/package.json +2 -2
|
@@ -52,7 +52,11 @@ var SockJSClient = /*#__PURE__*/function () {
|
|
|
52
52
|
}, {
|
|
53
53
|
key: "onMessage",
|
|
54
54
|
value: function onMessage(f) {
|
|
55
|
-
this.sock.onmessage =
|
|
55
|
+
this.sock.onmessage =
|
|
56
|
+
/**
|
|
57
|
+
* @param {Error & { data: string }} e
|
|
58
|
+
*/
|
|
59
|
+
function (e) {
|
|
56
60
|
f(e.data);
|
|
57
61
|
};
|
|
58
62
|
}
|
package/client/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/* global __resourceQuery, __webpack_hash__ */
|
|
2
|
+
/// <reference types="webpack/module" />
|
|
2
3
|
import webpackHotLog from "webpack/hot/log.js";
|
|
3
4
|
import stripAnsi from "./modules/strip-ansi/index.js";
|
|
4
5
|
import parseURL from "./utils/parseURL.js";
|
|
@@ -8,12 +9,35 @@ import { log, setLogLevel } from "./utils/log.js";
|
|
|
8
9
|
import sendMessage from "./utils/sendMessage.js";
|
|
9
10
|
import reloadApp from "./utils/reloadApp.js";
|
|
10
11
|
import createSocketURL from "./utils/createSocketURL.js";
|
|
12
|
+
/**
|
|
13
|
+
* @typedef {Object} Options
|
|
14
|
+
* @property {boolean} hot
|
|
15
|
+
* @property {boolean} liveReload
|
|
16
|
+
* @property {boolean} progress
|
|
17
|
+
* @property {boolean | { warnings?: boolean, errors?: boolean }} overlay
|
|
18
|
+
* @property {string} [logging]
|
|
19
|
+
* @property {number} [reconnect]
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* @typedef {Object} Status
|
|
24
|
+
* @property {boolean} isUnloading
|
|
25
|
+
* @property {string} currentHash
|
|
26
|
+
* @property {string} [previousHash]
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* @type {Status}
|
|
31
|
+
*/
|
|
32
|
+
|
|
11
33
|
var status = {
|
|
12
34
|
isUnloading: false,
|
|
13
35
|
// TODO Workaround for webpack v4, `__webpack_hash__` is not replaced without HotModuleReplacement
|
|
14
36
|
// eslint-disable-next-line camelcase
|
|
15
37
|
currentHash: typeof __webpack_hash__ !== "undefined" ? __webpack_hash__ : ""
|
|
16
38
|
};
|
|
39
|
+
/** @type {Options} */
|
|
40
|
+
|
|
17
41
|
var options = {
|
|
18
42
|
hot: false,
|
|
19
43
|
liveReload: false,
|
|
@@ -92,6 +116,10 @@ var onSocketMessage = {
|
|
|
92
116
|
status.currentHash = _hash;
|
|
93
117
|
},
|
|
94
118
|
logging: setAllLogLevel,
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* @param {boolean} value
|
|
122
|
+
*/
|
|
95
123
|
overlay: function overlay(value) {
|
|
96
124
|
if (typeof document === "undefined") {
|
|
97
125
|
return;
|
|
@@ -99,6 +127,10 @@ var onSocketMessage = {
|
|
|
99
127
|
|
|
100
128
|
options.overlay = value;
|
|
101
129
|
},
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* @param {number} value
|
|
133
|
+
*/
|
|
102
134
|
reconnect: function reconnect(value) {
|
|
103
135
|
if (parsedResourceQuery.reconnect === "false") {
|
|
104
136
|
return;
|
|
@@ -106,9 +138,17 @@ var onSocketMessage = {
|
|
|
106
138
|
|
|
107
139
|
options.reconnect = value;
|
|
108
140
|
},
|
|
109
|
-
|
|
110
|
-
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* @param {boolean} value
|
|
144
|
+
*/
|
|
145
|
+
progress: function progress(value) {
|
|
146
|
+
options.progress = value;
|
|
111
147
|
},
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* @param {{ pluginName?: string, percent: number, msg: string }} data
|
|
151
|
+
*/
|
|
112
152
|
"progress-update": function progressUpdate(data) {
|
|
113
153
|
if (options.progress) {
|
|
114
154
|
log.info("".concat(data.pluginName ? "[".concat(data.pluginName, "] ") : "").concat(data.percent, "% - ").concat(data.msg, "."));
|
|
@@ -135,10 +175,18 @@ var onSocketMessage = {
|
|
|
135
175
|
reloadApp(options, status);
|
|
136
176
|
},
|
|
137
177
|
// TODO: remove in v5 in favor of 'static-changed'
|
|
178
|
+
|
|
179
|
+
/**
|
|
180
|
+
* @param {string} file
|
|
181
|
+
*/
|
|
138
182
|
"content-changed": function contentChanged(file) {
|
|
139
183
|
log.info("".concat(file ? "\"".concat(file, "\"") : "Content", " from static directory was changed. Reloading..."));
|
|
140
184
|
self.location.reload();
|
|
141
185
|
},
|
|
186
|
+
|
|
187
|
+
/**
|
|
188
|
+
* @param {string} file
|
|
189
|
+
*/
|
|
142
190
|
"static-changed": function staticChanged(file) {
|
|
143
191
|
log.info("".concat(file ? "\"".concat(file, "\"") : "Content", " from static directory was changed. Reloading..."));
|
|
144
192
|
self.location.reload();
|
package/client/overlay.js
CHANGED
|
@@ -14,8 +14,14 @@ var colors = {
|
|
|
14
14
|
lightgrey: "EBE7E3",
|
|
15
15
|
darkgrey: "6D7891"
|
|
16
16
|
};
|
|
17
|
+
/** @type {HTMLIFrameElement | null | undefined} */
|
|
18
|
+
|
|
17
19
|
var iframeContainerElement;
|
|
20
|
+
/** @type {HTMLDivElement | null | undefined} */
|
|
21
|
+
|
|
18
22
|
var containerElement;
|
|
23
|
+
/** @type {Array<(element: HTMLDivElement) => void>} */
|
|
24
|
+
|
|
19
25
|
var onLoadQueue = [];
|
|
20
26
|
ansiHTML.setColors(colors);
|
|
21
27
|
|
|
@@ -34,7 +40,11 @@ function createContainer() {
|
|
|
34
40
|
iframeContainerElement.style.zIndex = 9999999999;
|
|
35
41
|
|
|
36
42
|
iframeContainerElement.onload = function () {
|
|
37
|
-
containerElement =
|
|
43
|
+
containerElement =
|
|
44
|
+
/** @type {Document} */
|
|
45
|
+
|
|
46
|
+
/** @type {HTMLIFrameElement} */
|
|
47
|
+
iframeContainerElement.contentDocument.createElement("div");
|
|
38
48
|
containerElement.id = "webpack-dev-server-client-overlay-div";
|
|
39
49
|
containerElement.style.position = "fixed";
|
|
40
50
|
containerElement.style.boxSizing = "border-box";
|
|
@@ -62,7 +72,8 @@ function createContainer() {
|
|
|
62
72
|
closeButtonElement.style.fontWeight = "bold";
|
|
63
73
|
closeButtonElement.style.color = "white";
|
|
64
74
|
closeButtonElement.style.cursor = "pointer";
|
|
65
|
-
closeButtonElement.style.cssFloat = "right";
|
|
75
|
+
closeButtonElement.style.cssFloat = "right"; // @ts-ignore
|
|
76
|
+
|
|
66
77
|
closeButtonElement.style.styleFloat = "right";
|
|
67
78
|
closeButtonElement.addEventListener("click", function () {
|
|
68
79
|
hide();
|
|
@@ -71,16 +82,27 @@ function createContainer() {
|
|
|
71
82
|
containerElement.appendChild(closeButtonElement);
|
|
72
83
|
containerElement.appendChild(document.createElement("br"));
|
|
73
84
|
containerElement.appendChild(document.createElement("br"));
|
|
85
|
+
/** @type {Document} */
|
|
86
|
+
|
|
87
|
+
/** @type {HTMLIFrameElement} */
|
|
74
88
|
iframeContainerElement.contentDocument.body.appendChild(containerElement);
|
|
75
89
|
onLoadQueue.forEach(function (onLoad) {
|
|
76
|
-
onLoad(
|
|
90
|
+
onLoad(
|
|
91
|
+
/** @type {HTMLDivElement} */
|
|
92
|
+
containerElement);
|
|
77
93
|
});
|
|
78
94
|
onLoadQueue = [];
|
|
95
|
+
/** @type {HTMLIFrameElement} */
|
|
96
|
+
|
|
79
97
|
iframeContainerElement.onload = null;
|
|
80
98
|
};
|
|
81
99
|
|
|
82
100
|
document.body.appendChild(iframeContainerElement);
|
|
83
101
|
}
|
|
102
|
+
/**
|
|
103
|
+
* @param {(element: HTMLDivElement) => void} callback
|
|
104
|
+
*/
|
|
105
|
+
|
|
84
106
|
|
|
85
107
|
function ensureOverlayExists(callback) {
|
|
86
108
|
if (containerElement) {
|
|
@@ -109,6 +131,12 @@ function hide() {
|
|
|
109
131
|
iframeContainerElement = null;
|
|
110
132
|
containerElement = null;
|
|
111
133
|
}
|
|
134
|
+
/**
|
|
135
|
+
* @param {string} type
|
|
136
|
+
* @param {string | { file?: string, moduleName?: string, loc?: string, message?: string }} item
|
|
137
|
+
* @returns {{ header: string, body: string }}
|
|
138
|
+
*/
|
|
139
|
+
|
|
112
140
|
|
|
113
141
|
function formatProblem(type, item) {
|
|
114
142
|
var header = type === "warning" ? "WARNING" : "ERROR";
|
|
@@ -131,6 +159,11 @@ function formatProblem(type, item) {
|
|
|
131
159
|
};
|
|
132
160
|
} // Compilation with errors (e.g. syntax error or missing modules).
|
|
133
161
|
|
|
162
|
+
/**
|
|
163
|
+
* @param {string} type
|
|
164
|
+
* @param {Array<string | { file?: string, moduleName?: string, loc?: string, message?: string }>} messages
|
|
165
|
+
*/
|
|
166
|
+
|
|
134
167
|
|
|
135
168
|
function show(type, messages) {
|
|
136
169
|
ensureOverlayExists(function () {
|
|
@@ -154,6 +187,8 @@ function show(type, messages) {
|
|
|
154
187
|
entryElement.appendChild(messageTextNode);
|
|
155
188
|
entryElement.appendChild(document.createElement("br"));
|
|
156
189
|
entryElement.appendChild(document.createElement("br"));
|
|
190
|
+
/** @type {HTMLDivElement} */
|
|
191
|
+
|
|
157
192
|
containerElement.appendChild(entryElement);
|
|
158
193
|
});
|
|
159
194
|
});
|
package/client/socket.js
CHANGED
|
@@ -11,12 +11,20 @@ typeof __webpack_dev_server_client__ !== "undefined" ? typeof __webpack_dev_serv
|
|
|
11
11
|
var retries = 0;
|
|
12
12
|
var maxRetries = 10;
|
|
13
13
|
var client = null;
|
|
14
|
+
/**
|
|
15
|
+
* @param {string} url
|
|
16
|
+
* @param {{ [handler: string]: (data?: any, params?: any) => any }} handlers
|
|
17
|
+
* @param {number} [reconnect]
|
|
18
|
+
*/
|
|
14
19
|
|
|
15
20
|
var socket = function initSocket(url, handlers, reconnect) {
|
|
16
21
|
client = new Client(url);
|
|
17
22
|
client.onOpen(function () {
|
|
18
23
|
retries = 0;
|
|
19
|
-
|
|
24
|
+
|
|
25
|
+
if (typeof reconnect !== "undefined") {
|
|
26
|
+
maxRetries = reconnect;
|
|
27
|
+
}
|
|
20
28
|
});
|
|
21
29
|
client.onClose(function () {
|
|
22
30
|
if (retries === 0) {
|
|
@@ -38,7 +46,11 @@ var socket = function initSocket(url, handlers, reconnect) {
|
|
|
38
46
|
}, retryInMs);
|
|
39
47
|
}
|
|
40
48
|
});
|
|
41
|
-
client.onMessage(
|
|
49
|
+
client.onMessage(
|
|
50
|
+
/**
|
|
51
|
+
* @param {any} data
|
|
52
|
+
*/
|
|
53
|
+
function (data) {
|
|
42
54
|
var message = JSON.parse(data);
|
|
43
55
|
|
|
44
56
|
if (handlers[message.type]) {
|
|
@@ -1,9 +1,76 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @param {{ protocol?: string, auth?: string, hostname?: string, port?: string, pathname?: string, search?: string, hash?: string, slashes?: boolean }} objURL
|
|
3
|
+
* @returns {string}
|
|
4
|
+
*/
|
|
5
|
+
function format(objURL) {
|
|
6
|
+
var protocol = objURL.protocol || "";
|
|
7
|
+
|
|
8
|
+
if (protocol && protocol.substr(-1) !== ":") {
|
|
9
|
+
protocol += ":";
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
var auth = objURL.auth || "";
|
|
13
|
+
|
|
14
|
+
if (auth) {
|
|
15
|
+
auth = encodeURIComponent(auth);
|
|
16
|
+
auth = auth.replace(/%3A/i, ":");
|
|
17
|
+
auth += "@";
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
var host = "";
|
|
21
|
+
|
|
22
|
+
if (objURL.hostname) {
|
|
23
|
+
host = auth + (objURL.hostname.indexOf(":") === -1 ? objURL.hostname : "[".concat(objURL.hostname, "]"));
|
|
24
|
+
|
|
25
|
+
if (objURL.port) {
|
|
26
|
+
host += ":".concat(objURL.port);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
var pathname = objURL.pathname || "";
|
|
31
|
+
|
|
32
|
+
if (objURL.slashes) {
|
|
33
|
+
host = "//".concat(host || "");
|
|
34
|
+
|
|
35
|
+
if (pathname && pathname.charAt(0) !== "/") {
|
|
36
|
+
pathname = "/".concat(pathname);
|
|
37
|
+
}
|
|
38
|
+
} else if (!host) {
|
|
39
|
+
host = "";
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
var search = objURL.search || "";
|
|
43
|
+
|
|
44
|
+
if (search && search.charAt(0) !== "?") {
|
|
45
|
+
search = "?".concat(search);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
var hash = objURL.hash || "";
|
|
49
|
+
|
|
50
|
+
if (hash && hash.charAt(0) !== "#") {
|
|
51
|
+
hash = "#".concat(hash);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
pathname = pathname.replace(/[?#]/g,
|
|
55
|
+
/**
|
|
56
|
+
* @param {string} match
|
|
57
|
+
* @returns {string}
|
|
58
|
+
*/
|
|
59
|
+
function (match) {
|
|
60
|
+
return encodeURIComponent(match);
|
|
61
|
+
});
|
|
62
|
+
search = search.replace("#", "%23");
|
|
63
|
+
return "".concat(protocol).concat(host).concat(pathname).concat(search).concat(hash);
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* @param {URL & { fromCurrentScript?: boolean }} parsedURL
|
|
67
|
+
* @returns {string}
|
|
68
|
+
*/
|
|
69
|
+
|
|
3
70
|
|
|
4
71
|
function createSocketURL(parsedURL) {
|
|
5
72
|
var hostname = parsedURL.hostname; // Node.js module parses it as `::`
|
|
6
|
-
// `new URL(urlString, [
|
|
73
|
+
// `new URL(urlString, [baseURLString])` parses it as '[::]'
|
|
7
74
|
|
|
8
75
|
var isInAddrAny = hostname === "0.0.0.0" || hostname === "::" || hostname === "[::]"; // why do we need this check?
|
|
9
76
|
// hostname n/a for file protocol (example, when using electron, ionic)
|
|
@@ -57,7 +124,7 @@ function createSocketURL(parsedURL) {
|
|
|
57
124
|
socketURLPathname = parsedURL.pathname;
|
|
58
125
|
}
|
|
59
126
|
|
|
60
|
-
return
|
|
127
|
+
return format({
|
|
61
128
|
protocol: socketURLProtocol,
|
|
62
129
|
auth: socketURLAuth,
|
|
63
130
|
hostname: socketURLHostname,
|
package/client/utils/parseURL.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import url from "url";
|
|
2
1
|
import getCurrentScriptSource from "./getCurrentScriptSource.js";
|
|
2
|
+
/**
|
|
3
|
+
* @param {string} resourceQuery
|
|
4
|
+
* @returns {{ [key: string]: string | boolean }}
|
|
5
|
+
*/
|
|
3
6
|
|
|
4
7
|
function parseURL(resourceQuery) {
|
|
8
|
+
/** @type {{ [key: string]: string }} */
|
|
5
9
|
var options = {};
|
|
6
10
|
|
|
7
11
|
if (typeof resourceQuery === "string" && resourceQuery !== "") {
|
|
@@ -14,25 +18,19 @@ function parseURL(resourceQuery) {
|
|
|
14
18
|
} else {
|
|
15
19
|
// Else, get the url from the <script> this file was called with.
|
|
16
20
|
var scriptSource = getCurrentScriptSource();
|
|
21
|
+
var scriptSourceURL;
|
|
22
|
+
|
|
23
|
+
try {
|
|
24
|
+
// The placeholder `baseURL` with `window.location.href`,
|
|
25
|
+
// is to allow parsing of path-relative or protocol-relative URLs,
|
|
26
|
+
// and will have no effect if `scriptSource` is a fully valid URL.
|
|
27
|
+
scriptSourceURL = new URL(scriptSource, self.location.href);
|
|
28
|
+
} catch (error) {// URL parsing failed, do nothing.
|
|
29
|
+
// We will still proceed to see if we can recover using `resourceQuery`
|
|
30
|
+
}
|
|
17
31
|
|
|
18
|
-
if (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
try {
|
|
22
|
-
// The placeholder `baseURL` with `window.location.href`,
|
|
23
|
-
// is to allow parsing of path-relative or protocol-relative URLs,
|
|
24
|
-
// and will have no effect if `scriptSource` is a fully valid URL.
|
|
25
|
-
scriptSourceURL = new URL(scriptSource, self.location.href);
|
|
26
|
-
} catch (error) {// URL parsing failed, do nothing.
|
|
27
|
-
// We will still proceed to see if we can recover using `resourceQuery`
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
if (scriptSourceURL) {
|
|
31
|
-
options = scriptSourceURL;
|
|
32
|
-
options.fromCurrentScript = true;
|
|
33
|
-
}
|
|
34
|
-
} else {
|
|
35
|
-
options = url.parse(self.location.href, true, true);
|
|
32
|
+
if (scriptSourceURL) {
|
|
33
|
+
options = scriptSourceURL;
|
|
36
34
|
options.fromCurrentScript = true;
|
|
37
35
|
}
|
|
38
36
|
}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
/* global __webpack_hash__ */
|
|
2
1
|
import hotEmitter from "webpack/hot/emitter.js";
|
|
3
2
|
import { log } from "./log.js";
|
|
3
|
+
/** @typedef {import("../index").Options} Options
|
|
4
|
+
/** @typedef {import("../index").Status} Status
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @param {Options} options
|
|
8
|
+
* @param {Status} status
|
|
9
|
+
*/
|
|
4
10
|
|
|
5
11
|
function reloadApp(_ref, status) {
|
|
6
12
|
var hot = _ref.hot,
|
|
@@ -12,11 +18,18 @@ function reloadApp(_ref, status) {
|
|
|
12
18
|
|
|
13
19
|
var currentHash = status.currentHash,
|
|
14
20
|
previousHash = status.previousHash;
|
|
15
|
-
var isInitial = currentHash.indexOf(
|
|
21
|
+
var isInitial = currentHash.indexOf(
|
|
22
|
+
/** @type {string} */
|
|
23
|
+
previousHash) >= 0;
|
|
16
24
|
|
|
17
25
|
if (isInitial) {
|
|
18
26
|
return;
|
|
19
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* @param {Window} rootWindow
|
|
30
|
+
* @param {number} intervalId
|
|
31
|
+
*/
|
|
32
|
+
|
|
20
33
|
|
|
21
34
|
function applyReload(rootWindow, intervalId) {
|
|
22
35
|
clearInterval(intervalId);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "webpack-dev-server",
|
|
3
|
-
"version": "4.7.
|
|
3
|
+
"version": "4.7.1",
|
|
4
4
|
"description": "Serves a webpack app. Updates the browser on changes.",
|
|
5
5
|
"bin": "bin/webpack-dev-server.js",
|
|
6
6
|
"main": "lib/Server.js",
|
|
@@ -62,7 +62,6 @@
|
|
|
62
62
|
"sockjs": "^0.3.21",
|
|
63
63
|
"spdy": "^4.0.2",
|
|
64
64
|
"strip-ansi": "^7.0.0",
|
|
65
|
-
"url": "^0.11.0",
|
|
66
65
|
"webpack-dev-middleware": "^5.3.0",
|
|
67
66
|
"ws": "^8.1.0"
|
|
68
67
|
},
|
|
@@ -78,6 +77,7 @@
|
|
|
78
77
|
"@commitlint/config-conventional": "^15.0.0",
|
|
79
78
|
"@types/compression": "^1.7.2",
|
|
80
79
|
"@types/default-gateway": "^3.0.1",
|
|
80
|
+
"@types/sockjs-client": "^1.5.1",
|
|
81
81
|
"acorn": "^8.2.4",
|
|
82
82
|
"babel-jest": "^27.4.4",
|
|
83
83
|
"babel-loader": "^8.2.2",
|