webpack-dev-server 4.7.4 → 4.9.0

package/client/overlay.js

@@ -23,9 +23,24 @@ var containerElement;
 /** @type {Array<(element: HTMLDivElement) => void>} */
 
 var onLoadQueue = [];
+/** @type {TrustedTypePolicy | undefined} */
+
+var overlayTrustedTypesPolicy;
 ansiHTML.setColors(colors);
+/**
+ * @param {string | null} trustedTypesPolicyName
+ */
+
+function createContainer(trustedTypesPolicyName) {
+  // Enable Trusted Types if they are available in the current browser.
+  if (window.trustedTypes) {
+    overlayTrustedTypesPolicy = window.trustedTypes.createPolicy(trustedTypesPolicyName || "webpack-dev-server#overlay", {
+      createHTML: function createHTML(value) {
+        return value;
+      }
+    });
+  }
 
-function createContainer() {
   iframeContainerElement = document.createElement("iframe");
   iframeContainerElement.id = "webpack-dev-server-client-overlay";
   iframeContainerElement.src = "about:blank";
@@ -101,10 +116,11 @@ function createContainer() {
 }
 /**
  * @param {(element: HTMLDivElement) => void} callback
+ * @param {string | null} trustedTypesPolicyName
  */
 
 
-function ensureOverlayExists(callback) {
+function ensureOverlayExists(callback, trustedTypesPolicyName) {
   if (containerElement) {
     // Everything is ready, call the callback right away.
     callback(containerElement);
@@ -117,7 +133,7 @@ function ensureOverlayExists(callback) {
     return;
   }
 
-  createContainer();
+  createContainer(trustedTypesPolicyName);
 } // Successful compilation.
 
 
@@ -162,10 +178,11 @@ function formatProblem(type, item) {
 /**
  * @param {string} type
  * @param {Array<string  | { file?: string, moduleName?: string, loc?: string, message?: string }>} messages
+ * @param {string | null} trustedTypesPolicyName
  */
 
 
-function show(type, messages) {
+function show(type, messages, trustedTypesPolicyName) {
   ensureOverlayExists(function () {
     messages.forEach(function (message) {
       var entryElement = document.createElement("div");
@@ -180,7 +197,7 @@ function show(type, messages) {
 
       var text = ansiHTML(encode(body));
       var messageTextNode = document.createElement("div");
-      messageTextNode.innerHTML = text;
+      messageTextNode.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML(text) : text;
       entryElement.appendChild(typeElement);
       entryElement.appendChild(document.createElement("br"));
       entryElement.appendChild(document.createElement("br"));
@@ -191,7 +208,7 @@ function show(type, messages) {
 
       containerElement.appendChild(entryElement);
     });
-  });
+  }, trustedTypesPolicyName);
 }
 
 export { formatProblem, show, hide };

package/client/socket.js

@@ -9,8 +9,11 @@ typeof __webpack_dev_server_client__ !== "undefined" ? typeof __webpack_dev_serv
 /* eslint-enable camelcase */
 
 var retries = 0;
-var maxRetries = 10;
-var client = null;
+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

package/client/utils/parseURL.js

@@ -9,7 +9,7 @@ function parseURL(resourceQuery) {
   var options = {};
 
   if (typeof resourceQuery === "string" && resourceQuery !== "") {
-    var searchParams = resourceQuery.substr(1).split("&");
+    var searchParams = resourceQuery.slice(1).split("&");
 
     for (var i = 0; i < searchParams.length; i++) {
       var pair = searchParams[i].split("=");

package/client/utils/stripAnsi.js

@@ -0,0 +1,20 @@
+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.
+ * Adapted from code originally released by Sindre Sorhus
+ * Licensed the MIT License
+ *
+ * @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

@@ -25,12 +25,11 @@ const schema = require("./options.json");
 /** @typedef {import("express").NextFunction} NextFunction */
 /** @typedef {import("express").RequestHandler} ExpressRequestHandler */
 /** @typedef {import("express").ErrorRequestHandler} ExpressErrorRequestHandler */
-/** @typedef {import("anymatch").Matcher} AnymatchMatcher */
 /** @typedef {import("chokidar").WatchOptions} WatchOptions */
 /** @typedef {import("chokidar").FSWatcher} FSWatcher */
 /** @typedef {import("connect-history-api-fallback").Options} ConnectHistoryApiFallbackOptions */
-/** @typedef {import("bonjour").Bonjour} Bonjour */
-/** @typedef {import("bonjour").BonjourOptions} BonjourOptions */
+/** @typedef {import("bonjour-service").Bonjour} Bonjour */
+/** @typedef {import("bonjour-service").Service} BonjourOptions */
 /** @typedef {import("http-proxy-middleware").RequestHandler} RequestHandler */
 /** @typedef {import("http-proxy-middleware").Options} HttpProxyMiddlewareOptions */
 /** @typedef {import("http-proxy-middleware").Filter} HttpProxyMiddlewareOptionsFilter */
@@ -65,7 +64,7 @@ const schema = require("./options.json");
 /**
  * @typedef {Object} WatchFiles
  * @property {string | string[]} paths
- * @property {WatchOptions & { aggregateTimeout?: number, ignored?: AnymatchMatcher | string[], poll?: number | boolean }} [options]
+ * @property {WatchOptions & { aggregateTimeout?: number, ignored?: WatchOptions["ignored"], poll?: number | boolean }} [options]
  */
 
 /**
@@ -74,7 +73,7 @@ const schema = require("./options.json");
  * @property {string | string[]} [publicPath]
  * @property {boolean | ServeIndexOptions} [serveIndex]
  * @property {ServeStaticOptions} [staticOptions]
- * @property {boolean | WatchOptions & { aggregateTimeout?: number, ignored?: AnymatchMatcher | string[], poll?: number | boolean }} [watch]
+ * @property {boolean | WatchOptions & { aggregateTimeout?: number, ignored?: WatchOptions["ignored"], poll?: number | boolean }} [watch]
  */
 
 /**
@@ -188,7 +187,7 @@ const schema = require("./options.json");
  * @property {"auto" | "all" | string | string[]} [allowedHosts]
  * @property {boolean | ConnectHistoryApiFallbackOptions} [historyApiFallback]
  * @property {boolean} [setupExitSignals]
- * @property {boolean | BonjourOptions} [bonjour]
+ * @property {boolean | Record<string, never> | BonjourOptions} [bonjour]
  * @property {string | string[] | WatchFiles | Array<string | WatchFiles>} [watchFiles]
  * @property {boolean | string | Static | Array<string | Static>} [static]
  * @property {boolean | ServerOptions} [https]
@@ -386,17 +385,17 @@ class Server {
 
   /**
    * @param {Port} port
+   * @param {string} host
    * @returns {Promise<number | string>}
    */
-  static async getFreePort(port) {
+  static async getFreePort(port, host) {
     if (typeof port !== "undefined" && port !== null && port !== "auto") {
       return port;
     }
 
     const pRetry = require("p-retry");
-    const portfinder = require("portfinder");
-
-    portfinder.basePort =
+    const getPort = require("./getPort");
+    const basePort =
       typeof process.env.WEBPACK_DEV_SERVER_BASE_PORT !== "undefined"
         ? parseInt(process.env.WEBPACK_DEV_SERVER_BASE_PORT, 10)
         : 8080;
@@ -408,7 +407,7 @@ class Server {
         ? parseInt(process.env.WEBPACK_DEV_SERVER_PORT_RETRY, 10)
         : 3;
 
-    return pRetry(() => portfinder.getPortPromise(), {
+    return pRetry(() => getPort(basePort, host), {
       retries: defaultPortRetry,
     });
   }
@@ -755,7 +754,7 @@ class Server {
     // TODO remove `{}` after drop webpack v4 support
     const compilerWatchOptions = compilerOptions.watchOptions || {};
     /**
-     * @param {WatchOptions & { aggregateTimeout?: number, ignored?: AnymatchMatcher | string[], poll?: number | boolean }} watchOptions
+     * @param {WatchOptions & { aggregateTimeout?: number, ignored?: WatchOptions["ignored"], poll?: number | boolean }} watchOptions
      * @returns {WatchOptions}
      */
     const getWatchOptions = (watchOptions = {}) => {
@@ -1133,13 +1132,15 @@ class Server {
 
           // cert is more than 30 days old, kill it with fire
           if ((now - Number(certificateStat.ctime)) / certificateTtl > 30) {
-            const del = require("del");
+            const { promisify } = require("util");
+            const rimraf = require("rimraf");
+            const del = promisify(rimraf);
 
             this.logger.info(
               "SSL certificate is more than 30 days old. Removing..."
             );
 
-            await del([certificatePath], { force: true });
+            await del(certificatePath);
 
             certificateExists = false;
           }
@@ -2592,14 +2593,18 @@ class Server {
    * @returns {void}
    */
   runBonjour() {
+    const { Bonjour } = require("bonjour-service");
     /**
      * @private
-     * @type {import("bonjour").Bonjour | undefined}
+     * @type {Bonjour | undefined}
      */
-    this.bonjour = require("bonjour")();
+    this.bonjour = new Bonjour();
     this.bonjour.publish({
+      // @ts-expect-error
       name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
+      // @ts-expect-error
       port: /** @type {number} */ (this.options.port),
+      // @ts-expect-error
       type:
         /** @type {ServerConfiguration} */
         (this.options.server).type === "http" ? "http" : "https",
@@ -3196,7 +3201,8 @@ class Server {
         /** @type {Host} */ (this.options.host)
       );
       this.options.port = await Server.getFreePort(
-        /** @type {Port} */ (this.options.port)
+        /** @type {Port} */ (this.options.port),
+        this.options.host
       );
     }
 

package/lib/getPort.js

@@ -0,0 +1,133 @@
+"use strict";
+
+/*
+ * Based on the packages get-port https://www.npmjs.com/package/get-port
+ * and portfinder https://www.npmjs.com/package/portfinder
+ * The code structure is similar to get-port, but it searches
+ * ports deterministically like portfinder
+ */
+const net = require("net");
+const os = require("os");
+
+const minPort = 1024;
+const maxPort = 65_535;
+
+/**
+ * @return {Set<string|undefined>}
+ */
+const getLocalHosts = () => {
+  const interfaces = os.networkInterfaces();
+
+  // Add undefined value for createServer function to use default host,
+  // and default IPv4 host in case createServer defaults to IPv6.
+  // eslint-disable-next-line no-undefined
+  const results = new Set([undefined, "0.0.0.0"]);
+
+  for (const _interface of Object.values(interfaces)) {
+    if (_interface) {
+      for (const config of _interface) {
+        results.add(config.address);
+      }
+    }
+  }
+
+  return results;
+};
+
+/**
+ * @param {number} basePort
+ * @param {string | undefined} host
+ * @return {Promise<number>}
+ */
+const checkAvailablePort = (basePort, host) =>
+  new Promise((resolve, reject) => {
+    const server = net.createServer();
+    server.unref();
+    server.on("error", reject);
+
+    server.listen(basePort, host, () => {
+      // Next line should return AdressInfo because we're calling it after listen() and before close()
+      const { port } = /** @type {import("net").AddressInfo} */ (
+        server.address()
+      );
+      server.close(() => {
+        resolve(port);
+      });
+    });
+  });
+
+/**
+ * @param {number} port
+ * @param {Set<string|undefined>} hosts
+ * @return {Promise<number>}
+ */
+const getAvailablePort = async (port, hosts) => {
+  /**
+   * Errors that mean that host is not available.
+   * @type {Set<string | undefined>}
+   */
+  const nonExistentInterfaceErrors = new Set(["EADDRNOTAVAIL", "EINVAL"]);
+  /* Check if the post is available on every local host name */
+  for (const host of hosts) {
+    try {
+      await checkAvailablePort(port, host); // eslint-disable-line no-await-in-loop
+    } catch (error) {
+      /* We throw an error only if the interface exists */
+      if (
+        !nonExistentInterfaceErrors.has(
+          /** @type {NodeJS.ErrnoException} */ (error).code
+        )
+      ) {
+        throw error;
+      }
+    }
+  }
+
+  return port;
+};
+
+/**
+ * @param {number} basePort
+ * @param {string=} host
+ * @return {Promise<number>}
+ */
+async function getPorts(basePort, host) {
+  if (basePort < minPort || basePort > maxPort) {
+    throw new Error(`Port number must lie between ${minPort} and ${maxPort}`);
+  }
+
+  let port = basePort;
+  const localhosts = getLocalHosts();
+  let hosts;
+  if (host && !localhosts.has(host)) {
+    hosts = new Set([host]);
+  } else {
+    /* If the host is equivalent to localhost
+       we need to check every equivalent host
+       else the port might falsely appear as available
+       on some operating systems  */
+    hosts = localhosts;
+  }
+  /** @type {Set<string | undefined>} */
+  const portUnavailableErrors = new Set(["EADDRINUSE", "EACCES"]);
+  while (port <= maxPort) {
+    try {
+      const availablePort = await getAvailablePort(port, hosts); // eslint-disable-line no-await-in-loop
+      return availablePort;
+    } catch (error) {
+      /* Try next port if port is busy; throw for any other error */
+      if (
+        !portUnavailableErrors.has(
+          /** @type {NodeJS.ErrnoException} */ (error).code
+        )
+      ) {
+        throw error;
+      }
+      port += 1;
+    }
+  }
+
+  throw new Error("No available ports found");
+}
+
+module.exports = getPorts;

package/lib/options.json

@@ -28,7 +28,10 @@
     "Bonjour": {
       "anyOf": [
         {
-          "type": "boolean"
+          "type": "boolean",
+          "cli": {
+            "negatedDescription": "Disallows to broadcasts dev server via ZeroConf networking on start."
+          }
         },
         {
           "type": "object",
@@ -37,17 +40,17 @@
         }
       ],
       "description": "Allows to broadcasts dev server via ZeroConf networking on start.",
-      "link": " https://webpack.js.org/configuration/dev-server/#devserverbonjour",
-      "cli": {
-        "negatedDescription": "Disallows to broadcasts dev server via ZeroConf networking on start."
-      }
+      "link": " https://webpack.js.org/configuration/dev-server/#devserverbonjour"
     },
     "Client": {
       "description": "Allows to specify options for client script in the browser or disable client script.",
       "link": "https://webpack.js.org/configuration/dev-server/#devserverclient",
       "anyOf": [
         {
-          "enum": [false]
+          "enum": [false],
+          "cli": {
+            "negatedDescription": "Disables client script."
+          }
         },
         {
           "type": "object",
@@ -87,7 +90,7 @@
           "link": "https://webpack.js.org/configuration/dev-server/#overlay",
           "type": "boolean",
           "cli": {
-            "negatedDescription": "Disables a full-screen overlay in the browser when there are compiler errors or warnings."
+            "negatedDescription": "Disables the full-screen overlay in the browser when there are compiler errors or warnings."
           }
         },
         {
@@ -96,11 +99,21 @@
           "properties": {
             "errors": {
               "description": "Enables a full-screen overlay in the browser when there are compiler errors.",
-              "type": "boolean"
+              "type": "boolean",
+              "cli": {
+                "negatedDescription": "Disables the full-screen overlay in the browser when there are compiler errors."
+              }
             },
             "warnings": {
               "description": "Enables a full-screen overlay in the browser when there are compiler warnings.",
-              "type": "boolean"
+              "type": "boolean",
+              "cli": {
+                "negatedDescription": "Disables the full-screen overlay in the browser when there are compiler warnings."
+              }
+            },
+            "trustedTypesPolicyName": {
+              "description": "The name of a Trusted Types policy for the overlay. Defaults to 'webpack-dev-server#overlay'.",
+              "type": "string"
             }
           }
         }
@@ -119,16 +132,16 @@
       "link": "https://webpack.js.org/configuration/dev-server/#reconnect",
       "anyOf": [
         {
-          "type": "boolean"
+          "type": "boolean",
+          "cli": {
+            "negatedDescription": "Tells dev-server to not to try to reconnect the client."
+          }
         },
         {
           "type": "number",
           "minimum": 0
         }
-      ],
-      "cli": {
-        "negatedDescription": "Tells dev-server to not to try to connect the client."
-      }
+      ]
     },
     "ClientWebSocketTransport": {
       "anyOf": [
@@ -448,7 +461,10 @@
     "HistoryApiFallback": {
       "anyOf": [
         {
-          "type": "boolean"
+          "type": "boolean",
+          "cli": {
+            "negatedDescription": "Disallows to proxy requests through a specified index page."
+          }
         },
         {
           "type": "object",
@@ -475,17 +491,17 @@
     "Hot": {
       "anyOf": [
         {
-          "type": "boolean"
+          "type": "boolean",
+          "cli": {
+            "negatedDescription": "Disables Hot Module Replacement."
+          }
         },
         {
           "enum": ["only"]
         }
       ],
       "description": "Enables Hot Module Replacement.",
-      "link": "https://webpack.js.org/configuration/dev-server/#devserverhot",
-      "cli": {
-        "negatedDescription": "Disables Hot Module Replacement."
-      }
+      "link": "https://webpack.js.org/configuration/dev-server/#devserverhot"
     },
     "IPC": {
       "anyOf": [
@@ -731,7 +747,10 @@
         },
         "requestCert": {
           "type": "boolean",
-          "description": "Request for an SSL certificate."
+          "description": "Request for an SSL certificate.",
+          "cli": {
+            "negatedDescription": "Does not request for an SSL certificate."
+          }
         },
         "ca": {
           "anyOf": [
@@ -916,7 +935,10 @@
           }
         },
         {
-          "type": "boolean"
+          "type": "boolean",
+          "cli": {
+            "negatedDescription": "Disallows to configure options for serving static files from directory."
+          }
         },
         {
           "$ref": "#/definitions/StaticString"
@@ -962,7 +984,10 @@
         "serveIndex": {
           "anyOf": [
             {
-              "type": "boolean"
+              "type": "boolean",
+              "cli": {
+                "negatedDescription": "Does not tell dev server to use serveIndex middleware."
+              }
             },
             {
               "type": "object",
@@ -970,15 +995,15 @@
             }
           ],
           "description": "Tells dev server to use serveIndex middleware when enabled.",
-          "cli": {
-            "negatedDescription": "Does not tell dev server to use serveIndex middleware."
-          },
           "link": "https://webpack.js.org/configuration/dev-server/#serveindex"
         },
         "watch": {
           "anyOf": [
             {
-              "type": "boolean"
+              "type": "boolean",
+              "cli": {
+                "negatedDescription": "Does not watch for files in static content directory."
+              }
             },
             {
               "type": "object",
@@ -987,9 +1012,6 @@
             }
           ],
           "description": "Watches for files in static content directory.",
-          "cli": {
-            "negatedDescription": "Does not watch for files in static content directory."
-          },
           "link": "https://webpack.js.org/configuration/dev-server/#watch"
         }
       }
@@ -1082,7 +1104,10 @@
     "WebSocketServerEnum": {
       "anyOf": [
         {
-          "enum": [false]
+          "enum": [false],
+          "cli": {
+            "negatedDescription": "Disallows to set web socket server and options."
+          }
         },
         {
           "$ref": "#/definitions/WebSocketServerType"