refactor: client

Author: alexander-akait

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 { log } = require('../modules/logger');
 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,8 +1,6 @@
 'use strict';
 
-/* global WebSocket */
-
-const { log } = require('../default/utils/log');
+const { log } = require('../modules/logger');
 const BaseClient = require('./BaseClient');
 
 module.exports = class WebsocketClient extends BaseClient {

client-src/default/webpack.config.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/default/index.js renamed to client-src/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/transpiled-modules/SyncBailHookFake.js renamed to client-src/modules/logger/SyncBailHookFake.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/modules/logger/index.js

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

client-src/sockjs/index.js renamed to client-src/modules/sockjs-client/index.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/transpiled-modules/strip-ansi.js renamed to client-src/modules/strip-ansi/index.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/overlay.js renamed to client-src/overlay.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/default/socket.js renamed to client-src/socket.js

@@ -0,0 +1,71 @@
+'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',
+    },
+  }),
+];

client-src/sockjs/webpack.config.js

@@ -12,10 +12,13 @@ const BaseServer = require('./BaseServer');
 {
   const SockjsSession = require('sockjs/lib/transport').Session;
   const decorateConnection = SockjsSession.prototype.decorateConnection;
+
   // eslint-disable-next-line func-names
   SockjsSession.prototype.decorateConnection = function (req) {
     decorateConnection.call(this, req);
+
     const connection = this.connection;
+
     if (
       connection.headers &&
       !('origin' in connection.headers) &&

client-src/transpiled-modules/log.js

@@ -55,7 +55,7 @@ class DevServerPlugin {
 
     /** @type {string} */
     const clientEntry = `${require.resolve(
-      '../../client/default/'
+      '../../client/'
     )}?${domain}${host}${path}${port}`;
 
     /** @type {(string[] | string)} */

client-src/transpiled-modules/webpack.config.js

@@ -3,6 +3,7 @@
 function getSocketClientPath(options) {
   let ClientImplementation;
   let clientImplFound = true;
+
   switch (typeof options.transportMode.client) {
     case 'string':
       // could be 'sockjs', 'ws', or a path that should be required

client-src/default/utils/createSocketUrl.js renamed to client-src/utils/createSocketUrl.js

@@ -13,13 +13,9 @@ function routes(server) {
   app.get('/__webpack_dev_server__/sockjs.bundle.js', (req, res) => {
     res.setHeader('Content-Type', 'application/javascript');
 
-    createReadStream(join(clientBasePath, 'sockjs/sockjs.bundle.js')).pipe(res);
-  });
-
-  app.get('/webpack-dev-server.js', (req, res) => {
-    res.setHeader('Content-Type', 'application/javascript');
-
-    createReadStream(join(clientBasePath, 'default/index.bundle.js')).pipe(res);
+    createReadStream(
+      join(clientBasePath, 'modules/sockjs-client/index.js')
+    ).pipe(res);
   });
 
   app.get('/webpack-dev-server/invalidate', (_req, res) => {