webpack-dev-server 3.11.3 → 4.0.0-beta.3

package/lib/servers/SockJSServer.js

@@ -1,8 +1,7 @@
 'use strict';
 
 /* eslint-disable
-  class-methods-use-this,
-  func-names
+  class-methods-use-this
 */
 const sockjs = require('sockjs');
 const BaseServer = require('./BaseServer');
@@ -13,9 +12,13 @@ const BaseServer = require('./BaseServer');
 {
   const SockjsSession = require('sockjs/lib/transport').Session;
   const decorateConnection = SockjsSession.prototype.decorateConnection;
-  SockjsSession.prototype.decorateConnection = function(req) {
+
+  // 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) &&
@@ -30,21 +33,24 @@ module.exports = class SockJSServer extends BaseServer {
   // options has: error (function), debug (function), server (http/s server), path (string)
   constructor(server) {
     super(server);
+
     this.socket = sockjs.createServer({
       // Use provided up-to-date sockjs-client
       sockjs_url: '/__webpack_dev_server__/sockjs.bundle.js',
-      // Limit useless logs
+      // Default logger is very annoy. Limit useless logs.
       log: (severity, line) => {
         if (severity === 'error') {
-          this.server.log.error(line);
+          this.server.logger.error(line);
+        } else if (severity === 'info') {
+          this.server.logger.log(line);
         } else {
-          this.server.log.debug(line);
+          this.server.logger.debug(line);
         }
       },
     });
 
-    this.socket.installHandlers(this.server.listeningApp, {
-      prefix: this.server.sockPath,
+    this.socket.installHandlers(this.server.server, {
+      prefix: this.server.options.client.path,
     });
   }
 

package/lib/servers/WebsocketServer.js

@@ -9,12 +9,13 @@ const BaseServer = require('./BaseServer');
 module.exports = class WebsocketServer extends BaseServer {
   constructor(server) {
     super(server);
+
     this.wsServer = new ws.Server({
       noServer: true,
-      path: this.server.sockPath,
+      path: this.server.options.client.path,
     });
 
-    this.server.listeningApp.on('upgrade', (req, sock, head) => {
+    this.server.server.on('upgrade', (req, sock, head) => {
       if (!this.wsServer.shouldHandle(req)) {
         return;
       }
@@ -25,7 +26,7 @@ module.exports = class WebsocketServer extends BaseServer {
     });
 
     this.wsServer.on('error', (err) => {
-      this.server.log.error(err.message);
+      this.server.logger.error(err.message);
     });
 
     const noop = () => {};
@@ -39,7 +40,7 @@ module.exports = class WebsocketServer extends BaseServer {
         socket.isAlive = false;
         socket.ping(noop);
       });
-    }, this.server.heartbeatInterval);
+    }, this.server.wsHeartbeatInterval);
   }
 
   send(connection, message) {

package/lib/utils/DevServerPlugin.js

@@ -0,0 +1,218 @@
+'use strict';
+
+const webpack = require('webpack');
+const createDomain = require('./createDomain');
+const getSocketClientPath = require('./getSocketClientPath');
+
+// @ts-ignore
+const EntryPlugin = webpack.EntryPlugin;
+
+class DevServerPlugin {
+  /**
+   * @param {?Object} options - Dev-Server options
+   */
+  constructor(options) {
+    this.options = options;
+  }
+
+  /**
+   * An Entry, it can be of type string or string[] or Object<string | string[],string>
+   * @typedef {(string[] | string | Object<string | string[],string>)} Entry
+   */
+
+  /**
+   * Apply the plugin
+   * @param {Object} compiler the compiler instance
+   * @returns {void}
+   */
+  apply(compiler) {
+    const { options } = this;
+
+    /** @type {string} */
+    const domain = createDomain(options);
+    /** @type {string} */
+    const host =
+      options.client && options.client.host
+        ? `&host=${options.client.host}`
+        : '';
+    /** @type {string} */
+    let path = '';
+
+    // only add the path if it is not default
+    if (
+      options.client &&
+      options.client.path &&
+      options.client.path !== '/ws'
+    ) {
+      path = `&path=${options.client.path}`;
+    }
+
+    /** @type {string} */
+    const port =
+      (options.client && options.client.port) || options.port
+        ? `&port=${options.client.port || options.port}`
+        : '';
+
+    /** @type {string} */
+    const logging =
+      options.client && options.client.logging
+        ? `&logging=${options.client.logging}`
+        : '';
+
+    /** @type {string} */
+    const clientEntry = `${require.resolve(
+      '../../client/'
+    )}?${domain}${host}${path}${port}${logging}`;
+
+    /** @type {(string[] | string)} */
+    let hotEntry;
+
+    if (options.hot === 'only') {
+      hotEntry = require.resolve('webpack/hot/only-dev-server');
+    } else if (options.hot) {
+      hotEntry = require.resolve('webpack/hot/dev-server');
+    }
+    /**
+     * prependEntry Method for webpack 4
+     * @param {Entry} originalEntry
+     * @param {Entry} additionalEntries
+     * @returns {Entry}
+     */
+    const prependEntry = (originalEntry, additionalEntries) => {
+      if (typeof originalEntry === 'function') {
+        return () =>
+          Promise.resolve(originalEntry()).then((entry) =>
+            prependEntry(entry, additionalEntries)
+          );
+      }
+
+      if (typeof originalEntry === 'object' && !Array.isArray(originalEntry)) {
+        /** @type {Object<string,string>} */
+        const clone = {};
+
+        Object.keys(originalEntry).forEach((key) => {
+          // entry[key] should be a string here
+          const entryDescription = originalEntry[key];
+          clone[key] = prependEntry(entryDescription, additionalEntries);
+        });
+
+        return clone;
+      }
+
+      // in this case, entry is a string or an array.
+      // make sure that we do not add duplicates.
+      /** @type {Entry} */
+      const entriesClone = additionalEntries.slice(0);
+      [].concat(originalEntry).forEach((newEntry) => {
+        if (!entriesClone.includes(newEntry)) {
+          entriesClone.push(newEntry);
+        }
+      });
+      return entriesClone;
+    };
+
+    /**
+     *
+     * Description of the option for checkInject method
+     * @typedef {Function} checkInjectOptionsParam
+     * @param {Object} _config - compilerConfig
+     * @return {Boolean}
+     */
+
+    /**
+     *
+     * @param {Boolean | checkInjectOptionsParam} option - inject(Hot|Client) it is Boolean | fn => Boolean
+     * @param {Object} _config
+     * @param {Boolean} defaultValue
+     * @return {Boolean}
+     */
+    // eslint-disable-next-line no-shadow
+    const checkInject = (option, _config, defaultValue) => {
+      if (typeof option === 'boolean') {
+        return option;
+      }
+
+      if (typeof option === 'function') {
+        return option(_config);
+      }
+
+      return defaultValue;
+    };
+
+    const compilerOptions = compiler.options;
+
+    compilerOptions.plugins = compilerOptions.plugins || [];
+
+    /** @type {boolean} */
+    const isWebTarget = compilerOptions.externalsPresets
+      ? compilerOptions.externalsPresets.web
+      : [
+          'web',
+          'webworker',
+          'electron-renderer',
+          'node-webkit',
+          // eslint-disable-next-line no-undefined
+          undefined,
+          null,
+        ].includes(compilerOptions.target);
+
+    /** @type {Entry} */
+    const additionalEntries = checkInject(
+      options.client ? options.client.needClientEntry : null,
+      compilerOptions,
+      isWebTarget
+    )
+      ? [clientEntry]
+      : [];
+
+    if (
+      hotEntry &&
+      checkInject(
+        options.client ? options.client.needHotEntry : null,
+        compilerOptions,
+        true
+      )
+    ) {
+      additionalEntries.push(hotEntry);
+    }
+
+    // use a hook to add entries if available
+    if (EntryPlugin) {
+      for (const additionalEntry of additionalEntries) {
+        new EntryPlugin(compiler.context, additionalEntry, {
+          // eslint-disable-next-line no-undefined
+          name: undefined,
+        }).apply(compiler);
+      }
+    } else {
+      compilerOptions.entry = prependEntry(
+        compilerOptions.entry || './src',
+        additionalEntries
+      );
+      compiler.hooks.entryOption.call(
+        compilerOptions.context,
+        compilerOptions.entry
+      );
+    }
+
+    const providePlugin = new webpack.ProvidePlugin({
+      __webpack_dev_server_client__: getSocketClientPath(options),
+    });
+
+    providePlugin.apply(compiler);
+
+    if (
+      hotEntry &&
+      !compilerOptions.plugins.find(
+        (p) => p.constructor === webpack.HotModuleReplacementPlugin
+      )
+    ) {
+      // apply the HMR plugin, if it didn't exist before.
+      const plugin = new webpack.HotModuleReplacementPlugin();
+
+      plugin.apply(compiler);
+    }
+  }
+}
+
+module.exports = DevServerPlugin;

package/lib/utils/createDomain.js

@@ -1,16 +1,21 @@
 'use strict';
 
 const url = require('url');
-const ip = require('internal-ip');
 
 function createDomain(options, server) {
   const protocol = options.https ? 'https' : 'http';
-  const hostname = options.useLocalIp
-    ? ip.v4.sync() || 'localhost'
-    : options.host || 'localhost';
+  // use location hostname and port by default in createSocketURL
+  // ipv6 detection is not required as 0.0.0.0 is just used as a placeholder
+  let hostname;
+
+  if (server) {
+    hostname = server.address().address;
+  } else {
+    hostname = '0.0.0.0';
+  }
+
+  const port = server ? server.address().port : 0;
 
-  // eslint-disable-next-line no-nested-ternary
-  const port = options.socket ? 0 : server ? server.address().port : 0;
   // use explicitly defined public url
   // (prefix with protocol if not explicitly given)
   if (options.public) {
@@ -18,12 +23,9 @@ function createDomain(options, server) {
       ? `${options.public}`
       : `${protocol}://${options.public}`;
   }
+
   // the formatted domain (url without path) of the webpack server
-  return url.format({
-    protocol,
-    hostname,
-    port,
-  });
+  return url.format({ protocol, hostname, port });
 }
 
 module.exports = createDomain;

package/lib/utils/findPort.js

@@ -2,13 +2,11 @@
 
 const pRetry = require('p-retry');
 const portfinder = require('portfinder');
-const defaultPort = require('./defaultPort');
-const defaultTo = require('./defaultTo');
-const tryParseInt = require('./tryParseInt');
 
 function runPortFinder() {
   return new Promise((resolve, reject) => {
-    portfinder.basePort = defaultPort;
+    // default port
+    portfinder.basePort = 8080;
     portfinder.getPort((error, port) => {
       if (error) {
         return reject(error);
@@ -26,12 +24,7 @@ function findPort(port) {
 
   // Try to find unused port and listen on it for 3 times,
   // if port is not specified in options.
-  // Because NaN == null is false, defaultTo fails if parseInt returns NaN
-  // so the tryParseInt function is introduced to handle NaN
-  const defaultPortRetry = defaultTo(
-    tryParseInt(process.env.DEFAULT_PORT_RETRY),
-    3
-  );
+  const defaultPortRetry = parseInt(process.env.DEFAULT_PORT_RETRY, 10) || 3;
 
   return pRetry(runPortFinder, { retries: defaultPortRetry });
 }

package/lib/utils/getCertificate.js

@@ -1,14 +1,18 @@
 'use strict';
 
 const path = require('path');
-const fs = require('fs');
+const os = require('os');
+const fs = require('graceful-fs');
 const del = require('del');
+const findCacheDir = require('find-cache-dir');
 const createCertificate = require('./createCertificate');
 
 function getCertificate(logger) {
   // Use a self-signed certificate if no certificate was configured.
   // Cycle certs every 24 hours
-  const certificatePath = path.join(__dirname, '../../ssl/server.pem');
+  const certificateDir =
+    findCacheDir({ name: 'webpack-dev-server' }) || os.tmpdir();
+  const certificatePath = path.join(certificateDir, 'server.pem');
 
   let certificateExists = fs.existsSync(certificatePath);
 
@@ -34,6 +38,7 @@ function getCertificate(logger) {
     const attributes = [{ name: 'commonName', value: 'localhost' }];
     const pems = createCertificate(attributes);
 
+    fs.mkdirSync(certificateDir, { recursive: true });
     fs.writeFileSync(certificatePath, pems.private + pems.cert, {
       encoding: 'utf8',
     });

package/lib/utils/getColorsOption.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const getStatsOption = require('./getStatsOption');
+
+function getColorsOption(configArr) {
+  const statsOption = getStatsOption(configArr);
+  let colors = false;
+  if (typeof statsOption === 'object' && statsOption.colors) {
+    colors = statsOption.colors;
+  }
+
+  return colors;
+}
+
+module.exports = getColorsOption;

package/lib/utils/getCompilerConfigArray.js

@@ -0,0 +1,8 @@
+'use strict';
+
+function getCompilerConfigArray(compiler) {
+  const compilers = compiler.compilers ? compiler.compilers : [compiler];
+  return compilers.map((comp) => comp.options);
+}
+
+module.exports = getCompilerConfigArray;

package/lib/utils/getSocketClientPath.d.ts

@@ -0,0 +1,3 @@
+declare function getSocketClientPath(options: Object): string;
+
+export = getSocketClientPath;

package/lib/utils/getSocketClientPath.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

package/lib/utils/getSocketServerImplementation.js

@@ -30,7 +30,7 @@ function getSocketServerImplementation(options) {
 
   if (!serverImplFound) {
     throw new Error(
-      "transportMode.server must be a string denoting a default implementation (e.g. 'sockjs', 'ws'), a full path to " +
+      "transportMode.server must be a string denoting a default implementation (e.g. 'ws', 'sockjs'), a full path to " +
         'a JS file which exports a class extending BaseServer (webpack-dev-server/lib/servers/BaseServer) ' +
         'via require.resolve(...), or the class itself which extends BaseServer'
     );

package/lib/utils/getStatsOption.js

@@ -0,0 +1,16 @@
+'use strict';
+
+function getStatsOption(configArr) {
+  const isEmptyObject = (val) =>
+    typeof val === 'object' && Object.keys(val).length === 0;
+
+  // in webpack@4 stats will not be defined if not provided,
+  // but in webpack@5 it will be an empty object
+  const statsConfig = configArr.find(
+    (conf) =>
+      typeof conf === 'object' && conf.stats && !isEmptyObject(conf.stats)
+  );
+  return statsConfig ? statsConfig.stats : {};
+}
+
+module.exports = getStatsOption;

package/lib/utils/normalizeOptions.js

@@ -1,22 +1,83 @@
 'use strict';
 
-/* eslint-disable
-  no-undefined
-*/
+const path = require('path');
+const isAbsoluteUrl = require('is-absolute-url');
+const getCompilerConfigArray = require('./getCompilerConfigArray');
 
 function normalizeOptions(compiler, options) {
-  // Setup default value
-  options.contentBase =
-    options.contentBase !== undefined ? options.contentBase : process.cwd();
+  // TODO: improve this to not use .find for compiler watchOptions
+  const configArr = getCompilerConfigArray(compiler);
+  const watchOptionsConfig = configArr.find(
+    (config) => config.watch !== false && config.watchOptions
+  );
+  const watchOptions = watchOptionsConfig
+    ? watchOptionsConfig.watchOptions
+    : {};
 
-  // Setup default value
-  options.contentBasePublicPath = options.contentBasePublicPath || '/';
+  const defaultOptionsForStatic = {
+    directory: path.join(process.cwd(), 'public'),
+    staticOptions: {},
+    publicPath: ['/'],
+    serveIndex: { icons: true },
+    // Respect options from compiler watchOptions
+    watch: watchOptions,
+  };
+
+  if (typeof options.static === 'undefined') {
+    options.static = [defaultOptionsForStatic];
+  } else if (typeof options.static === 'boolean') {
+    options.static = options.static ? [defaultOptionsForStatic] : false;
+  } else if (typeof options.static === 'string') {
+    options.static = [
+      { ...defaultOptionsForStatic, directory: options.static },
+    ];
+  } else if (Array.isArray(options.static)) {
+    options.static = options.static.map((item) => {
+      if (typeof item === 'string') {
+        return { ...defaultOptionsForStatic, directory: item };
+      }
+
+      return { ...defaultOptionsForStatic, ...item };
+    });
+  } else {
+    options.static = [{ ...defaultOptionsForStatic, ...options.static }];
+  }
+
+  if (options.static) {
+    options.static.forEach((staticOption) => {
+      if (isAbsoluteUrl(staticOption.directory)) {
+        throw new Error('Using a URL as static.directory is not supported');
+      }
+
+      // ensure that publicPath is an array
+      if (typeof staticOption.publicPath === 'string') {
+        staticOption.publicPath = [staticOption.publicPath];
+      }
+
+      // ensure that watch is an object if true
+      if (staticOption.watch === true) {
+        staticOption.watch = defaultOptionsForStatic.watch;
+      }
+
+      // ensure that serveIndex is an object if true
+      if (staticOption.serveIndex === true) {
+        staticOption.serveIndex = defaultOptionsForStatic.serveIndex;
+      }
+    });
+  }
+
+  options.hot =
+    typeof options.hot === 'boolean' || options.hot === 'only'
+      ? options.hot
+      : true;
+  options.liveReload =
+    typeof options.liveReload !== 'undefined' ? options.liveReload : true;
 
   // normalize transportMode option
-  if (options.transportMode === undefined) {
+  if (typeof options.transportMode === 'undefined') {
     options.transportMode = {
-      server: 'sockjs',
-      client: 'sockjs',
+      server: 'ws',
+      client: 'ws',
     };
   } else {
     switch (typeof options.transportMode) {
@@ -28,13 +89,33 @@ function normalizeOptions(compiler, options) {
         break;
       // if not a string, it is an object
       default:
-        options.transportMode.server = options.transportMode.server || 'sockjs';
-        options.transportMode.client = options.transportMode.client || 'sockjs';
+        options.transportMode.server = options.transportMode.server || 'ws';
+        options.transportMode.client = options.transportMode.client || 'ws';
     }
   }
 
-  if (!options.watchOptions) {
-    options.watchOptions = {};
+  if (!options.client) {
+    options.client = {};
+  }
+
+  // Enable client overlay by default
+  if (typeof options.client.overlay === 'undefined') {
+    options.client.overlay = true;
+  }
+
+  options.client.path = `/${
+    options.client.path ? options.client.path.replace(/^\/|\/$/g, '') : 'ws'
+  }`;
+
+  options.devMiddleware = options.devMiddleware || {};
+
+  if (typeof options.firewall === 'undefined') {
+    // firewall is enabled by default
+    options.firewall = true;
+  }
+
+  if (typeof options.setupExitSignals === 'undefined') {
+    options.setupExitSignals = true;
   }
 }