feat - Allow overlay to be enabled for warnings (#789) (#790)

bebraw · SpaceK33z · commit 499170409e8a · 2017-02-18T12:39:24.000+01:00
Now you can use { overlay: { errors: true, warnings: true } } Closes #789.
diff --git a/client/index.js b/client/index.js
@@ -33,7 +33,8 @@ var hot = false;
 var initial = true;
 var currentHash = "";
 var logLevel = "info";
-var useOverlay = false;
+var useWarningOverlay = false;
+var useErrorOverlay = false;
 
 function log(level, msg) {
 	if(logLevel === "info" && level === "info")
@@ -75,12 +76,18 @@ var onSocketMsg = {
 	},
 	"overlay": function(overlay) {
 		if(typeof document !== "undefined") {
-			useOverlay = overlay;
+			if(typeof(overlay) === "boolean") {
+				useWarningOverlay = overlay;
+				useErrorOverlay = overlay;
+			} else if(overlay) {
+				useWarningOverlay = overlay.warnings;
+				useErrorOverlay = overlay.errors;
+			}
 		}
 	},
 	ok: function() {
 		sendMsg("Ok");
-		if(useOverlay) overlay.clear();
+		if(useWarningOverlay || useErrorOverlay) overlay.clear();
 		if(initial) return initial = false;
 		reloadApp();
 	},
@@ -96,6 +103,8 @@ var onSocketMsg = {
 		sendMsg("Warnings", strippedWarnings);
 		for(var i = 0; i < strippedWarnings.length; i++)
 			console.warn(strippedWarnings[i]);
+		if(useWarningOverlay) overlay.showMessage(warnings);
+
 		if(initial) return initial = false;
 		reloadApp();
 	},
@@ -107,7 +116,7 @@ var onSocketMsg = {
 		sendMsg("Errors", strippedErrors);
 		for(var i = 0; i < strippedErrors.length; i++)
 			console.error(strippedErrors[i]);
-		if(useOverlay) overlay.showErrors(errors);
+		if(useErrorOverlay) overlay.showMessage(errors);
 	},
 	close: function() {
 		log("error", "[WDS] Disconnected!");
diff --git a/client/overlay.js b/client/overlay.js
@@ -91,7 +91,7 @@ function ensureOverlayDivExists(onOverlayDivReady) {
 	document.body.appendChild(overlayIframe);
 }
 
-function showErrorOverlay(message) {
+function showMessageOverlay(message) {
 	ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
 		// Make it look similar to our terminal.
 		overlayDiv.innerHTML =
@@ -121,6 +121,6 @@ exports.clear = function handleSuccess() {
 }
 
 // Compilation with errors (e.g. syntax error or missing modules).
-exports.showErrors = function handleErrors(errors) {
-	showErrorOverlay(errors[0]);
+exports.showMessage = function handleMessage(messages) {
+	showMessageOverlay(messages[0]);
 }
diff --git a/examples/overlay-warnings/README.md b/examples/overlay-warnings/README.md
@@ -0,0 +1,11 @@
+# Overlay
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+## What should happen
+
+The script should open the browser and show a heading with "Example: overlay with warnings".
+
+In `app.js`, uncomment the lines that should cause a warning to appear. The page should now refresh and show a full screen overlay that shows the warning.
diff --git a/examples/overlay-warnings/app.js b/examples/overlay-warnings/app.js
@@ -0,0 +1,8 @@
+document.write("It's working.");
+
+// This results in a warning:
+// require("./casesensitive.js");
+// require("./caseSensitive.js");
+
+// This results in an error:
+// if(!window) require("test");
diff --git a/examples/overlay-warnings/caseSensitive.js b/examples/overlay-warnings/caseSensitive.js
@@ -0,0 +1,2 @@
+console.log("case sensitive");
+
diff --git a/examples/overlay-warnings/index.html b/examples/overlay-warnings/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: overlay with warnings</h1>
+	</body>
+</html>
diff --git a/examples/overlay-warnings/webpack.config.js b/examples/overlay-warnings/webpack.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+	devServer: {
+		overlay: {
+			errors: true,
+			warnings: true
+		}
+	}
+}
diff --git a/lib/optionsSchema.json b/lib/optionsSchema.json
@@ -69,7 +69,22 @@
     },
     "overlay": {
       "description": "Shows an error overlay in browser.",
-      "type": "boolean"
+      "anyOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "errors": {
+              "type": "boolean"
+            },
+            "warnings": {
+              "type": "boolean"
+            }
+          }
+        }
+      ]
     },
     "key": {
       "description": "The contents of a SSL key.",

Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ function ensureOverlayDivExists(onOverlayDivReady) {`
`91`	`91`	`document.body.appendChild(overlayIframe);`
`92`	`92`	`}`
`93`	`93`
`94`		`-function showErrorOverlay(message) {`
	`94`	`+function showMessageOverlay(message) {`
`95`	`95`	`ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {`
`96`	`96`	`// Make it look similar to our terminal.`
`97`	`97`	`overlayDiv.innerHTML =`
`@@ -121,6 +121,6 @@ exports.clear = function handleSuccess() {`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`// Compilation with errors (e.g. syntax error or missing modules).`
`124`		`-exports.showErrors = function handleErrors(errors) {`
`125`		`- showErrorOverlay(errors[0]);`
	`124`	`+exports.showMessage = function handleMessage(messages) {`
	`125`	`+ showMessageOverlay(messages[0]);`
`126`	`126`	`}`