[6a3a178] | 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 | }; |
---|