|
| 1 | +// The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app) |
| 2 | +// They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware). |
| 3 | +var ansiHTML = require("ansi-html"); |
| 4 | +var Entities = require("html-entities").AllHtmlEntities; |
| 5 | +var entities = new Entities(); |
| 6 | + |
| 7 | +var colors = { |
| 8 | + reset: ["transparent", "transparent"], |
| 9 | + black: "181818", |
| 10 | + red: "E36049", |
| 11 | + green: "B3CB74", |
| 12 | + yellow: "FFD080", |
| 13 | + blue: "7CAFC2", |
| 14 | + magenta: "7FACCA", |
| 15 | + cyan: "C3C2EF", |
| 16 | + lightgrey: "EBE7E3", |
| 17 | + darkgrey: "6D7891" |
| 18 | +}; |
| 19 | +ansiHTML.setColors(colors); |
| 20 | + |
| 21 | +function createOverlayIframe(onIframeLoad) { |
| 22 | + var iframe = document.createElement("iframe"); |
| 23 | + iframe.id = "webpack-dev-server-client-overlay"; |
| 24 | + iframe.src = "about:blank"; |
| 25 | + iframe.style.position = "fixed"; |
| 26 | + iframe.style.left = 0; |
| 27 | + iframe.style.top = 0; |
| 28 | + iframe.style.right = 0; |
| 29 | + iframe.style.bottom = 0; |
| 30 | + iframe.style.width = "100vw"; |
| 31 | + iframe.style.height = "100vh"; |
| 32 | + iframe.style.border = "none"; |
| 33 | + iframe.style.zIndex = 9999999999; |
| 34 | + iframe.onload = onIframeLoad; |
| 35 | + return iframe; |
| 36 | +} |
| 37 | + |
| 38 | +function addOverlayDivTo(iframe) { |
| 39 | + var div = iframe.contentDocument.createElement("div"); |
| 40 | + div.id = "webpack-dev-server-client-overlay-div"; |
| 41 | + div.style.position = "fixed"; |
| 42 | + div.style.boxSizing = "border-box"; |
| 43 | + div.style.left = 0; |
| 44 | + div.style.top = 0; |
| 45 | + div.style.right = 0; |
| 46 | + div.style.bottom = 0; |
| 47 | + div.style.width = "100vw"; |
| 48 | + div.style.height = "100vh"; |
| 49 | + div.style.backgroundColor = "black"; |
| 50 | + div.style.color = "#E8E8E8"; |
| 51 | + div.style.fontFamily = "Menlo, Consolas, monospace"; |
| 52 | + div.style.fontSize = "large"; |
| 53 | + div.style.padding = "2rem"; |
| 54 | + div.style.lineHeight = "1.2"; |
| 55 | + div.style.whiteSpace = "pre-wrap"; |
| 56 | + div.style.overflow = "auto"; |
| 57 | + iframe.contentDocument.body.appendChild(div); |
| 58 | + return div; |
| 59 | +} |
| 60 | + |
| 61 | +var overlayIframe = null; |
| 62 | +var overlayDiv = null; |
| 63 | +var lastOnOverlayDivReady = null; |
| 64 | + |
| 65 | +function ensureOverlayDivExists(onOverlayDivReady) { |
| 66 | + if(overlayDiv) { |
| 67 | + // Everything is ready, call the callback right away. |
| 68 | + onOverlayDivReady(overlayDiv); |
| 69 | + return; |
| 70 | + } |
| 71 | + |
| 72 | + // Creating an iframe may be asynchronous so we'll schedule the callback. |
| 73 | + // In case of multiple calls, last callback wins. |
| 74 | + lastOnOverlayDivReady = onOverlayDivReady; |
| 75 | + |
| 76 | + if(overlayIframe) { |
| 77 | + // We're already creating it. |
| 78 | + return; |
| 79 | + } |
| 80 | + |
| 81 | + // Create iframe and, when it is ready, a div inside it. |
| 82 | + overlayIframe = createOverlayIframe(function onIframeLoad() { |
| 83 | + overlayDiv = addOverlayDivTo(overlayIframe); |
| 84 | + // Now we can talk! |
| 85 | + lastOnOverlayDivReady(overlayDiv); |
| 86 | + }); |
| 87 | + |
| 88 | + // Zalgo alert: onIframeLoad() will be called either synchronously |
| 89 | + // or asynchronously depending on the browser. |
| 90 | + // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires. |
| 91 | + document.body.appendChild(overlayIframe); |
| 92 | +} |
| 93 | + |
| 94 | +function showErrorOverlay(message) { |
| 95 | + ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) { |
| 96 | + // Make it look similar to our terminal. |
| 97 | + overlayDiv.innerHTML = |
| 98 | + "<span style=\"color: #" + |
| 99 | + colors.red + |
| 100 | + "\">Failed to compile.</span><br><br>" + |
| 101 | + ansiHTML(entities.encode(message)); |
| 102 | + }); |
| 103 | +} |
| 104 | + |
| 105 | +function destroyErrorOverlay() { |
| 106 | + if(!overlayDiv) { |
| 107 | + // It is not there in the first place. |
| 108 | + return; |
| 109 | + } |
| 110 | + |
| 111 | + // Clean up and reset internal state. |
| 112 | + document.body.removeChild(overlayIframe); |
| 113 | + overlayDiv = null; |
| 114 | + overlayIframe = null; |
| 115 | + lastOnOverlayDivReady = null; |
| 116 | +} |
| 117 | + |
| 118 | +// Successful compilation. |
| 119 | +exports.clear = function handleSuccess() { |
| 120 | + destroyErrorOverlay(); |
| 121 | +} |
| 122 | + |
| 123 | +// Compilation with errors (e.g. syntax error or missing modules). |
| 124 | +exports.showErrors = function handleErrors(errors) { |
| 125 | + showErrorOverlay(errors[0]); |
| 126 | +} |
0 commit comments