webpack-dev-server 4.5.0 → 4.6.0

package/README.md

@@ -121,7 +121,7 @@ Options:
   --no-hot                                  Disables Hot Module Replacement.
   --http2                                   Allows to serve over HTTP/2 using SPDY. Deprecated, it will be removed in favor of the `server` option.
   --no-http2                                Does not serve over HTTP/2 using SPDY.
---https                                   Allows to configure the server's listening socket for TLS (by default, dev server will be served over HTTP). Deprecated, it will be removed in favor
+  --https                                   Allows to configure the server's listening socket for TLS (by default, dev server will be served over HTTP). Deprecated, it will be removed in favor
                                             of the `server` option.
   --no-https                                Disallows to configure the server's listening socket for TLS (by default, dev server will be served over HTTP).
   --https-passphrase <value>                Passphrase for a pfx file. Deprecated, it will be removed in favor of the `server.options.passphrase` option.
@@ -269,7 +269,7 @@ Pull Request to resolve the bug.
 
 ## Support
 
-We do our best to keep Issues in the repository focused on bugs, features, and
+We do our best to keep issues in the repository focused on bugs, features, and
 needed modifications to the code for the module. Because of that, we ask users
 with general support, "how-to", or "why isn't this working" questions to try one
 of the other support channels that are available.

package/client/index.js

@@ -135,7 +135,7 @@ var onSocketMessage = {
     log.info("".concat(file ? "\"".concat(file, "\"") : "Content", " from static directory was changed. Reloading..."));
     self.location.reload();
   },
-  warnings: function warnings(_warnings) {
+  warnings: function warnings(_warnings, params) {
     log.warn("Warnings while compiling.");
 
     var printableWarnings = _warnings.map(function (error) {
@@ -157,6 +157,12 @@ var onSocketMessage = {
     if (needShowOverlayForWarnings) {
       show("warning", _warnings);
     }
+
+    if (params && params.preventReloading) {
+      return;
+    }
+
+    reloadApp(options, status);
   },
   errors: function errors(_errors) {
     log.error("Errors while compiling. Reload prevented.");

package/client/socket.js

@@ -35,7 +35,7 @@ var socket = function initSocket(url, handlers, reconnect) {
       retries += 1;
       log.info("Trying to reconnect...");
       setTimeout(function () {
-        socket(url, handlers);
+        socket(url, handlers, reconnect);
       }, retryInMs);
     }
   });
@@ -43,7 +43,7 @@ var socket = function initSocket(url, handlers, reconnect) {
     var message = JSON.parse(data);
 
     if (handlers[message.type]) {
-      handlers[message.type](message.data);
+      handlers[message.type](message.data, message.params);
     }
   });
 };

package/lib/Server.js

@@ -6,7 +6,7 @@ const url = require("url");
 const util = require("util");
 const fs = require("graceful-fs");
 const ipaddr = require("ipaddr.js");
-const internalIp = require("internal-ip");
+const defaultGateway = require("default-gateway");
 const express = require("express");
 const { validate } = require("schema-utils");
 const schema = require("./options.json");
@@ -50,7 +50,6 @@ class Server {
     };
   }
 
