diff --git a/src/runtime/ErrorOverlayEntry.js b/src/runtime/ErrorOverlayEntry.js index 3b2e855f..371b44c0 100644 --- a/src/runtime/ErrorOverlayEntry.js +++ b/src/runtime/ErrorOverlayEntry.js @@ -1,4 +1,4 @@ -/* global __resourceQuery, __react_refresh_error_overlay__, __react_refresh_init_socket__ */ +/* global __react_refresh_error_overlay__, __react_refresh_init_socket__ */ const registerErrorEventHandlers = require('./errorEventHandlers'); const formatWebpackErrors = require('./formatWebpackErrors'); @@ -67,16 +67,8 @@ function compileMessageHandler(message) { } } -let overrides = {}; -if (__resourceQuery) { - const searchParams = new URLSearchParams(__resourceQuery.slice(1)); - searchParams.forEach(function (value, key) { - overrides[key] = value; - }); -} - // Registers handlers for compile errors -__react_refresh_init_socket__(compileMessageHandler, overrides); +__react_refresh_init_socket__(compileMessageHandler); // Registers handlers for runtime errors registerErrorEventHandlers.error(function handleError(error) { hasRuntimeErrors = true; diff --git a/src/runtime/sockets/WDSSocket.js b/src/runtime/sockets/WDSSocket.js index df87afc7..eba422e8 100644 --- a/src/runtime/sockets/WDSSocket.js +++ b/src/runtime/sockets/WDSSocket.js @@ -2,23 +2,26 @@ const url = require('native-url'); +const getResourceQuery = require('./utils/getResourceQuery'); + /** * Initializes a socket server for HMR for webpack-dev-server. * @param {function(message: *): void} messageHandler A handler to consume Webpack compilation messages. - * @param {*} overrides Socket integration overrides to change the connection URL. * @returns {void} */ -function initWDSSocket(messageHandler, overrides) { +function initWDSSocket(messageHandler) { if (typeof __webpack_dev_server_client__ !== 'undefined') { + // Get config overrides from webpack __resourceQuery global + const query = getResourceQuery(); const SocketClient = __webpack_dev_server_client__; // TODO: Support usage of custom sockets after WDS 4.0 is released // Ref: https://github.com/webpack/webpack-dev-server/pull/2055 const connection = new SocketClient( url.format({ protocol: window.location.protocol, - hostname: overrides.sockHost || window.location.hostname, - port: overrides.sockPort || window.location.port, - pathname: overrides.sockPath || '/sockjs-node', + hostname: query.sockHost || window.location.hostname, + port: query.sockPort || window.location.port, + pathname: query.sockPath || '/sockjs-node', }) ); diff --git a/src/runtime/sockets/WHMEventSource.js b/src/runtime/sockets/WHMEventSource.js index e446c9e6..9632eeef 100644 --- a/src/runtime/sockets/WHMEventSource.js +++ b/src/runtime/sockets/WHMEventSource.js @@ -8,11 +8,9 @@ const singletonKey = '__webpack_hot_middleware_reporter__'; /** * Initializes a socket server for HMR for webpack-hot-middleware. * @param {function(message: *): void} messageHandler A handler to consume Webpack compilation messages. - * @param {*} overrides Socket integration overrides to change the connection URL. * @returns {void} */ -// eslint-disable-next-line no-unused-vars -function initWHMEventSource(messageHandler, overrides) { +function initWHMEventSource(messageHandler) { const client = window[singletonKey] || require('webpack-hot-middleware/client'); client.useCustomOverlay({ diff --git a/src/runtime/sockets/WPSSocket.js b/src/runtime/sockets/WPSSocket.js index 85cd88bd..fcd853c4 100644 --- a/src/runtime/sockets/WPSSocket.js +++ b/src/runtime/sockets/WPSSocket.js @@ -3,11 +3,9 @@ /** * Initializes a socket server for HMR for webpack-plugin-serve. * @param {function(message: *): void} messageHandler A handler to consume Webpack compilation messages. - * @param {*} overrides Socket integration overrides to change the connection URL. * @returns {void} */ -// eslint-disable-next-line no-unused-vars -function initWPSSocket(messageHandler, overrides) { +function initWPSSocket(messageHandler) { /** * The hard-coded options injection key from webpack-plugin-serve. * diff --git a/src/runtime/sockets/utils/getResourceQuery.js b/src/runtime/sockets/utils/getResourceQuery.js new file mode 100644 index 00000000..4bbe045d --- /dev/null +++ b/src/runtime/sockets/utils/getResourceQuery.js @@ -0,0 +1,41 @@ +/* global __resourceQuery */ + +/** + * Parse webpack `__resourceQuery` string into an object. + * @see https://webpack.js.org/api/module-variables/#__resourcequery-webpack-specific + * @param {string} [__resourceQuery] + * @returns {*} + */ +function getResourceQuery() { + const params = {}; + + var query = ''; + if (typeof __resourceQuery === 'string') { + query = __resourceQuery; + } + + /** + * Map __resourceQuery string such as `?foo1=bar1&foo2=bar2`: + * - remove `?` from the start + * - split from `&` + * - split from `=` + * The mapped format will be [['foo1', 'bar1'], ['foo2', 'bar2']] + */ + const entries = query + .replace(/^\?/, '') + .split('&') + .map(function (entry) { + return entry.split('='); + }); + + // Add all entries to the overrides object + entries.forEach(function (entry) { + const key = entry[0]; + const value = entry[1]; + params[key] = value; + }); + + return params; +} + +module.exports = getResourceQuery; diff --git a/test/unit/getResourceQuery.test.js b/test/unit/getResourceQuery.test.js new file mode 100644 index 00000000..8a396a61 --- /dev/null +++ b/test/unit/getResourceQuery.test.js @@ -0,0 +1,32 @@ +const getResourceQuery = require('../../src/runtime/sockets/utils/getResourceQuery'); + +describe('getResourceQuery', () => { + let previousQuery; + + beforeEach(() => { + previousQuery = global.__resourceQuery; + }); + + afterEach(() => { + global.__resourceQuery = previousQuery; + }); + + it('should parse __resourceQuery', () => { + global.__resourceQuery = '?sockHost=localhost&sockPort=8080&sockPath=/__socket'; + expect(getResourceQuery()).toEqual({ + sockHost: 'localhost', + sockPath: '/__socket', + sockPort: '8080', + }); + }); + + it('should handle undefined __resourceQuery', () => { + delete global.__resourceQuery; + expect(getResourceQuery()).toEqual({}); + }); + + it('should handle empty string __resourceQuery', () => { + global.__resourceQuery = ''; + expect(getResourceQuery()).toEqual({}); + }); +});