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