fix: support ecma clients

Author: alexander-akait

client-src/clients/WebsocketClient.js renamed to client-src/clients/WebSocketClient.js

@@ -1,6 +1,6 @@
 import { log } from "../utils/log.js";
 
-export default class WebsocketClient {
+export default class WebSocketClient {
   constructor(url) {
     this.client = new WebSocket(url);
     this.client.onerror = (error) => {

client-src/socket.js

@@ -1,14 +1,18 @@
 /* global __webpack_dev_server_client__ */
 
-import WebsocketClient from "./clients/WebsocketClient.js";
+import WebSocketClient from "./clients/WebSocketClient.js";
 
 // this WebsocketClient is here as a default fallback, in case the client is not injected
+/* eslint-disable camelcase */
 const Client =
-  // eslint-disable-next-line camelcase
+  // eslint-disable-next-line camelcase, no-nested-ternary
   typeof __webpack_dev_server_client__ !== "undefined"
     ? // eslint-disable-next-line camelcase
-      __webpack_dev_server_client__
-    : WebsocketClient;
+      typeof __webpack_dev_server_client__.default !== "undefined"
+      ? __webpack_dev_server_client__.default
+      : __webpack_dev_server_client__
+    : WebSocketClient;
+/* eslint-enable camelcase */
 
 let retries = 0;
 let client = null;

lib/utils/DevServerPlugin.js

@@ -46,7 +46,7 @@ class DevServerPlugin {
           );
         } else if (clientTransport === "ws") {
           ClientImplementation = require.resolve(
-            "../../client/clients/WebsocketClient"
+            "../../client/clients/WebSocketClient"
           );
         } else {
           try {
@@ -328,7 +328,7 @@ class DevServerPlugin {
     }
 
     const providePlugin = new webpack.ProvidePlugin({
-      __webpack_dev_server_client__: [this.getWebsocketTransport(), "default"],
+      __webpack_dev_server_client__: this.getWebsocketTransport(),
     });
 
     providePlugin.apply(compiler);

test/client/clients/WebsocketClient.test.js

@@ -16,8 +16,8 @@ jest.setMock("../../../client-src/utils/log", {
 });
 
 describe("WebsocketClient", () => {
-  const WebsocketClient =
-    require("../../../client-src/clients/WebsocketClient").default;
+  const WebSocketClient =
+    require("../../../client-src/clients/WebSocketClient").default;
   const { log } = require("../../../client-src/utils/log");
 
   let socketServer;
@@ -47,7 +47,7 @@ describe("WebsocketClient", () => {
         }, 1000);
       });
 
-      const client = new WebsocketClient(`ws://localhost:${port}/ws-server`);
+      const client = new WebSocketClient(`ws://localhost:${port}/ws-server`);
       const data = [];
 
       client.onOpen(() => {

test/client/socket-helper.test.js

@@ -11,11 +11,11 @@ describe("socket", () => {
   });
 
   it("should default to WebsocketClient when no __webpack_dev_server_client__ set", () => {
-    jest.mock("../../client/clients/WebsocketClient");
+    jest.mock("../../client/clients/WebSocketClient");
 
     const socket = require("../../client/socket").default;
     const WebsocketClient =
-      require("../../client/clients/WebsocketClient").default;
+      require("../../client/clients/WebSocketClient").default;
 
     const mockHandler = jest.fn();
 
@@ -42,12 +42,12 @@ describe("socket", () => {
   });
 
   it("should use __webpack_dev_server_client__ when set", () => {
-    jest.mock("../../client/clients/WebsocketClient");
+    jest.mock("../../client/clients/WebSocketClient");
 
     const socket = require("../../client/socket").default;
 
     global.__webpack_dev_server_client__ =
-      require("../../client/clients/WebsocketClient").default;
+      require("../../client/clients/WebSocketClient").default;
 
     const mockHandler = jest.fn();
 

test/fixtures/provide-plugin-default/foo.js

@@ -1,7 +1,8 @@
 "use strict";
 
 // 'npm run prepare' must be run for this to work during testing
-const WebsocketClient = require("../../../client/clients/WebsocketClient");
+const WebsocketClient =
+  require("../../../client/clients/WebSocketClient").default;
 
 window.expectedClient = WebsocketClient;
 // eslint-disable-next-line camelcase, no-undef

test/fixtures/provide-plugin-sockjs-config/foo.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // 'npm run prepare' must be run for this to work during testing
-const SockJSClient = require("../../../client/clients/SockJSClient");
+const SockJSClient = require("../../../client/clients/SockJSClient").default;
 
 window.expectedClient = SockJSClient;
 // eslint-disable-next-line camelcase, no-undef

test/fixtures/provide-plugin-ws-config/foo.js

@@ -1,7 +1,8 @@
 "use strict";
 
 // 'npm run prepare' must be run for this to work during testing
-const WebsocketClient = require("../../../client/clients/WebsocketClient");
+const WebsocketClient =
+  require("../../../client/clients/WebSocketClient").default;
 
 window.expectedClient = WebsocketClient;
 // eslint-disable-next-line camelcase, no-undef