fix: migrate wsUrl host option to hostname

README.md

@@ -108,7 +108,7 @@ Options:
   --client-transport <value>                Allows to set custom transport to communicate with dev server.
   --client-web-socket-url <value>           Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not
                                             always know where to connect to).
-  --client-web-socket-url-host <value>      Tells clients connected to devServer to use the provided host.
+  --client-web-socket-url-hostname <value>  Tells clients connected to devServer to use the provided host.
   --client-web-socket-url-path <value>      Tells clients connected to devServer to use the provided path to connect.
   --client-web-socket-url-port <value>      Tells clients connected to devServer to use the provided port.
   --client-web-socket-url-protocol <value>  Tells clients connected to devServer to use the provided protocol.

bin/cli-flags.js

@@ -200,18 +200,18 @@ module.exports = {
     simpleType: 'string',
     multiple: false,
   },
-  'client-web-socket-url-host': {
+  'client-web-socket-url-hostname': {
     configs: [
       {
         type: 'string',
         multiple: false,
         description:
-          'Tells clients connected to devServer to use the provided host.',
-        path: 'client.webSocketURL.host',
+          'Tells clients connected to devServer to use the provided hostname.',
+        path: 'client.webSocketURL.hostname',
       },
     ],
     description:
-      'Tells clients connected to devServer to use the provided host.',
+      'Tells clients connected to devServer to use the provided hostname.',
     simpleType: 'string',
     multiple: false,
   },

lib/Server.js

@@ -921,9 +921,9 @@ class Server {
       }
     }
 
-    // Also allow if `client.webSocketURL.host` provided
+    // Also allow if `client.webSocketURL.hostname` provided
     if (typeof this.options.client.webSocketURL !== 'undefined') {
-      return this.options.client.webSocketURL.host === hostname;
+      return this.options.client.webSocketURL.hostname === hostname;
     }
 
     // disallow

lib/options.json

