1 |
|
2 |
|
3 |
|
4 | var appErrorCss = "#dev-server-modal * { box-sizing: border-box !important; } #dev-server-modal { direction: ltr !important; display: block !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 100000; margin: 0 !important; padding: 0 !important; font-family: -apple-system, 'Roboto', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important; font-size: 14px !important; line-height: 1.5 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-size-adjust: none; word-wrap: break-word; color: #333 !important; background-color: white !important; box-sizing: border-box !important; overflow: hidden; user-select: auto; } #dev-server-modal-inner { position: relative !important; padding: 0 0 30px 0 !important; width: 100% !important; height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .dev-server-diagnostic { margin: 20px !important; border: 1px solid #ddd !important; border-radius: 3px !important; } .dev-server-diagnostic-masthead { padding: 8px 12px 12px 12px !important; } .dev-server-diagnostic-title { margin: 0 !important; font-weight: bold !important; color: #222 !important; } .dev-server-diagnostic-message { margin-top: 4px !important; color: #555 !important; } .dev-server-diagnostic-file { position: relative !important; border-top: 1px solid #ddd !important; } .dev-server-diagnostic-file-header { display: block !important; padding: 5px 10px !important; color: #555 !important; border-bottom: 1px solid #ddd !important; border-top-left-radius: 2px !important; border-top-right-radius: 2px !important; background-color: #f9f9f9 !important; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; font-size: 12px !important; } a.dev-server-diagnostic-file-header { color: #0000ee !important; text-decoration: underline !important; } a.dev-server-diagnostic-file-header:hover { text-decoration: none !important; background-color: #f4f4f4 !important; } .dev-server-diagnostic-file-name { font-weight: bold !important; } .dev-server-diagnostic-blob { overflow-x: auto !important; overflow-y: hidden !important; border-bottom-right-radius: 3px !important; border-bottom-left-radius: 3px !important; } .dev-server-diagnostic-table { margin: 0 !important; padding: 0 !important; border-spacing: 0 !important; border-collapse: collapse !important; border-width: 0 !important; border-style: none !important; -moz-tab-size: 2; tab-size: 2; } .dev-server-diagnostic-table td, .dev-server-diagnostic-table th { padding: 0 !important; border-width: 0 !important; border-style: none !important; } td.dev-server-diagnostic-blob-num { padding-right: 10px !important; padding-left: 10px !important; width: 1% !important; min-width: 50px !important; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; font-size: 12px !important; line-height: 20px !important; color: rgba(0, 0, 0, 0.3) !important; text-align: right !important; white-space: nowrap !important; vertical-align: top !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: solid #eee !important; border-width: 0 1px 0 0 !important; } td.dev-server-diagnostic-blob-num::before { content: attr(data-line-number) !important; } .dev-server-diagnostic-error-line td.dev-server-diagnostic-blob-num { background-color: #ffdddd !important; border-color: #ffc9c9 !important; } .dev-server-diagnostic-error-line td.dev-server-diagnostic-blob-code { background: rgba(255, 221, 221, 0.25) !important; z-index: -1; } .dev-server-diagnostic-open-in-editor td.dev-server-diagnostic-blob-num:hover { cursor: pointer; background-color: #ffffe3 !important; font-weight: bold; } .dev-server-diagnostic-open-in-editor.dev-server-diagnostic-error-line td.dev-server-diagnostic-blob-num:hover { background-color: #ffdada !important; } td.dev-server-diagnostic-blob-code { position: relative !important; padding-right: 10px !important; padding-left: 10px !important; line-height: 20px !important; vertical-align: top !important; overflow: visible !important; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; font-size: 12px !important; color: #333 !important; word-wrap: normal !important; white-space: pre !important; } td.dev-server-diagnostic-blob-code::before { content: '' !important; } .dev-server-diagnostic-error-chr { position: relative !important; } .dev-server-diagnostic-error-chr::before { position: absolute !important; z-index: -1; top: -3px !important; left: 0px !important; width: 8px !important; height: 20px !important; background-color: #ffdddd !important; content: '' !important; } /** * GitHub Gist Theme * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro * https://highlightjs.org/ */ .hljs-comment, .hljs-meta { color: #969896; } .hljs-string, .hljs-variable, .hljs-template-variable, .hljs-strong, .hljs-emphasis, .hljs-quote { color: #df5000; } .hljs-keyword, .hljs-selector-tag, .hljs-type { color: #a71d5d; } .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-attribute { color: #0086b3; } .hljs-section, .hljs-name { color: #63a35c; } .hljs-tag { color: #333333; } .hljs-title, .hljs-attr, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo { color: #795da3; } .hljs-addition { color: #55a532; background-color: #eaffea; } .hljs-deletion { color: #bd2c00; background-color: #ffecec; } .hljs-link { text-decoration: underline; }";
|
5 |
|
6 | const appError = (data) => {
|
7 | const results = {
|
8 | diagnostics: [],
|
9 | status: null,
|
10 | };
|
11 | if (data && data.window && Array.isArray(data.buildResults.diagnostics)) {
|
12 | const diagnostics = data.buildResults.diagnostics.filter((diagnostic) => diagnostic.level === 'error');
|
13 | if (diagnostics.length > 0) {
|
14 | const modal = getDevServerModal(data.window.document);
|
15 | diagnostics.forEach((diagnostic) => {
|
16 | results.diagnostics.push(diagnostic);
|
17 | appendDiagnostic(data.window.document, data.openInEditor, modal, diagnostic);
|
18 | });
|
19 | results.status = 'error';
|
20 | }
|
21 | }
|
22 | return results;
|
23 | };
|
24 | const appendDiagnostic = (doc, openInEditor, modal, diagnostic) => {
|
25 | const card = doc.createElement('div');
|
26 | card.className = 'dev-server-diagnostic';
|
27 | const masthead = doc.createElement('div');
|
28 | masthead.className = 'dev-server-diagnostic-masthead';
|
29 | masthead.title = `${escapeHtml(diagnostic.type)} error: ${escapeHtml(diagnostic.code)}`;
|
30 | card.appendChild(masthead);
|
31 | const title = doc.createElement('div');
|
32 | title.className = 'dev-server-diagnostic-title';
|
33 | if (typeof diagnostic.header === 'string' && diagnostic.header.trim().length > 0) {
|
34 | title.textContent = diagnostic.header;
|
35 | }
|
36 | else {
|
37 | title.textContent = `${titleCase(diagnostic.type)} ${titleCase(diagnostic.level)}`;
|
38 | }
|
39 | masthead.appendChild(title);
|
40 | const message = doc.createElement('div');
|
41 | message.className = 'dev-server-diagnostic-message';
|
42 | message.textContent = diagnostic.messageText;
|
43 | masthead.appendChild(message);
|
44 | const file = doc.createElement('div');
|
45 | file.className = 'dev-server-diagnostic-file';
|
46 | card.appendChild(file);
|
47 | const isUrl = typeof diagnostic.absFilePath === 'string' && diagnostic.absFilePath.indexOf('http') === 0;
|
48 | const canOpenInEditor = typeof openInEditor === 'function' && typeof diagnostic.absFilePath === 'string' && !isUrl;
|
49 | if (isUrl) {
|
50 | const fileHeader = doc.createElement('a');
|
51 | fileHeader.href = diagnostic.absFilePath;
|
52 | fileHeader.setAttribute('target', '_blank');
|
53 | fileHeader.setAttribute('rel', 'noopener noreferrer');
|
54 | fileHeader.className = 'dev-server-diagnostic-file-header';
|
55 | const filePath = doc.createElement('span');
|
56 | filePath.className = 'dev-server-diagnostic-file-path';
|
57 | filePath.textContent = diagnostic.absFilePath;
|
58 | fileHeader.appendChild(filePath);
|
59 | file.appendChild(fileHeader);
|
60 | }
|
61 | else if (diagnostic.relFilePath) {
|
62 | const fileHeader = doc.createElement(canOpenInEditor ? 'a' : 'div');
|
63 | fileHeader.className = 'dev-server-diagnostic-file-header';
|
64 | if (diagnostic.absFilePath) {
|
65 | fileHeader.title = escapeHtml(diagnostic.absFilePath);
|
66 | if (canOpenInEditor) {
|
67 | addOpenInEditor(openInEditor, fileHeader, diagnostic.absFilePath, diagnostic.lineNumber, diagnostic.columnNumber);
|
68 | }
|
69 | }
|
70 | const parts = diagnostic.relFilePath.split('/');
|
71 | const fileName = doc.createElement('span');
|
72 | fileName.className = 'dev-server-diagnostic-file-name';
|
73 | fileName.textContent = parts.pop();
|
74 | const filePath = doc.createElement('span');
|
75 | filePath.className = 'dev-server-diagnostic-file-path';
|
76 | filePath.textContent = parts.join('/') + '/';
|
77 | fileHeader.appendChild(filePath);
|
78 | fileHeader.appendChild(fileName);
|
79 | file.appendChild(fileHeader);
|
80 | }
|
81 | if (diagnostic.lines && diagnostic.lines.length > 0) {
|
82 | const blob = doc.createElement('div');
|
83 | blob.className = 'dev-server-diagnostic-blob';
|
84 | file.appendChild(blob);
|
85 | const table = doc.createElement('table');
|
86 | table.className = 'dev-server-diagnostic-table';
|
87 | blob.appendChild(table);
|
88 | prepareLines(diagnostic.lines).forEach((l) => {
|
89 | const tr = doc.createElement('tr');
|
90 | if (l.errorCharStart > 0) {
|
91 | tr.classList.add('dev-server-diagnostic-error-line');
|
92 | }
|
93 | if (canOpenInEditor) {
|
94 | tr.classList.add('dev-server-diagnostic-open-in-editor');
|
95 | }
|
96 | table.appendChild(tr);
|
97 | const tdNum = doc.createElement('td');
|
98 | tdNum.className = 'dev-server-diagnostic-blob-num';
|
99 | if (l.lineNumber > 0) {
|
100 | tdNum.setAttribute('data-line-number', l.lineNumber + '');
|
101 | tdNum.title = escapeHtml(diagnostic.relFilePath) + ', line ' + l.lineNumber;
|
102 | if (canOpenInEditor) {
|
103 | const column = l.lineNumber === diagnostic.lineNumber ? diagnostic.columnNumber : 1;
|
104 | addOpenInEditor(openInEditor, tdNum, diagnostic.absFilePath, l.lineNumber, column);
|
105 | }
|
106 | }
|
107 | tr.appendChild(tdNum);
|
108 | const tdCode = doc.createElement('td');
|
109 | tdCode.className = 'dev-server-diagnostic-blob-code';
|
110 | tdCode.innerHTML = highlightError(l.text, l.errorCharStart, l.errorLength);
|
111 | tr.appendChild(tdCode);
|
112 | });
|
113 | }
|
114 | modal.appendChild(card);
|
115 | };
|
116 | const addOpenInEditor = (openInEditor, elm, file, line, column) => {
|
117 | if (elm.tagName === 'A') {
|
118 | elm.href = '#open-in-editor';
|
119 | }
|
120 | if (typeof line !== 'number' || line < 1) {
|
121 | line = 1;
|
122 | }
|
123 | if (typeof column !== 'number' || column < 1) {
|
124 | column = 1;
|
125 | }
|
126 | elm.addEventListener('click', (ev) => {
|
127 | ev.preventDefault();
|
128 | ev.stopPropagation();
|
129 | openInEditor({
|
130 | file: file,
|
131 | line: line,
|
132 | column: column,
|
133 | });
|
134 | });
|
135 | };
|
136 | const getDevServerModal = (doc) => {
|
137 | let outer = doc.getElementById(DEV_SERVER_MODAL);
|
138 | if (!outer) {
|
139 | outer = doc.createElement('div');
|
140 | outer.id = DEV_SERVER_MODAL;
|
141 | outer.setAttribute('role', 'dialog');
|
142 | doc.body.appendChild(outer);
|
143 | }
|
144 | outer.innerHTML = `<style>${appErrorCss}</style><div id="${DEV_SERVER_MODAL}-inner"></div>`;
|
145 | return doc.getElementById(`${DEV_SERVER_MODAL}-inner`);
|
146 | };
|
147 | const clearAppErrorModal = (data) => {
|
148 | const appErrorElm = data.window.document.getElementById(DEV_SERVER_MODAL);
|
149 | if (appErrorElm) {
|
150 | appErrorElm.parentNode.removeChild(appErrorElm);
|
151 | }
|
152 | };
|
153 | const escapeHtml = (unsafe) => {
|
154 | if (typeof unsafe === 'number' || typeof unsafe === 'boolean') {
|
155 | return unsafe.toString();
|
156 | }
|
157 | if (typeof unsafe === 'string') {
|
158 | return unsafe
|
159 | .replace(/&/g, '&')
|
160 | .replace(/</g, '<')
|
161 | .replace(/>/g, '>')
|
162 | .replace(/"/g, '"')
|
163 | .replace(/'/g, ''');
|
164 | }
|
165 | return '';
|
166 | };
|
167 | const titleCase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
|
168 | const highlightError = (text, errorCharStart, errorLength) => {
|
169 | if (typeof text !== 'string') {
|
170 | return '';
|
171 | }
|
172 | const errorCharEnd = errorCharStart + errorLength;
|
173 | return text
|
174 | .split('')
|
175 | .map((inputChar, charIndex) => {
|
176 | let outputChar;
|
177 | if (inputChar === `<`) {
|
178 | outputChar = `<`;
|
179 | }
|
180 | else if (inputChar === `>`) {
|
181 | outputChar = `>`;
|
182 | }
|
183 | else if (inputChar === `"`) {
|
184 | outputChar = `"`;
|
185 | }
|
186 | else if (inputChar === `'`) {
|
187 | outputChar = `'`;
|
188 | }
|
189 | else if (inputChar === `&`) {
|
190 | outputChar = `&`;
|
191 | }
|
192 | else {
|
193 | outputChar = inputChar;
|
194 | }
|
195 | if (charIndex >= errorCharStart && charIndex < errorCharEnd) {
|
196 | outputChar = `<span class="dev-server-diagnostic-error-chr">${outputChar}</span>`;
|
197 | }
|
198 | return outputChar;
|
199 | })
|
200 | .join('');
|
201 | };
|
202 | const prepareLines = (orgLines) => {
|
203 | const lines = JSON.parse(JSON.stringify(orgLines));
|
204 | for (let i = 0; i < 100; i++) {
|
205 | if (!eachLineHasLeadingWhitespace(lines)) {
|
206 | return lines;
|
207 | }
|
208 | for (let i = 0; i < lines.length; i++) {
|
209 | lines[i].text = lines[i].text.slice(1);
|
210 | lines[i].errorCharStart--;
|
211 | if (!lines[i].text.length) {
|
212 | return lines;
|
213 | }
|
214 | }
|
215 | }
|
216 | return lines;
|
217 | };
|
218 | const eachLineHasLeadingWhitespace = (lines) => {
|
219 | if (!lines.length) {
|
220 | return false;
|
221 | }
|
222 | for (let i = 0; i < lines.length; i++) {
|
223 | if (!lines[i].text || lines[i].text.length < 1) {
|
224 | return false;
|
225 | }
|
226 | const firstChar = lines[i].text.charAt(0);
|
227 | if (firstChar !== ' ' && firstChar !== '\t') {
|
228 | return false;
|
229 | }
|
230 | }
|
231 | return true;
|
232 | };
|
233 | const DEV_SERVER_MODAL = `dev-server-modal`;
|
234 |
|
235 | const emitBuildLog = (win, buildLog) => {
|
236 | win.dispatchEvent(new CustomEvent(BUILD_LOG, { detail: buildLog }));
|
237 | };
|
238 | const emitBuildResults = (win, buildResults) => {
|
239 | win.dispatchEvent(new CustomEvent(BUILD_RESULTS, { detail: buildResults }));
|
240 | };
|
241 | const emitBuildStatus = (win, buildStatus) => {
|
242 | win.dispatchEvent(new CustomEvent(BUILD_STATUS, { detail: buildStatus }));
|
243 | };
|
244 | const onBuildLog = (win, cb) => {
|
245 | win.addEventListener(BUILD_LOG, (ev) => {
|
246 | cb(ev.detail);
|
247 | });
|
248 | };
|
249 | const onBuildResults = (win, cb) => {
|
250 | win.addEventListener(BUILD_RESULTS, (ev) => {
|
251 | cb(ev.detail);
|
252 | });
|
253 | };
|
254 | const onBuildStatus = (win, cb) => {
|
255 | win.addEventListener(BUILD_STATUS, (ev) => {
|
256 | cb(ev.detail);
|
257 | });
|
258 | };
|
259 | const BUILD_LOG = `devserver:buildlog`;
|
260 | const BUILD_RESULTS = `devserver:buildresults`;
|
261 | const BUILD_STATUS = `devserver:buildstatus`;
|
262 |
|
263 | const initBuildProgress = (data) => {
|
264 | const win = data.window;
|
265 | const doc = win.document;
|
266 | const barColor = `#5851ff`;
|
267 | const errorColor = `#b70c19`;
|
268 | let addBarTimerId;
|
269 | let removeBarTimerId;
|
270 | let opacityTimerId;
|
271 | let incIntervalId;
|
272 | let progressIncrease;
|
273 | let currentProgress = 0;
|
274 | function update() {
|
275 | clearTimeout(opacityTimerId);
|
276 | clearTimeout(removeBarTimerId);
|
277 | const progressBar = getProgressBar();
|
278 | if (!progressBar) {
|
279 | createProgressBar();
|
280 | addBarTimerId = setTimeout(update, 16);
|
281 | return;
|
282 | }
|
283 | progressBar.style.background = barColor;
|
284 | progressBar.style.opacity = `1`;
|
285 | progressBar.style.transform = `scaleX(${Math.min(1, displayProgress())})`;
|
286 | if (incIntervalId == null) {
|
287 | incIntervalId = setInterval(() => {
|
288 | progressIncrease += Math.random() * 0.05 + 0.01;
|
289 | if (displayProgress() < 0.9) {
|
290 | update();
|
291 | }
|
292 | else {
|
293 | clearInterval(incIntervalId);
|
294 | }
|
295 | }, 800);
|
296 | }
|
297 | }
|
298 | function reset() {
|
299 | clearInterval(incIntervalId);
|
300 | progressIncrease = 0.05;
|
301 | incIntervalId = null;
|
302 | clearTimeout(opacityTimerId);
|
303 | clearTimeout(addBarTimerId);
|
304 | clearTimeout(removeBarTimerId);
|
305 | const progressBar = getProgressBar();
|
306 | if (progressBar) {
|
307 | if (currentProgress >= 1) {
|
308 | progressBar.style.transform = `scaleX(1)`;
|
309 | }
|
310 | opacityTimerId = setTimeout(() => {
|
311 | try {
|
312 | const progressBar = getProgressBar();
|
313 | if (progressBar) {
|
314 | progressBar.style.opacity = `0`;
|
315 | }
|
316 | }
|
317 | catch (e) { }
|
318 | }, 150);
|
319 | removeBarTimerId = setTimeout(() => {
|
320 | try {
|
321 | const progressBar = getProgressBar();
|
322 | if (progressBar) {
|
323 | progressBar.parentNode.removeChild(progressBar);
|
324 | }
|
325 | }
|
326 | catch (e) { }
|
327 | }, 1000);
|
328 | }
|
329 | }
|
330 | function displayProgress() {
|
331 | const p = currentProgress + progressIncrease;
|
332 | return Math.max(0, Math.min(1, p));
|
333 | }
|
334 | reset();
|
335 | onBuildLog(win, (buildLog) => {
|
336 | currentProgress = buildLog.progress;
|
337 | if (currentProgress >= 0 && currentProgress < 1) {
|
338 | update();
|
339 | }
|
340 | else {
|
341 | reset();
|
342 | }
|
343 | });
|
344 | onBuildResults(win, (buildResults) => {
|
345 | if (buildResults.hasError) {
|
346 | const progressBar = getProgressBar();
|
347 | if (progressBar) {
|
348 | progressBar.style.transform = `scaleX(1)`;
|
349 | progressBar.style.background = errorColor;
|
350 | }
|
351 | }
|
352 | reset();
|
353 | });
|
354 | onBuildStatus(win, (buildStatus) => {
|
355 | if (buildStatus === 'disabled') {
|
356 | reset();
|
357 | }
|
358 | });
|
359 | if (doc.head.dataset.tmpl === 'tmpl-initial-load') {
|
360 | update();
|
361 | }
|
362 | const PROGRESS_BAR_ID = `dev-server-progress-bar`;
|
363 | function getProgressBar() {
|
364 | return doc.getElementById(PROGRESS_BAR_ID);
|
365 | }
|
366 | function createProgressBar() {
|
367 | const progressBar = doc.createElement('div');
|
368 | progressBar.id = PROGRESS_BAR_ID;
|
369 | progressBar.style.position = `absolute`;
|
370 | progressBar.style.top = `0`;
|
371 | progressBar.style.left = `0`;
|
372 | progressBar.style.zIndex = `100001`;
|
373 | progressBar.style.width = `100%`;
|
374 | progressBar.style.height = `2px`;
|
375 | progressBar.style.transform = `scaleX(0)`;
|
376 | progressBar.style.opacity = `1`;
|
377 | progressBar.style.background = barColor;
|
378 | progressBar.style.transformOrigin = `left center`;
|
379 | progressBar.style.transition = `transform .1s ease-in-out, opacity .5s ease-in`;
|
380 | progressBar.style.contain = `strict`;
|
381 | doc.body.appendChild(progressBar);
|
382 | }
|
383 | };
|
384 |
|
385 | const initBuildStatus = (data) => {
|
386 | const win = data.window;
|
387 | const doc = win.document;
|
388 | const iconElms = getFavIcons(doc);
|
389 | iconElms.forEach((iconElm) => {
|
390 | if (iconElm.href) {
|
391 | iconElm.dataset.href = iconElm.href;
|
392 | iconElm.dataset.type = iconElm.type;
|
393 | }
|
394 | });
|
395 | onBuildStatus(win, (buildStatus) => {
|
396 | updateBuildStatus(doc, buildStatus);
|
397 | });
|
398 | };
|
399 | const updateBuildStatus = (doc, status) => {
|
400 | const iconElms = getFavIcons(doc);
|
401 | iconElms.forEach((iconElm) => {
|
402 | updateFavIcon(iconElm, status);
|
403 | });
|
404 | };
|
405 | const updateFavIcon = (linkElm, status) => {
|
406 | if (status === 'pending') {
|
407 | linkElm.href = ICON_PENDING;
|
408 | linkElm.type = ICON_TYPE;
|
409 | linkElm.setAttribute('data-status', status);
|
410 | }
|
411 | else if (status === 'error') {
|
412 | linkElm.href = ICON_ERROR;
|
413 | linkElm.type = ICON_TYPE;
|
414 | linkElm.setAttribute('data-status', status);
|
415 | }
|
416 | else if (status === 'disabled') {
|
417 | linkElm.href = ICON_DISABLED;
|
418 | linkElm.type = ICON_TYPE;
|
419 | linkElm.setAttribute('data-status', status);
|
420 | }
|
421 | else {
|
422 | linkElm.removeAttribute('data-status');
|
423 | if (linkElm.dataset.href) {
|
424 | linkElm.href = linkElm.dataset.href;
|
425 | linkElm.type = linkElm.dataset.type;
|
426 | }
|
427 | else {
|
428 | linkElm.href = ICON_DEFAULT;
|
429 | linkElm.type = ICON_TYPE;
|
430 | }
|
431 | }
|
432 | };
|
433 | const getFavIcons = (doc) => {
|
434 | const iconElms = [];
|
435 | const linkElms = doc.querySelectorAll('link');
|
436 | for (let i = 0; i < linkElms.length; i++) {
|
437 | if (linkElms[i].href &&
|
438 | linkElms[i].rel &&
|
439 | (linkElms[i].rel.indexOf('shortcut') > -1 || linkElms[i].rel.indexOf('icon') > -1)) {
|
440 | iconElms.push(linkElms[i]);
|
441 | }
|
442 | }
|
443 | if (iconElms.length === 0) {
|
444 | const linkElm = doc.createElement('link');
|
445 | linkElm.rel = 'shortcut icon';
|
446 | doc.head.appendChild(linkElm);
|
447 | iconElms.push(linkElm);
|
448 | }
|
449 | return iconElms;
|
450 | };
|
451 | const ICON_DEFAULT = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAAnFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4jUzeAAAAM3RSTlMAsGDs4wML8QEbBvr2FMhAM7+ILCUPnNzXrX04otO6j3RiT0ggzLSTcmtWUUWoZlknghZc2mZzAAACrklEQVR42u3dWXLiUAyFYWEwg40x8wxhSIAwJtH+99ZVeeinfriXVpWk5Hyr+C2VrgkAAAAAAAAAAAw5sZQ7aUhYypw07FjKC2ko2yxk2SQFgwYLOWSkYFhlIZ06KWhNWMhqRApGKxYyaZGCeoeFVIekIDuwkEaXFDSXLKRdkoYjS9mRhjlLSUjDO0s5kYYzS+mThn3OQsYqAbQQC7hZSgoGYgHUy0jBa42FvKkEUDERC6CCFIzeWEjtlRRkPbGAG5CCtCIWQAtS0ByzkHxPGvos5UEaNizlnTRsWconhbM4wTpSFHMTrFtKCroNFrLGBOsJLbGAWxWkoFiJBRAmWE/I1r4nWOmNheTeJ1gX0vDJUrYUweAEa04aHs5XePvc9wpPboJ1SCmOsRVkr04aromUEQEAgB9lxaZ++ATFpNDv6Y8qm1QdBk9QTAr9ni6mbFK7DJ6g2LQLXoHZlFCQdMY2nYJXYDb1g1dgNo2boSswm2Zp6ArMptCFyIVtCl2IlDmbNC0QcPEQcD8l4HLvAXdxHnBb5wG3QcDFQ8D9mIDrIeCiIeDiA25oNeA+EHDREHDxAbdmmxBwT0HARQbciW0KDbiEbQoNuB3bFBxwbTYJAfcUBFxkwFG/YlNJAADgxzCRcqUY9m7KGgNSUEx9H3XXO76Puv/OY5wedX/flHk+6j46v2maO79purPvm6Yz+75puua+b5q6Dd/PEsrNMyZfFM5gAMW+ymPtWciYV3ksBpBOwKUH3wHXXLKUM2l4cR5wG+cBlzgPuJ3zgJNb6FRwlP4Ln1X8wrOKeFbxP6Qz3wEn+KzilWLYe5UnMuDwY5BvD+cBt899B9zC+49Bqr4DrlXzHXDF1HfA1Tu+Ay5b+w649OY74OjoO+Bo7jzg7s4DDgAAAAAAAAAA/u0POrfnVIaqz/QAAAAASUVORK5CYII=';
|
452 | const ICON_PENDING = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAAjVBMVEUAAAD8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjLn7xn3AAAALnRSTlMAsFBgAaDxfPpAdTMcD/fs47kDBhVXJQpvLNbInIiBRvSqIb+TZ2OOONxdzUxpgKSpAAAAA69JREFUeNrt3FtvskAQxvERFQXFioqnCkqth572+3+8947dN00TliF5ZpP53ZOAveg/OzCklFJKKaWUUkoppQTZm77cCGFo+jIhhG/TlwchJAvTk/GIAA6x6Um+JoDti+nJ644A5h+mJ8eMALKj6cnHnAB2r80NLJ4jf3Vz+cuWANZ5cwPTM/l7by6PZwQwGptGQf4q++dLCOHdNIbkb2IvjwjAvYEf8pe6j4/wYxopr/9SQih4BXa3l5eEcJ7a++c9/gkSQE8bcCWvXwcrAjjYADrxHv8KCbi3JasgD5fm8i9IAG1swMXzDv0X2wDaEED21dzA5UDeVoPm8uUbAayvvAI42YA7EIDzA5pv8lc6/UoAoxMv4CZuvyKUpnHn9VNBAG6B7XkBtCeEO6/AbvbyihAiXsB92svfCcA9wap4j19DAmgWs37AZCrnBKvu8vgX9AmWE3BZh/6L7QkWJIA2RxtwHQpml9sAQp9gXWbkbxz4CdYDfIK1qk1j3IV9fPgJFlNECJXhYfSfsBHkhBCKwEd452nYI7wncwQJP8GKTU+uO0I4D/uSkVJKqXAkA5nK9icoIi3nrU9QRHrZtj5BESmetT5BEantPCh7NTJFrUdgMg1bj8BkSv1HYJ8RmjMQKf1HYDdC+/R/IyQFzbD4AxH+CIyPPxCJoEdQ/IFIMgXNEPkDkd8jMLQs5wRcTXA1J+By/BGO+0ovYwQGU3kPRLJfIzCkCSfgpgmhpc5AxD/gIkLb8wKO0DTgoNyaGQQecNfQAy7TgGtHA04DLtyA24UecHngAVdrwIkJuAitU8DJ1Dbghkam9gEnU+uAWxiRjhsdoXagI1TPgKNyIBO+ZpRSSrW3HfblTAA9/juPDwTAfiMK9VG3PY/hwX7Ubc9j+AoCWNWGp+NSH4HflE2IgXUEGPI3TTfmN4ndv2kSsRUJvpUn4W1FShbYb5rc84ySAtzKs3W3IgW4lWfO24q0zsFbebIjaysSjbtt5RHzUf0DHHCrAW8gVYEDzl0LGYW4lefB24uYQgOOfwN7dMANeW/k3DkBJ2CrUNE54GRsFYIHnPNR+iPEgHPWKo5DDDhnrWKeBRhwzlrFeNtlq5CgtYqzAAPODaBzgAH331rFAAOOqsDXKjL3IqboN7ILJ4BCDDh3r3SIAfd0AijEgHP3So/8wQNuvjRBbxVij5A6Bpy8EZJnwIkbIfkFnLwRkm/ASRshXbwDTtYICRRwt7BHqEoppZRSSimllFLqD/8AOXJZHefotiIAAAAASUVORK5CYII=';
|
453 | const ICON_ERROR = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAAkFBMVEUAAAD5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0HYvLBZAAAAL3RSTlMAsGDjA/rsC/ElHRUBBssz9pFCvoh0UEcsD9ec3K19OLiiaNLEYlmoVeiCbmE+GuMl4I8AAAKQSURBVHja7d1njupQDIZhAymEUIZQQu9taN7/7q50pfl/TmTJtvQ9q3hzLDsEAAAAAAAAAACGzFjKiTS0WcqONMxZypg0fH5YyLFPChZdFnIYkILil4VcclLw3bCQ85IULM8sZPMlBfmFhfwWpGBwYCHdESnoH1nIz4c0jFnKnDTsWEqbNJxYyow03FjKlDTUKQtZqwTQXizgtgkpWGQsZKIScL0OCxmqBFC5EQugkhQshyyk0yMFgwkLyRakIGmJBdCeFPTXLCStScOUpdwogsEXrBdpuLKUJ4XDC9afKmUh94QUjLy/YGViAZRTOIMBtypJQXn2HUC5WMBleMFqILmzkLSicBZfsB6k4clSrqTh5XyEd3MeQHXqe4Qn94LVSiicwRHkJScNdVvKkgAAwI+qZdM0/AXFpE4v+AXFpKwIfkExKfR7ulyxSWkV/IJi0zx4BGbTm4IkW7ZpFjwCs2kaPAKzad0PHYHZtE1CR2A2TQahIzCbhnnwCMykVYmAi4aAQ8BZ4T3grgi4BhBwCDgbEHCNIOAQcCYg4BpCwCHgLEDAaYgPuDfbhIBrBAGHgDMhNOBo2rKpIgAA8KNoS6kplq2dsu6CFJQr30vd+dD3Uvf/nTLHS93J3flZwrHznaad852mE/veaXqw752mKvW90zTq+j5LWGS+r/J8xQKoU1AUa2chm1zlsXQWUifgkoPvgOsffQccjZ0H3Mx5wL2dB9zcecB9sJTePOBM3cU+46wiziq6C7hk6zvg3J9VfDK7vir0ch5wN+cBV6e+A27v/ccgme+AkxshTXKKYW6EFH0X29gIKTLgzI2QYgPO2ggpLuDsvaDEBZy9EVJcwBkcIT0IAAAAAAAAAADs+AdjeyF69/r87QAAAABJRU5ErkJggg==';
|
454 | const ICON_DISABLED = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAAeFBMVEUAAAC4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7+4t7/uGGySAAAAJ3RSTlMAsGAE7OMcAQvxJRX69kHWyL8zq5GIdEcsD5zcfVg4uKLNa1JPZoK/xdPIAAACiklEQVR42u3dW5KqUAyF4QgCCggqIt7t9pb5z/Ccvjz2w95UqpJ0r28Uf2WTQAAAAAAAAAAAYMiWpTxJQ8JSTqThwVI2pKFZsJC3ghTs5izkmpKCcspCljNSkB9ZSLsnBfuWhRxzUjBbspBpSQrSKwuZr0lB8cZCFg1p2LCUB2k4sZSENNxYypY0nFlKTxqGmoUcClJwEQu4SUoKdmIBtEpJQZ6xkHeVAKqOYgFUkYL9OwvJclKQrsQCbkcK0olYAF1IQXFgIfVAGnqWcqZwFidYN4phb4L1onCYYMlPsLqUFKwxwRozwTIYcG1FCqrWdwBhgqU7wUo7FlJ7n2DdScPL+RPezfkT3tl5AA217yc89xMssYBbzUjDkEjZEwAA+NFMbOrDJygmZXnwBMWkaRk8QTFpvg6eoJi0aIInKDY9gp/AbEqCJyg2bYOfwGzqKUzPNh2K0Ccwm0IfRBK2KfSLkDvbFPog0tRsUlsh4EZAwP2SgKu9B9wdATcOAg4BZwACbgQEHALOCATcCAg4BJwVCLhREHB/LOAebFNwwC3YJATcKAi4yICjfmJTQwAA4EeZSBkojrWdsvmO4hjbKYtd6ra2Uxa71G1tp0xnqbvo+IPfpe4Nf3K703Ridr3T9OQPfnea7szseaepqX3vNH3NM/xe5fmeZ7i9yiMXQFlJEeydhYy4ymMygCICzmQAxQactbOQMQFnMoBiAs7iVaHIgDN3VSgq4AxeFYoOOGNXhbCUPkaJs4o4q/iXzyp2vgPO/VnFl/OAu/F/jq8KnZ0H3FD7DriL9x+DTH0HXJ75Driq9R1ws6XvgEuvvgOu6HwHHG18BxydnAfc03nAAQAAAAAAAADAz/4BoL2Us9XM2zMAAAAASUVORK5CYII=';
|
455 | const ICON_TYPE = 'image/x-icon';
|
456 |
|
457 | const logBuild = (msg) => log(BLUE, 'Build', msg);
|
458 | const logReload = (msg) => logWarn('Reload', msg);
|
459 | const logWarn = (prefix, msg) => log(YELLOW, prefix, msg);
|
460 | const logDisabled = (prefix, msg) => log(GRAY, prefix, msg);
|
461 | const logDiagnostic = (diag) => {
|
462 | const diagnostic = diag;
|
463 | let color = RED;
|
464 | let prefix = 'Error';
|
465 | if (diagnostic.level === 'warn') {
|
466 | color = YELLOW;
|
467 | prefix = 'Warning';
|
468 | }
|
469 | if (diagnostic.header) {
|
470 | prefix = diagnostic.header;
|
471 | }
|
472 | let msg = ``;
|
473 | if (diagnostic.relFilePath) {
|
474 | msg += diagnostic.relFilePath;
|
475 | if (typeof diagnostic.lineNumber === 'number' && diagnostic.lineNumber > 0) {
|
476 | msg += ', line ' + diagnostic.lineNumber;
|
477 | if (typeof diagnostic.columnNumber === 'number' && diagnostic.columnNumber > 0) {
|
478 | msg += ', column ' + diagnostic.columnNumber;
|
479 | }
|
480 | }
|
481 | msg += `\n`;
|
482 | }
|
483 | msg += diagnostic.messageText;
|
484 | log(color, prefix, msg);
|
485 | };
|
486 | const log = (color, prefix, msg) => {
|
487 | if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.indexOf('Trident') > -1) {
|
488 | console.log(prefix, msg);
|
489 | }
|
490 | else {
|
491 | console.log.apply(console, [
|
492 | '%c' + prefix,
|
493 | `background: ${color}; color: white; padding: 2px 3px; border-radius: 2px; font-size: 0.8em;`,
|
494 | msg,
|
495 | ]);
|
496 | }
|
497 | };
|
498 | const YELLOW = `#f39c12`;
|
499 | const RED = `#c0392b`;
|
500 | const BLUE = `#3498db`;
|
501 | const GRAY = `#717171`;
|
502 |
|
503 | const getHmrHref = (versionId, fileName, testUrl) => {
|
504 | if (typeof testUrl === 'string' && testUrl.trim() !== '') {
|
505 | if (getUrlFileName(fileName) === getUrlFileName(testUrl)) {
|
506 |
|
507 | return setHmrQueryString(testUrl, versionId);
|
508 | }
|
509 | }
|
510 | return testUrl;
|
511 | };
|
512 | const getUrlFileName = (url) => {
|
513 |
|
514 | const splt = url.split('/');
|
515 | return splt[splt.length - 1].split('&')[0].split('?')[0];
|
516 | };
|
517 | const parseQuerystring = (oldQs) => {
|
518 | const newQs = {};
|
519 | if (typeof oldQs === 'string') {
|
520 | oldQs.split('&').forEach((kv) => {
|
521 | const splt = kv.split('=');
|
522 | newQs[splt[0]] = splt[1] ? splt[1] : '';
|
523 | });
|
524 | }
|
525 | return newQs;
|
526 | };
|
527 | const stringifyQuerystring = (qs) => Object.keys(qs)
|
528 | .map((key) => key + '=' + qs[key])
|
529 | .join('&');
|
530 | const setQueryString = (url, qsKey, qsValue) => {
|
531 |
|
532 | const urlSplt = url.split('?');
|
533 | const urlPath = urlSplt[0];
|
534 | const qs = parseQuerystring(urlSplt[1]);
|
535 | qs[qsKey] = qsValue;
|
536 | return urlPath + '?' + stringifyQuerystring(qs);
|
537 | };
|
538 | const setHmrQueryString = (url, versionId) => setQueryString(url, 's-hmr', versionId);
|
539 | const updateCssUrlValue = (versionId, fileName, oldCss) => {
|
540 | const reg = /url\((['"]?)(.*)\1\)/gi;
|
541 | let result;
|
542 | let newCss = oldCss;
|
543 | while ((result = reg.exec(oldCss)) !== null) {
|
544 | const url = result[2];
|
545 | newCss = newCss.replace(url, getHmrHref(versionId, fileName, url));
|
546 | }
|
547 | return newCss;
|
548 | };
|
549 | const isLinkStylesheet = (elm) => elm.nodeName.toLowerCase() === 'link' &&
|
550 | elm.href &&
|
551 | elm.rel &&
|
552 | elm.rel.toLowerCase() === 'stylesheet';
|
553 | const isTemplate = (elm) => elm.nodeName.toLowerCase() === 'template' &&
|
554 | !!elm.content &&
|
555 | elm.content.nodeType === 11;
|
556 | const setHmrAttr = (elm, versionId) => elm.setAttribute('data-hmr', versionId);
|
557 | const hasShadowRoot = (elm) => !!elm.shadowRoot && elm.shadowRoot.nodeType === 11 && elm.shadowRoot !== elm;
|
558 | const isElement = (elm) => !!elm && elm.nodeType === 1 && !!elm.getAttribute;
|
559 |
|
560 | const hmrComponents = (elm, versionId, hmrTagNames) => {
|
561 | const updatedTags = [];
|
562 | hmrTagNames.forEach((hmrTagName) => {
|
563 | hmrComponent(updatedTags, elm, versionId, hmrTagName);
|
564 | });
|
565 | return updatedTags.sort();
|
566 | };
|
567 | const hmrComponent = (updatedTags, elm, versionId, cmpTagName) => {
|
568 |
|
569 |
|
570 |
|
571 | if (elm.nodeName.toLowerCase() === cmpTagName && typeof elm['s-hmr'] === 'function') {
|
572 | elm['s-hmr'](versionId);
|
573 | setHmrAttr(elm, versionId);
|
574 | if (updatedTags.indexOf(cmpTagName) === -1) {
|
575 | updatedTags.push(cmpTagName);
|
576 | }
|
577 | }
|
578 | if (hasShadowRoot(elm)) {
|
579 | hmrComponent(updatedTags, elm.shadowRoot, versionId, cmpTagName);
|
580 | }
|
581 | if (elm.children) {
|
582 | for (let i = 0; i < elm.children.length; i++) {
|
583 | hmrComponent(updatedTags, elm.children[i], versionId, cmpTagName);
|
584 | }
|
585 | }
|
586 | };
|
587 |
|
588 | const hmrExternalStyles = (elm, versionId, cssFileNames) => {
|
589 | if (isLinkStylesheet(elm)) {
|
590 | cssFileNames.forEach((cssFileName) => {
|
591 | hmrStylesheetLink(elm, versionId, cssFileName);
|
592 | });
|
593 | }
|
594 | if (isTemplate(elm)) {
|
595 | hmrExternalStyles(elm.content, versionId, cssFileNames);
|
596 | }
|
597 | if (hasShadowRoot(elm)) {
|
598 | hmrExternalStyles(elm.shadowRoot, versionId, cssFileNames);
|
599 | }
|
600 | if (elm.children) {
|
601 | for (let i = 0; i < elm.children.length; i++) {
|
602 | hmrExternalStyles(elm.children[i], versionId, cssFileNames);
|
603 | }
|
604 | }
|
605 | return cssFileNames.sort();
|
606 | };
|
607 | const hmrStylesheetLink = (styleSheetElm, versionId, cssFileName) => {
|
608 | const orgHref = styleSheetElm.getAttribute('href');
|
609 | const newHref = getHmrHref(versionId, cssFileName, styleSheetElm.href);
|
610 | if (newHref !== orgHref) {
|
611 | styleSheetElm.setAttribute('href', newHref);
|
612 | setHmrAttr(styleSheetElm, versionId);
|
613 | }
|
614 | };
|
615 |
|
616 | const hmrImages = (win, doc, versionId, imageFileNames) => {
|
617 | if (win.location.protocol !== 'file:' && doc.styleSheets) {
|
618 | hmrStyleSheetsImages(doc, versionId, imageFileNames);
|
619 | }
|
620 | hmrImagesElements(win, doc.documentElement, versionId, imageFileNames);
|
621 | return imageFileNames.sort();
|
622 | };
|
623 | const hmrStyleSheetsImages = (doc, versionId, imageFileNames) => {
|
624 | const cssImageProps = Object.keys(doc.documentElement.style).filter((cssProp) => {
|
625 | return cssProp.endsWith('Image');
|
626 | });
|
627 | for (let i = 0; i < doc.styleSheets.length; i++) {
|
628 | hmrStyleSheetImages(cssImageProps, doc.styleSheets[i], versionId, imageFileNames);
|
629 | }
|
630 | };
|
631 | const hmrStyleSheetImages = (cssImageProps, styleSheet, versionId, imageFileNames) => {
|
632 | try {
|
633 | const cssRules = styleSheet.cssRules;
|
634 | for (let i = 0; i < cssRules.length; i++) {
|
635 | const cssRule = cssRules[i];
|
636 | switch (cssRule.type) {
|
637 | case CSSRule.IMPORT_RULE:
|
638 | hmrStyleSheetImages(cssImageProps, cssRule.styleSheet, versionId, imageFileNames);
|
639 | break;
|
640 | case CSSRule.STYLE_RULE:
|
641 | hmrStyleSheetRuleImages(cssImageProps, cssRule, versionId, imageFileNames);
|
642 | break;
|
643 | case CSSRule.MEDIA_RULE:
|
644 | hmrStyleSheetImages(cssImageProps, cssRule, versionId, imageFileNames);
|
645 | break;
|
646 | }
|
647 | }
|
648 | }
|
649 | catch (e) {
|
650 | console.error('hmrStyleSheetImages: ' + e);
|
651 | }
|
652 | };
|
653 | const hmrStyleSheetRuleImages = (cssImageProps, cssRule, versionId, imageFileNames) => {
|
654 | cssImageProps.forEach((cssImageProp) => {
|
655 | imageFileNames.forEach((imageFileName) => {
|
656 | const oldCssText = cssRule.style[cssImageProp];
|
657 | const newCssText = updateCssUrlValue(versionId, imageFileName, oldCssText);
|
658 | if (oldCssText !== newCssText) {
|
659 | cssRule.style[cssImageProp] = newCssText;
|
660 | }
|
661 | });
|
662 | });
|
663 | };
|
664 | const hmrImagesElements = (win, elm, versionId, imageFileNames) => {
|
665 | const tagName = elm.nodeName.toLowerCase();
|
666 | if (tagName === 'img') {
|
667 | hmrImgElement(elm, versionId, imageFileNames);
|
668 | }
|
669 | if (isElement(elm)) {
|
670 | const styleAttr = elm.getAttribute('style');
|
671 | if (styleAttr) {
|
672 | hmrUpdateStyleAttr(elm, versionId, imageFileNames, styleAttr);
|
673 | }
|
674 | }
|
675 | if (tagName === 'style') {
|
676 | hmrUpdateStyleElementUrl(elm, versionId, imageFileNames);
|
677 | }
|
678 | if (win.location.protocol !== 'file:' && isLinkStylesheet(elm)) {
|
679 | hmrUpdateLinkElementUrl(elm, versionId, imageFileNames);
|
680 | }
|
681 | if (isTemplate(elm)) {
|
682 | hmrImagesElements(win, elm.content, versionId, imageFileNames);
|
683 | }
|
684 | if (hasShadowRoot(elm)) {
|
685 | hmrImagesElements(win, elm.shadowRoot, versionId, imageFileNames);
|
686 | }
|
687 | if (elm.children) {
|
688 | for (let i = 0; i < elm.children.length; i++) {
|
689 | hmrImagesElements(win, elm.children[i], versionId, imageFileNames);
|
690 | }
|
691 | }
|
692 | };
|
693 | const hmrImgElement = (imgElm, versionId, imageFileNames) => {
|
694 | imageFileNames.forEach((imageFileName) => {
|
695 | const orgSrc = imgElm.getAttribute('src');
|
696 | const newSrc = getHmrHref(versionId, imageFileName, orgSrc);
|
697 | if (newSrc !== orgSrc) {
|
698 | imgElm.setAttribute('src', newSrc);
|
699 | setHmrAttr(imgElm, versionId);
|
700 | }
|
701 | });
|
702 | };
|
703 | const hmrUpdateStyleAttr = (elm, versionId, imageFileNames, oldStyleAttr) => {
|
704 | imageFileNames.forEach((imageFileName) => {
|
705 | const newStyleAttr = updateCssUrlValue(versionId, imageFileName, oldStyleAttr);
|
706 | if (newStyleAttr !== oldStyleAttr) {
|
707 | elm.setAttribute('style', newStyleAttr);
|
708 | setHmrAttr(elm, versionId);
|
709 | }
|
710 | });
|
711 | };
|
712 | const hmrUpdateStyleElementUrl = (styleElm, versionId, imageFileNames) => {
|
713 | imageFileNames.forEach((imageFileName) => {
|
714 | const oldCssText = styleElm.innerHTML;
|
715 | const newCssText = updateCssUrlValue(versionId, imageFileName, oldCssText);
|
716 | if (newCssText !== oldCssText) {
|
717 | styleElm.innerHTML = newCssText;
|
718 | setHmrAttr(styleElm, versionId);
|
719 | }
|
720 | });
|
721 | };
|
722 | const hmrUpdateLinkElementUrl = (linkElm, versionId, imageFileNames) => {
|
723 | linkElm.href = setQueryString(linkElm.href, 's-hmr-urls', imageFileNames.sort().join(','));
|
724 | linkElm.href = setHmrQueryString(linkElm.href, versionId);
|
725 | linkElm.setAttribute('data-hmr', versionId);
|
726 | };
|
727 |
|
728 | const hmrInlineStyles = (elm, versionId, stylesUpdatedData) => {
|
729 | const stylesUpdated = stylesUpdatedData;
|
730 | if (isElement(elm) && elm.nodeName.toLowerCase() === 'style') {
|
731 | stylesUpdated.forEach((styleUpdated) => {
|
732 | hmrStyleElement(elm, versionId, styleUpdated);
|
733 | });
|
734 | }
|
735 | if (isTemplate(elm)) {
|
736 | hmrInlineStyles(elm.content, versionId, stylesUpdated);
|
737 | }
|
738 | if (hasShadowRoot(elm)) {
|
739 | hmrInlineStyles(elm.shadowRoot, versionId, stylesUpdated);
|
740 | }
|
741 | if (elm.children) {
|
742 | for (let i = 0; i < elm.children.length; i++) {
|
743 | hmrInlineStyles(elm.children[i], versionId, stylesUpdated);
|
744 | }
|
745 | }
|
746 | return stylesUpdated
|
747 | .map((s) => s.styleTag)
|
748 | .reduce((arr, v) => {
|
749 | if (arr.indexOf(v) === -1) {
|
750 | arr.push(v);
|
751 | }
|
752 | return arr;
|
753 | }, [])
|
754 | .sort();
|
755 | };
|
756 | const hmrStyleElement = (elm, versionId, stylesUpdated) => {
|
757 | const styleId = elm.getAttribute('sty-id');
|
758 | if (styleId === stylesUpdated.styleId && stylesUpdated.styleText) {
|
759 |
|
760 |
|
761 | elm.innerHTML = stylesUpdated.styleText.replace(/\\n/g, '\n');
|
762 | elm.setAttribute('data-hmr', versionId);
|
763 | }
|
764 | };
|
765 |
|
766 | const hmrWindow = (data) => {
|
767 | const results = {
|
768 | updatedComponents: [],
|
769 | updatedExternalStyles: [],
|
770 | updatedInlineStyles: [],
|
771 | updatedImages: [],
|
772 | versionId: '',
|
773 | };
|
774 | try {
|
775 | if (!data ||
|
776 | !data.window ||
|
777 | !data.window.document.documentElement ||
|
778 | !data.hmr ||
|
779 | typeof data.hmr.versionId !== 'string') {
|
780 | return results;
|
781 | }
|
782 | const win = data.window;
|
783 | const doc = win.document;
|
784 | const hmr = data.hmr;
|
785 | const documentElement = doc.documentElement;
|
786 | const versionId = hmr.versionId;
|
787 | results.versionId = versionId;
|
788 | if (hmr.componentsUpdated) {
|
789 | results.updatedComponents = hmrComponents(documentElement, versionId, hmr.componentsUpdated);
|
790 | }
|
791 | if (hmr.inlineStylesUpdated) {
|
792 | results.updatedInlineStyles = hmrInlineStyles(documentElement, versionId, hmr.inlineStylesUpdated);
|
793 | }
|
794 | if (hmr.externalStylesUpdated) {
|
795 | results.updatedExternalStyles = hmrExternalStyles(documentElement, versionId, hmr.externalStylesUpdated);
|
796 | }
|
797 | if (hmr.imagesUpdated) {
|
798 | results.updatedImages = hmrImages(win, doc, versionId, hmr.imagesUpdated);
|
799 | }
|
800 | setHmrAttr(documentElement, versionId);
|
801 | }
|
802 | catch (e) {
|
803 | console.error(e);
|
804 | }
|
805 | return results;
|
806 | };
|
807 |
|
808 | export { appError, clearAppErrorModal, emitBuildLog, emitBuildResults, emitBuildStatus, hmrWindow, initBuildProgress, initBuildStatus, logBuild, logDiagnostic, logDisabled, logReload, logWarn, onBuildLog, onBuildResults, onBuildStatus };
|