feat(server): add transport mode

Author: knagaitsev

lib/Server.js

@@ -61,15 +61,29 @@ class Server {
 
     this.log = _log || createLogger(options);
 
-    if (this.options.serverMode !== undefined) {
-      this.log.warn(
-        'serverMode is an experimental option, meaning its usage could potentially change without warning'
-      );
-    }
+    if (this.options.transportMode === undefined) {
+      this.options.transportMode = {
+        server: 'sockjs',
+        client: 'sockjs',
+      };
+    } else {
+      switch (typeof this.options.transportMode) {
+        case 'string':
+          this.options.transportMode = {
+            server: this.options.transportMode,
+            client: this.options.transportMode,
+          };
+          break;
+        // if not a string, it is an object
+        default:
+          this.options.transportMode.server =
+            this.options.transportMode.server || 'sockjs';
+          this.options.transportMode.client =
+            this.options.transportMode.client || 'sockjs';
+      }
 
-    if (this.options.clientMode !== undefined) {
       this.log.warn(
-        'clientMode is an experimental option, meaning its usage could potentially change without warning'
+        'transportMode is an experimental option, meaning its usage could potentially change without warning'
       );
     }
 
@@ -674,7 +688,7 @@ class Server {
 
       if (!headers) {
         this.log.warn(
-          'serverMode implementation must pass headers to the callback of onConnection(f) ' +
+          'transportMode.server implementation must pass headers to the callback of onConnection(f) ' +
             'via f(connection, headers) in order for clients to pass a headers security check'
         );
       }

lib/options.json

@@ -48,9 +48,6 @@
         "warning"
       ]
     },
-    "clientMode": {
-      "type": "string"
-    },
     "compress": {
       "type": "boolean"
     },
@@ -303,16 +300,6 @@
     "serveIndex": {
       "type": "boolean"
     },
-    "serverMode": {
-      "anyOf": [
-        {
-          "type": "string"
-        },
-        {
-          "instanceof": "Function"
-        }
-      ]
-    },
     "serverSideRender": {
       "type": "boolean"
     },
@@ -364,6 +351,31 @@
         }
       ]
     },
+    "transportMode": {
+      "anyOf": [
+        {
+          "type": "object",
+          "properties": {
+            "client": {
+              "type": "string"
+            },
+            "server": {
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "instanceof": "Function"
+                }
+              ]
+            }
+          }
+        },
+        {
+          "enum": ["sockjs", "ws"]
+        }
+      ]
+    },
     "useLocalIp": {
       "type": "boolean"
     },
@@ -396,7 +408,6 @@
       "ca": "should be {String|Buffer}",
       "cert": "should be {String|Buffer}",
       "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)",
-      "clientMode": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverclientmode)",
       "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)",
@@ -438,7 +449,6 @@
       "reporter": "should be {Function} (https://github.com/webpack/webpack-dev-middleware#reporter)",
       "requestCert": "should be {Boolean}",
       "serveIndex": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverserveindex)",
-      "serverMode": "should be {String|Function} (https://webpack.js.org/configuration/dev-server/#devserverservermode)",
       "serverSideRender": "should be {Boolean} (https://github.com/webpack/webpack-dev-middleware#serversiderender)",
       "setup": "should be {Function} (https://webpack.js.org/configuration/dev-server/#devserversetup)",
       "sockHost": "should be {String|Null} (https://webpack.js.org/configuration/dev-server/#devserversockhost)",
@@ -447,6 +457,7 @@
       "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-)",
+      "transportMode": "should be {String|Object} (https://webpack.js.org/configuration/dev-server/#devservertransportmode)",
       "useLocalIp": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserveruselocalip)",
       "warn": "should be {Function}",
       "watchContentBase": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverwatchcontentbase)",

lib/utils/getSocketClientPath.js

