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;

client-src/utils/createSocketURL.js

@@ -1,6 +1,4 @@
-"use strict";
-
-const url = require("url");
+import url from "url";
 
 // We handle legacy API that is Node.js specific, and a newer API that implements the same WHATWG URL Standard used by web browsers
 // Please look at https://nodejs.org/api/url.html#url_url_strings_and_url_objects
@@ -92,4 +90,4 @@ function createSocketURL(parsedURL) {
   });
 }
 
-module.exports = createSocketURL;
+export default createSocketURL;

client-src/utils/getCurrentScriptSource.js

@@ -1,5 +1,3 @@
-"use strict";
-
 function getCurrentScriptSource() {
   // `document.currentScript` is the most accurate way to find the current script,
   // but is not supported in all browsers.
@@ -25,4 +23,4 @@ function getCurrentScriptSource() {
   throw new Error("[webpack-dev-server] Failed to get current script source.");
 }
 
-module.exports = getCurrentScriptSource;
+export default getCurrentScriptSource;

client-src/utils/log.js

@@ -1,6 +1,4 @@
-"use strict";
-
-const logger = require("../modules/logger");
+import logger from "../modules/logger/index.js";
 
 const name = "webpack-dev-server";
 // default level is set on the client side, so it does not need
@@ -13,4 +11,6 @@ function setLogLevel(level) {
 
 setLogLevel(defaultLevel);
 
-module.exports = { log: logger.getLogger(name), setLogLevel };
+const log = logger.getLogger(name);
+
+export { log, setLogLevel };

client-src/utils/parseURL.js

@@ -1,7 +1,5 @@
-"use strict";
-
-const url = require("url");
-const getCurrentScriptSource = require("./getCurrentScriptSource");
+import url from "url";
+import getCurrentScriptSource from "./getCurrentScriptSource.js";
 
 function parseURL(resourceQuery) {
   let options = {};
@@ -44,4 +42,4 @@ function parseURL(resourceQuery) {
   return options;
 }
 
-module.exports = parseURL;
+export default parseURL;

client-src/utils/reloadApp.js

@@ -1,6 +1,5 @@
-"use strict";
-
-const { log } = require("./log");
+import hotEmitter from "webpack/hot/emitter.js";
+import { log } from "./log.js";
 
 function reloadApp({ hot, liveReload }, { isUnloading, currentHash }) {
   if (isUnloading) {
@@ -23,8 +22,6 @@ function reloadApp({ hot, liveReload }, { isUnloading, currentHash }) {
   if (hot && allowToHot) {
     log.info("App hot update...");
 
-    const hotEmitter = require("webpack/hot/emitter");
-
     hotEmitter.emit("webpackHotUpdate", currentHash);
 
     if (typeof self !== "undefined" && self.window) {
@@ -53,4 +50,4 @@ function reloadApp({ hot, liveReload }, { isUnloading, currentHash }) {
   }
 }
 
-module.exports = reloadApp;
+export default reloadApp;

client-src/utils/sendMessage.js

@@ -1,5 +1,3 @@
-"use strict";
-
 /* global __resourceQuery WorkerGlobalScope */
 
 // Send messages to the outside, so plugins can consume it.
@@ -13,4 +11,4 @@ function sendMsg(type, data) {
   }
 }
 
-module.exports = sendMsg;
+export default sendMsg;

client-src/webpack.config.js

@@ -4,12 +4,28 @@ const path = require("path");
 const webpack = require("webpack");
 const { merge } = require("webpack-merge");
 
+const library = webpack.webpack
+  ? {
+      library: {
+        // type: "module",
+        type: "commonjs",
+      },
+    }
+  : { libraryTarget: "umd" };
+
 const baseForModules = {
   devtool: false,
   mode: "development",
+  // TODO enable this in future after fix bug with `eval` in webpack
+  // experiments: {
+  //   outputModule: true,
+  // },
   output: {
     path: path.resolve(__dirname, "../client/modules"),
-    libraryTarget: "commonjs2",
+    ...library,
+  },
+  optimization: {
+    minimize: false,
   },
   target: webpack.webpack ? ["web", "es5"] : "web",
   module: {

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 {

package.json

@@ -27,7 +27,7 @@
     "test": "npm run test:coverage",
     "pretest": "npm run lint",
     "prepare": "npm run build:client && husky install",
-    "build:client": "rimraf ./client/* && babel client-src/ --out-dir client/ --ignore \"webpack.config.js\" && webpack --config client/webpack.config.js",
+    "build:client": "rimraf ./client/* && babel client-src/ --out-dir client/ --ignore \"client-src/webpack.config.js\" --ignore \"client-src/modules\" && webpack --config client-src/webpack.config.js",
     "release": "standard-version"
   },
   "dependencies": {

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

@@ -520,7 +520,7 @@ exports[`options validate should throw an error on the "port" option with 'null'
     * options.port should be \\"auto\\"."
 `;
 
-exports[`options validate should throw an error on the "proxy" option with 'false' value 1`] = `
+exports[`options validate should throw an error on the "proxy" option with '() => {}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.proxy should be one of these:
    object { … } | [object { … } | function, ...]
@@ -533,7 +533,7 @@ exports[`options validate should throw an error on the "proxy" option with 'fals
       [object { … } | function, ...]"
 `;
 
-exports[`options validate should throw an error on the "proxy" option with 'function () {}' value 1`] = `
+exports[`options validate should throw an error on the "proxy" option with 'false' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.proxy should be one of these:
    object { … } | [object { … } | function, ...]

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

@@ -520,7 +520,7 @@ exports[`options validate should throw an error on the "port" option with 'null'
     * options.port should be \\"auto\\"."
 `;
 
-exports[`options validate should throw an error on the "proxy" option with 'false' value 1`] = `
+exports[`options validate should throw an error on the "proxy" option with '() => {}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.proxy should be one of these:
    object { … } | [object { … } | function, ...]
@@ -533,7 +533,7 @@ exports[`options validate should throw an error on the "proxy" option with 'fals
       [object { … } | function, ...]"
 `;
 
-exports[`options validate should throw an error on the "proxy" option with 'function () {}' value 1`] = `
+exports[`options validate should throw an error on the "proxy" option with 'false' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.proxy should be one of these:
    object { … } | [object { … } | function, ...]