webpack-dev-server 4.7.2 → 4.8.0

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/createSocketURL.js

@@ -5,7 +5,7 @@
 function format(objURL) {
   var protocol = objURL.protocol || "";
 
-  if (protocol && protocol.substr(-1) !== ":") {
+  if (protocol && !protocol.endsWith(":")) {
     protocol += ":";
   }
 

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,11 +25,12 @@ 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 */
@@ -64,7 +65,7 @@ const schema = require("./options.json");
 /**
  * @typedef {Object} WatchFiles
  * @property {string | string[]} paths
- * @property {WatchOptions & { aggregateTimeout?: number, ignored?: string | RegExp | string[], poll?: number | boolean }} [options]
+ * @property {WatchOptions & { aggregateTimeout?: number, ignored?: AnymatchMatcher | string[], poll?: number | boolean }} [options]
  */
 
 /**
@@ -73,7 +74,7 @@ const schema = require("./options.json");
  * @property {string | string[]} [publicPath]
  * @property {boolean | ServeIndexOptions} [serveIndex]
  * @property {ServeStaticOptions} [staticOptions]
- * @property {boolean | WatchOptions & { aggregateTimeout?: number, ignored?: string | RegExp | string[], poll?: number | boolean }} [watch]
+ * @property {boolean | WatchOptions & { aggregateTimeout?: number, ignored?: AnymatchMatcher | string[], poll?: number | boolean }} [watch]
  */
 
 /**
@@ -110,22 +111,22 @@ const schema = require("./options.json");
  */
 
 /**
- * @typedef {{ [url: string]: string | HttpProxyMiddlewareOptions }} ProxyConfigMap
+ * @callback ByPass
+ * @param {Request} req
+ * @param {Response} res
+ * @param {ProxyConfigArrayItem} proxyConfig
  */
 
 /**
- * @typedef {HttpProxyMiddlewareOptions[]} ProxyArray
+ * @typedef {{ path?: HttpProxyMiddlewareOptionsFilter | undefined, context?: HttpProxyMiddlewareOptionsFilter | undefined } & { bypass?: ByPass } & HttpProxyMiddlewareOptions } ProxyConfigArrayItem
  */
 
 /**
- * @callback ByPass
- * @param {Request} req
- * @param {Response} res
- * @param {ProxyConfigArray} proxyConfig
+ * @typedef {(ProxyConfigArrayItem | ((req?: Request | undefined, res?: Response | undefined, next?: NextFunction | undefined) => ProxyConfigArrayItem))[]} ProxyConfigArray
  */
 
 /**
- * @typedef {{ path?: string | string[] | undefined, context?: string | string[] | HttpProxyMiddlewareOptionsFilter | undefined } & HttpProxyMiddlewareOptions & ByPass} ProxyConfigArray
+ * @typedef {{ [url: string]: string | ProxyConfigArrayItem }} ProxyConfigMap
  */
 
 /**
@@ -187,14 +188,14 @@ 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]
  * @property {boolean} [http2]
  * @property {"http" | "https" | "spdy" | string | ServerConfiguration} [server]
  * @property {boolean | "sockjs" | "ws" | string | WebSocketServerConfiguration} [webSocketServer]
- * @property {ProxyConfigMap | ProxyConfigArray | ProxyArray} [proxy]
+ * @property {ProxyConfigMap | ProxyConfigArrayItem | ProxyConfigArray} [proxy]
  * @property {boolean | string | Open | Array<string | Open>} [open]
  * @property {boolean} [setupExitSignals]
  * @property {boolean | ClientConfiguration} [client]
@@ -754,7 +755,7 @@ class Server {
     // TODO remove `{}` after drop webpack v4 support
     const compilerWatchOptions = compilerOptions.watchOptions || {};
     /**
-     * @param {WatchOptions & WebpackConfiguration["watchOptions"]} watchOptions
+     * @param {WatchOptions & { aggregateTimeout?: number, ignored?: AnymatchMatcher | string[], poll?: number | boolean }} watchOptions
      * @returns {WatchOptions}
      */
     const getWatchOptions = (watchOptions = {}) => {
@@ -1132,13 +1133,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;
           }
@@ -1380,10 +1383,10 @@ class Server {
           Object.prototype.hasOwnProperty.call(options.proxy, "target") ||
           Object.prototype.hasOwnProperty.call(options.proxy, "router")
         ) {
-          /** @type {ProxyArray} */
+          /** @type {ProxyConfigArray} */
           (options.proxy) = [/** @type {ProxyConfigMap} */ (options.proxy)];
         } else {
-          /** @type {ProxyArray} */
+          /** @type {ProxyConfigArray} */
           (options.proxy) = Object.keys(options.proxy).map(
             /**
              * @param {string} context
@@ -1421,50 +1424,48 @@ class Server {
         }
       }
 
-      /** @type {ProxyArray} */
+      /** @type {ProxyConfigArray} */
       (options.proxy) =
-        /** @type {ProxyArray} */
-        (options.proxy).map(
+        /** @type {ProxyConfigArray} */
+        (options.proxy).map((item) => {
+          if (typeof item === "function") {
+            return item;
+          }
+
           /**
-           * @param {HttpProxyMiddlewareOptions} item
-           * @returns {HttpProxyMiddlewareOptions}
+           * @param {"info" | "warn" | "error" | "debug" | "silent" | undefined | "none" | "log" | "verbose"} level
+           * @returns {"info" | "warn" | "error" | "debug" | "silent" | undefined}
            */
-          (item) => {
-            /**
-             * @param {"info" | "warn" | "error" | "debug" | "silent" | undefined | "none" | "log" | "verbose"} level
-             * @returns {"info" | "warn" | "error" | "debug" | "silent" | undefined}
-             */
-            const getLogLevelForProxy = (level) => {
-              if (level === "none") {
-                return "silent";
-              }
-
-              if (level === "log") {
-                return "info";
-              }
-
-              if (level === "verbose") {
-                return "debug";
-              }
-
-              return level;
-            };
+          const getLogLevelForProxy = (level) => {
+            if (level === "none") {
+              return "silent";
+            }
 
-            if (typeof item.logLevel === "undefined") {
-              item.logLevel = getLogLevelForProxy(
-                compilerOptions.infrastructureLogging
-                  ? compilerOptions.infrastructureLogging.level
-                  : "info"
-              );
+            if (level === "log") {
+              return "info";
             }
 
-            if (typeof item.logProvider === "undefined") {
-              item.logProvider = () => this.logger;
+            if (level === "verbose") {
+              return "debug";
             }
 
-            return item;
+            return level;
+          };
+
+          if (typeof item.logLevel === "undefined") {
+            item.logLevel = getLogLevelForProxy(
+              compilerOptions.infrastructureLogging
+                ? compilerOptions.infrastructureLogging.level
+                : "info"
+            );
           }
-        );
+
+          if (typeof item.logProvider === "undefined") {
+            item.logProvider = () => this.logger;
+          }
+
+          return item;
+        });
     }
 
     if (typeof options.setupExitSignals === "undefined") {
@@ -1478,13 +1479,7 @@ class Server {
     } else if (typeof options.static === "string") {
       options.static = [getStaticItem(options.static)];
     } else if (Array.isArray(options.static)) {
-      options.static = options.static.map((item) => {
-        if (typeof item === "string") {
-          return getStaticItem(item);
-        }
-
-        return getStaticItem(item);
-      });
+      options.static = options.static.map((item) => getStaticItem(item));
     } else {
       options.static = [getStaticItem(options.static)];
     }
@@ -2130,7 +2125,7 @@ class Server {
       const { createProxyMiddleware } = require("http-proxy-middleware");
 
       /**
-       * @param {ProxyConfigArray} proxyConfig
+       * @param {ProxyConfigArrayItem} proxyConfig
        * @returns {RequestHandler | undefined}
        */
       const getProxyMiddleware = (proxyConfig) => {
@@ -2166,93 +2161,91 @@ class Server {
        *   }
        * ]
        */
-      /** @type {ProxyArray} */
-      (this.options.proxy).forEach(
+      /** @type {ProxyConfigArray} */
+      (this.options.proxy).forEach((proxyConfigOrCallback) => {
         /**
-         * @param {any} proxyConfigOrCallback
+         * @type {RequestHandler}
          */
-        (proxyConfigOrCallback) => {
-          /**
-           * @type {RequestHandler}
-           */
-          let proxyMiddleware;
+        let proxyMiddleware;
 
-          let proxyConfig =
-            typeof proxyConfigOrCallback === "function"
-              ? proxyConfigOrCallback()
-              : proxyConfigOrCallback;
+        let proxyConfig =
+          typeof proxyConfigOrCallback === "function"
+            ? proxyConfigOrCallback()
+            : proxyConfigOrCallback;
 
-          proxyMiddleware =
-            /** @type {RequestHandler} */
-            (getProxyMiddleware(proxyConfig));
+        proxyMiddleware =
+          /** @type {RequestHandler} */
+          (getProxyMiddleware(proxyConfig));
 
-          if (proxyConfig.ws) {
-            this.webSocketProxies.push(proxyMiddleware);
-          }
+        if (proxyConfig.ws) {
+          this.webSocketProxies.push(proxyMiddleware);
+        }
 
-          /**
-           * @param {Request} req
-           * @param {Response} res
-           * @param {NextFunction} next
-           * @returns {Promise<void>}
-           */
-          const handler = async (req, res, next) => {
-            if (typeof proxyConfigOrCallback === "function") {
-              const newProxyConfig = proxyConfigOrCallback(req, res, next);
-
-              if (newProxyConfig !== proxyConfig) {
-                proxyConfig = newProxyConfig;
-                proxyMiddleware =
-                  /** @type {RequestHandler} */
-                  (getProxyMiddleware(proxyConfig));
-              }
+        /**
+         * @param {Request} req
+         * @param {Response} res
+         * @param {NextFunction} next
+         * @returns {Promise<void>}
+         */
+        const handler = async (req, res, next) => {
+          if (typeof proxyConfigOrCallback === "function") {
+            const newProxyConfig = proxyConfigOrCallback(req, res, next);
+
+            if (newProxyConfig !== proxyConfig) {
+              proxyConfig = newProxyConfig;
+              proxyMiddleware =
+                /** @type {RequestHandler} */
+                (getProxyMiddleware(proxyConfig));
             }
+          }
 
-            // - Check if we have a bypass function defined
-            // - In case the bypass function is defined we'll retrieve the
-            // bypassUrl from it otherwise bypassUrl would be null
-            // TODO remove in the next major in favor `context` and `router` options
-            const isByPassFuncDefined =
-              typeof proxyConfig.bypass === "function";
-            const bypassUrl = isByPassFuncDefined
-              ? await proxyConfig.bypass(req, res, proxyConfig)
-              : null;
-
-            if (typeof bypassUrl === "boolean") {
-              // skip the proxy
-              // @ts-ignore
-              req.url = null;
-              next();
-            } else if (typeof bypassUrl === "string") {
-              // byPass to that url
-              req.url = bypassUrl;
-              next();
-            } else if (proxyMiddleware) {
-              return proxyMiddleware(req, res, next);
-            } else {
-              next();
-            }
-          };
+          // - Check if we have a bypass function defined
+          // - In case the bypass function is defined we'll retrieve the
+          // bypassUrl from it otherwise bypassUrl would be null
+          // TODO remove in the next major in favor `context` and `router` options
+          const isByPassFuncDefined = typeof proxyConfig.bypass === "function";
+          const bypassUrl = isByPassFuncDefined
+            ? await /** @type {ByPass} */ (proxyConfig.bypass)(
+                req,
+                res,
+                proxyConfig
+              )
+            : null;
+
+          if (typeof bypassUrl === "boolean") {
+            // skip the proxy
+            // @ts-ignore
+            req.url = null;
+            next();
+          } else if (typeof bypassUrl === "string") {
+            // byPass to that url
+            req.url = bypassUrl;
+            next();
+          } else if (proxyMiddleware) {
+            return proxyMiddleware(req, res, next);
+          } else {
+            next();
+          }
+        };
 
-          middlewares.push({
-            name: "http-proxy-middleware",
-            middleware: handler,
-          });
-          // Also forward error requests to the proxy so it can handle them.
-          middlewares.push({
-            name: "http-proxy-middleware-error-handler",
-            middleware:
-              /**
-               * @param {Error} error
-               * @param {Request} req
-               * @param {Response} res
-               * @param {NextFunction} next
-               * @returns {any}
-               */
-              (error, req, res, next) => handler(req, res, next),
-          });
-        }
-      );
+        middlewares.push({
+          name: "http-proxy-middleware",
+          middleware: handler,
+        });
+        // Also forward error requests to the proxy so it can handle them.
+        middlewares.push({
+          name: "http-proxy-middleware-error-handler",
+          middleware:
+            /**
+             * @param {Error} error
+             * @param {Request} req
+             * @param {Response} res
+             * @param {NextFunction} next
+             * @returns {any}
+             */
+            (error, req, res, next) => handler(req, res, next),
+        });
+      });
 
       middlewares.push({
         name: "webpack-dev-middleware",
@@ -2601,14 +2594,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",