webpack-dev-server 4.0.0-rc.0 → 4.1.1

package/client/overlay.js

@@ -1,22 +1,18 @@
-'use strict'; // The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
+// 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).
-
-var ansiHTML = require('ansi-html');
-
-var _require = require('html-entities'),
-    encode = _require.encode;
-
+import ansiHTML from "ansi-html-community";
+import { encode } from "html-entities";
 var colors = {
-  reset: ['transparent', 'transparent'],
-  black: '181818',
-  red: 'E36049',
-  green: 'B3CB74',
-  yellow: 'FFD080',
-  blue: '7CAFC2',
-  magenta: '7FACCA',
-  cyan: 'C3C2EF',
-  lightgrey: 'EBE7E3',
-  darkgrey: '6D7891'
+  reset: ["transparent", "transparent"],
+  black: "181818",
+  red: "E36049",
+  green: "B3CB74",
+  yellow: "FFD080",
+  blue: "7CAFC2",
+  magenta: "7FACCA",
+  cyan: "C3C2EF",
+  lightgrey: "EBE7E3",
+  darkgrey: "6D7891"
 };
 var iframeContainerElement;
 var containerElement;
@@ -24,57 +20,57 @@ var onLoadQueue = [];
 ansiHTML.setColors(colors);
 
 function createContainer() {
-  iframeContainerElement = document.createElement('iframe');
-  iframeContainerElement.id = 'webpack-dev-server-client-overlay';
-  iframeContainerElement.src = 'about:blank';
-  iframeContainerElement.style.position = 'fixed';
+  iframeContainerElement = document.createElement("iframe");
+  iframeContainerElement.id = "webpack-dev-server-client-overlay";
+  iframeContainerElement.src = "about:blank";
+  iframeContainerElement.style.position = "fixed";
   iframeContainerElement.style.left = 0;
   iframeContainerElement.style.top = 0;
   iframeContainerElement.style.right = 0;
   iframeContainerElement.style.bottom = 0;
-  iframeContainerElement.style.width = '100vw';
-  iframeContainerElement.style.height = '100vh';
-  iframeContainerElement.style.border = 'none';
+  iframeContainerElement.style.width = "100vw";
+  iframeContainerElement.style.height = "100vh";
+  iframeContainerElement.style.border = "none";
   iframeContainerElement.style.zIndex = 9999999999;
 
   iframeContainerElement.onload = function () {
-    containerElement = iframeContainerElement.contentDocument.createElement('div');
-    containerElement.id = 'webpack-dev-server-client-overlay-div';
-    containerElement.style.position = 'fixed';
-    containerElement.style.boxSizing = 'border-box';
+    containerElement = iframeContainerElement.contentDocument.createElement("div");
+    containerElement.id = "webpack-dev-server-client-overlay-div";
+    containerElement.style.position = "fixed";
+    containerElement.style.boxSizing = "border-box";
     containerElement.style.left = 0;
     containerElement.style.top = 0;
     containerElement.style.right = 0;
     containerElement.style.bottom = 0;
-    containerElement.style.width = '100vw';
-    containerElement.style.height = '100vh';
-    containerElement.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
-    containerElement.style.color = '#E8E8E8';
-    containerElement.style.fontFamily = 'Menlo, Consolas, monospace';
-    containerElement.style.fontSize = 'large';
-    containerElement.style.padding = '2rem';
-    containerElement.style.lineHeight = '1.2';
-    containerElement.style.whiteSpace = 'pre-wrap';
-    containerElement.style.overflow = 'auto';
-    var headerElement = document.createElement('span');
-    headerElement.innerText = 'Compiled with problems:';
-    var closeButtonElement = document.createElement('button');
-    closeButtonElement.innerText = 'X';
-    closeButtonElement.style.background = 'transparent';
-    closeButtonElement.style.border = 'none';
-    closeButtonElement.style.fontSize = '20px';
-    closeButtonElement.style.fontWeight = 'bold';
-    closeButtonElement.style.color = 'white';
-    closeButtonElement.style.cursor = 'pointer';
-    closeButtonElement.style.cssFloat = 'right';
-    closeButtonElement.style.styleFloat = 'right';
-    closeButtonElement.addEventListener('click', function () {
+    containerElement.style.width = "100vw";
+    containerElement.style.height = "100vh";
+    containerElement.style.backgroundColor = "rgba(0, 0, 0, 0.85)";
+    containerElement.style.color = "#E8E8E8";
+    containerElement.style.fontFamily = "Menlo, Consolas, monospace";
+    containerElement.style.fontSize = "large";
+    containerElement.style.padding = "2rem";
+    containerElement.style.lineHeight = "1.2";
+    containerElement.style.whiteSpace = "pre-wrap";
+    containerElement.style.overflow = "auto";
+    var headerElement = document.createElement("span");
+    headerElement.innerText = "Compiled with problems:";
+    var closeButtonElement = document.createElement("button");
+    closeButtonElement.innerText = "X";
+    closeButtonElement.style.background = "transparent";
+    closeButtonElement.style.border = "none";
+    closeButtonElement.style.fontSize = "20px";
+    closeButtonElement.style.fontWeight = "bold";
+    closeButtonElement.style.color = "white";
+    closeButtonElement.style.cursor = "pointer";
+    closeButtonElement.style.cssFloat = "right";
+    closeButtonElement.style.styleFloat = "right";
+    closeButtonElement.addEventListener("click", function () {
       hide();
     });
     containerElement.appendChild(headerElement);
     containerElement.appendChild(closeButtonElement);
-    containerElement.appendChild(document.createElement('br'));
-    containerElement.appendChild(document.createElement('br'));
+    containerElement.appendChild(document.createElement("br"));
+    containerElement.appendChild(document.createElement("br"));
     iframeContainerElement.contentDocument.body.appendChild(containerElement);
     onLoadQueue.forEach(function (onLoad) {
       onLoad(containerElement);
@@ -118,27 +114,24 @@ function hide() {
 function show(messages, type) {
   ensureOverlayExists(function () {
     messages.forEach(function (message) {
-      var entryElement = document.createElement('div');
-      var typeElement = document.createElement('span');
-      typeElement.innerText = type === 'warnings' ? 'Warning:' : 'Error:';
+      var entryElement = document.createElement("div");
+      var typeElement = document.createElement("span");
+      typeElement.innerText = type === "warnings" ? "Warning:" : "Error:";
       typeElement.style.color = "#".concat(colors.red); // Make it look similar to our terminal.
 
       var errorMessage = message.message || messages[0];
       var text = ansiHTML(encode(errorMessage));
-      var messageTextNode = document.createTextNode(text);
+      var messageTextNode = document.createElement("div");
+      messageTextNode.innerHTML = text;
       entryElement.appendChild(typeElement);
-      entryElement.appendChild(document.createElement('br'));
-      entryElement.appendChild(document.createElement('br'));
+      entryElement.appendChild(document.createElement("br"));
+      entryElement.appendChild(document.createElement("br"));
       entryElement.appendChild(messageTextNode);
-      entryElement.appendChild(document.createElement('br'));
-      entryElement.appendChild(document.createElement('br'));
-      entryElement.appendChild(document.createElement('br'));
+      entryElement.appendChild(document.createElement("br"));
+      entryElement.appendChild(document.createElement("br"));
       containerElement.appendChild(entryElement);
     });
   });
 }
 
-module.exports = {
-  show: show,
-  hide: hide
-};
+export { show, hide };

package/client/socket.js

@@ -1,13 +1,13 @@
-'use strict';
 /* global __webpack_dev_server_client__ */
+import WebSocketClient from "./clients/WebSocketClient.js"; // this WebsocketClient is here as a default fallback, in case the client is not injected
 
-/* eslint-disable
-  camelcase
-*/
-// this WebsocketClient is here as a default fallback, in case the client is not injected
+/* eslint-disable camelcase */
+
+var Client = // eslint-disable-next-line camelcase, no-nested-ternary
+typeof __webpack_dev_server_client__ !== "undefined" ? // 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 */
 
-var Client = typeof __webpack_dev_server_client__ !== 'undefined' ? __webpack_dev_server_client__ : // eslint-disable-next-line import/no-unresolved
-require('./clients/WebsocketClient');
 var retries = 0;
 var client = null;
 
@@ -44,4 +44,4 @@ var socket = function initSocket(url, handlers) {
   });
 };
 
-module.exports = socket;
+export default socket;

package/client/utils/createSocketURL.js

@@ -1,29 +1,26 @@
-'use strict';
-
-var url = require('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
+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
 
-
 function createSocketURL(parsedURL) {
   var hostname = parsedURL.hostname; // Node.js module parses it as `::`
   // `new URL(urlString, [baseURLstring])` parses it as '[::]'
 
-  var isInAddrAny = hostname === '0.0.0.0' || hostname === '::' || hostname === '[::]'; // why do we need this check?
+  var isInAddrAny = hostname === "0.0.0.0" || hostname === "::" || hostname === "[::]"; // why do we need this check?
   // hostname n/a for file protocol (example, when using electron, ionic)
   // see: https://github.com/webpack/webpack-dev-server/pull/384
 
-  if (isInAddrAny && self.location.hostname && self.location.protocol.indexOf('http') === 0) {
+  if (isInAddrAny && self.location.hostname && self.location.protocol.indexOf("http") === 0) {
     hostname = self.location.hostname;
   }
 
-  var socketURLProtocol = parsedURL.protocol || 'ws:'; // When https is used in the app, secure web sockets are always necessary because the browser doesn't accept non-secure web sockets.
+  var socketURLProtocol = parsedURL.protocol || self.location.protocol; // When https is used in the app, secure web sockets are always necessary because the browser doesn't accept non-secure web sockets.
 
-  if (socketURLProtocol === 'auto:' || hostname && isInAddrAny && self.location.protocol === 'https:') {
+  if (socketURLProtocol === "auto:" || hostname && isInAddrAny && self.location.protocol === "https:") {
     socketURLProtocol = self.location.protocol;
   }
 
-  socketURLProtocol = socketURLProtocol.replace(/^(?:http|.+-extension|file)/i, 'ws');
-  var socketURLAuth = ''; // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
+  socketURLProtocol = socketURLProtocol.replace(/^(?:http|.+-extension|file)/i, "ws");
+  var socketURLAuth = ""; // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
   // Parse authentication credentials in case we need them
 
   if (parsedURL.username) {
@@ -32,7 +29,7 @@ function createSocketURL(parsedURL) {
 
     if (parsedURL.password) {
       // Result: <username>:<password>
-      socketURLAuth = socketURLAuth.concat(':', parsedURL.password);
+      socketURLAuth = socketURLAuth.concat(":", parsedURL.password);
     }
   } // In case the host is a raw IPv6 address, it can be enclosed in
   // the brackets as the brackets are needed in the final URL string.
@@ -44,17 +41,17 @@ function createSocketURL(parsedURL) {
   // so we need to fall back to the default if they are not provided
 
 
-  var socketURLHostname = (hostname || self.location.hostname || 'localhost').replace(/^\[(.*)\]$/, '$1');
+  var socketURLHostname = (hostname || self.location.hostname || "localhost").replace(/^\[(.*)\]$/, "$1");
   var socketURLPort = parsedURL.port;
 
-  if (!socketURLPort || socketURLPort === '0') {
+  if (!socketURLPort || socketURLPort === "0") {
     socketURLPort = self.location.port;
   } // If path is provided it'll be passed in via the resourceQuery as a
   // query param so it has to be parsed out of the querystring in order for the
   // client to open the socket to the correct location.
 
 
-  var socketURLPathname = '/ws';
+  var socketURLPathname = "/ws";
 
   if (parsedURL.pathname && !parsedURL.fromCurrentScript) {
     socketURLPathname = parsedURL.pathname;
@@ -70,4 +67,4 @@ function createSocketURL(parsedURL) {
   });
 }
 
-module.exports = createSocketURL;
+export default createSocketURL;

package/client/utils/getCurrentScriptSource.js

@@ -1,25 +1,23 @@
-'use strict';
-
 function getCurrentScriptSource() {
   // `document.currentScript` is the most accurate way to find the current script,
   // but is not supported in all browsers.
   if (document.currentScript) {
-    return document.currentScript.getAttribute('src');
+    return document.currentScript.getAttribute("src");
   } // Fallback to getting all scripts running in the document.
 
 
   var scriptElements = document.scripts || [];
   var scriptElementsWithSrc = Array.prototype.filter.call(scriptElements, function (element) {
-    return element.getAttribute('src');
+    return element.getAttribute("src");
   });
 
   if (scriptElementsWithSrc.length > 0) {
     var currentScript = scriptElementsWithSrc[scriptElementsWithSrc.length - 1];
-    return currentScript.getAttribute('src');
+    return currentScript.getAttribute("src");
   } // Fail as there was no script to use.
 
 
-  throw new Error('[webpack-dev-server] Failed to get current script source.');
+  throw new Error("[webpack-dev-server] Failed to get current script source.");
 }
 
-module.exports = getCurrentScriptSource;
+export default getCurrentScriptSource;

package/client/utils/log.js

@@ -1,11 +1,8 @@
-'use strict';
-
-var logger = require('../modules/logger');
-
-var name = 'webpack-dev-server'; // default level is set on the client side, so it does not need
+import logger from "../modules/logger/index.js";
+var 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
 
-var defaultLevel = 'info';
+var defaultLevel = "info";
 
 function setLogLevel(level) {
   logger.configureDefaultLogger({
@@ -14,7 +11,5 @@ function setLogLevel(level) {
 }
 
 setLogLevel(defaultLevel);
-module.exports = {
-  log: logger.getLogger(name),
-  setLogLevel: setLogLevel
-};
+var log = logger.getLogger(name);
+export { log, setLogLevel };

package/client/utils/parseURL.js

@@ -1,17 +1,14 @@
-'use strict';
-
-var url = require('url');
-
-var getCurrentScriptSource = require('./getCurrentScriptSource');
+import url from "url";
+import getCurrentScriptSource from "./getCurrentScriptSource.js";
 
 function parseURL(resourceQuery) {
   var options = {};
 
-  if (typeof resourceQuery === 'string' && resourceQuery !== '') {
-    var searchParams = resourceQuery.substr(1).split('&');
+  if (typeof resourceQuery === "string" && resourceQuery !== "") {
+    var searchParams = resourceQuery.substr(1).split("&");
 
     for (var i = 0; i < searchParams.length; i++) {
-      var pair = searchParams[i].split('=');
+      var pair = searchParams[i].split("=");
       options[pair[0]] = decodeURIComponent(pair[1]);
     }
   } else {
@@ -43,4 +40,4 @@ function parseURL(resourceQuery) {
   return options;
 }
 
-module.exports = parseURL;
+export default parseURL;

package/client/utils/reloadApp.js

@@ -1,57 +1,67 @@
-'use strict';
+/* global __webpack_hash__ */
+import hotEmitter from "webpack/hot/emitter.js";
+import { log } from "./log.js";
 
-var _require = require('./log'),
-    log = _require.log;
-
-function reloadApp(_ref, _ref2) {
+function reloadApp(_ref, status) {
   var hot = _ref.hot,
       liveReload = _ref.liveReload;
-  var isUnloading = _ref2.isUnloading,
-      currentHash = _ref2.currentHash;
 
-  if (isUnloading) {
+  if (status.isUnloading) {
+    return;
+  } // TODO Workaround for webpack v4, `__webpack_hash__` is not replaced without HotModuleReplacement plugin
+
+
+  var webpackHash = // eslint-disable-next-line camelcase
+  typeof __webpack_hash__ !== "undefined" ? // eslint-disable-next-line camelcase
+  __webpack_hash__ : status.previousHash || "";
+  var isInitial = status.currentHash.indexOf(webpackHash) === 0;
+
+  if (isInitial) {
+    var isLegacyInitial = webpackHash === "" && hot === false && liveReload === true;
+
+    if (isLegacyInitial) {
+      status.previousHash = status.currentHash;
+    }
+
     return;
   }
 
   function applyReload(rootWindow, intervalId) {
     clearInterval(intervalId);
-    log.info('App updated. Reloading...');
+    log.info("App updated. Reloading...");
     rootWindow.location.reload();
   }
 
   var search = self.location.search.toLowerCase();
-  var allowToHot = search.indexOf('webpack-dev-server-hot=false') === -1;
-  var allowToLiveReload = search.indexOf('webpack-dev-server-live-reload=false') === -1;
+  var allowToHot = search.indexOf("webpack-dev-server-hot=false") === -1;
+  var allowToLiveReload = search.indexOf("webpack-dev-server-live-reload=false") === -1;
 
   if (hot && allowToHot) {
-    log.info('App hot update...');
-
-    var hotEmitter = require('webpack/hot/emitter');
+    log.info("App hot update...");
+    hotEmitter.emit("webpackHotUpdate", status.currentHash);
 
-    hotEmitter.emit('webpackHotUpdate', currentHash);
-
-    if (typeof self !== 'undefined' && self.window) {
+    if (typeof self !== "undefined" && self.window) {
       // broadcast update to window
-      self.postMessage("webpackHotUpdate".concat(currentHash), '*');
+      self.postMessage("webpackHotUpdate".concat(status.currentHash), "*");
     }
   } // allow refreshing the page only if liveReload isn't disabled
   else if (liveReload && allowToLiveReload) {
-      var rootWindow = self; // use parent window for reload (in case we're in an iframe with no valid src)
+    var rootWindow = self; // use parent window for reload (in case we're in an iframe with no valid src)
 
-      var intervalId = self.setInterval(function () {
-        if (rootWindow.location.protocol !== 'about:') {
-          // reload immediately if protocol is valid
-          applyReload(rootWindow, intervalId);
-        } else {
-          rootWindow = rootWindow.parent;
+    var intervalId = self.setInterval(function () {
+      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);
-          }
+        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);
         }
-      });
-    }
+      }
+    });
+  }
 }
 
-module.exports = reloadApp;
+export default reloadApp;

package/client/utils/sendMessage.js

@@ -1,14 +1,12 @@
-'use strict';
 /* global __resourceQuery WorkerGlobalScope */
 // Send messages to the outside, so plugins can consume it.
-
 function sendMsg(type, data) {
-  if (typeof self !== 'undefined' && (typeof WorkerGlobalScope === 'undefined' || !(self instanceof WorkerGlobalScope))) {
+  if (typeof self !== "undefined" && (typeof WorkerGlobalScope === "undefined" || !(self instanceof WorkerGlobalScope))) {
     self.postMessage({
       type: "webpack".concat(type),
       data: data
-    }, '*');
+    }, "*");
   }
 }
 
-module.exports = sendMsg;
+export default sendMsg;