webpack-dev-server 4.2.0 → 4.4.0

package/client/index.js

@@ -3,7 +3,7 @@ import webpackHotLog from "webpack/hot/log.js";
 import stripAnsi from "./modules/strip-ansi/index.js";
 import parseURL from "./utils/parseURL.js";
 import socket from "./socket.js";
-import { show, hide } from "./overlay.js";
+import { formatProblem, show, hide } from "./overlay.js";
 import { log, setLogLevel } from "./utils/log.js";
 import sendMessage from "./utils/sendMessage.js";
 import reloadApp from "./utils/reloadApp.js";
@@ -13,8 +13,7 @@ var status = {
   // TODO Workaround for webpack v4, `__webpack_hash__` is not replaced without HotModuleReplacement
   // eslint-disable-next-line camelcase
   currentHash: typeof __webpack_hash__ !== "undefined" ? __webpack_hash__ : ""
-}; // console.log(__webpack_hash__);
-
+};
 var options = {
   hot: false,
   liveReload: false,
@@ -37,6 +36,10 @@ if (parsedResourceQuery.logging) {
   options.logging = parsedResourceQuery.logging;
 }
 
+if (typeof parsedResourceQuery.reconnect !== "undefined") {
+  options.reconnect = Number(parsedResourceQuery.reconnect);
+}
+
 function setAllLogLevel(level) {
   // This is needed because the HMR logger operate separately from dev server logger
   webpackHotLog.setLogLevel(level === "verbose" || level === "log" ? "info" : level);
@@ -77,6 +80,7 @@ var onSocketMessage = {
     sendMessage("Invalid");
   },
   hash: function hash(_hash) {
+    status.previousHash = status.currentHash;
     status.currentHash = _hash;
   },
   logging: setAllLogLevel,
@@ -87,6 +91,13 @@ var onSocketMessage = {
 
     options.overlay = value;
   },
+  reconnect: function reconnect(value) {
+    if (parsedResourceQuery.reconnect === "false") {
+      return;
+    }
+
+    options.reconnect = value;
+  },
   progress: function progress(_progress) {
     options.progress = _progress;
   },
@@ -127,20 +138,24 @@ var onSocketMessage = {
   warnings: function warnings(_warnings) {
     log.warn("Warnings while compiling.");
 
-    var strippedWarnings = _warnings.map(function (warning) {
-      return stripAnsi(warning.message ? warning.message : warning);
+    var printableWarnings = _warnings.map(function (error) {
+      var _formatProblem = formatProblem("warning", error),
+          header = _formatProblem.header,
+          body = _formatProblem.body;
+
+      return "".concat(header, "\n").concat(stripAnsi(body));
     });
 
-    sendMessage("Warnings", strippedWarnings);
+    sendMessage("Warnings", printableWarnings);
 
-    for (var i = 0; i < strippedWarnings.length; i++) {
-      log.warn(strippedWarnings[i]);
+    for (var i = 0; i < printableWarnings.length; i++) {
+      log.warn(printableWarnings[i]);
     }
 
     var needShowOverlayForWarnings = typeof options.overlay === "boolean" ? options.overlay : options.overlay && options.overlay.warnings;
 
     if (needShowOverlayForWarnings) {
-      show(_warnings, "warnings");
+      show("warning", _warnings);
     }
 
     reloadApp(options, status);
@@ -148,20 +163,24 @@ var onSocketMessage = {
   errors: function errors(_errors) {
     log.error("Errors while compiling. Reload prevented.");
 
-    var strippedErrors = _errors.map(function (error) {
-      return stripAnsi(error.message ? error.message : error);
+    var printableErrors = _errors.map(function (error) {
+      var _formatProblem2 = formatProblem("error", error),
+          header = _formatProblem2.header,
+          body = _formatProblem2.body;
+
+      return "".concat(header, "\n").concat(stripAnsi(body));
     });
 
-    sendMessage("Errors", strippedErrors);
+    sendMessage("Errors", printableErrors);
 
-    for (var i = 0; i < strippedErrors.length; i++) {
-      log.error(strippedErrors[i]);
+    for (var i = 0; i < printableErrors.length; i++) {
+      log.error(printableErrors[i]);
     }
 
     var needShowOverlayForErrors = typeof options.overlay === "boolean" ? options.overlay : options.overlay && options.overlay.errors;
 
     if (needShowOverlayForErrors) {
-      show(_errors, "errors");
+      show("error", _errors);
     }
   },
   error: function error(_error) {
@@ -178,4 +197,4 @@ var onSocketMessage = {
   }
 };
 var socketURL = createSocketURL(parsedResourceQuery);
-socket(socketURL, onSocketMessage);
+socket(socketURL, onSocketMessage, options.reconnect);

package/client/modules/logger/index.js

@@ -91,33 +91,61 @@ function _createClass(Constructor, protoProps, staticProps) {
 }
 
 var LogType = Object.freeze({
-  error: "error",
+  error:
+  /** @type {"error"} */
+  "error",
   // message, c style arguments
-  warn: "warn",
+  warn:
+  /** @type {"warn"} */
+  "warn",
   // message, c style arguments
-  info: "info",
+  info:
+  /** @type {"info"} */
+  "info",
   // message, c style arguments
-  log: "log",
+  log:
+  /** @type {"log"} */
+  "log",
   // message, c style arguments
-  debug: "debug",
+  debug:
+  /** @type {"debug"} */
+  "debug",
   // message, c style arguments
-  trace: "trace",
+  trace:
+  /** @type {"trace"} */
+  "trace",
   // no arguments
-  group: "group",
+  group:
+  /** @type {"group"} */
+  "group",
   // [label]
-  groupCollapsed: "groupCollapsed",
+  groupCollapsed:
+  /** @type {"groupCollapsed"} */
+  "groupCollapsed",
   // [label]
-  groupEnd: "groupEnd",
+  groupEnd:
+  /** @type {"groupEnd"} */
+  "groupEnd",
   // [label]
-  profile: "profile",
+  profile:
+  /** @type {"profile"} */
+  "profile",
   // [profileName]
-  profileEnd: "profileEnd",
+  profileEnd:
+  /** @type {"profileEnd"} */
+  "profileEnd",
   // [profileName]
-  time: "time",
+  time:
+  /** @type {"time"} */
+  "time",
   // name, time as [seconds, nanoseconds]
-  clear: "clear",
+  clear:
+  /** @type {"clear"} */
+  "clear",
   // no arguments
-  status: "status" // message, arguments
+  status:
+  /** @type {"status"} */
+  "status" // message, arguments
 
 });
 exports.LogType = LogType;
@@ -314,6 +342,7 @@ var WebpackLogger = /*#__PURE__*/function () {
       if (this[TIMERS_AGGREGATES_SYMBOL] === undefined) return;
       var time = this[TIMERS_AGGREGATES_SYMBOL].get(label);
       if (time === undefined) return;
+      this[TIMERS_AGGREGATES_SYMBOL].delete(label);
       this[LOG_SYMBOL](LogType.time, [label].concat(_toConsumableArray(time)));
     }
   }]);

package/client/modules/sockjs-client/index.js

@@ -2958,7 +2958,8 @@ if ('ab'.split(/(?:ab)*/).length !== 2 || '.'.split(/(.?)(.?)/).length !== 4 ||
       }
 
       var output = [],
-          flags = (separator.ignoreCase ? 'i' : '') + (separator.multiline ? 'm' : '') + (separator.extended ? 'x' : '') + (separator.sticky ? 'y' : ''),
+          flags = (separator.ignoreCase ? 'i' : '') + (separator.multiline ? 'm' : '') + (separator.extended ? 'x' : '') + ( // Proposed for ES6
+      separator.sticky ? 'y' : ''),
           // Firefox 3+
       lastLastIndex = 0,
           // Make `global` and avoid `lastIndex` issues by working with a copy

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

@@ -39,7 +39,7 @@ function ansiRegex() {
       _ref$onlyFirst = _ref.onlyFirst,
       onlyFirst = _ref$onlyFirst === void 0 ? false : _ref$onlyFirst;
 
-  var pattern = ["[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)", '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-ntqry=><~]))'].join('|');
+  var pattern = ["[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)", '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-ntqry=><~]))'].join('|');
   return new RegExp(pattern, onlyFirst ? undefined : 'g');
 }
 

package/client/overlay.js

@@ -108,19 +108,44 @@ function hide() {
   document.body.removeChild(iframeContainerElement);
   iframeContainerElement = null;
   containerElement = null;
+}
+
+function formatProblem(type, item) {
+  var header = type === "warning" ? "WARNING" : "ERROR";
+  var body = "";
+
+  if (typeof item === "string") {
+    body += item;
+  } else {
+    var file = item.file || ""; // eslint-disable-next-line no-nested-ternary
+
+    var moduleName = item.moduleName ? item.moduleName.indexOf("!") !== -1 ? "".concat(item.moduleName.replace(/^(\s|\S)*!/, ""), " (").concat(item.moduleName, ")") : "".concat(item.moduleName) : "";
+    var loc = item.loc;
+    header += "".concat(moduleName || file ? " in ".concat(moduleName ? "".concat(moduleName).concat(file ? " (".concat(file, ")") : "") : file).concat(loc ? " ".concat(loc) : "") : "");
+    body += item.message || "";
+  }
+
+  return {
+    header: header,
+    body: body
+  };
 } // Compilation with errors (e.g. syntax error or missing modules).
 
 
-function show(messages, type) {
+function show(type, messages) {
   ensureOverlayExists(function () {
     messages.forEach(function (message) {
       var entryElement = document.createElement("div");
       var typeElement = document.createElement("span");
-      typeElement.innerText = type === "warnings" ? "Warning:" : "Error:";
+
+      var _formatProblem = formatProblem(type, message),
+          header = _formatProblem.header,
+          body = _formatProblem.body;
+
+      typeElement.innerText = header;
       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 text = ansiHTML(encode(body));
       var messageTextNode = document.createElement("div");
       messageTextNode.innerHTML = text;
       entryElement.appendChild(typeElement);
@@ -134,4 +159,4 @@ function show(messages, type) {
   });
 }
 
-export { show, hide };
+export { formatProblem, show, hide };

package/client/socket.js

@@ -1,5 +1,6 @@
 /* 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
+import WebSocketClient from "./clients/WebSocketClient.js";
+import { log } from "./utils/log.js"; // this WebsocketClient is here as a default fallback, in case the client is not injected
 
 /* eslint-disable camelcase */
 
@@ -9,12 +10,14 @@ typeof __webpack_dev_server_client__.default !== "undefined" ? __webpack_dev_ser
 /* eslint-enable camelcase */
 
 var retries = 0;
+var maxRetries = 10;
 var client = null;
 
-var socket = function initSocket(url, handlers) {
+var socket = function initSocket(url, handlers, reconnect) {
   client = new Client(url);
   client.onOpen(function () {
     retries = 0;
+    maxRetries = reconnect;
   });
   client.onClose(function () {
     if (retries === 0) {
@@ -24,12 +27,13 @@ var socket = function initSocket(url, handlers) {
 
     client = null; // After 10 retries stop trying, to prevent logspam.
 
-    if (retries <= 10) {
+    if (retries < maxRetries) {
       // Exponentially increase timeout to reconnect.
       // Respectfully copied from the package `got`.
       // eslint-disable-next-line no-mixed-operators, no-restricted-properties
       var retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
       retries += 1;
+      log.info("Trying to reconnect...");
       setTimeout(function () {
         socket(url, handlers);
       }, retryInMs);

package/client/utils/reloadApp.js

@@ -8,21 +8,13 @@ function reloadApp(_ref, status) {
 
   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;
+  var currentHash = status.currentHash,
+      previousHash = status.previousHash;
+  var isInitial = currentHash.indexOf(previousHash) >= 0;
 
   if (isInitial) {
-    var isLegacyInitial = webpackHash === "" && hot === false && liveReload === true;
-
-    if (isLegacyInitial) {
-      status.previousHash = status.currentHash;
-    }
-
     return;
   }