webpack-dev-server 4.11.0 → 4.12.0

package/client/socket.js

@@ -1,30 +1,32 @@
 /* global __webpack_dev_server_client__ */
+
 import WebSocketClient from "./clients/WebSocketClient.js";
-import { log } from "./utils/log.js"; // this WebsocketClient is here as a default fallback, in case the client is not injected
+import { log } from "./utils/log.js";
 
+// this WebsocketClient is here as a default fallback, in case the client is not injected
 /* eslint-disable camelcase */
-
-var Client = // eslint-disable-next-line no-nested-ternary
+var Client =
+// eslint-disable-next-line no-nested-ternary
 typeof __webpack_dev_server_client__ !== "undefined" ? typeof __webpack_dev_server_client__.default !== "undefined" ? __webpack_dev_server_client__.default : __webpack_dev_server_client__ : WebSocketClient;
 /* eslint-enable camelcase */
 
 var retries = 0;
-var maxRetries = 10; // Initialized client is exported so external consumers can utilize the same instance
+var maxRetries = 10;
+
+// Initialized client is exported so external consumers can utilize the same instance
 // It is mutable to enforce singleton
 // eslint-disable-next-line import/no-mutable-exports
-
 export var client = null;
+
 /**
  * @param {string} url
  * @param {{ [handler: string]: (data?: any, params?: any) => any }} handlers
  * @param {number} [reconnect]
  */
