refactor(client): reuse webpack-dev-middleware's transports and overlay, and add "sse"

[alexander-akait]

Rebuilt on current main, against webpack-dev-middleware main.

What changed

Both transports come from webpack-dev-middleware now.
client-src/clients/WebSocketClient.js and client-src/clients/EventSourceClient.js
re-export them, and client.webSocketTransport resolves to those paths as it
always has. One copy means one place for the things this package's WebSocket
client was missing: a close() (which the interface declares and it never
had), the guard that stops a queued event reporting after the caller closed,
and resolving a relative or http(s): url for browsers whose WebSocket will
not.

The overlay comes from there too, behind an adapter that keeps this
package's shape on top of it — createOverlay().send and formatProblem —
its element id (webpack-dev-server-client-overlay), its Trusted Types policy
name, and its open-in-editor route. Its markup is the shared one now, so the
overlay snapshots are regenerated: the problem text and location survive, the
location is clickable (data-open-file), and the heading is the level rather
than "Compiled with problems".

"sse" is a second transport.

module.exports = {
  devServer: {
    client: { webSocketTransport: "sse" },
  },
};

The page connects with EventSource. The endpoint is the middleware's hot
endpoint — an ordinary response rather than an upgrade — so there is no second
server to start, and it sits in the chain where everything this package puts
in front of it can still see it. lib/servers/EventSourceServer.js is the
adapter between that endpoint and the transport shape the rest of the package
is written against, so nothing above the wire can tell which one it is talking
to: same protocol, same messages, same options.

Naming it as the client's transport picks the endpoint that serves it, so
webSocketServer does not have to be set as well; webSocketServer: "sse" is
accepted too.

Protection stays here

The endpoint hands over the request each client connected with, so
allowedHosts and the origin check decide exactly as they do for a socket.

There is one difference in how that check reads a request, and it is the
reason a browser could not connect at first. A browser puts an Origin on a
WebSocket handshake whether or not it is cross-origin, so a handshake without
one is not a page and is refused. EventSource sends no Origin on a
same-origin request, so the existing check refused every page this server
serves, in a reconnect loop. For a stream an absent Origin is now taken as a
page of this server's own; a stream that does carry one — which is what a
cross-origin page sends — is checked as before, and the Host check, which is
the DNS-rebinding defence, runs either way. Nothing about the WebSocket path
changed.

Tests

The EventSource side had none, here or anywhere in this package. It does now:

• test/client/clients/EventSourceClient.test.js — the contract both
  transports answer (connect, open, message as a string, close, and silence
  after close()), plus the one thing only a stream has: it reports a close
  when the connection falls silent without ever failing, and does not when
  messages keep arriving.
• test/client/clients/WebsocketClient.test.js — rewritten. It poked
  client.client.onerror, an internal that is webpack-dev-middleware's now, so
  it failed; it tests the public contract against a real server instead, and
  gained the close-means-silence case.
• test/e2e/event-source.test.js — a real browser over a real stream: it
  connects and takes a rebuild as a hot update, it is greeted with this
  package's handshake (hot, liveReload, progress, overlay), a
  disallowed origin is refused, and a request with no origin at all is taken
  as same-origin.

socket.js no longer throws on a frame it cannot parse. A stream's keep-alive
has to be a data: frame rather than a comment, or the client's own watchdog
would count a quiet connection as a dead one, so something that is not JSON
now arrives on the wire by design.

Worth knowing if you script a browser against the dev server: a stream is a
request that never ends, so a page with an open one never reaches "network
idle". Wait for load or domcontentloaded.

State

Green locally: overlay 39, the two transport client suites, the new
event-source suite, server-and-client-transport, web-socket-server,
web-socket-communication, allowed-hosts, client, validate-options,
normalize-options — 63/63 across the suites this touches, and lint, both
typecheck passes, spelling, the precompiled schema check and the full build
clean. Two IPv6 cases in test/server and the test/cli/basic cases fail
identically on main in this environment, so they are not from this change.

CI will be red until webpack-dev-middleware ships. ./client/ws and
./client/sse are not in the published 8.3.0 exports — this was verified
against webpack-dev-middleware main, installed from a local pack.

🤖 Generated with Claude Code

https://claude.ai/code/session_01UjuMAuk9o6UazjHzcAQCTA

[changeset-bot]

🦋 Changeset detected

Latest commit: 3328b32

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-server	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