-  // eslint-disable-next-line class-methods-use-this
   static isAbsoluteURL(URL) {
     // Don't match Windows paths `c:\`
     if (/^[a-zA-Z]:\\/.test(URL)) {
@@ -62,13 +61,54 @@ class Server {
     return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(URL);
   }
 
+  static findIp(gateway) {
+    const gatewayIp = ipaddr.parse(gateway);
+
+    // Look for the matching interface in all local interfaces.
+    for (const addresses of Object.values(os.networkInterfaces())) {
+      for (const { cidr } of addresses) {
+        const net = ipaddr.parseCIDR(cidr);
+
+        if (
+          net[0] &&
+          net[0].kind() === gatewayIp.kind() &&
+          gatewayIp.match(net)
+        ) {
+          return net[0].toString();
+        }
+      }
+    }
+  }
+
+  static async internalIP(family) {
+    try {
+      const { gateway } = await defaultGateway[family]();
+      return Server.findIp(gateway);
+    } catch {
+      // ignore
+    }
+  }
+
+  static internalIPSync(family) {
+    try {
+      const { gateway } = defaultGateway[family].sync();
+      return Server.findIp(gateway);
+    } catch {
+      // ignore
+    }
+  }
+
   static async getHostname(hostname) {
     if (hostname === "local-ip") {
-      return (await internalIp.v4()) || (await internalIp.v6()) || "0.0.0.0";
+      return (
+        (await Server.internalIP("v4")) ||
+        (await Server.internalIP("v6")) ||
+        "0.0.0.0"
+      );
     } else if (hostname === "local-ipv4") {
-      return (await internalIp.v4()) || "0.0.0.0";
+      return (await Server.internalIP("v4")) || "0.0.0.0";
     } else if (hostname === "local-ipv6") {
-      return (await internalIp.v6()) || "::";
+      return (await Server.internalIP("v6")) || "::";
     }
 
     return hostname;
@@ -395,7 +435,6 @@ class Server {
     return this.compiler.options;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   async normalizeOptions() {
     const { options } = this;
 
@@ -405,14 +444,125 @@ class Server {
 
     const compilerOptions = this.getCompilerOptions();
     // TODO remove `{}` after drop webpack v4 support
-    const watchOptions = compilerOptions.watchOptions || {};
-    const defaultOptionsForStatic = {
-      directory: path.join(process.cwd(), "public"),
-      staticOptions: {},
-      publicPath: ["/"],
-      serveIndex: { icons: true },
-      // Respect options from compiler watchOptions
-      watch: watchOptions,
+    const compilerWatchOptions = compilerOptions.watchOptions || {};
+    const getWatchOptions = (watchOptions = {}) => {
+      const getPolling = () => {
+        if (typeof watchOptions.usePolling !== "undefined") {
+          return watchOptions.usePolling;
+        }
+
+        if (typeof watchOptions.poll !== "undefined") {
+          return Boolean(watchOptions.poll);
+        }
+
+        if (typeof compilerWatchOptions.poll !== "undefined") {
+          return Boolean(compilerWatchOptions.poll);
+        }
+
+        return false;
+      };
+      const getInterval = () => {
+        if (typeof watchOptions.interval !== "undefined") {
+          return watchOptions.interval;
+        }
+
+        if (typeof watchOptions.poll === "number") {
+          return watchOptions.poll;
+        }
+
+        if (typeof compilerWatchOptions.poll === "number") {
+          return compilerWatchOptions.poll;
+        }
+      };
+
+      const usePolling = getPolling();
+      const interval = getInterval();
+      const { poll, ...rest } = watchOptions;
+
+      return {
+        ignoreInitial: true,
+        persistent: true,
+        followSymlinks: false,
+        atomic: false,
+        alwaysStat: true,
+        ignorePermissionErrors: true,
+        // Respect options from compiler watchOptions
+        usePolling,
+        interval,
+        ignored: watchOptions.ignored,
+        // TODO: we respect these options for all watch options and allow developers to pass them to chokidar, but chokidar doesn't have these options maybe we need revisit that in future
+        ...rest,
+      };
+    };
+    const getStaticItem = (optionsForStatic) => {
+      const getDefaultStaticOptions = () => {
+        return {
+          directory: path.join(process.cwd(), "public"),
+          staticOptions: {},
+          publicPath: ["/"],
+          serveIndex: { icons: true },
+          watch: getWatchOptions(),
+        };
+      };
+
+      let item;
+
+      if (typeof optionsForStatic === "undefined") {
+        item = getDefaultStaticOptions();
+      } else if (typeof optionsForStatic === "string") {
+        item = {
+          ...getDefaultStaticOptions(),
+          directory: optionsForStatic,
+        };
+      } else {
+        const def = getDefaultStaticOptions();
+
+        item = {
+          directory:
+            typeof optionsForStatic.directory !== "undefined"
+              ? optionsForStatic.directory
+              : def.directory,
+          // TODO: do merge in the next major release
+          staticOptions:
+            typeof optionsForStatic.staticOptions !== "undefined"
+              ? optionsForStatic.staticOptions
+              : def.staticOptions,
+          publicPath:
+            typeof optionsForStatic.publicPath !== "undefined"
+              ? optionsForStatic.publicPath
+              : def.publicPath,
+          // TODO: do merge in the next major release
+          serveIndex:
+            // eslint-disable-next-line no-nested-ternary
+            typeof optionsForStatic.serveIndex !== "undefined"
+              ? typeof optionsForStatic.serveIndex === "boolean" &&
+                optionsForStatic.serveIndex
+                ? def.serveIndex
+                : optionsForStatic.serveIndex
+              : def.serveIndex,
+          watch:
+            // eslint-disable-next-line no-nested-ternary
+            typeof optionsForStatic.watch !== "undefined"
+              ? // eslint-disable-next-line no-nested-ternary
+                typeof optionsForStatic.watch === "boolean"
+                ? optionsForStatic.watch
+                  ? def.watch
+                  : false
+                : getWatchOptions(optionsForStatic.watch)
+              : def.watch,
+        };
+      }
+
+      if (Server.isAbsoluteURL(item.directory)) {
+        throw new Error("Using a URL as static.directory is not supported");
+      }
+
+      // ensure that publicPath is an array
+      if (typeof item.publicPath === "string") {
+        item.publicPath = [item.publicPath];
+      }
+
+      return item;
     };
 
     if (typeof options.allowedHosts === "undefined") {
@@ -882,50 +1032,27 @@ class Server {
     }
 
     if (typeof options.static === "undefined") {
-      options.static = [defaultOptionsForStatic];
+      options.static = [getStaticItem()];
     } else if (typeof options.static === "boolean") {
-      options.static = options.static ? [defaultOptionsForStatic] : false;
+      options.static = options.static ? [getStaticItem()] : false;
     } else if (typeof options.static === "string") {
-      options.static = [
-        { ...defaultOptionsForStatic, directory: options.static },
-      ];
+      options.static = [getStaticItem(options.static)];
     } else if (Array.isArray(options.static)) {
       options.static = options.static.map((item) => {
         if (typeof item === "string") {
-          return { ...defaultOptionsForStatic, directory: item };
+          return getStaticItem(item);
         }
 
-        return { ...defaultOptionsForStatic, ...item };
+        return getStaticItem(item);
       });
     } else {
-      options.static = [{ ...defaultOptionsForStatic, ...options.static }];
-    }
-
-    if (options.static) {
-      options.static.forEach((staticOption) => {
-        if (Server.isAbsoluteURL(staticOption.directory)) {
-          throw new Error("Using a URL as static.directory is not supported");
-        }
-
-        // ensure that publicPath is an array
-        if (typeof staticOption.publicPath === "string") {
-          staticOption.publicPath = [staticOption.publicPath];
-        }
-
-        // ensure that watch is an object if true
-        if (staticOption.watch === true) {
-          staticOption.watch = defaultOptionsForStatic.watch;
-        }
-
-        // ensure that serveIndex is an object if true
-        if (staticOption.serveIndex === true) {
-          staticOption.serveIndex = defaultOptionsForStatic.serveIndex;
-        }
-      });
+      options.static = [getStaticItem(options.static)];
     }
 
     if (typeof options.watchFiles === "string") {
-      options.watchFiles = [{ paths: options.watchFiles, options: {} }];
+      options.watchFiles = [
+        { paths: options.watchFiles, options: getWatchOptions() },
+      ];
     } else if (
       typeof options.watchFiles === "object" &&
       options.watchFiles !== null &&
@@ -934,16 +1061,19 @@ class Server {
       options.watchFiles = [
         {
           paths: options.watchFiles.paths,
-          options: options.watchFiles.options || {},
+          options: getWatchOptions(options.watchFiles.options || {}),
         },
       ];
     } else if (Array.isArray(options.watchFiles)) {
       options.watchFiles = options.watchFiles.map((item) => {
         if (typeof item === "string") {
-          return { paths: item, options: {} };
+          return { paths: item, options: getWatchOptions() };
         }
 
-        return { paths: item.paths, options: item.options || {} };
+        return {
+          paths: item.paths,
+          options: getWatchOptions(item.options || {}),
+        };
       });
     } else {
       options.watchFiles = [];
@@ -1118,7 +1248,6 @@ class Server {
     if (this.options.webSocketServer) {
       const compilers = this.compiler.compilers || [this.compiler];
 
-      // eslint-disable-next-line no-shadow
       compilers.forEach((compiler) => {
         this.addAdditionalEntries(compiler);
 
@@ -1814,13 +1943,13 @@ class Server {
       if (parsedIP.range() === "unspecified") {
         localhost = prettyPrintURL("localhost");
 
-        const networkIPv4 = internalIp.v4.sync();
+        const networkIPv4 = Server.internalIPSync("v4");
 
         if (networkIPv4) {
           networkUrlIPv4 = prettyPrintURL(networkIPv4);
         }
 
-        const networkIPv6 = internalIp.v6.sync();
+        const networkIPv6 = Server.internalIPSync("v6");
 
         if (networkIPv6) {
           networkUrlIPv6 = prettyPrintURL(networkIPv6);
@@ -2019,12 +2148,12 @@ class Server {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  sendMessage(clients, type, data) {
+  sendMessage(clients, type, data, params) {
     for (const client of clients) {
       // `sockjs` uses `1` to indicate client is ready to accept data
       // `ws` uses `WebSocket.OPEN`, but it is mean `1` too
       if (client.readyState === 1) {
-        client.send(JSON.stringify({ type, data }));
+        client.send(JSON.stringify({ type, data, params }));
       }
     }
   }
@@ -2073,8 +2202,16 @@ class Server {
     this.sendMessage(clients, "hash", stats.hash);
 
     if (stats.errors.length > 0 || stats.warnings.length > 0) {
+      const hasErrors = stats.errors.length > 0;
+
       if (stats.warnings.length > 0) {
-        this.sendMessage(clients, "warnings", stats.warnings);
+        let params;
+
+        if (hasErrors) {
+          params = { preventReloading: true };
+        }
+
+        this.sendMessage(clients, "warnings", stats.warnings, params);
       }
 
       if (stats.errors.length > 0) {
@@ -2086,37 +2223,8 @@ class Server {
   }
 
   watchFiles(watchPath, watchOptions) {
-    // duplicate the same massaging of options that watchpack performs
-    // https://github.com/webpack/watchpack/blob/master/lib/DirectoryWatcher.js#L49
-    // this isn't an elegant solution, but we'll improve it in the future
-    // eslint-disable-next-line no-undefined
-    const usePolling =
-      typeof watchOptions.usePolling !== "undefined"
-        ? watchOptions.usePolling
-        : Boolean(watchOptions.poll);
-    const interval =
-      // eslint-disable-next-line no-nested-ternary
-      typeof watchOptions.interval !== "undefined"
-        ? watchOptions.interval
-        : typeof watchOptions.poll === "number"
-        ? watchOptions.poll
-        : // eslint-disable-next-line no-undefined
-          undefined;
-
-    const finalWatchOptions = {
-      ignoreInitial: true,
-      persistent: true,
-      followSymlinks: false,
-      atomic: false,
-      alwaysStat: true,
-      ignorePermissionErrors: true,
-      ignored: watchOptions.ignored,
-      usePolling,
-      interval,
-    };
-
     const chokidar = require("chokidar");
-    const watcher = chokidar.watch(watchPath, finalWatchOptions);
+    const watcher = chokidar.watch(watchPath, watchOptions);
 
     // disabling refreshing on changing the content
     if (this.options.liveReload) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-server",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "Serves a webpack app. Updates the browser on changes.",
   "bin": "bin/webpack-dev-server.js",
   "main": "lib/Server.js",
@@ -38,17 +38,17 @@
     "colorette": "^2.0.10",
     "compression": "^1.7.4",
     "connect-history-api-fallback": "^1.6.0",
+    "default-gateway": "^6.0.3",
     "del": "^6.0.0",
     "express": "^4.17.1",
     "graceful-fs": "^4.2.6",
     "html-entities": "^2.3.2",
     "http-proxy-middleware": "^2.0.0",
-    "internal-ip": "^6.2.0",
     "ipaddr.js": "^2.0.1",
     "open": "^8.0.9",
     "p-retry": "^4.5.0",
     "portfinder": "^1.0.28",
-    "schema-utils": "^3.1.0",
+    "schema-utils": "^4.0.0",
     "selfsigned": "^1.10.11",
     "serve-index": "^1.9.1",
     "sockjs": "^0.3.21",
@@ -66,16 +66,14 @@
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.14.5",
     "@babel/runtime": "^7.14.5",
-    "@commitlint/cli": "^14.1.0",
-    "@commitlint/config-conventional": "^14.1.0",
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
     "acorn": "^8.2.4",
     "babel-jest": "^27.0.2",
     "babel-loader": "^8.2.2",
     "body-parser": "^1.19.0",
     "core-js": "^3.12.1",
     "css-loader": "^5.2.4",
-    "css-tree": "^1.1.3",
-    "csstree": "^0.0.3",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-webpack": "^1.2.5",
@@ -89,12 +87,12 @@
     "klona": "^2.0.4",
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
-    "lint-staged": "^11.0.0",
+    "lint-staged": "^12.0.2",
     "marked": "^3.0.0",
     "memfs": "^3.2.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.1",
-    "puppeteer": "^10.0.0",
+    "puppeteer": "^11.0.0",
     "require-from-string": "^2.0.2",
     "rimraf": "^3.0.2",
     "sockjs-client": "^1.5.1",