@@ -3,17 +3,17 @@
 function getSocketClientPath(options) {
   let ClientImplementation;
   let clientImplFound = true;
-  switch (typeof options.clientMode) {
+  switch (typeof options.transportMode.client) {
     case 'string':
       // could be 'sockjs', 'ws', or a path that should be required
-      if (options.clientMode === 'sockjs') {
+      if (options.transportMode.client === 'sockjs') {
         ClientImplementation = require('../../client/clients/SockJSClient');
-      } else if (options.clientMode === 'ws') {
+      } else if (options.transportMode.client === 'ws') {
         ClientImplementation = require('../../client/clients/WebsocketClient');
       } else {
         try {
           // eslint-disable-next-line import/no-dynamic-require
-          ClientImplementation = require(options.clientMode);
+          ClientImplementation = require(options.transportMode.client);
         } catch (e) {
           clientImplFound = false;
         }
@@ -25,7 +25,7 @@ function getSocketClientPath(options) {
 
   if (!clientImplFound) {
     throw new Error(
-      "clientMode must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to " +
+      "transportMode.client must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to " +
         'a JS file which exports a class extending BaseClient (webpack-dev-server/client-src/clients/BaseClient) ' +
         'via require.resolve(...)'
     );

lib/utils/getSocketServerImplementation.js

@@ -3,17 +3,17 @@
 function getSocketServerImplementation(options) {
   let ServerImplementation;
   let serverImplFound = true;
-  switch (typeof options.serverMode) {
+  switch (typeof options.transportMode.server) {
     case 'string':
       // could be 'sockjs', in the future 'ws', or a path that should be required
-      if (options.serverMode === 'sockjs') {
+      if (options.transportMode.server === 'sockjs') {
         ServerImplementation = require('../servers/SockJSServer');
-      } else if (options.serverMode === 'ws') {
+      } else if (options.transportMode.server === 'ws') {
         ServerImplementation = require('../servers/WebsocketServer');
       } else {
         try {
           // eslint-disable-next-line import/no-dynamic-require
-          ServerImplementation = require(options.serverMode);
+          ServerImplementation = require(options.transportMode.server);
         } catch (e) {
           serverImplFound = false;
         }
@@ -22,15 +22,15 @@ function getSocketServerImplementation(options) {
     case 'function':
       // potentially do more checks here to confirm that the user implemented this properlly
       // since errors could be difficult to understand
-      ServerImplementation = options.serverMode;
+      ServerImplementation = options.transportMode.server;
       break;
     default:
       serverImplFound = false;
   }
 
   if (!serverImplFound) {
     throw new Error(
-      "serverMode must be a string denoting a default implementation (e.g. 'sockjs', 'ws'), a full path to " +
+      "transportMode.server must be a string denoting a default implementation (e.g. 'sockjs', 'ws'), a full path to " +
         'a JS file which exports a class extending BaseServer (webpack-dev-server/lib/servers/BaseServer) ' +
         'via require.resolve(...), or the class itself which extends BaseServer'
     );

test/e2e/Client.test.js

@@ -23,18 +23,17 @@ const cssFilePath = resolve(__dirname, '../fixtures/reload-config/main.css');
 describe('reload', () => {
   const modes = [
     {
-      title: 'hot with default clientMode (sockjs)',
+      title: 'hot with default transportMode.client (sockjs)',
       options: {
         hot: true,
       },
       shouldRefresh: false,
     },
     {
-      title: 'hot with clientMode ws',
+      title: 'hot with transportMode.client ws',
       options: {
         hot: true,
-        clientMode: 'ws',
-        serverMode: require.resolve('../../lib/servers/WebsocketServer'),
+        transportMode: 'ws',
       },
       shouldRefresh: false,
     },

test/e2e/ProvidePlugin.test.js

@@ -52,8 +52,7 @@ describe('ProvidePlugin', () => {
         port,
         host: '0.0.0.0',
         inline: true,
-        clientMode: 'ws',
-        serverMode: require.resolve('../../lib/servers/WebsocketServer'),
+        transportMode: 'ws',
         watchOptions: {
           poll: true,
         },

test/e2e/ClientMode.test.js renamed to test/e2e/TransportMode.test.js

@@ -3,33 +3,35 @@
 const testServer = require('../helpers/test-server');
 const config = require('../fixtures/client-config/webpack.config');
 const runBrowser = require('../helpers/run-browser');
-const port = require('../ports-map').ClientMode;
+const port = require('../ports-map').TransportMode;
 const {
   initConsoleDelay,
   awaitServerCloseDelay,
 } = require('../helpers/puppeteer-constants');
 
-describe('clientMode', () => {
+describe('transportMode client', () => {
   const modes = [
     {
       title: 'sockjs',
       options: {
-        clientMode: 'sockjs',
+        transportMode: 'sockjs',
       },
     },
     {
       title: 'ws',
       options: {
-        clientMode: 'ws',
-        serverMode: require.resolve('../../lib/servers/WebsocketServer'),
+        transportMode: 'ws',
       },
     },
     {
       title: 'custom client',
       options: {
-        clientMode: require.resolve(
-          '../fixtures/custom-client/CustomSockJSClient'
-        ),
+        transportMode: {
+          server: 'sockjs',
+          client: require.resolve(
+            '../fixtures/custom-client/CustomSockJSClient'
+          ),
+        },
       },
     },
   ];

test/e2e/__snapshots__/ClientMode.test.js.snap renamed to test/e2e/__snapshots__/TransportMode.test.js.snap

@@ -147,10 +147,6 @@ describe('options', () => {
         ],
         failure: ['whoops!'],
       },
-      clientMode: {
-        success: ['sockjs', require.resolve('../client/clients/SockJSClient')],
-        failure: [false],
-      },
       compress: {
         success: [true],
         failure: [''],
@@ -361,14 +357,6 @@ describe('options', () => {
         success: [true],
         failure: [''],
       },
-      serverMode: {
-        success: [
-          'sockjs',
-          require.resolve('../lib/servers/SockJSServer'),
-          SockJSServer,
-        ],
-        failure: [false],
-      },
       serverSideRender: {
         success: [true],
         failure: [''],
@@ -410,6 +398,44 @@ describe('options', () => {
         ],
         failure: ['whoops!', null],
       },
+      transportMode: {
+        success: [
+          'ws',
+          'sockjs',
+          {
+            server: 'sockjs',
+          },
+          {
+            server: require.resolve('../lib/servers/SockJSServer'),
+          },
+          {
+            server: SockJSServer,
+          },
+          {
+            client: 'sockjs',
+          },
+          {
+            client: require.resolve('../client/clients/SockJSClient'),
+          },
+          {
+            server: SockJSServer,
+            client: require.resolve('../client/clients/SockJSClient'),
+          },
+        ],
+        failure: [
+          'nonexistent-implementation',
+          null,
+          {
+            notAnOption: true,
+          },
+          {
+            server: false,
+          },
+          {
+            client: () => {},
+          },
+        ],
+      },
       useLocalIp: {
         success: [false],
         failure: [''],

test/options.test.js

@@ -32,14 +32,13 @@ const portsList = {
   'open-option': 1,
   'port-option': 1,
   'proxy-option': 4,
-  'serverMode-option': 1,
+  'transportMode-option': 1,
   'sockPath-option': 1,
   'stats-option': 1,
   ProvidePlugin: 1,
   WebsocketClient: 1,
   WebsocketServer: 1,
-  ClientMode: 1,
-  'clientMode-option': 1,
+  TransportMode: 1,
   Progress: 1,
   'progress-option': 1,
   'profile-option': 1,