feat: use ECMA modules in client (#3550)

Author: alexander-akait

.eslintrc.js

@@ -24,9 +24,20 @@ module.exports = {
   overrides: [
     {
       files: ["client-src/**/*.js"],
+      excludedFiles: [
+        "client-src/webpack.config.js",
+        "client-src/modules/logger/SyncBailHookFake.js",
+      ],
+      parserOptions: {
+        sourceType: "module",
+        allowImportExportEverywhere: true,
+      },
       env: {
         browser: true,
       },
+      rules: {
+        "import/extensions": ["error", "always"],
+      },
     },
     {
       files: ["test/**/*.js"],

babel.config.js

@@ -8,7 +8,9 @@ module.exports = (api) => {
       [
         "@babel/preset-env",
         {
+          modules: false,
           targets: {
+            esmodules: true,
             node: "0.12",
           },
         },
@@ -17,6 +19,16 @@ module.exports = (api) => {
     plugins: ["@babel/plugin-transform-object-assign"],
     env: {
       test: {
+        presets: [
+          [
+            "@babel/preset-env",
+            {
+              targets: {
+                node: "12.13.0",
+              },
+            },
+          ],
+        ],
         plugins: ["@babel/plugin-transform-runtime"],
       },
     },

client-src/clients/SockJSClient.js

@@ -1,9 +1,7 @@
-"use strict";
+import SockJS from "../modules/sockjs-client/index.js";
+import { log } from "../utils/log.js";
 
-const SockJS = require("../modules/sockjs-client");
-const { log } = require("../utils/log");
-
-module.exports = class SockJSClient {
+export default class SockJSClient {
   constructor(url) {
     // SockJS requires `http` and `https` protocols
     this.sock = new SockJS(
@@ -28,4 +26,4 @@ module.exports = class SockJSClient {
       f(e.data);
     };
   }
-};
+}

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

@@ -1,8 +1,6 @@
-"use strict";
+import { log } from "../utils/log.js";
 
-const { log } = require("../utils/log");
-
-module.exports = class WebsocketClient {
+export default class WebSocketClient {
   constructor(url) {
     this.client = new WebSocket(url);
     this.client.onerror = (error) => {
@@ -24,4 +22,4 @@ module.exports = class WebsocketClient {
       f(e.data);
     };
   }
-};
+}

client-src/index.js

@@ -1,16 +1,14 @@
-"use strict";
-
-/* global __resourceQuery WorkerGlobalScope */
-
-const webpackHotLog = require("webpack/hot/log");
-const stripAnsi = require("./modules/strip-ansi");
-const parseURL = require("./utils/parseURL");
-const socket = require("./socket");
-const overlay = require("./overlay");
-const { log, setLogLevel } = require("./utils/log");
-const sendMessage = require("./utils/sendMessage");
-const reloadApp = require("./utils/reloadApp");
-const createSocketURL = require("./utils/createSocketURL");
+/* global __resourceQuery */
+
+import webpackHotLog from "webpack/hot/log.js";
+import stripAnsi from "./modules/strip-ansi/index.js";
+import parseURL from "./utils/parseURL.js";
+import socket from "./socket.js";
+import { show, hide } from "./overlay.js";
+import { log, setLogLevel } from "./utils/log.js";
+import sendMessage from "./utils/sendMessage.js";
+import reloadApp from "./utils/reloadApp.js";
+import createSocketURL from "./utils/createSocketURL.js";
 
 const status = { isUnloading: false, currentHash: "" };
 const options = {
@@ -66,7 +64,7 @@ const onSocketMessage = {
 
     // Fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
     if (options.overlay) {
-      overlay.hide();
+      hide();
     }
 
     sendMessage("Invalid");
@@ -100,7 +98,7 @@ const onSocketMessage = {
     log.info("Nothing changed.");
 
     if (options.overlay) {
-      overlay.hide();
+      hide();
     }
 
     sendMessage("StillOk");
@@ -109,7 +107,7 @@ const onSocketMessage = {
     sendMessage("Ok");
 
     if (options.overlay) {
-      overlay.hide();
+      hide();
     }
 
     if (options.initial) {
@@ -156,7 +154,7 @@ const onSocketMessage = {
         : options.overlay && options.overlay.warnings;
 
     if (needShowOverlay) {
-      overlay.show(warnings, "warnings");
+      show(warnings, "warnings");
     }
 
     if (options.initial) {
@@ -184,7 +182,7 @@ const onSocketMessage = {
         : options.overlay && options.overlay.errors;
 
     if (needShowOverlay) {
-      overlay.show(errors, "errors");
+      show(errors, "errors");
     }
 
     options.initial = false;

client-src/modules/logger/index.js

@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("webpack/lib/logging/runtime");
+export { default } from "webpack/lib/logging/runtime.js";

client-src/modules/sockjs-client/index.js

@@ -1,4 +1,2 @@
-"use strict";
-
 // eslint-disable-next-line import/no-extraneous-dependencies
-module.exports = require("sockjs-client");
+export { default } from "sockjs-client";

client-src/modules/strip-ansi/index.js

@@ -1,3 +1,3 @@
-"use strict";
+import stripAnsi from "strip-ansi";
 
-module.exports = require("strip-ansi").default;
+export default stripAnsi;

client-src/overlay.js

@@ -1,5 +1,3 @@
-"use strict";
-
 // The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
 // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
 
@@ -154,4 +152,4 @@ function show(messages, type) {
   });
 }
 
-module.exports = { show, hide };
+export { show, hide };

client-src/socket.js

@@ -1,16 +1,18 @@
-"use strict";
-
 /* global __webpack_dev_server_client__ */
-/* eslint-disable
-  camelcase
-*/
+
+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, no-nested-ternary
   typeof __webpack_dev_server_client__ !== "undefined"
-    ? __webpack_dev_server_client__
-    : // eslint-disable-next-line import/no-unresolved
-      require("./clients/WebsocketClient");
+    ? // eslint-disable-next-line camelcase
+      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;
@@ -54,4 +56,4 @@ const socket = function initSocket(url, handlers) {
   });
 };
 
-module.exports = socket;
+export default socket;