index.js 39 KB

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