1 | '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 | }; |
---|