feat: add hot option for hot module replacement

.changeset/hot-middleware-migration.md

@@ -0,0 +1,5 @@
+---
+"webpack-dev-middleware": minor
+---
+
+Added a `hot` option that enables hot module replacement, replacing the need for `webpack-hot-middleware`. Pass `hot: true` to enable with defaults, or `hot: { path, heartbeat, progress, statsOptions }` to customize. The client runtime ships with the package and is added as a webpack entry.

.cspell.json

@@ -24,7 +24,18 @@
     "finalhandler",
     "hono",
     "rspack",
-    "malformed"
+    "apos",
+    "malformed",
+    "Consolas",
+    "cspellcache",
+    "CSSOM",
+    "darkgrey",
+    "eslintcache",
+    "esmodules",
+    "mbold",
+    "mred",
+    "noopener",
+    "noreferrer"
   ],
   "ignorePaths": [
     "CHANGELOG.md",
@@ -36,6 +47,8 @@
     "coverage",
     "*.log",
     "./test/fixtures/**",
-    "./test/outputs/**"
+    "./test/outputs/**",
+    "client/**",
+    "examples/*/dist/**"
   ]
 }

.gitignore

@@ -6,7 +6,8 @@ logs
 npm-debug.log*
 .eslintcache
 .cspellcache
-/dist
+/client
+dist
 /local
 /reports
 /test/outputs

babel.config.js

@@ -1,19 +1,32 @@
 const MIN_BABEL_VERSION = 7;
 
+// The middleware itself runs on the node.js version `engines` requires.
+const NODE_TARGETS = { node: "20.9.0" };
+// The hot client runs in the browser: it must stay parsable by an ES5 engine,
+// so it is compiled down to ES5 (`ie: "11"` is preset-env's ES5 baseline).
+// `modules: false` keeps the ESM syntax for webpack to tree-shake.
+const CLIENT_TARGETS = { ie: "11" };
+
 module.exports = (api) => {
   api.assertVersion(MIN_BABEL_VERSION);
-  api.cache(true);
+
+  // Jest transforms the sources too — there everything, the client included,
+  // has to be CommonJS for the node.js running the tests.
+  if (api.env("test")) {
+    return {
+      presets: [["@babel/preset-env", { targets: NODE_TARGETS }]],
+    };
+  }
 
   return {
-    presets: [
-      [
-        "@babel/preset-env",
-        {
-          targets: {
-            node: "20.9.0",
-          },
-        },
-      ],
+    presets: [["@babel/preset-env", { targets: NODE_TARGETS }]],
+    overrides: [
+      {
+        test: "./client-src",
+        presets: [
+          ["@babel/preset-env", { modules: false, targets: CLIENT_TARGETS }],
+        ],
+      },
     ],
   };
 };

client-src/globals.d.ts

@@ -0,0 +1,39 @@
+/* eslint-disable */
+
+declare module "ansi-html-community" {
+  function ansiHtmlCommunity(str: string): string;
+  namespace ansiHtmlCommunity {
+    function setColors(colors: Record<string, string | string[]>): void;
+  }
+  export = ansiHtmlCommunity;
+}
+
+interface ClientReporter {
+  cleanProblemsCache(name: string): void;
+  problems(
+    type: "errors" | "warnings",
+    obj: { errors: string[]; warnings: string[]; name?: string },
+  ): boolean;
+  success(obj?: { name?: string }): void;
+  useCustomOverlay(customOverlay: unknown): void;
+}
+
+interface EventSourceWrapper {
+  addMessageListener(fn: (event: { data: string }) => void): void;
+  close(): void;
+}
+
+interface OverlayTrustedTypesPolicy {
+  createHTML(value: string): string;
+}
+
+interface Window {
+  __wdmEventSourceWrapper?: Record<string, EventSourceWrapper>;
+  __webpack_dev_middleware_hot_reporter__?: ClientReporter;
+  trustedTypes?: {
+    createPolicy(
+      name: string,
+      rules: { createHTML(value: string): string },
+    ): OverlayTrustedTypesPolicy;
+  };
+}