1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 | 'use strict';
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | var stripAnsi = require('strip-ansi');
|
24 | var url = require('url');
|
25 | var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
|
26 | var Entities = require('html-entities').AllHtmlEntities;
|
27 | var ansiHTML = require('react-dev-utils/ansiHTML');
|
28 | var entities = new Entities();
|
29 | var querystring = require('querystring');
|
30 | var options = querystring.parse(__resourceQuery.slice(1));
|
31 |
|
32 | function createOverlayIframe(onIframeLoad) {
|
33 | var iframe = document.createElement('iframe');
|
34 | iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
|
35 | iframe.src = 'about:blank';
|
36 | iframe.style.position = 'fixed';
|
37 | iframe.style.left = 0;
|
38 | iframe.style.top = 0;
|
39 | iframe.style.right = 0;
|
40 | iframe.style.bottom = 0;
|
41 | iframe.style.width = '100vw';
|
42 | iframe.style.height = '100vh';
|
43 | iframe.style.border = 'none';
|
44 | iframe.style.zIndex = 2147483647;
|
45 | iframe.onload = onIframeLoad;
|
46 | return iframe;
|
47 | }
|
48 |
|
49 | function addOverlayDivTo(iframe) {
|
50 |
|
51 | iframe.contentDocument.body.style.margin = 0;
|
52 | iframe.contentDocument.body.style.maxWidth = '100vw';
|
53 |
|
54 | var outerDiv = iframe.contentDocument.createElement('div');
|
55 | outerDiv.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
|
56 | outerDiv.style.width = '100%';
|
57 | outerDiv.style.height = '100%';
|
58 | outerDiv.style.boxSizing = 'border-box';
|
59 | outerDiv.style.textAlign = 'center';
|
60 | outerDiv.style.backgroundColor = 'rgb(255, 255, 255)';
|
61 |
|
62 | var div = iframe.contentDocument.createElement('div');
|
63 | div.style.position = 'relative';
|
64 | div.style.display = 'inline-flex';
|
65 | div.style.flexDirection = 'column';
|
66 | div.style.height = '100%';
|
67 | div.style.width = '1024px';
|
68 | div.style.maxWidth = '100%';
|
69 | div.style.overflowX = 'hidden';
|
70 | div.style.overflowY = 'auto';
|
71 | div.style.padding = '0.5rem';
|
72 | div.style.boxSizing = 'border-box';
|
73 | div.style.textAlign = 'left';
|
74 | div.style.fontFamily = 'Consolas, Menlo, monospace';
|
75 | div.style.fontSize = '11px';
|
76 | div.style.whiteSpace = 'pre-wrap';
|
77 | div.style.wordBreak = 'break-word';
|
78 | div.style.lineHeight = '1.5';
|
79 | div.style.color = 'rgb(41, 50, 56)';
|
80 |
|
81 | outerDiv.appendChild(div);
|
82 | iframe.contentDocument.body.appendChild(outerDiv);
|
83 | return div;
|
84 | }
|
85 |
|
86 | function overlayHeaderStyle() {
|
87 | return 'font-size: 2em;' + 'font-family: sans-serif;' + 'color: rgb(206, 17, 38);' + 'white-space: pre-wrap;' + 'margin: 0 2rem 0.75rem 0px;' + 'flex: 0 0 auto;' + 'max-height: 35%;' + 'overflow: auto;';
|
88 | }
|
89 |
|
90 | var overlayIframe = null;
|
91 | var overlayDiv = null;
|
92 | var lastOnOverlayDivReady = null;
|
93 |
|
94 | function ensureOverlayDivExists(onOverlayDivReady) {
|
95 | if (overlayDiv) {
|
96 |
|
97 | onOverlayDivReady(overlayDiv);
|
98 | return;
|
99 | }
|
100 |
|
101 |
|
102 |
|
103 | lastOnOverlayDivReady = onOverlayDivReady;
|
104 |
|
105 | if (overlayIframe) {
|
106 |
|
107 | return;
|
108 | }
|
109 |
|
110 |
|
111 | overlayIframe = createOverlayIframe(function onIframeLoad() {
|
112 | overlayDiv = addOverlayDivTo(overlayIframe);
|
113 |
|
114 | lastOnOverlayDivReady(overlayDiv);
|
115 | });
|
116 |
|
117 |
|
118 |
|
119 |
|
120 | document.body.appendChild(overlayIframe);
|
121 | }
|
122 |
|
123 | function showErrorOverlay(message) {
|
124 | ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
|
125 |
|
126 | overlayDiv.innerHTML = '<div style="' + overlayHeaderStyle() + '">Failed to compile</div>' + '<pre style="' + 'display: block; padding: 0.5em; margin-top: 0; ' + 'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' + 'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' + '<code style="font-family: Consolas, Menlo, monospace;">' + ansiHTML(entities.encode(message)) + '</code></pre>' + '<div style="' + 'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' + 'flex: 0 0 auto">' + 'This error occurred during the build time and cannot be dismissed.</div>';
|
127 | });
|
128 | }
|
129 |
|
130 | function destroyErrorOverlay() {
|
131 | if (!overlayDiv) {
|
132 |
|
133 | return;
|
134 | }
|
135 |
|
136 |
|
137 | document.body.removeChild(overlayIframe);
|
138 | overlayDiv = null;
|
139 | overlayIframe = null;
|
140 | lastOnOverlayDivReady = null;
|
141 | }
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 | var connection = new window.EventSource(options.hmrPath + '/sockjs-node/info');
|
154 |
|
155 |
|
156 |
|
157 | connection.onclose = function () {
|
158 | if (typeof console !== 'undefined' && typeof console.info === 'function') {
|
159 | console.info('The development server has disconnected.\nRefresh the page if necessary.');
|
160 | }
|
161 | };
|
162 |
|
163 |
|
164 | var isFirstCompilation = true;
|
165 | var mostRecentCompilationHash = null;
|
166 | var hasCompileErrors = false;
|
167 |
|
168 | function clearOutdatedErrors() {
|
169 |
|
170 | if (typeof console !== 'undefined' && typeof console.clear === 'function') {
|
171 | if (hasCompileErrors) {
|
172 | console.clear();
|
173 | }
|
174 | }
|
175 | }
|
176 |
|
177 |
|
178 | function handleSuccess() {
|
179 | clearOutdatedErrors();
|
180 |
|
181 | var isHotUpdate = !isFirstCompilation;
|
182 | isFirstCompilation = false;
|
183 | hasCompileErrors = false;
|
184 |
|
185 |
|
186 | if (isHotUpdate) {
|
187 | tryApplyUpdates(function onHotUpdateSuccess() {
|
188 |
|
189 |
|
190 | destroyErrorOverlay();
|
191 | });
|
192 | }
|
193 | }
|
194 |
|
195 |
|
196 | function handleWarnings(warnings) {
|
197 | clearOutdatedErrors();
|
198 |
|
199 | var isHotUpdate = !isFirstCompilation;
|
200 | isFirstCompilation = false;
|
201 | hasCompileErrors = false;
|
202 |
|
203 | function printWarnings() {
|
204 |
|
205 | var formatted = formatWebpackMessages({
|
206 | warnings: warnings,
|
207 | errors: []
|
208 | });
|
209 |
|
210 | if (typeof console !== 'undefined' && typeof console.warn === 'function') {
|
211 | for (var i = 0; i < formatted.warnings.length; i++) {
|
212 | if (i === 5) {
|
213 | console.warn('There were more warnings in other files.\n' + 'You can find a complete log in the terminal.');
|
214 | break;
|
215 | }
|
216 | console.warn(stripAnsi(formatted.warnings[i]));
|
217 | }
|
218 | }
|
219 | }
|
220 |
|
221 |
|
222 | if (isHotUpdate) {
|
223 | tryApplyUpdates(function onSuccessfulHotUpdate() {
|
224 |
|
225 |
|
226 | printWarnings();
|
227 |
|
228 |
|
229 | destroyErrorOverlay();
|
230 | });
|
231 | } else {
|
232 |
|
233 | printWarnings();
|
234 | }
|
235 | }
|
236 |
|
237 |
|
238 | function handleErrors(errors) {
|
239 | clearOutdatedErrors();
|
240 |
|
241 | isFirstCompilation = false;
|
242 | hasCompileErrors = true;
|
243 |
|
244 |
|
245 | var formatted = formatWebpackMessages({
|
246 | errors: errors,
|
247 | warnings: []
|
248 | });
|
249 |
|
250 |
|
251 | showErrorOverlay(formatted.errors[0]);
|
252 |
|
253 |
|
254 | if (typeof console !== 'undefined' && typeof console.error === 'function') {
|
255 | for (var i = 0; i < formatted.errors.length; i++) {
|
256 | console.error(stripAnsi(formatted.errors[i]));
|
257 | }
|
258 | }
|
259 |
|
260 |
|
261 |
|
262 | }
|
263 |
|
264 |
|
265 | function handleAvailableHash(hash) {
|
266 |
|
267 | mostRecentCompilationHash = hash;
|
268 | }
|
269 |
|
270 |
|
271 | connection.onmessage = function (e) {
|
272 | var message = JSON.parse(e.data);
|
273 | switch (message.type) {
|
274 | case 'hash':
|
275 | handleAvailableHash(message.data);
|
276 | break;
|
277 | case 'still-ok':
|
278 | case 'ok':
|
279 | handleSuccess();
|
280 | break;
|
281 | case 'content-changed':
|
282 |
|
283 | window.location.reload();
|
284 | break;
|
285 | case 'warnings':
|
286 | handleWarnings(message.data);
|
287 | break;
|
288 | case 'errors':
|
289 | handleErrors(message.data);
|
290 | break;
|
291 | default:
|
292 |
|
293 | }
|
294 | };
|
295 |
|
296 |
|
297 | function isUpdateAvailable() {
|
298 |
|
299 |
|
300 |
|
301 | return mostRecentCompilationHash !== __webpack_hash__;
|
302 | }
|
303 |
|
304 |
|
305 | function canApplyUpdates() {
|
306 | return module.hot.status() === 'idle';
|
307 | }
|
308 |
|
309 |
|
310 | function tryApplyUpdates(onHotUpdateSuccess) {
|
311 | if (!module.hot) {
|
312 |
|
313 | window.location.reload();
|
314 | return;
|
315 | }
|
316 |
|
317 | if (!isUpdateAvailable() || !canApplyUpdates()) {
|
318 | return;
|
319 | }
|
320 |
|
321 | function handleApplyUpdates(err, updatedModules) {
|
322 | if (err || !updatedModules) {
|
323 | window.location.reload();
|
324 | return;
|
325 | }
|
326 |
|
327 | if (typeof onHotUpdateSuccess === 'function') {
|
328 |
|
329 | onHotUpdateSuccess();
|
330 | }
|
331 |
|
332 | if (isUpdateAvailable()) {
|
333 |
|
334 | tryApplyUpdates();
|
335 | }
|
336 | }
|
337 |
|
338 |
|
339 | var result = module.hot.check( true, handleApplyUpdates);
|
340 |
|
341 |
|
342 | if (result && result.then) {
|
343 | result.then(function (updatedModules) {
|
344 | handleApplyUpdates(null, updatedModules);
|
345 | }, function (err) {
|
346 | handleApplyUpdates(err, null);
|
347 | });
|
348 | }
|
349 | } |
\ | No newline at end of file |