webpack-dev-server 4.13.2 → 4.14.0

package/bin/webpack-dev-server.js

@@ -85,8 +85,18 @@ const runCli = (cli) => {
   const pkgPath = require.resolve(`${cli.package}/package.json`);
   // eslint-disable-next-line import/no-dynamic-require
   const pkg = require(pkgPath);
-  // eslint-disable-next-line import/no-dynamic-require
-  require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
+
+  if (pkg.type === "module" || /\.mjs/i.test(pkg.bin[cli.binName])) {
+    import(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName])).catch(
+      (error) => {
+        console.error(error);
+        process.exitCode = 1;
+      }
+    );
+  } else {
+    // eslint-disable-next-line import/no-dynamic-require
+    require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
+  }
 };
 
 /**

package/client/index.js

@@ -15,12 +15,20 @@ import sendMessage from "./utils/sendMessage.js";
 import reloadApp from "./utils/reloadApp.js";
 import createSocketURL from "./utils/createSocketURL.js";
 
+/**
+ * @typedef {Object} OverlayOptions
+ * @property {boolean | (error: Error) => boolean} [warnings]
+ * @property {boolean | (error: Error) => boolean} [errors]
+ * @property {boolean | (error: Error) => boolean} [runtimeErrors]
+ * @property {string} [trustedTypesPolicyName]
+ */
+
 /**
  * @typedef {Object} Options
  * @property {boolean} hot
  * @property {boolean} liveReload
  * @property {boolean} progress
- * @property {boolean | { warnings?: boolean, errors?: boolean, runtimeErrors?: boolean, trustedTypesPolicyName?: string }} overlay
+ * @property {boolean | OverlayOptions} overlay
  * @property {string} [logging]
  * @property {number} [reconnect]
  */
@@ -32,6 +40,23 @@ import createSocketURL from "./utils/createSocketURL.js";
  * @property {string} [previousHash]
  */
 
+/**
+ * @param {boolean | { warnings?: boolean | string; errors?: boolean | string; runtimeErrors?: boolean | string; }} overlayOptions
+ */
+var decodeOverlayOptions = function decodeOverlayOptions(overlayOptions) {
+  if (typeof overlayOptions === "object") {
+    ["warnings", "errors", "runtimeErrors"].forEach(function (property) {
+      if (typeof overlayOptions[property] === "string") {
+        var overlayFilterFunctionString = decodeURIComponent(overlayOptions[property]);
+
+        // eslint-disable-next-line no-new-func
+        var overlayFilterFunction = new Function("message", "var callback = ".concat(overlayFilterFunctionString, "\n        return callback(message)"));
+        overlayOptions[property] = overlayFilterFunction;
+      }
+    });
+  }
+};
+
 /**
  * @type {Status}
  */
@@ -82,6 +107,7 @@ if (parsedResourceQuery.overlay) {
       warnings: true,
       runtimeErrors: true
     }, options.overlay);
+    decodeOverlayOptions(options.overlay);
   }
   enabledFeatures.Overlay = true;
 }
@@ -156,6 +182,7 @@ var onSocketMessage = {
       return;
     }
     options.overlay = value;
