BREAKING CHANGE: move sock options into an object

client-src/default/utils/createSocketUrl.js

@@ -10,7 +10,7 @@ function createSocketUrl(resourceQuery, currentLocation) {
 
   if (typeof resourceQuery === 'string' && resourceQuery !== '') {
     // If this bundle is inlined, use the resource query to get the correct url.
-    // format is like `?http://0.0.0.0:8096&sockPort=8097&sockHost=localhost`
+    // format is like `?http://0.0.0.0:8096&port=8097&host=localhost`
     urlParts = url.parse(
       resourceQuery
         // strip leading `?` from query string to get a valid URL
@@ -74,23 +74,23 @@ function getSocketUrl(urlParts, loc) {
   // all of these sock url params are optionally passed in through
   // resourceQuery, so we need to fall back to the default if
   // they are not provided
-  const sockHost = query.sockHost || hostname;
-  const sockPath = query.sockPath || '/ws';
-  let sockPort = query.sockPort || port;
+  const host = query.host || hostname;
+  const path = query.path || '/ws';
+  let portOption = query.port || port;
 
-  if (sockPort === 'location') {
-    sockPort = loc.port;
+  if (portOption === 'location') {
+    portOption = loc.port;
   }
 
   return url.format({
     protocol,
     auth,
-    hostname: sockHost,
-    port: sockPort,
-    // If sockPath is provided it'll be passed in via the resourceQuery as a
+    hostname: host,
+    port: portOption,
+    // If path is provided it'll be passed in via the resourceQuery as a
     // query param so it has to be parsed out of the querystring in order for the
     // client to open the socket to the correct location.
-    pathname: sockPath,
+    pathname: path,
   });
 }
 

lib/Server.js

@@ -91,13 +91,6 @@ class Server {
 
     this.watchOptions = options.watchOptions || {};
 
-    // Replace leading and trailing slashes to normalize path
-    this.sockPath = `/${
-      this.options.sockPath
-        ? this.options.sockPath.replace(/^\/|\/$/g, '')
-        : 'ws'
-    }`;
-
     if (this.progress) {
       this.setupProgressPlugin();
     }

lib/options.json

@@ -22,6 +22,31 @@
         "warning"
       ]
     },
+    "clientOptions": {
+      "type": "object",
+      "properties": {
+        "host": {
+          "type": "string"
+        },
+        "path": {
+          "type": "string"
+        },
+        "port": {
+          "anyOf": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "null"
+            }
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
     "compress": {
       "type": "boolean"
     },
@@ -322,25 +347,6 @@
     "serverSideRender": {
       "type": "boolean"
     },
-    "sockHost": {
-      "type": "string"
-    },
-    "sockPath": {
-      "type": "string"
-    },
-    "sockPort": {
-      "anyOf": [
-        {
-          "type": "number"
-        },
-        {
-          "type": "string"
-        },
-        {
-          "type": "null"
-        }
-      ]
-    },
     "socket": {
       "type": "string"
     },
@@ -421,6 +427,7 @@
       "allowedHosts": "should be {Array} (https://webpack.js.org/configuration/dev-server/#devserverallowedhosts)",
       "bonjour": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverbonjour)",
       "clientLogLevel": "should be {String} and equal to one of the allowed values\n\n [ 'none', 'silent', 'info', 'debug', 'trace', 'error', 'warning', 'warn' ]\n\n (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)",
+      "clientOptions": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverclientoptions)",
       "compress": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devservercompress)",
       "contentBase": "should be {Number|String|Array} (https://webpack.js.org/configuration/dev-server/#devservercontentbase)",
       "disableHostCheck": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck)",
@@ -459,9 +466,6 @@
       "contentBasePublicPath": "should be {String|Array} (https://webpack.js.org/configuration/dev-server/#devservercontentbasepublicpath)",
       "serveIndex": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverserveindex)",
       "serverSideRender": "should be {Boolean} (https://github.com/webpack/webpack-dev-middleware#serversiderender)",
-      "sockHost": "should be {String|Null} (https://webpack.js.org/configuration/dev-server/#devserversockhost)",
-      "sockPath": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserversockpath)",
-      "sockPort": "should be {Number|String|Null} (https://webpack.js.org/configuration/dev-server/#devserversockport)",
       "socket": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserversocket)",
       "staticOptions": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverstaticoptions)",
       "stats": "should be {Object|Boolean} (https://webpack.js.org/configuration/dev-server/#devserverstats-)",

lib/servers/SockJSServer.js

@@ -44,7 +44,7 @@ module.exports = class SockJSServer extends BaseServer {
     });
 
     this.socket.installHandlers(this.server.listeningApp, {
-      prefix: this.server.sockPath,
+      prefix: this.server.options.clientOptions.path,
     });
   }
 

lib/servers/WebsocketServer.js

