fix: webSocketURL path option

README.md

@@ -109,7 +109,7 @@ Options:
   --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-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-pathname <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.
   --compress                                Enables gzip compression for everything served. https://webpack.js.org/configuration/dev-server/#devservercompress

bin/cli-flags.js

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

lib/options.json

@@ -150,7 +150,7 @@
               "type": "string",
               "minLength": 1
             },
-            "path": {
+            "pathname": {
               "description": "Tells clients connected to devServer to use the provided path to connect.",
               "type": "string"
             },

lib/utils/DevServerPlugin.js

@@ -87,19 +87,19 @@ class DevServerPlugin {
     }
 
     /** @type {string} */
-    let path = '';
+    let pathname = '';
 
-    // We are proxying dev server and need to specify custom `path`
-    if (typeof options.client.webSocketURL.path !== 'undefined') {
-      path = options.client.webSocketURL.path;
+    // We are proxying dev server and need to specify custom `pathname`
+    if (typeof options.client.webSocketURL.pathname !== 'undefined') {
+      pathname = options.client.webSocketURL.pathname;
     }
 
     // Web socket server works on custom `path`
     else if (
       typeof options.webSocketServer.options.prefix !== 'undefined' ||
       typeof options.webSocketServer.options.path !== 'undefined'
     ) {
-      path =
+      pathname =
         options.webSocketServer.options.prefix ||
         options.webSocketServer.options.path;
     }
@@ -132,7 +132,9 @@ class DevServerPlugin {
           username || password ? `@` : ''
         }${ipaddr.IPv6.isIPv6(hostname) ? `[${hostname}]` : hostname}${
           port ? `:${port}` : ''
-        }${path || '/'}${searchParamsString ? `?${searchParamsString}` : ''}`
+        }${pathname || '/'}${
+          searchParamsString ? `?${searchParamsString}` : ''
+        }`
       ).toString()
     ).replace(
       /[!'()*]/g,

lib/utils/normalizeOptions.js

@@ -123,7 +123,7 @@ function normalizeOptions(compiler, options, logger) {
       protocol: parsedURL.protocol,
       hostname: parsedURL.hostname,
       port: parsedURL.port.length > 0 ? Number(parsedURL.port) : '',
-      path: parsedURL.pathname,
+      pathname: parsedURL.pathname,
       username: parsedURL.username,
       password: parsedURL.password,
     };

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

@@ -152,15 +152,15 @@ exports[`options validate should throw an error on the "client" option with '{"w
    -> Tells clients connected to devServer to use the provided hostname."
 `;
 
-exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"hostname":true,"path":"","port":8080}}' value 1`] = `
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"hostname":true,"pathname":"","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.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`] = `
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"pathname":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.path should be a string.
+ - options.client.webSocketURL.pathname should be a string.
    -> Tells clients connected to devServer to use the provided path to connect."
 `;
 
@@ -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 { hostname?, path?, password?, port?, protocol?, username? }
+   non-empty string | object { hostname?, pathname?, 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 { hostname?, path?, password?, port?, protocol?, username? }
+   non-empty string | object { hostname?, pathname?, 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

@@ -152,15 +152,15 @@ exports[`options validate should throw an error on the "client" option with '{"w
    -> Tells clients connected to devServer to use the provided hostname."
 `;
 
-exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"hostname":true,"path":"","port":8080}}' value 1`] = `
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"hostname":true,"pathname":"","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.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`] = `
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"pathname":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.path should be a string.
+ - options.client.webSocketURL.pathname should be a string.
    -> Tells clients connected to devServer to use the provided path to connect."
 `;
 
