webpack-dev-server 5.0.0 → 5.0.2

package/client/overlay.js

@@ -151,7 +151,7 @@ var createOverlay = function createOverlay(options) {
    */
   function ensureOverlayExists(callback, trustedTypesPolicyName) {
     if (containerElement) {
-      containerElement.innerHTML = "";
+      containerElement.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML("") : "";
       // Everything is ready, call the callback right away.
       callback(containerElement);
       return;

package/lib/Server.js

@@ -18,8 +18,6 @@ const schema = require("./options.json");
 /** @typedef {import("webpack").Stats} Stats */
 /** @typedef {import("webpack").MultiStats} MultiStats */
 /** @typedef {import("os").NetworkInterfaceInfo} NetworkInterfaceInfo */
-/** @typedef {import("express").Request} Request */
-/** @typedef {import("express").Response} Response */
 /** @typedef {import("express").NextFunction} NextFunction */
 /** @typedef {import("express").RequestHandler} ExpressRequestHandler */
 /** @typedef {import("express").ErrorRequestHandler} ExpressErrorRequestHandler */
@@ -42,14 +40,19 @@ const schema = require("./options.json");
 
 /** @typedef {import("https").ServerOptions & { spdy?: { plain?: boolean | undefined, ssl?: boolean | undefined, 'x-forwarded-for'?: string | undefined, protocol?: string | undefined, protocols?: string[] | undefined }}} ServerOptions */
 
+/** @typedef {import("express").Request} Request */
+/** @typedef {import("express").Response} Response */
+
 /**
- * @template Request, Response
- * @typedef {import("webpack-dev-middleware").Options<IncomingMessage, ServerResponse>} DevMiddlewareOptions
+ * @template {Request} T
+ * @template {Response} U
+ * @typedef {import("webpack-dev-middleware").Options<T, U>} DevMiddlewareOptions
  */
 
 /**
- * @template Request, Response
- * @typedef {import("webpack-dev-middleware").Context<IncomingMessage, ServerResponse>} DevMiddlewareContext
+ * @template {Request} T
+ * @template {Response} U
+ * @typedef {import("webpack-dev-middleware").Context<T, U>} DevMiddlewareContext
  */
 
 /**
@@ -1841,36 +1844,20 @@ class Server {
     const { app, middleware } = this;
 
     /** @type {import("express").Application} */
-    (app).get(
-      "/__webpack_dev_server__/sockjs.bundle.js",
-      /**
-       * @param {Request} req
-       * @param {Response} res
-       * @returns {void}
-       */
-      (req, res) => {
-        res.setHeader("Content-Type", "application/javascript");
+    (app).get("/__webpack_dev_server__/sockjs.bundle.js", (req, res) => {
+      res.setHeader("Content-Type", "application/javascript");
 
-        const clientPath = path.join(__dirname, "..", "client");
+      const clientPath = path.join(__dirname, "..", "client");
 
-        res.sendFile(path.join(clientPath, "modules/sockjs-client/index.js"));
-      },
-    );
+      res.sendFile(path.join(clientPath, "modules/sockjs-client/index.js"));
+    });
 
     /** @type {import("express").Application} */
-    (app).get(
-      "/webpack-dev-server/invalidate",
-      /**
-       * @param {Request} _req
-       * @param {Response} res
-       * @returns {void}
-       */
-      (_req, res) => {
-        this.invalidate();
+    (app).get("/webpack-dev-server/invalidate", (_req, res) => {
+      this.invalidate();
 
-        res.end();
-      },
-    );
+      res.end();
+    });
 
     /** @type {import("express").Application} */
     (app).get("/webpack-dev-server/open-editor", (req, res) => {
@@ -1886,74 +1873,65 @@ class Server {
     });
 
     /** @type {import("express").Application} */
-    (app).get(
-      "/webpack-dev-server",
-      /**
-       * @param {Request} req
-       * @param {Response} res
-       * @returns {void}
-       */
-      (req, res) => {
-        /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
-        (middleware).waitUntilValid((stats) => {
-          res.setHeader("Content-Type", "text/html");
-          // HEAD requests should not return body content
-          if (req.method === "HEAD") {
-            res.end();
-            return;
-          }
-          res.write(
-            '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>',
-          );
+    (app).get("/webpack-dev-server", (req, res) => {
+      /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
+      (middleware).waitUntilValid((stats) => {
+        res.setHeader("Content-Type", "text/html");
+        // HEAD requests should not return body content
+        if (req.method === "HEAD") {
+          res.end();
+          return;
+        }
+        res.write(
+          '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>',
+        );
 
-          const statsForPrint =
-            typeof (/** @type {MultiStats} */ (stats).stats) !== "undefined"
-              ? /** @type {MultiStats} */ (stats).toJson().children
-              : [/** @type {Stats} */ (stats).toJson()];
+        const statsForPrint =
+          typeof (/** @type {MultiStats} */ (stats).stats) !== "undefined"
+            ? /** @type {MultiStats} */ (stats).toJson().children
+            : [/** @type {Stats} */ (stats).toJson()];
 
-          res.write(`<h1>Assets Report:</h1>`);
+        res.write(`<h1>Assets Report:</h1>`);
 
-          /**
-           * @type {StatsCompilation[]}
-           */
-          (statsForPrint).forEach((item, index) => {
-            res.write("<div>");
-
-            const name =
-              // eslint-disable-next-line no-nested-ternary
-              typeof item.name !== "undefined"
-                ? item.name
-                : /** @type {MultiStats} */ (stats).stats
-                  ? `unnamed[${index}]`
-                  : "unnamed";
-
-            res.write(`<h2>Compilation: ${name}</h2>`);
-            res.write("<ul>");
-
-            const publicPath =
-              item.publicPath === "auto" ? "" : item.publicPath;
-
-            for (const asset of /** @type {NonNullable<StatsCompilation["assets"]>} */ (
-              item.assets
-            )) {
-              const assetName = asset.name;
-              const assetURL = `${publicPath}${assetName}`;
-
-              res.write(
-                `<li>
+        /**
+         * @type {StatsCompilation[]}
+         */
+        (statsForPrint).forEach((item, index) => {
+          res.write("<div>");
+
+          const name =
+            // eslint-disable-next-line no-nested-ternary
+            typeof item.name !== "undefined"
+              ? item.name
+              : /** @type {MultiStats} */ (stats).stats
+                ? `unnamed[${index}]`
+                : "unnamed";
+
+          res.write(`<h2>Compilation: ${name}</h2>`);
+          res.write("<ul>");
+
+          const publicPath = item.publicPath === "auto" ? "" : item.publicPath;
+
+          for (const asset of /** @type {NonNullable<StatsCompilation["assets"]>} */ (
+            item.assets
+          )) {
+            const assetName = asset.name;
+            const assetURL = `${publicPath}${assetName}`;
+
+            res.write(
+              `<li>
               <strong><a href="${assetURL}" target="_blank">${assetName}</a></strong>
             </li>`,
-              );
-            }
-
-            res.write("</ul>");
-            res.write("</div>");
-          });
+            );
+          }
 
-          res.end("</body></html>");
+          res.write("</ul>");
+          res.write("</div>");
         });
-      },
-    );
+
+        res.end("</body></html>");
+      });
+    });
   }
 
   /**

package/lib/getPort.js

@@ -46,7 +46,7 @@ const checkAvailablePort = (basePort, host) =>
     server.on("error", reject);
 
     server.listen(basePort, host, () => {
-      // Next line should return AdressInfo because we're calling it after listen() and before close()
+      // Next line should return AddressInfo because we're calling it after listen() and before close()
       const { port } = /** @type {import("net").AddressInfo} */ (
         server.address()
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-server",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "Serves a webpack app. Updates the browser on changes.",
   "bin": "bin/webpack-dev-server.js",
   "main": "lib/Server.js",
@@ -25,12 +25,14 @@
   },
   "scripts": {
     "fmt:check": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
-    "lint:js": "eslint . --cache",
+    "lint:prettier": "prettier --cache --list-different .",
+    "lint:js": "eslint --cache .",
     "lint:types": "tsc --pretty --noEmit",
-    "lint": "npm-run-all -p \"fmt:**\" \"lint:**\"",
-    "fmt": "npm run fmt:check -- --write",
+    "lint:spelling": "cspell --cache --no-must-find-files --quiet \"**/*.*\"",
+    "lint": "npm-run-all -l -p \"lint:**\"",
     "fix:js": "npm run lint:js -- --fix",
-    "fix": "npm-run-all fix:js fmt",
+    "fix:prettier": "npm run lint:prettier -- --write",
+    "fix": "npm-run-all -l fix:js fix:prettier",
     "commitlint": "commitlint --from=master",
     "build:client": "rimraf -g ./client/* && babel client-src/ --out-dir client/ --ignore \"client-src/webpack.config.js\" --ignore \"client-src/modules\" && webpack --config client-src/webpack.config.js",
     "build:types": "rimraf -g ./types/* && tsc --declaration --emitDeclarationOnly --outDir types && node ./scripts/extend-webpack-types.js && prettier \"types/**/*.ts\" --write && prettier \"types/**/*.ts\" --write",
@@ -96,6 +98,7 @@
     "babel-loader": "^9.1.0",
     "body-parser": "^1.19.2",
     "core-js": "^3.31.0",
+    "cspell": "^8.3.2",
     "css-loader": "^6.8.1",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^9.1.0",