Expose Socket Client for external integrations #4261
Description
Feature Proposal
Allow external integrations to tap into the socket client of WDS in order to consume compilation events, such as build logs, errors, progress, etc.
Right now, the client is done as a module level singleton:
webpack-dev-server/client-src/socket.js
Line 19 in 87401b4
Perhaps we can assign it to some special global variable on window, or export this variable, so external parties can just consume the client.
Feature Use Case
This is mainly for custom error overlays that include wider coverage outside of what WDS provides (react-error-overlay, overlay from @pmmmwh/react-refresh-webpack-plugin), but it would also enable client-only tooling to sniff on HMR lifecycle, build status and more.
It is not impossible to achieve this functionality right now since the __webpack_dev_server_client__ global is defined, and we can use that as a starting point, but we would have to do two things that is not preferrable:
- Duplicate socket URL logic - which tightly couples the code to 1 version of WDS (and we have to keep up with all the special cases handled here)
- Duplicate socket connection - since we have to create the client from scratch, the connection would happen multiple times, which could be confusing to users ([webpack-dev-server]: Setting Websocket Connection invoked twice #4224, SockJS connection is duplicated with error overlay enabled pmmmwh/react-refresh-webpack-plugin#279, Migrate plugin for Webpack dev server v4 pmmmwh/react-refresh-webpack-plugin#481)
Inspirations
webpack-hot-middleware