@@ -11,7 +11,7 @@ module.exports = class WebsocketServer extends BaseServer {
     super(server);
     this.wsServer = new ws.Server({
       noServer: true,
-      path: this.server.sockPath,
+      path: this.server.options.clientOptions.path,
     });
 
     this.server.listeningApp.on('upgrade', (req, sock, head) => {

lib/utils/addEntries.js

@@ -29,15 +29,29 @@ function addEntries(config, options, server) {
   /** @type {string} */
   const domain = createDomain(options, app);
   /** @type {string} */
-  const sockHost = options.sockHost ? `&sockHost=${options.sockHost}` : '';
+  const host =
+    options.clientOptions && options.clientOptions.host
+      ? `&host=${options.clientOptions.host}`
+      : '';
   /** @type {string} */
-  const sockPath = options.sockPath ? `&sockPath=${options.sockPath}` : '';
+  let path = '';
+  // only add the path if it is not default
+  if (
+    options.clientOptions &&
+    options.clientOptions.path &&
+    options.clientOptions.path !== '/ws'
+  ) {
+    path = `&path=${options.clientOptions.path}`;
+  }
   /** @type {string} */
-  const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : '';
+  const port =
+    options.clientOptions && options.clientOptions.port
+      ? `&port=${options.clientOptions.port}`
+      : '';
   /** @type {string} */
   const clientEntry = `${require.resolve(
     '../../client/default/'
-  )}?${domain}${sockHost}${sockPath}${sockPort}`;
+  )}?${domain}${host}${path}${port}`;
 
   /** @type {(string[] | string)} */
   let hotEntry;

lib/utils/createConfig.js

@@ -31,18 +31,6 @@ function createConfig(config, argv, { port }) {
     options.socket = argv.socket;
   }
 
-  if (argv.sockHost) {
-    options.sockHost = argv.sockHost;
-  }
-
-  if (argv.sockPath) {
-    options.sockPath = argv.sockPath;
-  }
-
-  if (argv.sockPort) {
-    options.sockPort = argv.sockPort;
-  }
-
   if (argv.liveReload === false) {
     options.liveReload = false;
   }

lib/utils/normalizeOptions.js

@@ -36,6 +36,16 @@ function normalizeOptions(compiler, options) {
   if (!options.watchOptions) {
     options.watchOptions = {};
   }
+
+  if (!options.clientOptions) {
+    options.clientOptions = {};
+  }
+
+  options.clientOptions.path = `/${
+    options.clientOptions.path
+      ? options.clientOptions.path.replace(/^\/|\/$/g, '')
+      : 'ws'
+  }`;
 }
 
 module.exports = normalizeOptions;

test/__snapshots__/Validation.test.js.snap

@@ -37,5 +37,5 @@ exports[`Validation validation should fail validation for invalid \`writeToDisk\
 exports[`Validation validation should fail validation for no additional properties 1`] = `
 "Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
  - configuration has an unknown property 'additional'. These properties are valid:
-   object { allowedHosts?, bonjour?, clientLogLevel?, compress?, contentBasePublicPath?, contentBase?, disableHostCheck?, features?, fs?, headers?, historyApiFallback?, host?, hot?, http2?, https?, index?, injectClient?, injectHot?, liveReload?, log?, logLevel?, logTime?, mimeTypes?, noInfo?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, profile?, progress?, proxy?, public?, publicPath?, quiet?, reporter?, requestCert?, serveIndex?, serverSideRender?, sockHost?, sockPath?, sockPort?, socket?, staticOptions?, stats?, transportMode?, useLocalIp?, warn?, watchContentBase?, watchOptions?, writeToDisk? }"
+   object { allowedHosts?, bonjour?, clientLogLevel?, clientOptions?, compress?, contentBasePublicPath?, contentBase?, disableHostCheck?, features?, fs?, headers?, historyApiFallback?, host?, hot?, http2?, https?, index?, injectClient?, injectHot?, liveReload?, log?, logLevel?, logTime?, mimeTypes?, noInfo?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, profile?, progress?, proxy?, public?, publicPath?, quiet?, reporter?, requestCert?, serveIndex?, serverSideRender?, socket?, staticOptions?, stats?, transportMode?, useLocalIp?, warn?, watchContentBase?, watchOptions?, writeToDisk? }"
 `;

test/cli/cli.test.js

@@ -64,17 +64,6 @@ describe('CLI', () => {
       .catch(done);
   });
 
-  it('--sockPath', (done) => {
-    testBin('--sockPath /mysockPath')
-      .then((output) => {
-        expect(
-          /http:\/\/localhost:[0-9]+&sockPath=\/mysockPath/.test(output.stdout)
-        ).toEqual(true);
-        done();
-      })
-      .catch(done);
-  });
-
   it('unspecified port', (done) => {
     testBin('')
       .then((output) => {

test/client/utils/createSocketUrl.test.js

@@ -74,32 +74,32 @@ describe('createSocketUrl', () => {
     ['?http://example.com', 'http://something.com', 'http://example.com/ws'],
     ['?https://example.com', 'http://something.com', 'https://example.com/ws'],
     [
-      '?https://example.com?sockHost=asdf',
+      '?https://example.com?host=asdf',
       'http://something.com',
       'https://asdf/ws',
     ],
     [
-      '?https://example.com?sockPort=34',
+      '?https://example.com?port=34',
       'http://something.com',
       'https://example.com:34/ws',
     ],
     [
-      '?https://example.com?sockPath=xxx',
+      '?https://example.com?path=xxx',
       'http://something.com',
       'https://example.com/xxx',
     ],
     [
-      '?http://0.0.0.0:8096&sockPort=8097',
+      '?http://0.0.0.0:8096&port=8097',
       'http://localhost',
       'http://localhost:8097/ws',
     ],
     [
-      '?http://example.com:8096&sockPort=location',
+      '?http://example.com:8096&port=location',
       'http://something.com',
       'http://example.com/ws',
     ],
     [
-      '?http://0.0.0.0:8096&sockPort=location',
+      '?http://0.0.0.0:8096&port=location',
       'http://localhost:3000',
       'http://localhost:3000/ws',
     ],