@@ -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 { hostname?, path?, password?, port?, protocol?, username? }
+   non-empty string | object { hostname?, pathname?, 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 { hostname?, path?, password?, port?, protocol?, username? }
+   non-empty string | object { hostname?, pathname?, 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

@@ -59,7 +59,7 @@ Options:
   --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-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-pathname <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.
   --client-web-socket-url-username <value>  Tells clients connected to devServer to use the provided username to authenticate.
   --client-web-socket-url-password <value>  Tells clients connected to devServer to use the provided password to authenticate.

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

@@ -59,7 +59,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-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-pathname <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.
   --client-web-socket-url-protocol <value>  Tells clients connected to devServer to use the provided protocol.

test/cli/client-option.test.js

@@ -158,8 +158,11 @@ describe('"client" CLI option', () => {
     expect(exitCode).toEqual(0);
   });
 
-  it('should work using "--client-web-socket-url-path"', async () => {
-    const { exitCode } = await testBin(['--client-web-socket-url-path', '/ws']);
+  it('should work using "--client-web-socket-url-pathname"', async () => {
+    const { exitCode } = await testBin([
+      '--client-web-socket-url-pathname',
+      '/ws',
+    ]);
 
     expect(exitCode).toEqual(0);
   });
@@ -180,7 +183,7 @@ describe('"client" CLI option', () => {
     expect(stdout).toContain('ws%3A%2F%2F0.0.0.0%2Fws');
   });
 
-  it('should use "client.webSocketURL.path" from configuration', async () => {
+  it('should use "client.webSocketURL.pathname" from configuration', async () => {
     const { exitCode, stdout } = await testBin(
       null,
       './test/fixtures/dev-server/client-custom-path-config.js'

test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack4

@@ -283,7 +283,7 @@ Array [
 
 exports[`web socket server URL should work with the "client.webSocketURL.password" option ("ws"): page errors 1`] = `Array []`;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option ("sockjs"): console messages 1`] = `
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
   "Hey.",
@@ -292,9 +292,9 @@ Array [
 ]
 `;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option ("sockjs"): page errors 1`] = `Array []`;
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option ("sockjs"): page errors 1`] = `Array []`;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option ("ws"): console messages 1`] = `
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option ("ws"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
   "Hey.",
@@ -303,9 +303,9 @@ Array [
 ]
 `;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option ("ws"): page errors 1`] = `Array []`;
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option ("ws"): page errors 1`] = `Array []`;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option and custom web socket server "path" ("sockjs"): console messages 1`] = `
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option and custom web socket server "path" ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
   "Hey.",
@@ -314,9 +314,9 @@ Array [
 ]
 `;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option and custom web socket server "path" ("sockjs"): page errors 1`] = `Array []`;
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option and custom web socket server "path" ("sockjs"): page errors 1`] = `Array []`;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option and custom web socket server "path" ("ws"): console messages 1`] = `
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option and custom web socket server "path" ("ws"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
   "Hey.",
@@ -325,7 +325,7 @@ Array [
 ]
 `;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option and custom web socket server "path" ("ws"): page errors 1`] = `Array []`;
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option and custom web socket server "path" ("ws"): page errors 1`] = `Array []`;
 
 exports[`web socket server URL should work with the "client.webSocketURL.port" option ("sockjs"): console messages 1`] = `
 Array [

test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack5

@@ -283,7 +283,7 @@ Array [
 
 exports[`web socket server URL should work with the "client.webSocketURL.password" option ("ws"): page errors 1`] = `Array []`;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option ("sockjs"): console messages 1`] = `
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
   "Hey.",
@@ -292,9 +292,9 @@ Array [
 ]
 `;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option ("sockjs"): page errors 1`] = `Array []`;
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option ("sockjs"): page errors 1`] = `Array []`;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option ("ws"): console messages 1`] = `
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option ("ws"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
   "Hey.",
@@ -303,9 +303,9 @@ Array [
 ]
 `;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option ("ws"): page errors 1`] = `Array []`;
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option ("ws"): page errors 1`] = `Array []`;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option and custom web socket server "path" ("sockjs"): console messages 1`] = `
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option and custom web socket server "path" ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
   "Hey.",
@@ -314,9 +314,9 @@ Array [
 ]
 `;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option and custom web socket server "path" ("sockjs"): page errors 1`] = `Array []`;
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option and custom web socket server "path" ("sockjs"): page errors 1`] = `Array []`;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option and custom web socket server "path" ("ws"): console messages 1`] = `
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option and custom web socket server "path" ("ws"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
   "Hey.",
@@ -325,7 +325,7 @@ Array [
 ]
 `;
 
-exports[`web socket server URL should work with the "client.webSocketURL.path" option and custom web socket server "path" ("ws"): page errors 1`] = `Array []`;
+exports[`web socket server URL should work with the "client.webSocketURL.pathname" option and custom web socket server "path" ("ws"): page errors 1`] = `Array []`;
 
 exports[`web socket server URL should work with the "client.webSocketURL.port" option ("sockjs"): console messages 1`] = `
 Array [

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

@@ -1103,12 +1103,12 @@ describe('web socket server URL', () => {
       });
     });
 
-    it(`should work with the "client.webSocketURL.path" option ("${webSocketServer}")`, async () => {
+    it(`should work with the "client.webSocketURL.pathname" option ("${webSocketServer}")`, async () => {
       const compiler = webpack(config);
       const devServerOptions = {
         client: {
           webSocketURL: {
-            path: '/ws',
+            pathname: '/ws',
           },
         },
         webSocketServer,
@@ -1443,12 +1443,12 @@ describe('web socket server URL', () => {
       });
     });
 
-    it(`should work with the "client.webSocketURL.path" option and custom web socket server "path" ("${webSocketServer}")`, async () => {
+    it(`should work with the "client.webSocketURL.pathname" option and custom web socket server "path" ("${webSocketServer}")`, async () => {
       const compiler = webpack(config);
       const devServerOptions = {
         client: {
           webSocketURL: {
-            path: '/custom-ws',
+            pathname: '/custom-ws',
           },
         },
         webSocketServer: {
@@ -1696,7 +1696,7 @@ describe('web socket server URL', () => {
             protocol: 'ws:',
             hostname: '127.0.0.1',
             port: port1,
-            path: '/ws',
+            pathname: '/ws',
           },
         },
         webSocketServer,

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

@@ -154,7 +154,7 @@ Object {
     "hotEntry": true,
     "overlay": true,
     "webSocketURL": Object {
-      "path": "/custom/path/",
+      "pathname": "/custom/path/",
     },
   },
   "compress": true,
@@ -191,7 +191,7 @@ Object {
     "hotEntry": true,
     "overlay": true,
     "webSocketURL": Object {
-      "path": "custom/path",
+      "pathname": "custom/path",
     },
   },
   "compress": true,