-
 var socket = function initSocket(url, handlers, reconnect) {
   client = new Client(url);
   client.onOpen(function () {
     retries = 0;
-
     if (typeof reconnect !== "undefined") {
       maxRetries = reconnect;
     }
@@ -32,11 +34,12 @@ var socket = function initSocket(url, handlers, reconnect) {
   client.onClose(function () {
     if (retries === 0) {
       handlers.close();
-    } // Try to reconnect.
-
+    }
 
-    client = null; // After 10 retries stop trying, to prevent logspam.
+    // Try to reconnect.
+    client = null;
 
+    // After 10 retries stop trying, to prevent logspam.
     if (retries < maxRetries) {
       // Exponentially increase timeout to reconnect.
       // Respectfully copied from the package `got`.
@@ -55,11 +58,9 @@ var socket = function initSocket(url, handlers, reconnect) {
    */
   function (data) {
     var message = JSON.parse(data);
-
     if (handlers[message.type]) {
       handlers[message.type](message.data, message.params);
     }
   });
 };
-
 export default socket;

package/client/utils/createSocketURL.js

@@ -4,53 +4,39 @@
  */
 function format(objURL) {
   var protocol = objURL.protocol || "";
-
   if (protocol && protocol.substr(-1) !== ":") {
     protocol += ":";
   }
-
   var auth = objURL.auth || "";
-
   if (auth) {
     auth = encodeURIComponent(auth);
     auth = auth.replace(/%3A/i, ":");
     auth += "@";
   }
-
   var host = "";
-
   if (objURL.hostname) {
     host = auth + (objURL.hostname.indexOf(":") === -1 ? objURL.hostname : "[".concat(objURL.hostname, "]"));
-
     if (objURL.port) {
       host += ":".concat(objURL.port);
     }
   }
-
   var pathname = objURL.pathname || "";
-
   if (objURL.slashes) {
     host = "//".concat(host || "");
-
     if (pathname && pathname.charAt(0) !== "/") {
       pathname = "/".concat(pathname);
     }
   } else if (!host) {
     host = "";
   }
-
   var search = objURL.search || "";
-
   if (search && search.charAt(0) !== "?") {
     search = "?".concat(search);
   }
-
   var hash = objURL.hash || "";
-
   if (hash && hash.charAt(0) !== "#") {
     hash = "#".concat(hash);
   }
-
   pathname = pathname.replace(/[?#]/g,
   /**
    * @param {string} match
@@ -62,43 +48,47 @@ function format(objURL) {
   search = search.replace("#", "%23");
   return "".concat(protocol).concat(host).concat(pathname).concat(search).concat(hash);
 }
+
 /**
  * @param {URL & { fromCurrentScript?: boolean }} parsedURL
  * @returns {string}
  */
-
-
 function createSocketURL(parsedURL) {
-  var hostname = parsedURL.hostname; // Node.js module parses it as `::`
+  var hostname = parsedURL.hostname;
+
+  // Node.js module parses it as `::`
   // `new URL(urlString, [baseURLString])` parses it as '[::]'
+  var isInAddrAny = hostname === "0.0.0.0" || hostname === "::" || hostname === "[::]";
 
-  var isInAddrAny = hostname === "0.0.0.0" || hostname === "::" || hostname === "[::]"; // why do we need this check?
+  // why do we need this check?
   // hostname n/a for file protocol (example, when using electron, ionic)
   // see: https://github.com/webpack/webpack-dev-server/pull/384
-
   if (isInAddrAny && self.location.hostname && self.location.protocol.indexOf("http") === 0) {
     hostname = self.location.hostname;
   }
+  var socketURLProtocol = parsedURL.protocol || self.location.protocol;
 
-  var socketURLProtocol = parsedURL.protocol || self.location.protocol; // When https is used in the app, secure web sockets are always necessary because the browser doesn't accept non-secure web sockets.
-
+  // When https is used in the app, secure web sockets are always necessary because the browser doesn't accept non-secure web sockets.
   if (socketURLProtocol === "auto:" || hostname && isInAddrAny && self.location.protocol === "https:") {
     socketURLProtocol = self.location.protocol;
   }
-
   socketURLProtocol = socketURLProtocol.replace(/^(?:http|.+-extension|file)/i, "ws");
-  var socketURLAuth = ""; // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
-  // Parse authentication credentials in case we need them
+  var socketURLAuth = "";
 
+  // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
+  // Parse authentication credentials in case we need them
   if (parsedURL.username) {
-    socketURLAuth = parsedURL.username; // Since HTTP basic authentication does not allow empty username,
-    // we only include password if the username is not empty.
+    socketURLAuth = parsedURL.username;
 
+    // Since HTTP basic authentication does not allow empty username,
+    // we only include password if the username is not empty.
     if (parsedURL.password) {
       // Result: <username>:<password>
       socketURLAuth = socketURLAuth.concat(":", parsedURL.password);
     }
-  } // In case the host is a raw IPv6 address, it can be enclosed in
+  }
+
+  // In case the host is a raw IPv6 address, it can be enclosed in
   // the brackets as the brackets are needed in the final URL string.
   // Need to remove those as url.format blindly adds its own set of brackets
   // if the host string contains colons. That would lead to non-working
@@ -106,24 +96,19 @@ function createSocketURL(parsedURL) {
   //
   // All of these web socket url params are optionally passed in through resourceQuery,
   // so we need to fall back to the default if they are not provided
-
-
   var socketURLHostname = (hostname || self.location.hostname || "localhost").replace(/^\[(.*)\]$/, "$1");
   var socketURLPort = parsedURL.port;
-
   if (!socketURLPort || socketURLPort === "0") {
     socketURLPort = self.location.port;
-  } // If path is provided it'll be passed in via the resourceQuery as a
+  }
+
+  // If path is provided it'll be passed in via the resourceQuery as a
   // query param so it has to be parsed out of the querystring in order for the
   // client to open the socket to the correct location.
-
-
   var socketURLPathname = "/ws";
-
   if (parsedURL.pathname && !parsedURL.fromCurrentScript) {
     socketURLPathname = parsedURL.pathname;
   }
-
   return format({
     protocol: socketURLProtocol,
     auth: socketURLAuth,
@@ -133,5 +118,4 @@ function createSocketURL(parsedURL) {
     slashes: true
   });
 }
-
 export default createSocketURL;

package/client/utils/getCurrentScriptSource.js

@@ -6,21 +6,19 @@ function getCurrentScriptSource() {
   // but is not supported in all browsers.
   if (document.currentScript) {
     return document.currentScript.getAttribute("src");
-  } // Fallback to getting all scripts running in the document.
-
+  }
 
+  // Fallback to getting all scripts running in the document.
   var scriptElements = document.scripts || [];
   var scriptElementsWithSrc = Array.prototype.filter.call(scriptElements, function (element) {
     return element.getAttribute("src");
   });
-
   if (scriptElementsWithSrc.length > 0) {
     var currentScript = scriptElementsWithSrc[scriptElementsWithSrc.length - 1];
     return currentScript.getAttribute("src");
-  } // Fail as there was no script to use.
-
+  }
 
+  // Fail as there was no script to use.
   throw new Error("[webpack-dev-server] Failed to get current script source.");
 }
-
 export default getCurrentScriptSource;

package/client/utils/log.js

@@ -1,40 +1,35 @@
 import logger from "../modules/logger/index.js";
-var name = "webpack-dev-server"; // default level is set on the client side, so it does not need
+var name = "webpack-dev-server";
+// default level is set on the client side, so it does not need
 // to be set by the CLI or API
+var defaultLevel = "info";
 
-var defaultLevel = "info"; // options new options, merge with old options
-
+// options new options, merge with old options
 /**
  * @param {false | true | "none" | "error" | "warn" | "info" | "log" | "verbose"} level
  * @returns {void}
  */
-
 function setLogLevel(level) {
   logger.configureDefaultLogger({
     level: level
   });
 }
-
 setLogLevel(defaultLevel);
 var log = logger.getLogger(name);
-
 var logEnabledFeatures = function logEnabledFeatures(features) {
   var enabledFeatures = Object.keys(features);
-
   if (!features || enabledFeatures.length === 0) {
     return;
   }
+  var logString = "Server started:";
 
-  var logString = "Server started:"; // Server started: Hot Module Replacement enabled, Live Reloading enabled, Overlay disabled.
-
+  // Server started: Hot Module Replacement enabled, Live Reloading enabled, Overlay disabled.
   for (var i = 0; i < enabledFeatures.length; i++) {
     var key = enabledFeatures[i];
     logString += " ".concat(key, " ").concat(features[key] ? "enabled" : "disabled", ",");
-  } // replace last comma with a period
-
-
+  }
+  // replace last comma with a period
   logString = logString.slice(0, -1).concat(".");
   log.info(logString);
 };
-
 export { log, logEnabledFeatures, setLogLevel };

package/client/utils/parseURL.js

@@ -1,16 +1,14 @@
 import getCurrentScriptSource from "./getCurrentScriptSource.js";
+
 /**
  * @param {string} resourceQuery
  * @returns {{ [key: string]: string | boolean }}
  */
-
 function parseURL(resourceQuery) {
   /** @type {{ [key: string]: string }} */
   var options = {};
-
   if (typeof resourceQuery === "string" && resourceQuery !== "") {
     var searchParams = resourceQuery.slice(1).split("&");
-
     for (var i = 0; i < searchParams.length; i++) {
       var pair = searchParams[i].split("=");
       options[pair[0]] = decodeURIComponent(pair[1]);
@@ -19,23 +17,20 @@ function parseURL(resourceQuery) {
     // Else, get the url from the <script> this file was called with.
     var scriptSource = getCurrentScriptSource();
     var scriptSourceURL;
-
     try {
       // The placeholder `baseURL` with `window.location.href`,
       // is to allow parsing of path-relative or protocol-relative URLs,
       // and will have no effect if `scriptSource` is a fully valid URL.
       scriptSourceURL = new URL(scriptSource, self.location.href);
-    } catch (error) {// URL parsing failed, do nothing.
+    } catch (error) {
+      // URL parsing failed, do nothing.
       // We will still proceed to see if we can recover using `resourceQuery`
     }
-
     if (scriptSourceURL) {
       options = scriptSourceURL;
       options.fromCurrentScript = true;
     }
   }
-
   return options;
 }
-
 export default parseURL;

package/client/utils/reloadApp.js

@@ -1,5 +1,6 @@
 import hotEmitter from "webpack/hot/emitter.js";
 import { log } from "./log.js";
+
 /** @typedef {import("../index").Options} Options
 /** @typedef {import("../index").Status} Status
 
@@ -7,59 +8,50 @@ import { log } from "./log.js";
  * @param {Options} options
  * @param {Status} status
  */
-
 function reloadApp(_ref, status) {
   var hot = _ref.hot,
-      liveReload = _ref.liveReload;
-
+    liveReload = _ref.liveReload;
   if (status.isUnloading) {
     return;
   }
-
   var currentHash = status.currentHash,
-      previousHash = status.previousHash;
-  var isInitial = currentHash.indexOf(
-  /** @type {string} */
-  previousHash) >= 0;
-
+    previousHash = status.previousHash;
+  var isInitial = currentHash.indexOf( /** @type {string} */previousHash) >= 0;
   if (isInitial) {
     return;
   }
+
   /**
    * @param {Window} rootWindow
    * @param {number} intervalId
    */
-
-
   function applyReload(rootWindow, intervalId) {
     clearInterval(intervalId);
     log.info("App updated. Reloading...");
     rootWindow.location.reload();
   }
-
   var search = self.location.search.toLowerCase();
   var allowToHot = search.indexOf("webpack-dev-server-hot=false") === -1;
   var allowToLiveReload = search.indexOf("webpack-dev-server-live-reload=false") === -1;
-
   if (hot && allowToHot) {
     log.info("App hot update...");
     hotEmitter.emit("webpackHotUpdate", status.currentHash);
-
     if (typeof self !== "undefined" && self.window) {
       // broadcast update to window
       self.postMessage("webpackHotUpdate".concat(status.currentHash), "*");
     }
-  } // allow refreshing the page only if liveReload isn't disabled
+  }
+  // allow refreshing the page only if liveReload isn't disabled
   else if (liveReload && allowToLiveReload) {
-    var rootWindow = self; // use parent window for reload (in case we're in an iframe with no valid src)
+    var rootWindow = self;
 
+    // use parent window for reload (in case we're in an iframe with no valid src)
     var intervalId = self.setInterval(function () {
       if (rootWindow.location.protocol !== "about:") {
         // reload immediately if protocol is valid
         applyReload(rootWindow, intervalId);
       } else {
         rootWindow = rootWindow.parent;
-
         if (rootWindow.parent === rootWindow) {
           // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
           applyReload(rootWindow, intervalId);
@@ -68,5 +60,4 @@ function reloadApp(_ref, status) {
     });
   }
 }
-
 export default reloadApp;

package/client/utils/sendMessage.js

@@ -1,6 +1,6 @@
 /* global __resourceQuery WorkerGlobalScope */
-// Send messages to the outside, so plugins can consume it.
 
+// Send messages to the outside, so plugins can consume it.
 /**
  * @param {string} type
  * @param {any} [data]
@@ -13,5 +13,4 @@ function sendMsg(type, data) {
     }, "*");
   }
 }
-
 export default sendMsg;

package/client/utils/stripAnsi.js

@@ -1,4 +1,5 @@
 var ansiRegex = new RegExp(["[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)", "(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))"].join("|"), "g");
+
 /**
  *
  * Strip [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_code) from a string.
@@ -8,13 +9,10 @@ var ansiRegex = new RegExp(["[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\
  * @param {string} string
  * @return {string}
  */
-
 function stripAnsi(string) {
   if (typeof string !== "string") {
     throw new TypeError("Expected a `string`, got `".concat(typeof string, "`"));
   }
-
   return string.replace(ansiRegex, "");
 }
-
 export default stripAnsi;

package/lib/Server.js

@@ -451,6 +451,45 @@ class Server {
     return path.resolve(dir, "node_modules/.cache/webpack-dev-server");
   }
 
+  /**
+   * @private
+   * @param {Compiler} compiler
+   * @returns bool
+   */
+  static isWebTarget(compiler) {
+    // TODO improve for the next major version - we should store `web` and other targets in `compiler.options.environment`
+    if (
+      compiler.options.externalsPresets &&
+      compiler.options.externalsPresets.web
+    ) {
+      return true;
+    }
+
+    if (
+      compiler.options.resolve.conditionNames &&
+      compiler.options.resolve.conditionNames.includes("browser")
+    ) {
+      return true;
+    }
+
+    const webTargets = [
+      "web",
+      "webworker",
+      "electron-preload",
+      "electron-renderer",
+      "node-webkit",
+      // eslint-disable-next-line no-undefined
+      undefined,
+      null,
+    ];
+
+    if (Array.isArray(compiler.options.target)) {
+      return compiler.options.target.some((r) => webTargets.includes(r));
+    }
+
+    return webTargets.includes(/** @type {string} */ (compiler.options.target));
+  }
+
   /**
    * @private
    * @param {Compiler} compiler
@@ -460,21 +499,9 @@ class Server {
      * @type {string[]}
      */
     const additionalEntries = [];
+    const isWebTarget = Server.isWebTarget(compiler);
 
-    const isWebTarget = compiler.options.externalsPresets
-      ? compiler.options.externalsPresets.web
-      : [
-          "web",
-          "webworker",
-          "electron-preload",
-          "electron-renderer",
-          "node-webkit",
-          // eslint-disable-next-line no-undefined
-          undefined,
-          null,
-        ].includes(/** @type {string} */ (compiler.options.target));
-
-    // TODO maybe empty empty client
+    // TODO maybe empty client
     if (this.options.client && isWebTarget) {
       let webSocketURLStr = "";
 
@@ -1133,7 +1160,7 @@ class Server {
 
       if (
         !(/** @type {ServerOptions} */ (options.server.options).key) ||
-        /** @type {ServerOptions} */ (!options.server.options).cert
+        !(/** @type {ServerOptions} */ (options.server.options).cert)
       ) {
         const certificateDir = Server.findCacheDir();
         const certificatePath = path.join(certificateDir, "server.pem");
@@ -2006,6 +2033,19 @@ class Server {
       }
     );
 
+    /** @type {import("express").Application} */
+    (app).get("/webpack-dev-server/open-editor", (req, res) => {
+      const fileName = req.query.fileName;
+
+      if (typeof fileName === "string") {
+        // @ts-ignore
+        const launchEditor = require("launch-editor");
+        launchEditor(fileName);
+      }
+
+      res.end();
+    });
+
     /** @type {import("express").Application} */
     (app).get(
       "/webpack-dev-server",

package/lib/servers/SockJSServer.js

@@ -41,9 +41,28 @@ module.exports = class SockJSServer extends BaseServer {
   constructor(server) {
     super(server);
 
+    const webSocketServerOptions =
+      /** @type {NonNullable<WebSocketServerConfiguration["options"]>} */
+      (
+        /** @type {WebSocketServerConfiguration} */
+        (this.server.options.webSocketServer).options
+      );
+
+    /**
+     * @param {NonNullable<WebSocketServerConfiguration["options"]>} options
+     * @returns {string}
+     */
+    const getSockjsUrl = (options) => {
+      if (typeof options.sockjsUrl !== "undefined") {
+        return options.sockjsUrl;
+      }
+
+      return "/__webpack_dev_server__/sockjs.bundle.js";
+    };
+
     this.implementation = sockjs.createServer({
       // Use provided up-to-date sockjs-client
-      sockjs_url: "/__webpack_dev_server__/sockjs.bundle.js",
+      sockjs_url: getSockjsUrl(webSocketServerOptions),
       // Default logger is very annoy. Limit useless logs.
       /**
        * @param {string} severity
@@ -73,15 +92,8 @@ module.exports = class SockJSServer extends BaseServer {
     };
 
     const options = {
-      .../** @type {WebSocketServerConfiguration} */
-      (this.server.options.webSocketServer).options,
-      prefix: getPrefix(
-        /** @type {NonNullable<WebSocketServerConfiguration["options"]>} */
-        (
-          /** @type {WebSocketServerConfiguration} */
-          (this.server.options.webSocketServer).options
-        )
-      ),
+      ...webSocketServerOptions,
+      prefix: getPrefix(webSocketServerOptions),
     };
 
     this.implementation.installHandlers(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-server",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "Serves a webpack app. Updates the browser on changes.",
   "bin": "bin/webpack-dev-server.js",
   "main": "lib/Server.js",
@@ -63,29 +63,32 @@
     "html-entities": "^2.3.2",
     "http-proxy-middleware": "^2.0.3",
     "ipaddr.js": "^2.0.1",
+    "launch-editor": "^2.6.0",
     "open": "^8.0.9",
     "p-retry": "^4.5.0",
     "rimraf": "^3.0.2",
     "schema-utils": "^4.0.0",
-    "selfsigned": "^2.0.1",
+    "selfsigned": "^2.1.1",
     "serve-index": "^1.9.1",
     "sockjs": "^0.3.24",
     "spdy": "^4.0.2",
     "webpack-dev-middleware": "^5.3.1",
-    "ws": "^8.4.2"
+    "ws": "^8.13.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.3",
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.20.2",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-transform-object-assign": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/runtime": "^7.17.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/runtime": "^7.20.1",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@types/compression": "^1.7.2",
     "@types/default-gateway": "^3.0.1",
+    "@types/node": "^18.11.9",
+    "@types/node-forge": "^1.3.1",
     "@types/rimraf": "^3.0.2",
     "@types/sockjs-client": "^1.5.1",
     "@types/trusted-types": "^2.0.2",
@@ -95,7 +98,7 @@
     "body-parser": "^1.19.2",
     "core-js": "^3.21.1",
     "css-loader": "^5.2.4",
-    "eslint": "^8.12.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.4.0",
     "eslint-config-webpack": "^1.2.5",
     "eslint-plugin-import": "^2.23.2",
@@ -110,10 +113,10 @@
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
     "lint-staged": "^12.3.4",
-    "marked": "^4.0.12",
-    "memfs": "^3.2.2",
+    "marked": "^4.2.3",
+    "memfs": "^3.4.12",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.1",
+    "prettier": "^2.8.0",
     "puppeteer": "^13.4.1",
     "require-from-string": "^2.0.2",
     "rimraf": "^3.0.2",
@@ -123,9 +126,10 @@
     "style-loader": "^2.0.0",
     "supertest": "^6.1.3",
     "tcp-port-used": "^1.0.2",
-    "typescript": "^4.7.2",
+    "typescript": "^4.9.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.71.0",
+    "wait-for-expect": "^3.0.2",
+    "webpack": "^5.76.1",
     "webpack-cli": "^4.7.2",
     "webpack-merge": "^5.8.0"
   },