feat(server): add transportMode (#2116)

* feat(server): add transport mode
* fix(transport): update transport e2e test and rename tests
* test(options): fixed options test
* refactor(server): move transport mode default setting into helper

Author: knagaitsev

lib/Server.js

@@ -61,15 +61,9 @@ class Server {
 
 this.log=_log||createLogger(options);
 
-if(this.options.serverMode!==undefined){
+if(this.options.transportMode!==undefined){
 this.log.warn(
-'serverMode is an experimental option, meaning its usage could potentially change without warning'
-);
-}
-
-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'
 );
 }
 
@@ -672,7 +666,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,32 @@
  }
  ]
  },
+"transportMode": {
+"anyOf": [
+ {
+"type": "object",
+"properties": {
+"client": {
+"type": "string"
+ },
+"server": {
+"anyOf": [
+ {
+"type": "string"
+ },
+ {
+"instanceof": "Function"
+ }
+ ]
+ }
+ },
+"additionalProperties": false
+ },
+ {
+"enum": ["sockjs", "ws"]
+ }
+ ]
+ },
 "useLocalIp": {
 "type": "boolean"
  },
@@ -396,7 +409,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 +450,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 +458,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 @@
 functiongetSocketClientPath(options){
 letClientImplementation;
 letclientImplFound=true;
-switch(typeofoptions.clientMode){
+switch(typeofoptions.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');
-}elseif(options.clientMode==='ws'){
+}elseif(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){
 thrownewError(
-"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 @@
 functiongetSocketServerImplementation(options){
 letServerImplementation;
 letserverImplFound=true;
-switch(typeofoptions.serverMode){
+switch(typeofoptions.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');
-}elseif(options.serverMode==='ws'){
+}elseif(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){
 thrownewError(
-"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'
 );

lib/utils/normalizeOptions.js

@@ -9,14 +9,25 @@ function normalizeOptions(compiler, options) {
 options.contentBase=
 options.contentBase!==undefined ? options.contentBase : process.cwd();
 
-// set serverMode default
-if(options.serverMode===undefined){
-options.serverMode='sockjs';
-}
-
-// set clientMode default
-if(options.clientMode===undefined){
-options.clientMode='sockjs';
+// normalize transportMode option
+if(options.transportMode===undefined){
+options.transportMode={
+server: 'sockjs',
+client: 'sockjs',
+};
+}else{
+switch(typeofoptions.transportMode){
+case'string':
+options.transportMode={
+server: options.transportMode,
+client: options.transportMode,
+};
+break;
+// if not a string, it is an object
+default:
+options.transportMode.server=options.transportMode.server||'sockjs';
+options.transportMode.client=options.transportMode.client||'sockjs';
+}
 }
 
 if(!options.watchOptions){

test/e2e/Client.test.js

@@ -23,18 +23,17 @@ const cssFilePath = resolve(__dirname, '../fixtures/reload-config/main.css');
 describe('reload',()=>{
 constmodes=[
 {
-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

@@ -8,7 +8,7 @@ const port = require('../ports-map').ProvidePlugin;
 const{ beforeBrowserCloseDelay }=require('../helpers/puppeteer-constants');
 
 describe('ProvidePlugin',()=>{
-describe('inline with default clientMode (sockjs)',()=>{
+describe('inline with default transportMode.client (sockjs)',()=>{
 beforeAll((done)=>{
 constoptions={
  port,
@@ -46,14 +46,13 @@ describe('ProvidePlugin', () => {
 });
 });
 
-describe('inline with clientMode ws',()=>{
+describe('inline with transportMode.client ws',()=>{
 beforeAll((done)=>{
 constoptions={
  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 test/e2e/TransportMode.test.jstest/e2e/ClientMode.test.js renamed to test/e2e/TransportMode.test.js

@@ -3,33 +3,35 @@
 consttestServer=require('../helpers/test-server');
 constconfig=require('../fixtures/client-config/webpack.config');
 construnBrowser=require('../helpers/run-browser');
-constport=require('../ports-map').ClientMode;
+constport=require('../ports-map').TransportMode;
 const{
  initConsoleDelay,
  awaitServerCloseDelay,
 }=require('../helpers/puppeteer-constants');
 
-describe('clientMode',()=>{
+describe('transportMode client',()=>{
 constmodes=[
 {
 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'
+),
+},
 },
 },
 ];

…2e/__snapshots__/ClientMode.test.js.snap …__snapshots__/TransportMode.test.js.snaptest/e2e/__snapshots__/ClientMode.test.js.snap renamed to test/e2e/__snapshots__/TransportMode.test.js.snap test/e2e/__snapshots__/ClientMode.test.js.snap renamed to test/e2e/__snapshots__/TransportMode.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`clientMode custom client on browser client logs correctly 1`] =`
+exports[`transportMode client custom client on browser client logs correctly 1`] =`
 Array [
  "Hey.",
  "open",
@@ -13,15 +13,15 @@ Array [
 ]
 `;
 
-exports[`clientMode sockjs on browser client logs correctly 1`] =`
+exports[`transportMode client sockjs on browser client logs correctly 1`] =`
 Array [
  "Hey.",
  "[WDS] Live Reloading enabled.",
  "[WDS] Disconnected!",
 ]
 `;
 
-exports[`clientMode ws on browser client logs correctly 1`] =`
+exports[`transportMode client ws on browser client logs correctly 1`] =`
 Array [
  "Hey.",
  "[WDS] Live Reloading enabled.",