@@ -145,8 +145,8 @@
           "type": "object",
           "additionalProperties": false,
           "properties": {
-            "host": {
-              "description": "Tells clients connected to devServer to use the provided host.",
+            "hostname": {
+              "description": "Tells clients connected to devServer to use the provided hostname.",
               "type": "string",
               "minLength": 1
             },

lib/utils/DevServerPlugin.js

@@ -25,38 +25,38 @@ class DevServerPlugin {
     /** @type {"ws:" | "wss:" | "http:" | "https:" | "auto:"} */
     let protocol;
 
-    // We are proxying dev server and need to specify custom `host`
+    // We are proxying dev server and need to specify custom `hostname`
     if (typeof options.client.webSocketURL.protocol !== 'undefined') {
       protocol = options.client.webSocketURL.protocol;
     } else {
       protocol = options.https ? 'wss:' : 'ws:';
     }
 
     /** @type {string} */
-    let host;
+    let hostname;
 
-    // SockJS is not supported server mode, so `host` and `port` can't specified, let's ignore them
+    // SockJS is not supported server mode, so `hostname` and `port` can't specified, let's ignore them
     // TODO show warning about this
     const isSockJSType = options.webSocketServer.type === 'sockjs';
 
-    // We are proxying dev server and need to specify custom `host`
-    if (typeof options.client.webSocketURL.host !== 'undefined') {
-      host = options.client.webSocketURL.host;
+    // We are proxying dev server and need to specify custom `hostname`
+    if (typeof options.client.webSocketURL.hostname !== 'undefined') {
+      hostname = options.client.webSocketURL.hostname;
     }
-    // Web socket server works on custom `host`, only for `ws` because `sock-js` is not support custom `host`
+    // Web socket server works on custom `hostname`, only for `ws` because `sock-js` is not support custom `hostname`
     else if (
       typeof options.webSocketServer.options.host !== 'undefined' &&
       !isSockJSType
     ) {
-      host = options.webSocketServer.options.host;
+      hostname = options.webSocketServer.options.host;
     }
     // The `host` option is specified
     else if (typeof this.options.host !== 'undefined') {
-      host = this.options.host;
+      hostname = this.options.host;
     }
     // The `port` option is not specified
     else {
-      host = '0.0.0.0';
+      hostname = '0.0.0.0';
     }
 
     /** @type {number | string} */
@@ -130,7 +130,7 @@ class DevServerPlugin {
       new URL(
         `${protocol}//${username}${password ? `:${password}` : ''}${
           username || password ? `@` : ''
-        }${ipaddr.IPv6.isIPv6(host) ? `[${host}]` : host}${
+        }${ipaddr.IPv6.isIPv6(hostname) ? `[${hostname}]` : hostname}${
           port ? `:${port}` : ''
         }${path || '/'}${searchParamsString ? `?${searchParamsString}` : ''}`
       ).toString()

lib/utils/normalizeOptions.js

@@ -121,7 +121,7 @@ function normalizeOptions(compiler, options, logger) {
 
     options.client.webSocketURL = {
       protocol: parsedURL.protocol,
-      host: parsedURL.hostname,
+      hostname: parsedURL.hostname,
       port: parsedURL.port.length > 0 ? Number(parsedURL.port) : '',
       path: parsedURL.pathname,
       username: parsedURL.username,
@@ -151,7 +151,7 @@ function normalizeOptions(compiler, options, logger) {
 
   if (typeof options.allowedHosts === 'undefined') {
     // allowedHosts allows some default hosts picked from
-    // `options.host` or `webSocketURL.host` and `localhost`
+    // `options.host` or `webSocketURL.hostname` and `localhost`
     options.allowedHosts = 'auto';
   }
   if (

test/__snapshots__/validate-options.test.js.snap.webpack4

@@ -146,16 +146,16 @@ exports[`options validate should throw an error on the "client" option with '{"u
    -> Allows to specify options for client script in the browser. https://webpack.js.org/configuration/dev-server/#devserverclient"
 `;
 
-exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"host":""}}' value 1`] = `
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"hostname":""}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- - options.client.webSocketURL.host should be an non-empty string.
-   -> Tells clients connected to devServer to use the provided host."
+ - options.client.webSocketURL.hostname should be an non-empty string.
+   -> Tells clients connected to devServer to use the provided hostname."
 `;
 
-exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"host":true,"path":"","port":8080}}' value 1`] = `
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"hostname":true,"path":"","port":8080}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- - options.client.webSocketURL.host should be a non-empty string.
-   -> Tells clients connected to devServer to use the provided host."
+ - options.client.webSocketURL.hostname should be a non-empty string.
+   -> Tells clients connected to devServer to use the provided hostname."
 `;
 
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"path":true}}' value 1`] = `
@@ -172,7 +172,7 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"port":true}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, password?, port?, protocol?, username? }
+   non-empty string | object { hostname?, path?, password?, port?, protocol?, username? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.port should be one of these:
@@ -186,7 +186,7 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"username":123,"password":976}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, password?, port?, protocol?, username? }
+   non-empty string | object { hostname?, path?, password?, port?, protocol?, username? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.password should be a string.

test/__snapshots__/validate-options.test.js.snap.webpack5

@@ -146,16 +146,16 @@ exports[`options validate should throw an error on the "client" option with '{"u
    -> Allows to specify options for client script in the browser. https://webpack.js.org/configuration/dev-server/#devserverclient"
 `;
 
-exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"host":""}}' value 1`] = `
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"hostname":""}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- - options.client.webSocketURL.host should be an non-empty string.
-   -> Tells clients connected to devServer to use the provided host."
+ - options.client.webSocketURL.hostname should be an non-empty string.
+   -> Tells clients connected to devServer to use the provided hostname."
 `;
 
-exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"host":true,"path":"","port":8080}}' value 1`] = `
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"hostname":true,"path":"","port":8080}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- - options.client.webSocketURL.host should be a non-empty string.
-   -> Tells clients connected to devServer to use the provided host."
+ - options.client.webSocketURL.hostname should be a non-empty string.
+   -> Tells clients connected to devServer to use the provided hostname."
 `;
 
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"path":true}}' value 1`] = `
@@ -172,7 +172,7 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"port":true}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, password?, port?, protocol?, username? }
+   non-empty string | object { hostname?, path?, password?, port?, protocol?, username? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.port should be one of these:
@@ -186,7 +186,7 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"username":123,"password":976}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, password?, port?, protocol?, username? }
+   non-empty string | object { hostname?, path?, password?, port?, protocol?, username? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.password should be a string.

test/cli/__snapshots__/basic.test.js.snap.webpack4

@@ -57,7 +57,7 @@ Options:
   --client-hot-entry                        Injects a Hot Module Replacement entry.
   --no-client-hot-entry                     Does not injects a Hot Module Replacement entry.
   --client-web-socket-url <value>           Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
-  --client-web-socket-url-host <value>      Tells clients connected to devServer to use the provided host.
+  --client-web-socket-url-hostname <value>  Tells clients connected to devServer to use the provided hostname.
   --client-web-socket-url-port <value>      Tells clients connected to devServer to use the provided port.
   --client-web-socket-url-path <value>      Tells clients connected to devServer to use the provided path to connect.
   --client-web-socket-url-protocol <value>  Tells clients connected to devServer to use the provided protocol.

test/cli/__snapshots__/basic.test.js.snap.webpack5

@@ -58,7 +58,7 @@ Options:
   --no-client-progress                      Negative 'client-progress' option.
   --client-transport <value>                Allows to set custom transport to communicate with dev server.
   --client-web-socket-url <value>           Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
-  --client-web-socket-url-host <value>      Tells clients connected to devServer to use the provided host.
+  --client-web-socket-url-hostname <value>  Tells clients connected to devServer to use the provided hostname.
   --client-web-socket-url-path <value>      Tells clients connected to devServer to use the provided path to connect.
   --client-web-socket-url-password <value>  Tells clients connected to devServer to use the provided password to authenticate.
   --client-web-socket-url-port <value>      Tells clients connected to devServer to use the provided port.

test/cli/client-option.test.js

@@ -149,9 +149,9 @@ describe('"client" CLI option', () => {
     expect(exitCode).toEqual(0);
   });
 
-  it('should work using "--client-web-socket-url-host"', async () => {
+  it('should work using "--client-web-socket-url-hostname"', async () => {
     const { exitCode } = await testBin([
-      '--client-web-socket-url-host',
+      '--client-web-socket-url-hostname',
       '0.0.0.0',
     ]);
 

test/e2e/web-socket-server-url.test.js

@@ -258,7 +258,7 @@ describe('web socket server URL', () => {
       const devServerOptions = {
         client: {
           webSocketURL: {
-            host: devServerHost,
+            hostname: devServerHost,
           },
         },
         webSocketServer,
@@ -595,7 +595,7 @@ describe('web socket server URL', () => {
       const devServerOptions = {
         client: {
           webSocketURL: {
-            host: '127.0.0.1',
+            hostname: '127.0.0.1',
           },
         },
         webSocketServer,
@@ -679,7 +679,7 @@ describe('web socket server URL', () => {
       const devServerOptions = {
         client: {
           webSocketURL: {
-            host: '0.0.0.0',
+            hostname: '0.0.0.0',
           },
         },
         webSocketServer,
@@ -1694,7 +1694,7 @@ describe('web socket server URL', () => {
         client: {
           webSocketURL: {
             protocol: 'ws:',
-            host: '127.0.0.1',
+            hostname: '127.0.0.1',
             port: port1,
             path: '/ws',
           },

test/server/Server.test.js

@@ -396,7 +396,7 @@ describe('Server', () => {
       const options = {
         client: {
           webSocketURL: {
-            host: 'test.host',
+            hostname: 'test.host',
           },
         },
       };

test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack4

@@ -78,7 +78,7 @@ Object {
     "hotEntry": true,
     "overlay": true,
     "webSocketURL": Object {
-      "host": "my.host",
+      "hostname": "my.host",
       "port": 9000,
     },
   },
@@ -116,7 +116,7 @@ Object {
     "hotEntry": true,
     "overlay": true,
     "webSocketURL": Object {
-      "host": "my.host",
+      "hostname": "my.host",
       "port": 9000,
     },
   },

test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack5

@@ -78,7 +78,7 @@ Object {
     "hotEntry": true,
     "overlay": true,
     "webSocketURL": Object {
-      "host": "my.host",
+      "hostname": "my.host",
       "port": 9000,
     },
   },
@@ -116,7 +116,7 @@ Object {
     "hotEntry": true,
     "overlay": true,
     "webSocketURL": Object {
-      "host": "my.host",
+      "hostname": "my.host",
       "port": 9000,
     },
   },

test/server/utils/normalizeOptions.test.js

@@ -120,7 +120,7 @@ describe('normalizeOptions', () => {
       options: {
         client: {
           webSocketURL: {
-            host: 'my.host',
+            hostname: 'my.host',
             port: 9000,
           },
         },
@@ -133,7 +133,7 @@ describe('normalizeOptions', () => {
       options: {
         client: {
           webSocketURL: {
-            host: 'my.host',
+            hostname: 'my.host',
             port: '9000',
           },
         },

test/validate-options.test.js

@@ -81,7 +81,7 @@ const tests = {
         webSocketURL: 'ws://localhost:8080',
       },
       {
-        webSocketURL: { host: 'localhost' },
+        webSocketURL: { hostname: 'localhost' },
       },
       {
         webSocketURL: { port: 8080 },
@@ -96,7 +96,7 @@ const tests = {
         webSocketURL: { path: '/my-path/' },
       },
       {
-        webSocketURL: { host: 'localhost', port: 8080, path: '/my-path/' },
+        webSocketURL: { hostname: 'localhost', port: 8080, path: '/my-path/' },
       },
       {
         webSocketURL: { username: 'zoro', password: 'roronoa' },
@@ -144,7 +144,7 @@ const tests = {
         transport: true,
       },
       {
-        webSocketURL: { host: true, path: '', port: 8080 },
+        webSocketURL: { hostname: true, path: '', port: 8080 },
       },
       {
         webSocketURL: { path: true },
@@ -153,7 +153,7 @@ const tests = {
         webSocketURL: { port: true },
       },
       {
-        webSocketURL: { host: '' },
+        webSocketURL: { hostname: '' },
       },
       {
         webSocketURL: { port: '' },