+    decodeOverlayOptions(options.overlay);
   },
   /**
    * @param {number} value
@@ -230,13 +257,16 @@ var onSocketMessage = {
     for (var i = 0; i < printableWarnings.length; i++) {
       log.warn(printableWarnings[i]);
     }
-    var needShowOverlayForWarnings = typeof options.overlay === "boolean" ? options.overlay : options.overlay && options.overlay.warnings;
-    if (needShowOverlayForWarnings) {
-      overlay.send({
-        type: "BUILD_ERROR",
-        level: "warning",
-        messages: _warnings
-      });
+    var overlayWarningsSetting = typeof options.overlay === "boolean" ? options.overlay : options.overlay && options.overlay.warnings;
+    if (overlayWarningsSetting) {
+      var warningsToDisplay = typeof overlayWarningsSetting === "function" ? _warnings.filter(overlayWarningsSetting) : _warnings;
+      if (warningsToDisplay.length) {
+        overlay.send({
+          type: "BUILD_ERROR",
+          level: "warning",
+          messages: _warnings
+        });
+      }
     }
     if (params && params.preventReloading) {
       return;
@@ -258,13 +288,16 @@ var onSocketMessage = {
     for (var i = 0; i < printableErrors.length; i++) {
       log.error(printableErrors[i]);
     }
-    var needShowOverlayForErrors = typeof options.overlay === "boolean" ? options.overlay : options.overlay && options.overlay.errors;
-    if (needShowOverlayForErrors) {
-      overlay.send({
-        type: "BUILD_ERROR",
-        level: "error",
-        messages: _errors
-      });
+    var overlayErrorsSettings = typeof options.overlay === "boolean" ? options.overlay : options.overlay && options.overlay.errors;
+    if (overlayErrorsSettings) {
+      var errorsToDisplay = typeof overlayErrorsSettings === "function" ? _errors.filter(overlayErrorsSettings) : _errors;
+      if (errorsToDisplay.length) {
+        overlay.send({
+          type: "BUILD_ERROR",
+          level: "error",
+          messages: _errors
+        });
+      }
     }
   },
   /**

package/client/overlay/state-machine.js

@@ -4,6 +4,7 @@ import createMachine from "./fsm.js";
  * @typedef {Object} ShowOverlayData
  * @property {'warning' | 'error'} level
  * @property {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
+ * @property {'build' | 'runtime'} messageSource
  */
 
 /**
@@ -22,7 +23,8 @@ var createOverlayMachine = function createOverlayMachine(options) {
     initial: "hidden",
     context: {
       level: "error",
-      messages: []
+      messages: [],
+      messageSource: "build"
     },
     states: {
       hidden: {
@@ -71,19 +73,22 @@ var createOverlayMachine = function createOverlayMachine(options) {
       dismissMessages: function dismissMessages() {
         return {
           messages: [],
-          level: "error"
+          level: "error",
+          messageSource: "build"
         };
       },
       appendMessages: function appendMessages(context, event) {
         return {
           messages: context.messages.concat(event.messages),
-          level: event.level || context.level
+          level: event.level || context.level,
+          messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build"
         };
       },
       setMessages: function setMessages(context, event) {
         return {
           messages: event.messages,
-          level: event.level || context.level
+          level: event.level || context.level,
+          messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build"
         };
       },
       hideOverlay: hideOverlay,

package/client/overlay.js

@@ -59,7 +59,7 @@ function formatProblem(type, item) {
 /**
  * @typedef {Object} CreateOverlayOptions
  * @property {string | null} trustedTypesPolicyName
- * @property {boolean} [catchRuntimeError]
+ * @property {boolean | (error: Error) => void} [catchRuntimeError]
  */
 
 /**
@@ -71,6 +71,8 @@ var createOverlay = function createOverlay(options) {
   var iframeContainerElement;
   /** @type {HTMLDivElement | null | undefined} */
   var containerElement;
+  /** @type {HTMLDivElement | null | undefined} */
+  var headerElement;
   /** @type {Array<(element: HTMLDivElement) => void>} */
   var onLoadQueue = [];
   /** @type {TrustedTypePolicy | undefined} */
