[alexander-akait]

This takes over the last pieces webpack-dev-server still wired up itself, so that server can delete its own client and socket server (webpack/webpack-dev-server#5750). There is one client: this package's. Whatever webpack-dev-server needs to stay compatible with its 6.x users (its { type, data } messages, its client/* paths, sendMessage()) lives in webpack-dev-server, not here.

New options and exports

hot.client: false	Adds no runtime to the page but still applies HotModuleReplacementPlugin, for a page that wires its own client.
Plugin on every served compilation	Server bundles (target: "node") get the plugin too, so webpack/hot/poll and webpack/hot/signal keep their module.hot. The client entry is still added only where a browser runs the compilation.
hot.client.transport: "<module>"	A module that exports a client class is handed to the runtime as __webpack_dev_server_client__, which is how webpack-dev-server's client.webSocketTransport has always worked.
hot.ws	Passed to the ws server: compression, maxPayload, handleProtocols, verifyClient, or a port/server of its own. hot.cors and hot.token are still checked first.
webpack-dev-middleware/client/socket	The live connection: client is the current transport instance, null before the runtime starts to connect and while it waits to reconnect, and client.client is the WebSocket/EventSource underneath, typed. This is the shape webpack-dev-server's client/socket had, which @pmmmwh/react-refresh-webpack-plugin reads.

Client fixes from comparing webpack-dev-server 6.0's client with this one

• Malformed escapes in the page url: ?discount=50% no longer makes every update fail with "Invalid HMR message".
• apply: "reload" after a reconnect: a tab that reconnects after a restart reloads onto the newer build; one already running it is left alone.
• Warnings alongside errors: a build with both logs and posts its warnings too, first, with ANSI codes stripped.
• webpack-dev-server's query spelling: protocol, hostname, port, pathname, username, password, live-reload and hot=only are read, so a hand-written webpack-dev-server/client/index.js?… entry keeps working.
• ES5 down to the logger: the published client imports ES5 copies of webpack's Logger and createConsoleLogger; a test parses an ["web", "es5"] bundle of it with acorn ecmaVersion: 5.
• Overlay: z-index: 2147483647, and Esc/keyCode 27 close it.
• Building indicator: renders without Shadow DOM, announced as role="progressbar" with aria-valuenow.

Tests

• React Refresh, test/e2e/react-refresh.test.js (14): @pmmmwh/react-refresh-webpack-plugin 0.6.3 with React 19, over Server-Sent Events and over a WebSocket:

  • a component keeps its state across an edit, and across several in a row;
  • an edit to another module updates it and keeps its parent's state;
  • a component whose hooks changed is started over, in place;
  • a build error shows the overlay, and the fix is applied in place;
  • an error thrown while rendering shows, and the root renders again once fixed;
  • an edit no component accepts reloads the page.

  The sources are written as react-refresh/babel leaves them: babel-loader cannot load @babel/core in this test runner on every Node.js version CI uses.

• Universal builds (target: "universal" and ["web", "node"]): test/universal-target.test.js runs the bundle in Node (no error, nothing from the client, nothing left running), and test/e2e/universal-target.test.js updates a page in place and shows and clears the overlay.

• Options and exports: client: false, the plugin on Node targets, a client transport module, hot.ws in every shape, and the live client export.

• test/e2e/dev-server-parity.test.js: one test per audit item above.

• Locally: unit 7353 of 7355 (the other two expect a writeToDisk EACCES, which root never gets); e2e 215 of 215, plus the 14 React Refresh tests; lint and types clean.

🤖 Generated with Claude Code

https://claude.ai/code/session_01UjuMAuk9o6UazjHzcAQCTA

Summary by CodeRabbit

• New Features
  • Configure WebSocket connections with a dedicated port or server, and pass additional WebSocket server options.
  • Use a custom client transport, or disable browser runtime injection while keeping hot-module replacement enabled.
  • Access the active client connection for monitoring, and use hot updates with universal build targets.
  • React Fast Refresh is supported with Server-Sent Events and WebSocket transports.
• Bug Fixes
  • Improved reload behavior after reconnects, handling of malformed URL escapes, and warning and error reporting.
  • The build overlay now responds to Escape consistently and appears above other content. Progress indicators include accessibility information and work without Shadow DOM.
  • Improved compatibility with legacy client options and ES5 output.
• Documentation
  • Expanded guidance for WebSocket options, client configuration, and hot-module replacement behavior.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0c2aa2a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
webpack-dev-middleware	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• No new commits to review - use @coderabbitai full review for a full pass

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 4ebacf1a-fa70-4795-a613-fafffea1e030

📥 Commits

Reviewing files that changed from the base of the PR and between 07c1ca2 and 7eb4444.

📒 Files selected for processing (1)

• test/universal-target.test.js

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 6 remain after this review.

---

Walkthrough

The changes add webpack-dev-server protocol support, custom client transports, and configurable WebSocket server listeners. They update browser-client query handling, reload behavior, message reporting, overlays, and progress indicators. The active socket connection is exposed through a package export. Build scripts generate ES5 logger modules, and tests cover the new runtime and client behavior.

Priority: ➖ Normal

Merge Risk: ⚪ Minimal · up to 7eb44

The reviewed change adds coverage for the supported target spellings and runtimes, with no actionable merge risk identified in the supplied scope.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 98.72% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 78 functions across 58 files. (5 skipped: 5…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: moving webpack-dev-server’s remaining compiler and socket wiring into webpack-dev-middleware.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

---

ℹ️ Review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 3833918b-f7fd-4c03-8ae4-88fcfab34aa4

📥 Commits

Reviewing files that changed from the base of the PR and between d15ffc2 and 27f01ae.

📒 Files selected for processing (31)

• .changeset/dev-server-client-parity.md
• .changeset/finish-dev-server-migration.md
• .cspell.json
• README.md
• babel.config.js
• client-src/clients/createSocket.js
• client-src/index.js
• client-src/indicator.js
• client-src/overlay.js
• client-src/socket.js
• package.json
• scripts/build-client-logger.mjs
• src/hot.js
• src/options.check.js
• src/options.json
• src/servers/WebSocketServer.js
• src/utils.js
• test/__snapshots__/validation-options.test.js.snap.webpack5
• test/client-bundle.test.js
• test/client-socket.test.js
• test/e2e/dev-server-parity.test.js
• test/e2e/live-reload.test.js
• test/e2e/transport.test.js
• test/fixtures/custom-client-transport.js
• test/hot.test.js
• test/inject-client.test.js
• types/client/clients/createSocket.d.ts
• types/client/socket.d.ts
• types/hot.d.ts
• types/servers/WebSocketServer.d.ts
• types/utils.d.ts

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 96.55%. Comparing base (d15ffc2) to head (0c2aa2a).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2472      +/-   ##
==========================================
+ Coverage   96.39%   96.55%   +0.16%     
==========================================
  Files          24       24              
  Lines        2579     2642      +63     
==========================================
+ Hits         2486     2551      +65     
+ Misses         93       91       -2     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 7cb54297-db22-40ad-985b-4b394e19d851

📥 Commits

Reviewing files that changed from the base of the PR and between 27f01ae and 0b50966.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (52)

• .changeset/webpack-dev-server-protocol.md
• .cspell.json
• README.md
• client-src/clients/EventSourceClient.js
• client-src/webpack-dev-server/clients/WebSocketClient.js
• client-src/webpack-dev-server/globals.d.ts
• client-src/webpack-dev-server/index.js
• client-src/webpack-dev-server/modules/logger/index.js
• client-src/webpack-dev-server/modules/logger/tapable.js
• client-src/webpack-dev-server/overlay.js
• client-src/webpack-dev-server/progress.js
• client-src/webpack-dev-server/socket.js
• client-src/webpack-dev-server/utils/log.js
• client-src/webpack-dev-server/utils/sendMessage.js
• package.json
• scripts/build-dev-server-logger.mjs
• src/hot.js
• src/index.js
• src/options.check.js
• src/options.json
• src/servers/WebSocketServer.js
• src/utils.js
• src/webpack-dev-server.js
• test/__snapshots__/validation-options.test.js.snap.webpack5
• test/client-transports.test.js
• test/client/webpack-dev-server/ReactErrorBoundary.test.js
• test/client/webpack-dev-server/__snapshots__/index.test.js.snap.webpack5
• test/client/webpack-dev-server/__snapshots__/socket-helper.test.js.snap.webpack5
• test/client/webpack-dev-server/bundle.test.js
• test/client/webpack-dev-server/clients/WebsocketClient.test.js
• test/client/webpack-dev-server/clients/__snapshots__/WebsocketClient.test.js.snap.webpack5
• test/client/webpack-dev-server/helpers/jsdom-setup.js
• test/client/webpack-dev-server/index.test.js
• test/client/webpack-dev-server/overlay-lifecycle.test.js
• test/client/webpack-dev-server/socket-helper.test.js
• test/client/webpack-dev-server/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack5
• test/client/webpack-dev-server/utils/__snapshots__/log.test.js.snap.webpack5
• test/client/webpack-dev-server/utils/__snapshots__/sendMessage.test.js.snap.webpack5
• test/client/webpack-dev-server/utils/createSocketURL.test.js
• test/client/webpack-dev-server/utils/getCurrentScriptSource.test.js
• test/client/webpack-dev-server/utils/log.test.js
• test/client/webpack-dev-server/utils/sendMessage.test.js
• test/e2e/dev-server-parity.test.js
• test/e2e/webpack-dev-server-runtime.test.js
• test/validation-options.test.js
• test/webpack-dev-server-protocol.test.js
• tsconfig.client.dev-server.json
• tsconfig.client.json
• types/hot.d.ts
• types/index.d.ts
• types/utils.d.ts
• types/webpack-dev-server.d.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• .cspell.json
• test/e2e/dev-server-parity.test.js

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to GitHub limitations.

⚠️ Outside diff range comments (2)

🟡 Minor · Keep the username and password separate until URL formatting. · index.js:830-843

client-src/webpack-dev-server/index.js:830-843
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win

Keep the username and password separate until URL formatting.

runtimeQuery emits username and password separately, but createSocketURL joins them before formatURL splits at the first colon. For username=a%3Ab&password=pw, the socket URL becomes ws://a:b%3Apw@example.com/ws, encoding username a and password b:pw instead of the configured values. An endpoint that uses these credentials can reject the connection. Pass both fields separately to formatURL, and add this case to the createSocketURL tests.

Suggested fix

--- a/client-src/webpack-dev-server/index.js
+++ b/client-src/webpack-dev-server/index.js
@@
- * @param {{ protocol?: string, auth?: string, hostname?: string, port?: string, pathname?: string, search?: string, hash?: string, slashes?: boolean }} objURL object URL
+ * @param {{ protocol?: string, username?: string, password?: string, hostname?: string, port?: string, pathname?: string, search?: string, hash?: string, slashes?: boolean }} objURL object URL
@@
-  let auth = objURL.auth || "";
-
-  if (auth) {
-    // Only the first colon separates the username from the password.
-    const separator = auth.indexOf(":");
-
-    auth =
-      separator === -1
-        ? encodeURIComponent(auth)
-        : `${encodeURIComponent(auth.slice(0, separator))}:${encodeURIComponent(auth.slice(separator + 1))}`;
+  let auth = "";
+
+  if (objURL.username) {
+    auth = encodeURIComponent(objURL.username);
+
+    if (objURL.password) {
+      auth += `:${encodeURIComponent(objURL.password)}`;
+    }
+
     auth += "@";
   }
@@
-  let socketURLAuth = "";
+  let socketURLUsername = "";
+  let socketURLPassword = "";
@@
-    socketURLAuth = decodeAuth(parsedURL.username);
+    socketURLUsername = decodeAuth(parsedURL.username);
@@
-      socketURLAuth = socketURLAuth.concat(":", decodeAuth(parsedURL.password));
+      socketURLPassword = decodeAuth(parsedURL.password);
@@
-    auth: socketURLAuth,
+    username: socketURLUsername,
+    password: socketURLPassword,
--- a/test/client/webpack-dev-server/utils/createSocketURL.test.js
+++ b/test/client/webpack-dev-server/utils/createSocketURL.test.js
@@
     [
       "?hostname=example.com&username=user&password=pa:ss",
       "http://example.com",
       "ws://user:pa%3Ass@example.com/ws",
     ],
+    [
+      "?hostname=example.com&username=a%3Ab&password=pw",
+      "http://example.com",
+      "ws://a%3Ab:pw@example.com/ws",
+    ],

🟡 Minor · Limit the raw-client statement to built-in transports. · README.md:1018-1021

README.md:1018-1021
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win

Limit the raw-client statement to built-in transports.

When the runtime uses a custom transport, the exported client is the adapter. The CommunicationClient hooks do not require a .client property, so the documented listener can skip attaching to a raw connection. State that the guarantee applies to built-in transports and that custom transports need not expose a native client.

Suggested fix

-// `client` is live: `null` before the runtime starts to connect and while it
-// waits to reconnect. `client.client` is the `WebSocket` or `EventSource`
-// underneath, a new one for each connection, so a listener added to it hears
-// that connection only.
+// `client` is live: `null` before the runtime starts to connect and while it
+// waits to reconnect. With a built-in transport, `client.client` is the
+// `WebSocket` or `EventSource` underneath, a new one for each connection, so
+// a listener added to it hears that connection only. Custom transports need
+// not expose a native client.

---

ℹ️ Review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 1685de6d-ac30-47fe-bc0b-f0c76e4a17bd

📥 Commits

Reviewing files that changed from the base of the PR and between 0b50966 and ad06ba9.

📒 Files selected for processing (8)

• README.md
• client-src/clients/createSocket.js
• client-src/socket.js
• client-src/webpack-dev-server/index.js
• src/utils.js
• test/client/webpack-dev-server/utils/createSocketURL.test.js
• test/webpack-dev-server-protocol.test.js
• types/client/clients/createSocket.d.ts

🚧 Files skipped from review as they are similar to previous changes (6)

• client-src/socket.js
• client-src/clients/createSocket.js
• test/webpack-dev-server-protocol.test.js
• types/client/clients/createSocket.d.ts
• src/utils.js
• README.md

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 6 remain after this review.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	react-refresh@​0.19.0
	react@​19.3.0
	@​pmmmwh/​react-refresh-webpack-plugin@​0.6.3
	react-dom@​19.3.0

View full report

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 0ba8706c-e994-42c0-97b0-f21269ffecfd

📥 Commits

Reviewing files that changed from the base of the PR and between 7eb4444 and c82c422.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (15)

• .cspell.json
• README.md
• package.json
• src/hot.js
• src/options.check.js
• src/options.json
• src/servers/WebSocketServer.js
• src/utils.js
• test/__snapshots__/validation-options.test.js.snap.webpack5
• test/e2e/dev-server-parity.test.js
• test/e2e/react-refresh.test.js
• test/e2e/universal-target.test.js
• test/universal-target.test.js
• types/hot.d.ts
• types/utils.d.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• test/snapshots/validation-options.test.js.snap.webpack5

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.