refactor: simplify client (#3430)

Author: alexander-akait

client-src/clients/BaseClient.js

@@ -2,12 +2,9 @@
 
 const SockJS = require('../modules/sockjs-client');
 const { log } = require('../utils/log');
-const BaseClient = require('./BaseClient');
 
-module.exports = class SockJSClient extends BaseClient {
+module.exports = class SockJSClient {
   constructor(url) {
-    super();
-
     // SockJS requires `http` and `https` protocols
     this.sock = new SockJS(
       url.replace(/^ws:/i, 'http:').replace(/^wss:/i, 'https:')
@@ -17,11 +14,6 @@ module.exports = class SockJSClient extends BaseClient {
     };
   }
 
-  // eslint-disable-next-line no-unused-vars
-  static getClientPath(options) {
-    return require.resolve('./SockJSClient');
-  }
-
   onOpen(f) {
     this.sock.onopen = f;
   }

client-src/clients/SockJSClient.js

@@ -1,23 +1,15 @@
 'use strict';
 
 const { log } = require('../utils/log');
-const BaseClient = require('./BaseClient');
 
-module.exports = class WebsocketClient extends BaseClient {
+module.exports = class WebsocketClient {
   constructor(url) {
-    super();
-
     this.client = new WebSocket(url);
     this.client.onerror = (error) => {
       log.error(error);
     };
   }
 
-  // eslint-disable-next-line no-unused-vars
-  static getClientPath(options) {
-    return require.resolve('./WebsocketClient');
-  }
-
   onOpen(f) {
     this.client.onopen = f;
   }

client-src/clients/WebsocketClient.js

@@ -21,13 +21,17 @@ function getSocketClientPath(options) {
     case 'string':
       // could be 'sockjs', 'ws', or a path that should be required
       if (clientTransport === 'sockjs') {
-        ClientImplementation = require('../../client/clients/SockJSClient');
+        ClientImplementation = require.resolve(
+          '../../client/clients/SockJSClient'
+        );
       } else if (clientTransport === 'ws') {
-        ClientImplementation = require('../../client/clients/WebsocketClient');
+        ClientImplementation = require.resolve(
+          '../../client/clients/WebsocketClient'
+        );
       } else {
         try {
           // eslint-disable-next-line import/no-dynamic-require
-          ClientImplementation = require(clientTransport);
+          ClientImplementation = require.resolve(clientTransport);
         } catch (e) {
           clientImplementationFound = false;
         }
@@ -43,11 +47,11 @@ function getSocketClientPath(options) {
         !isKnownWebSocketServerImplementation
           ? 'When you use custom web socket implementation you must explicitly specify client.transport. '
           : ''
-      }client.transport 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.js) via require.resolve(...)`
+      }client.transport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class `
     );
   }
 
-  return ClientImplementation.getClientPath(options);
+  return ClientImplementation;
 }
 
 module.exports = getSocketClientPath;

lib/utils/getSocketClientPath.js

@@ -613,7 +613,7 @@ exports[`options validate should throw an error on the "webSocketServer" option
       object { type?, options? }"
 `;
 
-exports[`options validate should throw an error on the "webSocketServer" option with 'nonexistent-implementation' value 1`] = `"Error: When you use custom web socket implementation you must explicitly specify client.transport. client.transport 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.js) via require.resolve(...)"`;
+exports[`options validate should throw an error on the "webSocketServer" option with 'nonexistent-implementation' value 1`] = `"Error: When you use custom web socket implementation you must explicitly specify client.transport. client.transport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class "`;
 
 exports[`options validate should throw an error on the "webSocketServer" option with 'null' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

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

@@ -613,7 +613,7 @@ exports[`options validate should throw an error on the "webSocketServer" option
       object { type?, options? }"
 `;
 
-exports[`options validate should throw an error on the "webSocketServer" option with 'nonexistent-implementation' value 1`] = `"Error: When you use custom web socket implementation you must explicitly specify client.transport. client.transport 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.js) via require.resolve(...)"`;
+exports[`options validate should throw an error on the "webSocketServer" option with 'nonexistent-implementation' value 1`] = `"Error: When you use custom web socket implementation you must explicitly specify client.transport. client.transport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class "`;
 
 exports[`options validate should throw an error on the "webSocketServer" option with 'null' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

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

@@ -12,6 +12,7 @@ describe('socket', () => {
     const WebsocketClient = require('../../client/clients/WebsocketClient');
 
     const mockHandler = jest.fn();
+
     socket('my.url', {
       example: mockHandler,
     });

test/client/socket-helper.test.js

@@ -4,21 +4,14 @@
   no-unused-vars
 */
 const SockJS = require('sockjs-client/dist/sockjs');
-const BaseClient = require('../../../client/clients/BaseClient');
 
-module.exports = class SockJSClient extends BaseClient {
+module.exports = class SockJSClient {
   constructor(url) {
-    super();
-
     this.sock = new SockJS(
       url.replace(/^ws:/i, 'http://').replace(/^wss:/i, 'https://')
     );
   }
 
-  static getClientPath(options) {
-    return require.resolve('./CustomSockJSClient');
-  }
-
   onOpen(f) {
     this.sock.onopen = () => {
       console.log('open');

test/e2e/__snapshots__/TransportMode.test.js.snap.webpack4 renamed to test/e2e/__snapshots__/transport-mode.test.js.snap.webpack4

@@ -5,7 +5,6 @@ const getSocketClientPath = require('../../../lib/utils/getSocketClientPath');
 const sockjsClientPath = require.resolve(
   '../../../client/clients/SockJSClient'
 );
-const baseClientPath = require.resolve('../../../client/clients/BaseClient');
 
 describe('getSocketClientPath', () => {
   it("should work with client.transport: 'sockjs'", () => {
@@ -64,10 +63,12 @@ describe('getSocketClientPath', () => {
     expect(() => {
       getSocketClientPath({
         client: {
-          transport: baseClientPath,
+          transport: 'foo',
         },
         webSocketServer: 'sockjs',
       });
-    }).toThrow('Client needs implementation');
+    }).toThrow(
+      'When you use custom web socket implementation you must explicitly specify client.transport'
+    );
   });
 });