@@ -112,7 +114,7 @@ var createOverlay = function createOverlay(options) {
       iframeContainerElement.contentDocument.createElement("div");
       contentElement.id = "webpack-dev-server-client-overlay-div";
       applyStyle(contentElement, containerStyle);
-      var headerElement = document.createElement("div");
+      headerElement = document.createElement("div");
       headerElement.innerText = "Compiled with problems:";
       applyStyle(headerElement, headerStyle);
       var closeButtonElement = document.createElement("button");
@@ -178,9 +180,11 @@ var createOverlay = function createOverlay(options) {
    * @param {string} type
    * @param {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
    * @param {string | null} trustedTypesPolicyName
+   * @param {'build' | 'runtime'} messageSource
    */
-  function show(type, messages, trustedTypesPolicyName) {
+  function show(type, messages, trustedTypesPolicyName, messageSource) {
     ensureOverlayExists(function () {
+      headerElement.innerText = messageSource === "runtime" ? "Uncaught runtime errors:" : "Compiled with problems:";
       messages.forEach(function (message) {
         var entryElement = document.createElement("div");
         var msgStyle = type === "warning" ? msgStyles.warning : msgStyles.error;
@@ -221,8 +225,9 @@ var createOverlay = function createOverlay(options) {
     showOverlay: function showOverlay(_ref) {
       var _ref$level = _ref.level,
         level = _ref$level === void 0 ? "error" : _ref$level,
-        messages = _ref.messages;
-      return show(level, messages, options.trustedTypesPolicyName);
+        messages = _ref.messages,
+        messageSource = _ref.messageSource;
+      return show(level, messages, options.trustedTypesPolicyName, messageSource);
     },
     hideOverlay: hide
   });
@@ -235,13 +240,16 @@ var createOverlay = function createOverlay(options) {
         return;
       }
       var errorObject = error instanceof Error ? error : new Error(error || message);
-      overlayService.send({
-        type: "RUNTIME_ERROR",
-        messages: [{
-          message: errorObject.message,
-          stack: parseErrorToStacks(errorObject)
-        }]
-      });
+      var shouldDisplay = typeof options.catchRuntimeError === "function" ? options.catchRuntimeError(errorObject) : true;
+      if (shouldDisplay) {
+        overlayService.send({
+          type: "RUNTIME_ERROR",
+          messages: [{
+            message: errorObject.message,
+            stack: parseErrorToStacks(errorObject)
+          }]
+        });
+      }
     });
   }
   return overlayService;

package/lib/Server.js

@@ -6,8 +6,6 @@ const url = require("url");
 const util = require("util");
 const fs = require("graceful-fs");
 const ipaddr = require("ipaddr.js");
-const defaultGateway = require("default-gateway");
-const express = require("express");
 const { validate } = require("schema-utils");
 const schema = require("./options.json");
 
@@ -156,10 +154,14 @@ const schema = require("./options.json");
  * @property {string} [username]
  */
 
+/**
+ * @typedef {boolean | ((error: Error) => void)} OverlayMessageOptions
+ */
+
 /**
  * @typedef {Object} ClientConfiguration
  * @property {"log" | "info" | "warn" | "error" | "none" | "verbose"} [logging]
- * @property {boolean  | { warnings?: boolean, errors?: boolean, runtimeErrors?: boolean }} [overlay]
+ * @property {boolean  | { warnings?: OverlayMessageOptions, errors?: OverlayMessageOptions, runtimeErrors?: OverlayMessageOptions }} [overlay]
  * @property {boolean} [progress]
  * @property {boolean | number} [reconnect]
  * @property {"ws" | "sockjs" | string} [webSocketTransport]
@@ -210,6 +212,44 @@ if (!process.env.WEBPACK_SERVE) {
   process.env.WEBPACK_SERVE = true;
 }
 
+/**
+ * @template T
+ * @param fn {(function(): any) | undefined}
+ * @returns {function(): T}
+ */
+const memoize = (fn) => {
+  let cache = false;
+  /** @type {T} */
+  let result;
+
+  return () => {
+    if (cache) {
+      return result;
+    }
+
+    result = /** @type {function(): any} */ (fn)();
+    cache = true;
+    // Allow to clean up memory for fn
+    // and all dependent resources
+    // eslint-disable-next-line no-undefined
+    fn = undefined;
+
+    return result;
+  };
+};
+
+const getExpress = memoize(() => require("express"));
+
+/**
+ *
+ * @param {OverlayMessageOptions} [setting]
+ * @returns
+ */
+const encodeOverlaySettings = (setting) =>
+  typeof setting === "function"
+    ? encodeURIComponent(setting.toString())
+    : setting;
+
 class Server {
   /**
    * @param {Configuration | Compiler | MultiCompiler} options
@@ -342,7 +382,7 @@ class Server {
    */
   static async internalIP(family) {
     try {
-      const { gateway } = await defaultGateway[family]();
+      const { gateway } = await require("default-gateway")[family]();
       return Server.findIp(gateway);
     } catch {
       // ignore
@@ -355,7 +395,7 @@ class Server {
    */
   static internalIPSync(family) {
     try {
-      const { gateway } = defaultGateway[family].sync();
+      const { gateway } = require("default-gateway")[family].sync();
       return Server.findIp(gateway);
     } catch {
       // ignore
@@ -628,12 +668,19 @@ class Server {
         }
 
         if (typeof client.overlay !== "undefined") {
-          searchParams.set(
-            "overlay",
+          const overlayString =
             typeof client.overlay === "boolean"
               ? String(client.overlay)
-              : JSON.stringify(client.overlay)
-          );
+              : JSON.stringify({
+                  ...client.overlay,
+                  errors: encodeOverlaySettings(client.overlay.errors),
+                  warnings: encodeOverlaySettings(client.overlay.warnings),
+                  runtimeErrors: encodeOverlaySettings(
+                    client.overlay.runtimeErrors
+                  ),
+                });
+
+          searchParams.set("overlay", overlayString);
         }
 
         if (typeof client.reconnect !== "undefined") {
@@ -1144,7 +1191,7 @@ class Server {
               // Ignore error
             }
 
-            // It is file
+            // It is a file
             return stats ? fs.readFileSync(item) : item;
           }
         };
@@ -1898,8 +1945,7 @@ class Server {
    */
   setupApp() {
     /** @type {import("express").Application | undefined}*/
-    // eslint-disable-next-line new-cap
-    this.app = new /** @type {any} */ (express)();
+    this.app = new /** @type {any} */ (getExpress())();
   }
 
   /**
@@ -2318,7 +2364,7 @@ class Server {
           middlewares.push({
             name: "express-static",
             path: publicPath,
-            middleware: express.static(
+            middleware: getExpress().static(
               staticOption.directory,
               staticOption.staticOptions
             ),
@@ -2373,7 +2419,7 @@ class Server {
             middlewares.push({
               name: "express-static",
               path: publicPath,
-              middleware: express.static(
+              middleware: getExpress().static(
                 staticOption.directory,
                 staticOption.staticOptions
               ),
@@ -2602,11 +2648,27 @@ class Server {
           /** @type {ClientConfiguration} */
           (this.options.client).overlay
         ) {
+          const overlayConfig = /** @type {ClientConfiguration} */ (
+            this.options.client
+          ).overlay;
+
           this.sendMessage(
             [client],
             "overlay",
-            /** @type {ClientConfiguration} */
-            (this.options.client).overlay
+            typeof overlayConfig === "object"
+              ? {
+                  ...overlayConfig,
+                  errors:
+                    overlayConfig.errors &&
+                    encodeOverlaySettings(overlayConfig.errors),
+                  warnings:
+                    overlayConfig.warnings &&
+                    encodeOverlaySettings(overlayConfig.warnings),
+                  runtimeErrors:
+                    overlayConfig.runtimeErrors &&
+                    encodeOverlaySettings(overlayConfig.runtimeErrors),
+                }
+              : overlayConfig
           );
         }
 
@@ -3257,7 +3319,7 @@ class Server {
              */
             (error) => {
               if (error.code === "ECONNREFUSED") {
-                // No other server listening on this socket so it can be safely removed
+                // No other server listening on this socket, so it can be safely removed
                 fs.unlinkSync(/** @type {string} */ (this.options.ipc));
 
                 resolve();

package/lib/options.json

@@ -98,25 +98,49 @@
           "additionalProperties": false,
           "properties": {
             "errors": {
-              "description": "Enables a full-screen overlay in the browser when there are compiler errors.",
-              "type": "boolean",
-              "cli": {
-                "negatedDescription": "Disables the full-screen overlay in the browser when there are compiler errors."
-              }
+              "anyOf": [
+                {
+                  "description": "Enables a full-screen overlay in the browser when there are compiler errors.",
+                  "type": "boolean",
+                  "cli": {
+                    "negatedDescription": "Disables the full-screen overlay in the browser when there are compiler errors."
+                  }
+                },
+                {
+                  "instanceof": "Function",
+                  "description": "Filter compiler errors. Return true to include and return false to exclude."
+                }
+              ]
             },
             "warnings": {
-              "description": "Enables a full-screen overlay in the browser when there are compiler warnings.",
-              "type": "boolean",
-              "cli": {
-                "negatedDescription": "Disables the full-screen overlay in the browser when there are compiler warnings."
-              }
+              "anyOf": [
+                {
+                  "description": "Enables a full-screen overlay in the browser when there are compiler warnings.",
+                  "type": "boolean",
+                  "cli": {
+                    "negatedDescription": "Disables the full-screen overlay in the browser when there are compiler warnings."
+                  }
+                },
+                {
+                  "instanceof": "Function",
+                  "description": "Filter compiler warnings. Return true to include and return false to exclude."
+                }
+              ]
             },
             "runtimeErrors": {
-              "description": "Enables a full-screen overlay in the browser when there are uncaught runtime errors.",
-              "type": "boolean",
-              "cli": {
-                "negatedDescription": "Disables the full-screen overlay in the browser when there are uncaught runtime errors."
-              }
+              "anyOf": [
+                {
+                  "description": "Enables a full-screen overlay in the browser when there are uncaught runtime errors.",
+                  "type": "boolean",
+                  "cli": {
+                    "negatedDescription": "Disables the full-screen overlay in the browser when there are uncaught runtime errors."
+                  }
+                },
+                {
+                  "instanceof": "Function",
+                  "description": "Filter uncaught runtime errors. Return true to include and return false to exclude."
+                }
+              ]
             },
             "trustedTypesPolicyName": {
               "description": "The name of a Trusted Types policy for the overlay. Defaults to 'webpack-dev-server#overlay'.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-server",
-  "version": "4.13.2",
+  "version": "4.14.0",
   "description": "Serves a webpack app. Updates the browser on changes.",
   "bin": "bin/webpack-dev-server.js",
   "main": "lib/Server.js",
@@ -129,7 +129,7 @@
     "typescript": "^4.9.3",
     "url-loader": "^4.1.1",
     "wait-for-expect": "^3.0.2",
-    "webpack": "^5.76.1",
+    "webpack": "^5.81.0",
     "webpack-cli": "^4.7.2",
     "webpack-merge": "^5.8.0"
   },