From 0cbca3784a0288b0a6272dfeb3266b57d1efa180 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcello=20Baste=CC=81a-Forte?= Date: Wed, 25 Mar 2020 11:10:45 -0700 Subject: [PATCH 1/3] add custom sockHost/sockPort --- README.md | 12 +++++++----- src/helpers/injectRefreshEntry.js | 5 ++++- src/runtime/ErrorOverlayEntry.js | 9 ++++++--- src/runtime/createSocket.js | 8 +++----- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index e40fd887..778ff3c3 100644 --- a/README.md +++ b/README.md @@ -107,11 +107,13 @@ module.exports = api => { This plugin accepts a few options that are specifically targeted for advanced users. The allowed values are as follows: -| Name | Type | Default | Description | -| :-----------------------: | :-------: | :-----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **`disableRefreshCheck`** | `boolean` | `false` | Disables detection of react-refresh's Babel plugin. Useful if you do not parse JS files within `node_modules`, or if you have a Babel setup not entirely controlled by Webpack. | -| **`forceEnable`** | `boolean` | `false` | Enables the plugin forcefully. Useful if you want to use the plugin in production, or if you are using Webpack's `none` mode without `NODE_ENV`, for example. | -| **`useLegacyWDSSockets`** | `boolean` | `false` | Set this to true if you are using a webpack-dev-server version prior to 3.8 as it requires a custom SocketJS implementation. If you use this, you will also need to install `sockjs-client` as a peer depencency. | +| Name | Type | Default | Description | +| :-----------------------: | :-------: | :---------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disableRefreshCheck`** | `boolean` | `false` | Disables detection of react-refresh's Babel plugin. Useful if you do not parse JS files within `node_modules`, or if you have a Babel setup not entirely controlled by Webpack. | +| **`forceEnable`** | `boolean` | `false` | Enables the plugin forcefully. Useful if you want to use the plugin in production, or if you are using Webpack's `none` mode without `NODE_ENV`, for example. | +| **`sockHost`** | `string` | `undefined` | Set this to have the socket connect to a different host than `window.location.hostname` | +| **`sockPort`** | `number` | `undefined` | Set this to connect to a different port than `window.location.port` | +| **`useLegacyWDSSockets`** | `boolean` | `false` | Set this to true if you are using a webpack-dev-server version prior to 3.8 as it requires a custom SocketJS implementation. If you use this, you will also need to install `sockjs-client` as a peer depencency. | ## Related Work diff --git a/src/helpers/injectRefreshEntry.js b/src/helpers/injectRefreshEntry.js index d4a42320..0451e14a 100644 --- a/src/helpers/injectRefreshEntry.js +++ b/src/helpers/injectRefreshEntry.js @@ -8,12 +8,15 @@ * @returns {WebpackEntry} An injected entry object. */ const injectRefreshEntry = (originalEntry, options) => { + const sockHost = options.sockHost ? `&sockHost=${options.sockHost}` : ''; + const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : ''; + const queryParams = `?options${sockHost}${sockPort}`; const entryInjects = [ options.useLegacyWDSSockets && require.resolve('../runtime/LegacyWebpackDevServerSocket'), // React-refresh runtime require.resolve('../runtime/ReactRefreshEntry'), // Error overlay runtime - require.resolve('../runtime/ErrorOverlayEntry'), + require.resolve('../runtime/ErrorOverlayEntry') + queryParams, // React-refresh Babel transform detection require.resolve('../runtime/BabelDetectComponent'), ].filter(Boolean); diff --git a/src/runtime/ErrorOverlayEntry.js b/src/runtime/ErrorOverlayEntry.js index 8cca8447..175d7df1 100644 --- a/src/runtime/ErrorOverlayEntry.js +++ b/src/runtime/ErrorOverlayEntry.js @@ -1,5 +1,3 @@ -// TODO: Implement handling of this -// eslint-disable-next-line no-unused-vars /* global __resourceQuery */ const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); @@ -74,8 +72,13 @@ function compileMessageHandler(message) { } } +let overrides = {}; +if (__resourceQuery) { + overrides = require('querystring').parse(__resourceQuery.slice(1)); +} + // Registers handlers for compile errors -createSocket(compileMessageHandler); +createSocket(compileMessageHandler, overrides); // Registers handlers for runtime errors registerErrorHandler(function handleError(error) { hasRuntimeErrors = true; diff --git a/src/runtime/createSocket.js b/src/runtime/createSocket.js index 74c4cfce..9d430cca 100644 --- a/src/runtime/createSocket.js +++ b/src/runtime/createSocket.js @@ -8,18 +8,16 @@ const loadWHMEventSource = require('./WHMEventSource'); * Creates a socket server for HMR according to the user's Webpack configuration. * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages. */ -function createSocket(messageHandler) { +function createSocket(messageHandler, options) { // This adds support for custom WDS socket transportModes // In the future, we should add support for custom clients to better support WDM if (typeof __webpack_dev_server_client__ !== 'undefined') { const SocketClient = __webpack_dev_server_client__; const connection = new SocketClient( - // TODO: Dynamically generate this to handle resourceQuery - // TODO: Use resourceQuery to fix servers under proxies url.format({ protocol: window.location.protocol, - hostname: window.location.hostname, - port: window.location.port, + hostname: options.sockHost || window.location.hostname, + port: options.sockPort || window.location.port, // TODO: Support usage of custom sockets after WDS 4.0 is released // Ref: https://github.com/webpack/webpack-dev-server/pull/2055 pathname: '/sockjs-node', From 4cbdb5df849b753a71d5b3f23608d95e1b060962 Mon Sep 17 00:00:00 2001 From: Marcello Bastea-Forte Date: Sun, 29 Mar 2020 15:40:32 -0700 Subject: [PATCH 2/3] add sockPath option --- src/helpers/injectRefreshEntry.js | 3 ++- src/runtime/createSocket.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/helpers/injectRefreshEntry.js b/src/helpers/injectRefreshEntry.js index 7b87bcae..966b9825 100644 --- a/src/helpers/injectRefreshEntry.js +++ b/src/helpers/injectRefreshEntry.js @@ -10,7 +10,8 @@ const injectRefreshEntry = (originalEntry, options) => { const sockHost = options.sockHost ? `&sockHost=${options.sockHost}` : ''; const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : ''; - const queryParams = `?options${sockHost}${sockPort}`; + const sockPath = options.sockPath ? `&sockPath=${options.sockPath}` : ''; + const queryParams = `?options${sockHost}${sockPort}${sockPath}`; const entryInjects = [ // Legacy WDS SockJS integration options.useLegacyWDSSockets && require.resolve('../runtime/LegacyWebpackDevServerSocket'), diff --git a/src/runtime/createSocket.js b/src/runtime/createSocket.js index 9d430cca..be22a36b 100644 --- a/src/runtime/createSocket.js +++ b/src/runtime/createSocket.js @@ -20,7 +20,7 @@ function createSocket(messageHandler, options) { port: options.sockPort || window.location.port, // TODO: Support usage of custom sockets after WDS 4.0 is released // Ref: https://github.com/webpack/webpack-dev-server/pull/2055 - pathname: '/sockjs-node', + pathname: options.sockPath || '/sockjs-node', }) ); connection.onClose(function onSocketClose() { From 6bd72d1a5ea5806a6ebc431b889c793042335094 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcello=20Baste=CC=81a-Forte?= Date: Mon, 30 Mar 2020 19:46:12 -0700 Subject: [PATCH 3/3] update readme --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index 26fe3844..d462c217 100644 --- a/README.md +++ b/README.md @@ -169,6 +169,26 @@ Modifies how the error overlay integration works in the plugin. }; ``` + +### `options.sockHost` + +Type: `string` +Default: effectively `window.location.hostname` + +Set this if you are running webpack on a host other than `window.location.hostname`. This is used by the error overlay module. + +### `options.sockPort` + +Type: `number` +Default: effectively `window.location.port` + +Set this if you are running webpack on a port other than `window.location.port` + +### `options.sockPath` + +Type: `string` +Default: `/sockjs-node` + ### `options.useLegacyWDSSockets` Type: `boolean`