fix: client compatibility with IE11/IE10/IE9 (#3129)

.eslintrc.js

@@ -2,13 +2,13 @@
 
 module.exports = {
   extends: ['webpack', 'prettier'],
-  globals: {
-    document: true,
-    window: true,
-  },
   parserOptions: {
     sourceType: 'script',
-    ecmaVersion: 10,
+    ecmaVersion: 2018,
+  },
+  env: {
+    node: true,
+    es6: true,
   },
   rules: {
     curly: 'error',
@@ -21,12 +21,30 @@ module.exports = {
     'global-require': 'off',
   },
   overrides: [
+    {
+      files: ['client-src/**/*.js'],
+      env: {
+        browser: true,
+      },
+    },
     {
       files: ['test/**/*.js'],
       rules: {
         'no-console': 'off',
       },
     },
+    {
+      files: [
+        'test/client/**/*.js',
+        'test/e2e/**/*.js',
+        'test/fixtures/**/*.js',
+        'test/server/liveReload-option.test.js',
+      ],
+      env: {
+        browser: true,
+        node: true,
+      },
+    },
     {
       files: ['examples/**/*.js'],
       env: {

babel.config.js

@@ -4,7 +4,16 @@ module.exports = (api) => {
   api.cache(true);
 
   return {
-    presets: ['@babel/preset-env'],
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: '0.12',
+          },
+        },
+      ],
+    ],
     env: {
       test: {
         plugins: ['@babel/plugin-transform-runtime'],

client-src/clients/SockJSClient.js

@@ -1,15 +1,16 @@
 'use strict';
 
-const SockJS = require('sockjs-client/dist/sockjs');
-const { log } = require('../default/utils/log');
+const SockJS = require('../modules/sockjs-client');
+const { log } = require('../utils/log');
 const BaseClient = require('./BaseClient');
 
 module.exports = class SockJSClient extends BaseClient {
   constructor(url) {
     super();
+
     const sockUrl = url.replace(/^(?:chrome-extension|file)/i, 'http');
-    this.sock = new SockJS(sockUrl);
 
+    this.sock = new SockJS(sockUrl);
     this.sock.onerror = (err) => {
       log.error(err);
     };

client-src/clients/WebsocketClient.js

@@ -1,16 +1,15 @@
 'use strict';
 
-/* global WebSocket */
-
-const { log } = require('../default/utils/log');
+const { log } = require('../utils/log');
 const BaseClient = require('./BaseClient');
 
 module.exports = class WebsocketClient extends BaseClient {
   constructor(url) {
     super();
+
     const wsUrl = url.replace(/^(?:http|chrome-extension|file)/i, 'ws');
-    this.client = new WebSocket(wsUrl);
 
+    this.client = new WebSocket(wsUrl);
     this.client.onerror = (err) => {
       log.error(err);
     };

client-src/default/index.js → client-src/index.js

@@ -1,7 +1,8 @@
 'use strict';
 
-/* global __resourceQuery WorkerGlobalScope self */
-const stripAnsi = require('../transpiled-modules/strip-ansi');
+/* global __resourceQuery WorkerGlobalScope */
+
+const stripAnsi = require('./modules/strip-ansi');
 const socket = require('./socket');
 const overlay = require('./overlay');
 const { log, setLogLevel } = require('./utils/log');

client-src/modules/logger/index.js

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

client-src/default/socket.js → client-src/socket.js

@@ -11,7 +11,7 @@ const Client =
   typeof __webpack_dev_server_client__ !== 'undefined'
     ? __webpack_dev_server_client__
     : // eslint-disable-next-line import/no-unresolved
-      require('../clients/WebsocketClient');
+      require('./clients/WebsocketClient');
 
 let retries = 0;
 let client = null;
@@ -37,6 +37,7 @@ const socket = function initSocket(url, handlers) {
       // Respectfully copied from the package `got`.
       // eslint-disable-next-line no-mixed-operators, no-restricted-properties
       const retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
+
       retries += 1;
 
       setTimeout(() => {

client-src/default/utils/createSocketUrl.js → client-src/utils/createSocketUrl.js

@@ -1,7 +1,5 @@
 'use strict';
 
-/* global self */
-
 const url = require('url');
 const getCurrentScriptSource = require('./getCurrentScriptSource');
 

client-src/default/utils/log.js → client-src/utils/log.js

@@ -1,21 +1,16 @@
 'use strict';
 
-const log = require('../../transpiled-modules/log');
+const logger = require('../modules/logger');
 
 const name = 'webpack-dev-server';
 // default level is set on the client side, so it does not need
 // to be set by the CLI or API
 const defaultLevel = 'info';
 
 function setLogLevel(level) {
-  log.configureDefaultLogger({
-    level,
-  });
+  logger.configureDefaultLogger({ level });
 }
 
 setLogLevel(defaultLevel);
 
-module.exports = {
-  log: log.getLogger(name),
-  setLogLevel,
-};
+module.exports = { log: logger.getLogger(name), setLogLevel };

client-src/default/utils/reloadApp.js → client-src/utils/reloadApp.js

@@ -1,7 +1,5 @@
 'use strict';
 
-/* global WorkerGlobalScope self */
-
 const { log } = require('./log');
 
 function reloadApp(
@@ -11,10 +9,14 @@ function reloadApp(
   if (isUnloading || !hotReload) {
     return;
   }
+
   if (hot) {
     log.info('App hot update...');
+
     const hotEmitter = require('webpack/hot/emitter');
+
     hotEmitter.emit('webpackHotUpdate', currentHash);
+
     if (typeof self !== 'undefined' && self.window) {
       // broadcast update to window
       self.postMessage(`webpackHotUpdate${currentHash}`, '*');
@@ -23,13 +25,15 @@ function reloadApp(
   // allow refreshing the page only if liveReload isn't disabled
   else if (liveReload) {
     let rootWindow = self;
+
     // use parent window for reload (in case we're in an iframe with no valid src)
     const intervalId = self.setInterval(() => {
       if (rootWindow.location.protocol !== 'about:') {
         // reload immediately if protocol is valid
         applyReload(rootWindow, intervalId);
       } else {
         rootWindow = rootWindow.parent;
+
         if (rootWindow.parent === rootWindow) {
           // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
           applyReload(rootWindow, intervalId);

client-src/default/utils/sendMessage.js → client-src/utils/sendMessage.js

@@ -1,6 +1,6 @@
 'use strict';
 
-/* global __resourceQuery WorkerGlobalScope self */
+/* global __resourceQuery WorkerGlobalScope */
 
 // Send messages to the outside, so plugins can consume it.
 function sendMsg(type, data) {

client-src/webpack.config.js

@@ -0,0 +1,72 @@
+'use strict';
+
+const path = require('path');
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+
+const baseForModules = {
+  devtool: false,
+  mode: 'development',
+  output: {
+    path: path.resolve(__dirname, '../client/modules'),
+    libraryTarget: 'commonjs2',
+  },
+  target: webpack.webpack ? ['web', 'es5'] : 'web',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+module.exports = [
+  merge(baseForModules, {
+    entry: path.join(__dirname, 'modules/logger/index.js'),
+    output: {
+      filename: 'logger/index.js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                plugins: ['@babel/plugin-transform-object-assign'],
+              },
+            },
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new webpack.NormalModuleReplacementPlugin(
+        /^tapable\/lib\/SyncBailHook/,
+        path.join(__dirname, 'modules/logger/SyncBailHookFake.js')
+      ),
+    ],
+  }),
+  merge(baseForModules, {
+    entry: path.join(__dirname, 'modules/strip-ansi/index.js'),
+    output: {
+      filename: 'strip-ansi/index.js',
+    },
+  }),
+  merge(baseForModules, {
+    entry: path.join(__dirname, 'modules/sockjs-client/index.js'),
+    output: {
+      filename: 'sockjs-client/index.js',
+      library: 'SockJS',
+      libraryTarget: 'umd',
+      globalObject: "(typeof self !== 'undefined' ? self : this)",
+    },
+  }),
+];