1 |
|
2 |
|
3 | import ansiHTML from "ansi-html-community";
|
4 | import { encode } from "html-entities";
|
5 | var colors = {
|
6 | reset: ["transparent", "transparent"],
|
7 | black: "181818",
|
8 | red: "E36049",
|
9 | green: "B3CB74",
|
10 | yellow: "FFD080",
|
11 | blue: "7CAFC2",
|
12 | magenta: "7FACCA",
|
13 | cyan: "C3C2EF",
|
14 | lightgrey: "EBE7E3",
|
15 | darkgrey: "6D7891"
|
16 | };
|
17 |
|
18 |
|
19 | var iframeContainerElement;
|
20 |
|
21 |
|
22 | var containerElement;
|
23 |
|
24 |
|
25 | var onLoadQueue = [];
|
26 |
|
27 |
|
28 | var overlayTrustedTypesPolicy;
|
29 | ansiHTML.setColors(colors);
|
30 |
|
31 |
|
32 |
|
33 |
|
34 | function createContainer(trustedTypesPolicyName) {
|
35 |
|
36 | if (window.trustedTypes) {
|
37 | overlayTrustedTypesPolicy = window.trustedTypes.createPolicy(trustedTypesPolicyName || "webpack-dev-server#overlay", {
|
38 | createHTML: function createHTML(value) {
|
39 | return value;
|
40 | }
|
41 | });
|
42 | }
|
43 |
|
44 | iframeContainerElement = document.createElement("iframe");
|
45 | iframeContainerElement.id = "webpack-dev-server-client-overlay";
|
46 | iframeContainerElement.src = "about:blank";
|
47 | iframeContainerElement.style.position = "fixed";
|
48 | iframeContainerElement.style.left = 0;
|
49 | iframeContainerElement.style.top = 0;
|
50 | iframeContainerElement.style.right = 0;
|
51 | iframeContainerElement.style.bottom = 0;
|
52 | iframeContainerElement.style.width = "100vw";
|
53 | iframeContainerElement.style.height = "100vh";
|
54 | iframeContainerElement.style.border = "none";
|
55 | iframeContainerElement.style.zIndex = 9999999999;
|
56 |
|
57 | iframeContainerElement.onload = function () {
|
58 | containerElement =
|
59 |
|
60 |
|
61 |
|
62 | iframeContainerElement.contentDocument.createElement("div");
|
63 | containerElement.id = "webpack-dev-server-client-overlay-div";
|
64 | containerElement.style.position = "fixed";
|
65 | containerElement.style.boxSizing = "border-box";
|
66 | containerElement.style.left = 0;
|
67 | containerElement.style.top = 0;
|
68 | containerElement.style.right = 0;
|
69 | containerElement.style.bottom = 0;
|
70 | containerElement.style.width = "100vw";
|
71 | containerElement.style.height = "100vh";
|
72 | containerElement.style.backgroundColor = "rgba(0, 0, 0, 0.85)";
|
73 | containerElement.style.color = "#E8E8E8";
|
74 | containerElement.style.fontFamily = "Menlo, Consolas, monospace";
|
75 | containerElement.style.fontSize = "large";
|
76 | containerElement.style.padding = "2rem";
|
77 | containerElement.style.lineHeight = "1.2";
|
78 | containerElement.style.whiteSpace = "pre-wrap";
|
79 | containerElement.style.overflow = "auto";
|
80 | var headerElement = document.createElement("span");
|
81 | headerElement.innerText = "Compiled with problems:";
|
82 | var closeButtonElement = document.createElement("button");
|
83 | closeButtonElement.innerText = "X";
|
84 | closeButtonElement.style.background = "transparent";
|
85 | closeButtonElement.style.border = "none";
|
86 | closeButtonElement.style.fontSize = "20px";
|
87 | closeButtonElement.style.fontWeight = "bold";
|
88 | closeButtonElement.style.color = "white";
|
89 | closeButtonElement.style.cursor = "pointer";
|
90 | closeButtonElement.style.cssFloat = "right";
|
91 |
|
92 | closeButtonElement.style.styleFloat = "right";
|
93 | closeButtonElement.addEventListener("click", function () {
|
94 | hide();
|
95 | });
|
96 | containerElement.appendChild(headerElement);
|
97 | containerElement.appendChild(closeButtonElement);
|
98 | containerElement.appendChild(document.createElement("br"));
|
99 | containerElement.appendChild(document.createElement("br"));
|
100 |
|
101 |
|
102 |
|
103 | iframeContainerElement.contentDocument.body.appendChild(containerElement);
|
104 | onLoadQueue.forEach(function (onLoad) {
|
105 | onLoad(
|
106 |
|
107 | containerElement);
|
108 | });
|
109 | onLoadQueue = [];
|
110 |
|
111 |
|
112 | iframeContainerElement.onload = null;
|
113 | };
|
114 |
|
115 | document.body.appendChild(iframeContainerElement);
|
116 | }
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 | function ensureOverlayExists(callback, trustedTypesPolicyName) {
|
124 | if (containerElement) {
|
125 |
|
126 | callback(containerElement);
|
127 | return;
|
128 | }
|
129 |
|
130 | onLoadQueue.push(callback);
|
131 |
|
132 | if (iframeContainerElement) {
|
133 | return;
|
134 | }
|
135 |
|
136 | createContainer(trustedTypesPolicyName);
|
137 | }
|
138 |
|
139 |
|
140 | function hide() {
|
141 | if (!iframeContainerElement) {
|
142 | return;
|
143 | }
|
144 |
|
145 |
|
146 | document.body.removeChild(iframeContainerElement);
|
147 | iframeContainerElement = null;
|
148 | containerElement = null;
|
149 | }
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 | function formatProblem(type, item) {
|
158 | var header = type === "warning" ? "WARNING" : "ERROR";
|
159 | var body = "";
|
160 |
|
161 | if (typeof item === "string") {
|
162 | body += item;
|
163 | } else {
|
164 | var file = item.file || "";
|
165 |
|
166 | var moduleName = item.moduleName ? item.moduleName.indexOf("!") !== -1 ? "".concat(item.moduleName.replace(/^(\s|\S)*!/, ""), " (").concat(item.moduleName, ")") : "".concat(item.moduleName) : "";
|
167 | var loc = item.loc;
|
168 | header += "".concat(moduleName || file ? " in ".concat(moduleName ? "".concat(moduleName).concat(file ? " (".concat(file, ")") : "") : file).concat(loc ? " ".concat(loc) : "") : "");
|
169 | body += item.message || "";
|
170 | }
|
171 |
|
172 | return {
|
173 | header: header,
|
174 | body: body
|
175 | };
|
176 | }
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 | function show(type, messages, trustedTypesPolicyName) {
|
186 | ensureOverlayExists(function () {
|
187 | messages.forEach(function (message) {
|
188 | var entryElement = document.createElement("div");
|
189 | var typeElement = document.createElement("span");
|
190 |
|
191 | var _formatProblem = formatProblem(type, message),
|
192 | header = _formatProblem.header,
|
193 | body = _formatProblem.body;
|
194 |
|
195 | typeElement.innerText = header;
|
196 | typeElement.style.color = "#".concat(colors.red);
|
197 |
|
198 | var text = ansiHTML(encode(body));
|
199 | var messageTextNode = document.createElement("div");
|
200 | messageTextNode.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML(text) : text;
|
201 | entryElement.appendChild(typeElement);
|
202 | entryElement.appendChild(document.createElement("br"));
|
203 | entryElement.appendChild(document.createElement("br"));
|
204 | entryElement.appendChild(messageTextNode);
|
205 | entryElement.appendChild(document.createElement("br"));
|
206 | entryElement.appendChild(document.createElement("br"));
|
207 |
|
208 |
|
209 | containerElement.appendChild(entryElement);
|
210 | });
|
211 | }, trustedTypesPolicyName);
|
212 | }
|
213 |
|
214 | export { formatProblem, show, hide }; |
\ | No newline at end of file |