refactor: use modules in client

client-src/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['../.eslintrc.js'],
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    sourceType: 'module',
+    allowImportExportEverywhere: true,
+  },
+};

client-src/clients/BaseClient.js

@@ -1,8 +1,6 @@
-'use strict';
-
-module.exports = class BaseClient {
+export default class BaseClient {
   // eslint-disable-next-line no-unused-vars
   static getClientPath(options) {
     throw new Error('Client needs implementation');
   }
-};
+}

client-src/clients/SockJSClient.js

@@ -1,10 +1,8 @@
-'use strict';
+import SockJS from '../modules/sockjs-client';
+import { log } from '../utils/log';
+import BaseClient from './BaseClient';
 
-const SockJS = require('../modules/sockjs-client');
-const { log } = require('../utils/log');
-const BaseClient = require('./BaseClient');
-
-module.exports = class SockJSClient extends BaseClient {
+class SockJSClient extends BaseClient {
   constructor(url) {
     super();
 
@@ -36,4 +34,6 @@ module.exports = class SockJSClient extends BaseClient {
       f(e.data);
     };
   }
-};
+}
+
+export default SockJSClient;

client-src/clients/WebsocketClient.js

@@ -1,9 +1,7 @@
-'use strict';
+import { log } from '../utils/log';
+import BaseClient from './BaseClient';
 
-const { log } = require('../utils/log');
-const BaseClient = require('./BaseClient');
-
-module.exports = class WebsocketClient extends BaseClient {
+class WebsocketClient extends BaseClient {
   constructor(url) {
     super();
 
@@ -32,4 +30,6 @@ module.exports = class WebsocketClient extends BaseClient {
       f(e.data);
     };
   }
-};
+}
+
+export default WebsocketClient;

client-src/index.js

@@ -1,16 +1,15 @@
-'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');
+// eslint-disable-next-line import/no-extraneous-dependencies
+import webpackHotLog from 'webpack/hot/log';
+import stripAnsi from './modules/strip-ansi';
+import parseURL from './utils/parseURL';
+import socket from './socket';
+import overlay from './overlay';
+import { log, setLogLevel } from './utils/log';
+import sendMessage from './utils/sendMessage';
+import reloadApp from './utils/reloadApp';
+import createSocketURL from './utils/createSocketURL';
 
 const status = {
   isUnloading: false,

client-src/modules/logger/SyncBailHookFake.js

@@ -1,10 +1,8 @@
-'use strict';
-
 /**
  * Client stub for tapable SyncBailHook
  */
-module.exports = function clientTapableSyncBailHook() {
+export default function clientTapableSyncBailHook() {
   return {
     call() {},
   };
-};
+}

client-src/modules/logger/index.js

@@ -1,6 +1,5 @@
-'use strict';
-
 // eslint-disable-next-line import/no-extraneous-dependencies
-require('core-js/stable/symbol');
+import 'core-js/stable/symbol';
 
-module.exports = require('webpack/lib/logging/runtime');
+// eslint-disable-next-line import/no-extraneous-dependencies
+export * from 'webpack/lib/logging/runtime';

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 * from 'sockjs-client';

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

@@ -1,3 +1,2 @@
-'use strict';
-
-module.exports = require('strip-ansi');
+// eslint-disable-next-line import/no-extraneous-dependencies
+export * from 'strip-ansi';

client-src/overlay.js

@@ -1,10 +1,10 @@
-'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).
 
-const ansiHTML = require('ansi-html');
-const { encode } = require('html-entities');
+// eslint-disable-next-line import/no-extraneous-dependencies
+import ansiHTML from 'ansi-html';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { encode } from 'html-entities';
 
 const colors = {
   reset: ['transparent', 'transparent'],
@@ -125,7 +125,7 @@ function showMessage(messages) {
   });
 }
 
-module.exports = {
+export default {
   clear,
   showMessage,
 };

client-src/socket.js

@@ -1,5 +1,3 @@
-'use strict';
-
 /* global __webpack_dev_server_client__ */
 /* eslint-disable
   camelcase
@@ -54,4 +52,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
@@ -93,4 +91,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';
 
 const name = 'webpack-dev-server';
 // default level is set on the client side, so it does not need
@@ -13,4 +11,4 @@ function setLogLevel(level) {
 
 setLogLevel(defaultLevel);
 
-module.exports = { log: logger.getLogger(name), setLogLevel };
+export default { log: logger.getLogger(name), 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';
 
 function parseURL(resourceQuery) {
   let options;
@@ -45,4 +43,4 @@ function parseURL(resourceQuery) {
   return options;
 }
 
-module.exports = parseURL;
+export default parseURL;

client-src/utils/reloadApp.js

@@ -1,6 +1,4 @@
-'use strict';
-
-const { log } = require('./log');
+import { log } from './log';
 
 function reloadApp(
   { hotReload, hot, liveReload },
@@ -13,6 +11,7 @@ function reloadApp(
   if (hot) {
     log.info('App hot update...');
 
+    // eslint-disable-next-line import/no-extraneous-dependencies
     const hotEmitter = require('webpack/hot/emitter');
 
     hotEmitter.emit('webpackHotUpdate', currentHash);
@@ -51,4 +50,4 @@ function reloadApp(
   }
 }
 
-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

@@ -1,8 +1,8 @@
-'use strict';
-
-const path = require('path');
-const webpack = require('webpack');
-const { merge } = require('webpack-merge');
+import path from 'path';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import webpack from 'webpack';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { merge } from 'webpack-merge';
 
 const baseForModules = {
   devtool: false,
@@ -26,7 +26,7 @@ const baseForModules = {
   },
 };
 
-module.exports = [
+export default [
   merge(baseForModules, {
     entry: path.join(__dirname, 'modules/logger/index.js'),
     output: {

lib/utils/getSocketClientPath.js

@@ -8,9 +8,11 @@ function getSocketClientPath(options) {
     case 'string':
       // could be 'sockjs', 'ws', or a path that should be required
       if (options.transportMode.client === 'sockjs') {
-        ClientImplementation = require('../../client/clients/SockJSClient');
+        ClientImplementation =
+          require('../../client/clients/SockJSClient').default;
       } else if (options.transportMode.client === 'ws') {
-        ClientImplementation = require('../../client/clients/WebsocketClient');
+        ClientImplementation =
+          require('../../client/clients/WebsocketClient').default;
       } else {
         try {
           // eslint-disable-next-line import/no-dynamic-require

package.json

@@ -63,7 +63,8 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.2",
+    "@babel/core": "^7.14.0",
+    "@babel/eslint-parser": "^7.13.14",
     "@babel/plugin-transform-object-assign": "^7.12.13",
     "@babel/plugin-transform-runtime": "^7.14.2",
     "@babel/preset-env": "^7.14.2",