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