fix: overlay with warnings (#3215)

client-src/index.js

@@ -21,9 +21,8 @@ const defaultOptions = {
   hotReload: true,
   liveReload: false,
   initial: true,
-  useWarningOverlay: false,
-  useErrorOverlay: false,
-  useProgress: false,
+  progress: false,
+  overlay: false,
 };
 const parsedResourceQuery = parseURL(__resourceQuery);
 const options = defaultOptions;
@@ -84,8 +83,8 @@ const onSocketMessage = {
   invalid() {
     log.info('App updated. Recompiling...');
 
-    // fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
-    if (options.useWarningOverlay || options.useErrorOverlay) {
+    // Fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
+    if (options.overlay) {
       overlay.clear();
     }
 
@@ -94,43 +93,37 @@ const onSocketMessage = {
   hash(hash) {
     status.currentHash = hash;
   },
-  'still-ok': function stillOk() {
-    log.info('Nothing changed.');
-
-    if (options.useWarningOverlay || options.useErrorOverlay) {
-      overlay.clear();
-    }
-
-    sendMessage('StillOk');
-  },
   logging: setAllLogLevel,
   overlay(value) {
-    if (typeof document !== 'undefined') {
-      if (typeof value === 'boolean') {
-        options.useWarningOverlay = false;
-        options.useErrorOverlay = value;
-      } else if (value) {
-        options.useWarningOverlay = value.warnings;
-        options.useErrorOverlay = value.errors;
-      }
+    if (typeof document === 'undefined') {
+      return;
     }
+
+    options.overlay = value;
   },
   progress(progress) {
-    if (typeof document !== 'undefined') {
-      options.useProgress = progress;
-    }
+    options.progress = progress;
   },
   'progress-update': function progressUpdate(data) {
-    if (options.useProgress) {
+    if (options.progress) {
       log.info(`${data.percent}% - ${data.msg}.`);
     }
 
     sendMessage('Progress', data);
   },
+  'still-ok': function stillOk() {
+    log.info('Nothing changed.');
+
+    if (options.overlay) {
+      overlay.clear();
+    }
+
+    sendMessage('StillOk');
+  },
   ok() {
     sendMessage('Ok');
 
-    if (options.useWarningOverlay || options.useErrorOverlay) {
+    if (options.overlay) {
       overlay.clear();
     }
 
@@ -158,7 +151,12 @@ const onSocketMessage = {
       log.warn(strippedWarnings[i]);
     }
 
-    if (options.useWarningOverlay) {
+    const needShowOverlay =
+      typeof options.overlay === 'boolean'
+        ? options.overlay
+        : options.overlay && options.overlay.warnings;
+
+    if (needShowOverlay) {
       overlay.showMessage(warnings);
     }
 
@@ -181,7 +179,12 @@ const onSocketMessage = {
       log.error(strippedErrors[i]);
     }
 
-    if (options.useErrorOverlay) {
+    const needShowOverlay =
+      typeof options.overlay === 'boolean'
+        ? options.overlay
+        : options.overlay && options.overlay.errors;
+
+    if (needShowOverlay) {
       overlay.showMessage(errors);
     }
 

client-src/overlay.js

@@ -27,6 +27,7 @@ ansiHTML.setColors(colors);
 
 function createOverlayIframe(onIframeLoad) {
   const iframe = document.createElement('iframe');
+
   iframe.id = 'webpack-dev-server-client-overlay';
   iframe.src = 'about:blank';
   iframe.style.position = 'fixed';
@@ -39,11 +40,13 @@ function createOverlayIframe(onIframeLoad) {
   iframe.style.border = 'none';
   iframe.style.zIndex = 9999999999;
   iframe.onload = onIframeLoad;
+
   return iframe;
 }
 
 function addOverlayDivTo(iframe) {
   const div = iframe.contentDocument.createElement('div');
+
   div.id = 'webpack-dev-server-client-overlay-div';
   div.style.position = 'fixed';
   div.style.boxSizing = 'border-box';
@@ -61,7 +64,9 @@ function addOverlayDivTo(iframe) {
   div.style.lineHeight = '1.2';
   div.style.whiteSpace = 'pre-wrap';
   div.style.overflow = 'auto';
+
   iframe.contentDocument.body.appendChild(div);
+
   return div;
 }
 
@@ -103,6 +108,7 @@ function clear() {
 
   // Clean up and reset internal state.
   document.body.removeChild(overlayIframe);
+
   overlayDiv = null;
   overlayIframe = null;
   lastOnOverlayDivReady = null;

client-src/socket.js

@@ -5,8 +5,7 @@
   camelcase
 */
 
-// this WebsocketClient is here as a default fallback,
-//  in case the client is not injected
+// this WebsocketClient is here as a default fallback, in case the client is not injected
 const Client =
   typeof __webpack_dev_server_client__ !== 'undefined'
     ? __webpack_dev_server_client__
@@ -47,9 +46,10 @@ const socket = function initSocket(url, handlers) {
   });
 
   client.onMessage((data) => {
-    const msg = JSON.parse(data);
-    if (handlers[msg.type]) {
-      handlers[msg.type](msg.data);
+    const message = JSON.parse(data);
+
+    if (handlers[message.type]) {
+      handlers[message.type](message.data);
     }
   });
 };

client-src/utils/sendMessage.js

@@ -9,13 +9,7 @@ function sendMsg(type, data) {
     (typeof WorkerGlobalScope === 'undefined' ||
       !(self instanceof WorkerGlobalScope))
   ) {
-    self.postMessage(
-      {
-        type: `webpack${type}`,
-        data,
-      },
-      '*'
-    );
+    self.postMessage({ type: `webpack${type}`, data }, '*');
   }
 }
 

lib/Server.js

@@ -985,17 +985,20 @@ class Server {
     }
   }
 
-  // send stats to a socket or multiple sockets
+  // Send stats to a socket or multiple sockets
   sendStats(sockets, stats, force) {
     const shouldEmit =
       !force &&
       stats &&
       (!stats.errors || stats.errors.length === 0) &&
+      (!stats.warnings || stats.warnings.length === 0) &&
       stats.assets &&
       stats.assets.every((asset) => !asset.emitted);
 
     if (shouldEmit) {
-      return this.sockWrite(sockets, 'still-ok');
+      this.sockWrite(sockets, 'still-ok');
+
+      return;
     }
 
     this.sockWrite(sockets, 'hash', stats.hash);

test/client/__snapshots__/index.test.js.snap.webpack4

@@ -49,9 +49,8 @@ Object {
   "initial": false,
   "liveReload": false,
   "logging": "info",
-  "useErrorOverlay": false,
-  "useProgress": false,
-  "useWarningOverlay": false,
+  "overlay": false,
+  "progress": false,
 }
 `;
 

test/client/__snapshots__/index.test.js.snap.webpack5

@@ -49,9 +49,8 @@ Object {
   "initial": false,
   "liveReload": false,
   "logging": "info",
-  "useErrorOverlay": false,
-  "useProgress": false,
-  "useWarningOverlay": false,
+  "overlay": false,
+  "progress": false,
 }
 `;