@stencil/dev-server 0.0.19-1 → 5.0.0-alpha.10

package/dist/client/index.js

@@ -0,0 +1,1078 @@
+//#region src/client/constants.ts
+/**
+* Client-side constants for dev server.
+*/
+const DEV_SERVER_URL = "/~dev-server";
+const DEV_SERVER_INIT_URL = `${DEV_SERVER_URL}-init`;
+const OPEN_IN_EDITOR_URL = `${DEV_SERVER_URL}-open-in-editor`;
+const BUILD_LOG = "devserver:buildlog";
+const BUILD_RESULTS = "devserver:buildresults";
+const BUILD_STATUS = "devserver:buildstatus";
+const NODE_TYPE_ELEMENT = 1;
+const NODE_TYPE_DOCUMENT_FRAGMENT = 11;
+const RECONNECT_ATTEMPTS = 1e3;
+const RECONNECT_RETRY_MS = 2500;
+const NORMAL_CLOSURE_CODE = 1e3;
+const REQUEST_BUILD_RESULTS_INTERVAL_MS = 500;
+//#endregion
+//#region src/client/error.css?inline
+var error_default = "#dev-server-modal * {\n  box-sizing: border-box !important;\n}\n\n#dev-server-modal {\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizelegibility;\n  text-size-adjust: none;\n  word-wrap: break-word;\n  user-select: auto;\n  display: block;\n  z-index: 99999 !important;\n  -webkit-overflow-scrolling: touch !important;\n  direction: ltr !important;\n  background: #000000a8 !important;\n  width: 100% !important;\n  height: 100% !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  font-family: -apple-system, Roboto, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;\n  font-size: 14px !important;\n  line-height: 1.5 !important;\n  position: fixed !important;\n  top: 0 !important;\n  left: 0 !important;\n  overflow-y: auto !important;\n}\n\n#dev-server-modal-inner {\n  color: #333 !important;\n  background-color: #fff !important;\n  border-radius: 8px !important;\n  max-width: 80vw !important;\n  margin: 30px auto !important;\n  padding: 25px !important;\n  position: relative !important;\n  box-shadow: 0 10px 40px #00000080 !important;\n}\n\n.dev-server-diagnostic {\n  border: 1px solid #ddd !important;\n  border-radius: 3px !important;\n  margin: 20px !important;\n}\n\n.dev-server-diagnostic-masthead {\n  padding: 8px 12px 12px !important;\n}\n\n.dev-server-diagnostic-title {\n  color: #222 !important;\n  margin: 0 !important;\n  font-weight: bold !important;\n}\n\n.dev-server-diagnostic-message {\n  color: #555 !important;\n  margin-top: 4px !important;\n}\n\n.dev-server-diagnostic-file {\n  border-top: 1px solid #ddd !important;\n  position: relative !important;\n}\n\n.dev-server-diagnostic-file-header {\n  color: #555 !important;\n  background-color: #f9f9f9 !important;\n  border-bottom: 1px solid #ddd !important;\n  border-top-left-radius: 2px !important;\n  border-top-right-radius: 2px !important;\n  padding: 5px 10px !important;\n  font-family: Consolas, Liberation Mono, Menlo, Courier, monospace !important;\n  font-size: 12px !important;\n  display: block !important;\n}\n\na.dev-server-diagnostic-file-header {\n  color: #00e !important;\n  text-decoration: underline !important;\n}\n\na.dev-server-diagnostic-file-header:hover {\n  background-color: #f4f4f4 !important;\n  text-decoration: none !important;\n}\n\n.dev-server-diagnostic-file-name {\n  font-weight: bold !important;\n}\n\n.dev-server-diagnostic-blob {\n  border-bottom-right-radius: 3px !important;\n  border-bottom-left-radius: 3px !important;\n  overflow: auto hidden !important;\n}\n\n.dev-server-diagnostic-table {\n  -moz-tab-size: 2;\n  tab-size: 2;\n  border-spacing: 0 !important;\n  border-collapse: collapse !important;\n  border-style: none !important;\n  border-width: 0 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.dev-server-diagnostic-table td, .dev-server-diagnostic-table th {\n  border-style: none !important;\n  border-width: 0 !important;\n  padding: 0 !important;\n}\n\ntd.dev-server-diagnostic-blob-num {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  color: #0000004d !important;\n  text-align: right !important;\n  white-space: nowrap !important;\n  vertical-align: top !important;\n  border: 0 solid #eee !important;\n  border-right-width: 1px !important;\n  width: 1% !important;\n  min-width: 50px !important;\n  padding-left: 10px !important;\n  padding-right: 10px !important;\n  font-family: Consolas, Liberation Mono, Menlo, Courier, monospace !important;\n  font-size: 12px !important;\n  line-height: 20px !important;\n}\n\ntd.dev-server-diagnostic-blob-num:before {\n  content: attr(data-line-number) !important;\n}\n\n.dev-server-diagnostic-error-line td.dev-server-diagnostic-blob-num {\n  background-color: #fdd !important;\n  border-color: #ffc9c9 !important;\n}\n\n.dev-server-diagnostic-error-line td.dev-server-diagnostic-blob-code {\n  z-index: -1;\n  background: #ffdddd40 !important;\n}\n\n.dev-server-diagnostic-open-in-editor td.dev-server-diagnostic-blob-num:hover {\n  cursor: pointer;\n  font-weight: bold;\n  background-color: #ffffe3 !important;\n}\n\n.dev-server-diagnostic-open-in-editor.dev-server-diagnostic-error-line td.dev-server-diagnostic-blob-num:hover {\n  background-color: #ffdada !important;\n}\n\ntd.dev-server-diagnostic-blob-code {\n  vertical-align: top !important;\n  color: #333 !important;\n  word-wrap: normal !important;\n  white-space: pre !important;\n  padding-left: 10px !important;\n  padding-right: 10px !important;\n  font-family: Consolas, Liberation Mono, Menlo, Courier, monospace !important;\n  font-size: 12px !important;\n  line-height: 20px !important;\n  position: relative !important;\n  overflow: visible !important;\n}\n\ntd.dev-server-diagnostic-blob-code:before {\n  content: \"\" !important;\n}\n\n.dev-server-diagnostic-error-chr {\n  position: relative !important;\n}\n\n.dev-server-diagnostic-error-chr:before {\n  z-index: -1;\n  content: \"\" !important;\n  background-color: #fdd !important;\n  width: 8px !important;\n  height: 20px !important;\n  position: absolute !important;\n  top: -3px !important;\n  left: 0 !important;\n}\n\n.hljs-comment, .hljs-meta {\n  color: #969896;\n}\n\n.hljs-string, .hljs-variable, .hljs-template-variable, .hljs-strong, .hljs-emphasis, .hljs-quote {\n  color: #df5000;\n}\n\n.hljs-keyword, .hljs-selector-tag, .hljs-type {\n  color: #a71d5d;\n}\n\n.hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-attribute {\n  color: #0086b3;\n}\n\n.hljs-section, .hljs-name {\n  color: #63a35c;\n}\n\n.hljs-tag {\n  color: #333;\n}\n\n.hljs-title, .hljs-attr, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo {\n  color: #795da3;\n}\n\n.hljs-addition {\n  color: #55a532;\n  background-color: #eaffea;\n}\n\n.hljs-deletion {\n  color: #bd2c00;\n  background-color: #ffecec;\n}\n\n.hljs-link {\n  text-decoration: underline;\n}\n\n.dev-server-error-badge {\n  z-index: 99998 !important;\n  color: #fff !important;\n  cursor: pointer !important;\n  background: #f55 !important;\n  border: none !important;\n  border-radius: 8px !important;\n  align-items: center !important;\n  gap: 8px !important;\n  padding: 10px 16px !important;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;\n  font-size: 14px !important;\n  font-weight: 600 !important;\n  transition: transform .2s, box-shadow .2s !important;\n  display: flex !important;\n  position: fixed !important;\n  bottom: 20px !important;\n  left: 20px !important;\n  box-shadow: 0 4px 12px #0000004d !important;\n}\n\n.dev-server-error-badge:hover {\n  transform: translateY(-2px) !important;\n  box-shadow: 0 6px 16px #0006 !important;\n}\n\n.error-badge-icon {\n  color: #f55 !important;\n  background: #fff !important;\n  border-radius: 50% !important;\n  justify-content: center !important;\n  align-items: center !important;\n  width: 20px !important;\n  height: 20px !important;\n  font-size: 14px !important;\n  font-weight: bold !important;\n  display: flex !important;\n}\n\n.error-badge-count {\n  font-size: 14px !important;\n  font-weight: 600 !important;\n}\n";
+//#endregion
+//#region src/client/error.ts
+let errorCount = 0;
+const appError = (data) => {
+	const results = {
+		diagnostics: [],
+		status: null
+	};
+	if (data && data.window && Array.isArray(data.buildResults.diagnostics)) {
+		const diagnostics = data.buildResults.diagnostics.filter((diagnostic) => diagnostic.level === "error");
+		if (diagnostics.length > 0) {
+			errorCount = diagnostics.length;
+			const modal = getDevServerModal(data.window.document, data.openInEditor);
+			diagnostics.forEach((diagnostic) => {
+				results.diagnostics.push(diagnostic);
+				appendDiagnostic(data.window.document, data.openInEditor, modal, diagnostic);
+			});
+			removeErrorBadge(data.window.document);
+			results.status = "error";
+		}
+	}
+	return results;
+};
+const appendDiagnostic = (doc, openInEditor, modal, diagnostic) => {
+	const card = doc.createElement("div");
+	card.className = "dev-server-diagnostic";
+	const masthead = doc.createElement("div");
+	masthead.className = "dev-server-diagnostic-masthead";
+	masthead.title = `${escapeHtml(diagnostic.type)} error: ${escapeHtml(diagnostic.code ?? "unknown error")}`;
+	card.appendChild(masthead);
+	const title = doc.createElement("div");
+	title.className = "dev-server-diagnostic-title";
+	if (typeof diagnostic.header === "string" && diagnostic.header.trim().length > 0) title.textContent = diagnostic.header;
+	else title.textContent = `${titleCase(diagnostic.type)} ${titleCase(diagnostic.level)}`;
+	masthead.appendChild(title);
+	const message = doc.createElement("div");
+	message.className = "dev-server-diagnostic-message";
+	message.textContent = diagnostic.messageText;
+	masthead.appendChild(message);
+	const file = doc.createElement("div");
+	file.className = "dev-server-diagnostic-file";
+	card.appendChild(file);
+	const isUrl = typeof diagnostic.absFilePath === "string" && diagnostic.absFilePath.indexOf("http") === 0;
+	const canOpenInEditor = typeof openInEditor === "function" && typeof diagnostic.absFilePath === "string" && !isUrl;
+	if (isUrl) {
+		const fileHeader = doc.createElement("a");
+		fileHeader.href = diagnostic.absFilePath ?? "";
+		fileHeader.setAttribute("target", "_blank");
+		fileHeader.setAttribute("rel", "noopener noreferrer");
+		fileHeader.className = "dev-server-diagnostic-file-header";
+		const filePath = doc.createElement("span");
+		filePath.className = "dev-server-diagnostic-file-path";
+		filePath.textContent = diagnostic.absFilePath ?? "";
+		fileHeader.appendChild(filePath);
+		file.appendChild(fileHeader);
+	} else if (diagnostic.relFilePath) {
+		const fileHeader = doc.createElement(canOpenInEditor ? "a" : "div");
+		fileHeader.className = "dev-server-diagnostic-file-header";
+		if (diagnostic.absFilePath) {
+			fileHeader.title = escapeHtml(diagnostic.absFilePath);
+			if (canOpenInEditor) addOpenInEditor(openInEditor, fileHeader, diagnostic.absFilePath, diagnostic.lineNumber, diagnostic.columnNumber);
+		}
+		const parts = diagnostic.relFilePath.split("/");
+		const fileName = doc.createElement("span");
+		fileName.className = "dev-server-diagnostic-file-name";
+		fileName.textContent = parts.pop() ?? "";
+		const filePath = doc.createElement("span");
+		filePath.className = "dev-server-diagnostic-file-path";
+		filePath.textContent = parts.join("/") + "/";
+		fileHeader.appendChild(filePath);
+		fileHeader.appendChild(fileName);
+		file.appendChild(fileHeader);
+	}
+	if (diagnostic.lines && diagnostic.lines.length > 0) {
+		const blob = doc.createElement("div");
+		blob.className = "dev-server-diagnostic-blob";
+		file.appendChild(blob);
+		const table = doc.createElement("table");
+		table.className = "dev-server-diagnostic-table";
+		blob.appendChild(table);
+		prepareLines(diagnostic.lines).forEach((l) => {
+			const tr = doc.createElement("tr");
+			if (l.errorCharStart > 0) tr.classList.add("dev-server-diagnostic-error-line");
+			if (canOpenInEditor) tr.classList.add("dev-server-diagnostic-open-in-editor");
+			table.appendChild(tr);
+			const tdNum = doc.createElement("td");
+			tdNum.className = "dev-server-diagnostic-blob-num";
+			if (l.lineNumber > 0) {
+				tdNum.setAttribute("data-line-number", l.lineNumber + "");
+				tdNum.title = escapeHtml(diagnostic.relFilePath ?? "") + ", line " + l.lineNumber;
+				const maybeFile = diagnostic.absFilePath;
+				if (canOpenInEditor && maybeFile) {
+					const column = l.lineNumber === diagnostic.lineNumber ? diagnostic.columnNumber : 1;
+					addOpenInEditor(openInEditor, tdNum, maybeFile, l.lineNumber, column);
+				}
+			}
+			tr.appendChild(tdNum);
+			const tdCode = doc.createElement("td");
+			tdCode.className = "dev-server-diagnostic-blob-code";
+			tdCode.innerHTML = highlightError(l.text ?? "", l.errorCharStart, l.errorLength ?? 0);
+			tr.appendChild(tdCode);
+		});
+	}
+	modal.appendChild(card);
+};
+const addOpenInEditor = (openInEditor, elm, file, line, column) => {
+	if (elm.tagName === "A") elm.href = "#open-in-editor";
+	const lineNumber = typeof line !== "number" || line < 1 ? 1 : line;
+	const columnNumber = typeof column !== "number" || column < 1 ? 1 : column;
+	elm.addEventListener("click", (ev) => {
+		ev.preventDefault();
+		ev.stopPropagation();
+		openInEditor({
+			file,
+			line: lineNumber,
+			column: columnNumber
+		});
+	});
+};
+const getDevServerModal = (doc, _openInEditor) => {
+	let outer = doc.getElementById(DEV_SERVER_MODAL);
+	let isNewModal = false;
+	if (!outer) {
+		isNewModal = true;
+		outer = doc.createElement("div");
+		outer.id = DEV_SERVER_MODAL;
+		outer.setAttribute("role", "dialog");
+		doc.body.appendChild(outer);
+		outer.innerHTML = `<style>${error_default}</style><div id="${DEV_SERVER_MODAL}-inner"></div>`;
+		const closeOnEsc = (e) => {
+			if (e.key === "Escape" || e.code === "Escape") closeDevServerModal(doc);
+		};
+		doc.addEventListener("keydown", closeOnEsc);
+		outer.__closeOnEsc = closeOnEsc;
+		outer.addEventListener("click", (e) => {
+			if (e.target === outer) closeDevServerModal(doc);
+		});
+	}
+	outer.style.display = "block";
+	const inner = doc.getElementById(`${DEV_SERVER_MODAL}-inner`);
+	inner.innerHTML = "";
+	if (isNewModal) inner.addEventListener("click", (e) => {
+		e.stopPropagation();
+	});
+	return inner;
+};
+const closeDevServerModal = (doc) => {
+	const outer = doc.getElementById(DEV_SERVER_MODAL);
+	if (outer) {
+		outer.style.display = "none";
+		showErrorBadge(doc);
+	}
+};
+const clearAppErrorModal = (data) => {
+	const appErrorElm = data.window.document.getElementById(DEV_SERVER_MODAL);
+	if (appErrorElm) {
+		const closeOnEsc = appErrorElm.__closeOnEsc;
+		if (closeOnEsc) data.window.document.removeEventListener("keydown", closeOnEsc);
+		if (appErrorElm.parentNode) appErrorElm.parentNode.removeChild(appErrorElm);
+	}
+	removeErrorBadge(data.window.document);
+	errorCount = 0;
+};
+const showErrorBadge = (doc) => {
+	if (errorCount === 0) return;
+	let badge = doc.getElementById(ERROR_BADGE_ID);
+	if (!badge) {
+		badge = doc.createElement("button");
+		badge.id = ERROR_BADGE_ID;
+		badge.className = "dev-server-error-badge";
+		badge.setAttribute("aria-label", "Show build errors");
+		doc.body.appendChild(badge);
+		badge.addEventListener("click", () => {
+			const modal = doc.getElementById(DEV_SERVER_MODAL);
+			if (modal) {
+				modal.style.display = "block";
+				removeErrorBadge(doc);
+			}
+		});
+	}
+	badge.innerHTML = `<span class="error-badge-icon">!</span><span class="error-badge-count">${errorCount}</span>`;
+	badge.style.display = "flex";
+};
+const removeErrorBadge = (doc) => {
+	const badge = doc.getElementById(ERROR_BADGE_ID);
+	if (badge) badge.style.display = "none";
+};
+const escapeHtml = (unsafe) => {
+	if (typeof unsafe === "number" || typeof unsafe === "boolean") return unsafe.toString();
+	if (typeof unsafe === "string") return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+	return "";
+};
+const titleCase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+const highlightError = (text, errorCharStart, errorLength) => {
+	if (typeof text !== "string") return "";
+	const errorCharEnd = errorCharStart + errorLength;
+	return text.split("").map((inputChar, charIndex) => {
+		let outputChar;
+		if (inputChar === `<`) outputChar = `&lt;`;
+		else if (inputChar === `>`) outputChar = `&gt;`;
+		else if (inputChar === `"`) outputChar = `&quot;`;
+		else if (inputChar === `'`) outputChar = `&#039;`;
+		else if (inputChar === `&`) outputChar = `&amp;`;
+		else outputChar = inputChar;
+		if (charIndex >= errorCharStart && charIndex < errorCharEnd) outputChar = `<span class="dev-server-diagnostic-error-chr">${outputChar}</span>`;
+		return outputChar;
+	}).join("");
+};
+const prepareLines = (orgLines) => {
+	const lines = JSON.parse(JSON.stringify(orgLines));
+	for (let x = 0; x < 100; x++) {
+		if (!eachLineHasLeadingWhitespace(lines)) return lines;
+		for (let i = 0; i < lines.length; i++) {
+			lines[i].text = lines[i].text?.slice(1) ?? "";
+			lines[i].errorCharStart--;
+			if (!lines[i].text?.length) return lines;
+		}
+	}
+	return lines;
+};
+const eachLineHasLeadingWhitespace = (lines) => {
+	if (!lines.length) return false;
+	for (let i = 0; i < lines.length; i++) {
+		if (!lines[i].text || (lines[i].text?.length ?? 0) < 1) return false;
+		const firstChar = lines[i].text?.charAt(0);
+		if (firstChar !== " " && firstChar !== "	") return false;
+	}
+	return true;
+};
+const DEV_SERVER_MODAL = `dev-server-modal`;
+const ERROR_BADGE_ID = "dev-server-error-badge";
+//#endregion
+//#region src/client/events.ts
+/**
+* Client-side event system for dev server.
+*/
+const emitBuildLog = (win, buildLog) => {
+	win.dispatchEvent(new CustomEvent(BUILD_LOG, { detail: buildLog }));
+};
+const emitBuildResults = (win, buildResults) => {
+	win.dispatchEvent(new CustomEvent(BUILD_RESULTS, { detail: buildResults }));
+};
+const emitBuildStatus = (win, buildStatus) => {
+	win.dispatchEvent(new CustomEvent(BUILD_STATUS, { detail: buildStatus }));
+};
+const onBuildLog = (win, cb) => {
+	win.addEventListener(BUILD_LOG, ((ev) => {
+		cb(ev.detail);
+	}));
+};
+const onBuildResults = (win, cb) => {
+	win.addEventListener(BUILD_RESULTS, ((ev) => {
+		cb(ev.detail);
+	}));
+};
+const onBuildStatus = (win, cb) => {
+	win.addEventListener(BUILD_STATUS, ((ev) => {
+		cb(ev.detail);
+	}));
+};
+//#endregion
+//#region src/client/hmr/utils.ts
+const getHmrHref = (versionId, fileName, testUrl) => {
+	if (typeof testUrl === "string" && testUrl.trim() !== "") {
+		if (getUrlFileName(fileName) === getUrlFileName(testUrl)) return setHmrQueryString(testUrl, versionId);
+	}
+	return testUrl;
+};
+const getUrlFileName = (url) => {
+	const splt = url.split("/");
+	return splt[splt.length - 1].split("&")[0].split("?")[0];
+};
+const parseQuerystring = (oldQs) => {
+	const newQs = {};
+	if (typeof oldQs === "string") oldQs.split("&").forEach((kv) => {
+		const splt = kv.split("=");
+		newQs[splt[0]] = splt[1] ? splt[1] : "";
+	});
+	return newQs;
+};
+const stringifyQuerystring = (qs) => Object.keys(qs).map((key) => key + "=" + qs[key]).join("&");
+const setQueryString = (url, qsKey, qsValue) => {
+	const urlSplt = url.split("?");
+	const urlPath = urlSplt[0];
+	const qs = parseQuerystring(urlSplt[1]);
+	qs[qsKey] = qsValue;
+	return urlPath + "?" + stringifyQuerystring(qs);
+};
+const setHmrQueryString = (url, versionId) => setQueryString(url, "s-hmr", versionId);
+const updateCssUrlValue = (versionId, fileName, oldCss) => {
+	const reg = /url\((['"]?)(.*)\1\)/gi;
+	let result;
+	let newCss = oldCss;
+	while ((result = reg.exec(oldCss)) !== null) {
+		const url = result[2];
+		newCss = newCss.replace(url, getHmrHref(versionId, fileName, url));
+	}
+	return newCss;
+};
+/**
+* Determine whether a given element is a `<link>` tag pointing to a stylesheet
+*
+* @param elm the element to check
+* @returns whether or not the element is a link stylesheet
+*/
+const isLinkStylesheet = (elm) => elm.nodeName.toLowerCase() === "link" && !!elm.href && !!elm.rel && elm.rel.toLowerCase() === "stylesheet";
+/**
+* Determine whether or not a given element is a template element
+*
+* @param elm the element to check
+* @returns whether or not the element of interest is a template element
+*/
+const isTemplate = (elm) => elm.nodeName.toLowerCase() === "template" && !!elm.content && elm.content.nodeType === 11;
+/**
+* Set a new hmr version ID into the `data-hmr` attribute on an element.
+*
+* @param elm the element on which to set the property
+* @param versionId a new HMR version id
+*/
+const setHmrAttr = (elm, versionId) => {
+	elm.setAttribute("data-hmr", versionId);
+};
+/**
+* Determine whether or not an element has a shadow root
+*
+* @param elm the element to check
+* @returns whether or not it has a shadow root
+*/
+const hasShadowRoot = (elm) => !!elm.shadowRoot && elm.shadowRoot.nodeType === 11 && elm.shadowRoot !== elm;
+/**
+* Determine whether or not an element is an element node
+*
+* @param elm the element to check
+* @returns whether or not it is an element node
+*/
+const isElement = (elm) => !!elm && elm.nodeType === 1 && !!elm.getAttribute;
+//#endregion
+//#region src/client/hmr/component.ts
+const hmrComponents = (element, versionId, hmrTagNames) => {
+	const updatedTags = [];
+	hmrTagNames.forEach((hmrTagName) => {
+		hmrComponent(updatedTags, element, versionId, hmrTagName);
+	});
+	return updatedTags.sort();
+};
+const hmrComponent = (updatedTags, element, versionId, cmpTagName) => {
+	if (element.nodeName.toLowerCase() === cmpTagName && typeof element["s-hmr"] === "function") {
+		element["s-hmr"](versionId);
+		setHmrAttr(element, versionId);
+		if (updatedTags.indexOf(cmpTagName) === -1) updatedTags.push(cmpTagName);
+	}
+	if (hasShadowRoot(element)) hmrComponent(updatedTags, element.shadowRoot, versionId, cmpTagName);
+	if (element.children) for (let i = 0; i < element.children.length; i++) hmrComponent(updatedTags, element.children[i], versionId, cmpTagName);
+};
+//#endregion
+//#region src/client/hmr/image.ts
+const hmrImages = (win, doc, versionId, imageFileNames) => {
+	if (win.location.protocol !== "file:" && doc.styleSheets) hmrStyleSheetsImages(doc, versionId, imageFileNames);
+	hmrImagesElements(win, doc.documentElement, versionId, imageFileNames);
+	return imageFileNames.sort();
+};
+const hmrStyleSheetsImages = (doc, versionId, imageFileNames) => {
+	const cssImageProps = Object.keys(doc.documentElement.style).filter((cssProp) => {
+		return cssProp.endsWith("Image");
+	});
+	for (let i = 0; i < doc.styleSheets.length; i++) hmrStyleSheetImages(cssImageProps, doc.styleSheets[i], versionId, imageFileNames);
+};
+const hmrStyleSheetImages = (cssImageProps, styleSheet, versionId, imageFileNames) => {
+	try {
+		const cssRules = styleSheet.cssRules;
+		for (let i = 0; i < cssRules.length; i++) {
+			const cssRule = cssRules[i];
+			switch (cssRule.type) {
+				case CSSRule.IMPORT_RULE:
+					hmrStyleSheetImages(cssImageProps, cssRule.styleSheet, versionId, imageFileNames);
+					break;
+				case CSSRule.STYLE_RULE:
+					hmrStyleSheetRuleImages(cssImageProps, cssRule, versionId, imageFileNames);
+					break;
+				case CSSRule.MEDIA_RULE:
+					hmrStyleSheetImages(cssImageProps, cssRule, versionId, imageFileNames);
+					break;
+			}
+		}
+	} catch (e) {
+		console.error("hmrStyleSheetImages:", e);
+	}
+};
+const hmrStyleSheetRuleImages = (cssImageProps, cssRule, versionId, imageFileNames) => {
+	cssImageProps.forEach((cssImageProp) => {
+		imageFileNames.forEach((imageFileName) => {
+			const oldCssText = cssRule.style[cssImageProp];
+			const newCssText = updateCssUrlValue(versionId, imageFileName, oldCssText);
+			if (oldCssText !== newCssText) cssRule.style[cssImageProp] = newCssText;
+		});
+	});
+};
+const hmrImagesElements = (win, elm, versionId, imageFileNames) => {
+	const tagName = elm.nodeName.toLowerCase();
+	if (tagName === "img") hmrImgElement(elm, versionId, imageFileNames);
+	if (isElement(elm)) {
+		const styleAttr = elm.getAttribute("style");
+		if (styleAttr) hmrUpdateStyleAttr(elm, versionId, imageFileNames, styleAttr);
+	}
+	if (tagName === "style") hmrUpdateStyleElementUrl(elm, versionId, imageFileNames);
+	if (win.location.protocol !== "file:" && isLinkStylesheet(elm)) hmrUpdateLinkElementUrl(elm, versionId, imageFileNames);
+	if (isTemplate(elm)) hmrImagesElements(win, elm.content, versionId, imageFileNames);
+	if (hasShadowRoot(elm)) hmrImagesElements(win, elm.shadowRoot, versionId, imageFileNames);
+	if (elm.children) for (let i = 0; i < elm.children.length; i++) hmrImagesElements(win, elm.children[i], versionId, imageFileNames);
+};
+const hmrImgElement = (imgElm, versionId, imageFileNames) => {
+	imageFileNames.forEach((imageFileName) => {
+		const orgSrc = imgElm.getAttribute("src");
+		const newSrc = getHmrHref(versionId, imageFileName, orgSrc || "");
+		if (newSrc !== orgSrc) {
+			imgElm.setAttribute("src", newSrc);
+			setHmrAttr(imgElm, versionId);
+		}
+	});
+};
+const hmrUpdateStyleElementUrl = (styleElm, versionId, imageFileNames) => {
+	imageFileNames.forEach((imageFileName) => {
+		const oldCssText = styleElm.innerHTML;
+		const newCssText = updateCssUrlValue(versionId, imageFileName, oldCssText);
+		if (newCssText !== oldCssText) {
+			styleElm.innerHTML = newCssText;
+			setHmrAttr(styleElm, versionId);
+		}
+	});
+};
+const hmrUpdateLinkElementUrl = (linkElm, versionId, imageFileNames) => {
+	linkElm.href = setQueryString(linkElm.href, "s-hmr-urls", imageFileNames.sort().join(","));
+	linkElm.href = setHmrQueryString(linkElm.href, versionId);
+	linkElm.setAttribute("data-hmr", versionId);
+};
+const hmrUpdateStyleAttr = (elm, versionId, imageFileNames, oldStyleAttr) => {
+	imageFileNames.forEach((imageFileName) => {
+		const newStyleAttr = updateCssUrlValue(versionId, imageFileName, oldStyleAttr);
+		if (newStyleAttr !== oldStyleAttr) {
+			elm.setAttribute("style", newStyleAttr);
+			setHmrAttr(elm, versionId);
+		}
+	});
+};
+//#endregion
+//#region src/client/hmr/style.ts
+const STYLE_ID_ATTR = "sty-id";
+const hmrExternalStyles = (elm, versionId, cssFileNames) => {
+	if (isLinkStylesheet(elm)) cssFileNames.forEach((cssFileName) => {
+		hmrStylesheetLink(elm, versionId, cssFileName);
+	});
+	if (isTemplate(elm)) hmrExternalStyles(elm.content, versionId, cssFileNames);
+	if (hasShadowRoot(elm)) hmrExternalStyles(elm.shadowRoot, versionId, cssFileNames);
+	if (elm.children) for (let i = 0; i < elm.children.length; i++) hmrExternalStyles(elm.children[i], versionId, cssFileNames);
+	return cssFileNames.sort();
+};
+const hmrStylesheetLink = (styleSheetElm, versionId, cssFileName) => {
+	const orgHref = styleSheetElm.getAttribute("href");
+	const newHref = getHmrHref(versionId, cssFileName, styleSheetElm.href);
+	if (newHref !== orgHref) {
+		styleSheetElm.setAttribute("href", newHref);
+		setHmrAttr(styleSheetElm, versionId);
+	}
+};
+const hmrInlineStyles = (elm, versionId, stylesUpdatedData) => {
+	const trackers = stylesUpdatedData.map((styleUpdate) => ({
+		styleUpdate,
+		updated: false
+	}));
+	hmrInlineStylesTraverse(elm, versionId, trackers);
+	for (const tracker of trackers) if (!tracker.updated && tracker.styleUpdate.styleText) createStyleElementsForComponent(elm, versionId, tracker.styleUpdate);
+	return stylesUpdatedData.map((s) => s.styleTag).reduce((arr, v) => {
+		if (arr.indexOf(v) === -1) arr.push(v);
+		return arr;
+	}, []).sort();
+};
+/**
+* Traverse the DOM looking for style elements to update or remove.
+* @param elm - the element to start traversal from
+* @param versionId - the HMR version identifier
+* @param trackers - the style update trackers
+*/
+const hmrInlineStylesTraverse = (elm, versionId, trackers) => {
+	if (isElement(elm) && elm.nodeName.toLowerCase() === "style") trackers.forEach((tracker) => {
+		if (hmrStyleElement(elm, versionId, tracker.styleUpdate)) tracker.updated = true;
+	});
+	if (isTemplate(elm)) hmrInlineStylesTraverse(elm.content, versionId, trackers);
+	if (hasShadowRoot(elm)) hmrInlineStylesTraverse(elm.shadowRoot, versionId, trackers);
+	if (elm.children) for (let i = 0; i < elm.children.length; i++) hmrInlineStylesTraverse(elm.children[i], versionId, trackers);
+};
+const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
+/**
+* Update or remove a style element based on the HMR update.
+* @param elm - the style element to update
+* @param versionId - the HMR version identifier
+* @param stylesUpdated - the HMR style update data
+* @returns true if this element matched and was processed
+*/
+const hmrStyleElement = (elm, versionId, stylesUpdated) => {
+	if (elm.getAttribute(STYLE_ID_ATTR) === stylesUpdated.styleId) {
+		if (stylesUpdated.styleText) {
+			const slotFbSuffix = elm.hasAttribute("data-slot-fb") ? SLOT_FB_CSS : "";
+			elm.innerHTML = stylesUpdated.styleText.replace(/\\n/g, "\n") + slotFbSuffix;
+			elm.setAttribute("data-hmr", versionId);
+		} else elm.remove();
+		return true;
+	}
+	return false;
+};
+/**
+* Find all component instances with the matching tag name and create style elements.
+* Handles both shadow DOM components (style in shadow root) and scoped components (style in head).
+* @param rootElm - the root element to search from
+* @param versionId - the HMR version identifier
+* @param styleUpdate - the HMR style update data
+*/
+const createStyleElementsForComponent = (rootElm, versionId, styleUpdate) => {
+	const { styleTag, styleId, styleText } = styleUpdate;
+	const doc = rootElm.ownerDocument;
+	const componentInstances = findComponentInstances(rootElm, styleTag);
+	if (componentInstances.length === 0) {
+		createStyleElement(doc.head, styleId, styleText, versionId);
+		return;
+	}
+	const processedShadowRoots = /* @__PURE__ */ new Set();
+	let addedToHead = false;
+	for (const instance of componentInstances) if (instance.shadowRoot) {
+		if (!processedShadowRoots.has(instance.shadowRoot)) {
+			processedShadowRoots.add(instance.shadowRoot);
+			createStyleElement(instance.shadowRoot, styleId, styleText, versionId);
+		}
+	} else if (!addedToHead) {
+		addedToHead = true;
+		createStyleElement(doc.head, styleId, styleText, versionId);
+	}
+};
+/**
+* Find all instances of a component by tag name, including in shadow roots.
+* @param elm - the element to search from
+* @param tagName - the tag name to search for
+* @returns an array of matching elements
+*/
+const findComponentInstances = (elm, tagName) => {
+	const instances = [];
+	findComponentInstancesTraverse(elm, tagName.toLowerCase(), instances);
+	return instances;
+};
+const findComponentInstancesTraverse = (elm, tagName, instances) => {
+	if (elm.nodeName.toLowerCase() === tagName) instances.push(elm);
+	if (hasShadowRoot(elm)) findComponentInstancesTraverse(elm.shadowRoot, tagName, instances);
+	if (elm.children) for (let i = 0; i < elm.children.length; i++) findComponentInstancesTraverse(elm.children[i], tagName, instances);
+};
+/**
+* Create a new style element with the given content.
+* @param container - the container to insert the style element into
+* @param styleId - the style identifier
+* @param styleText - the CSS content
+* @param versionId - the HMR version identifier
+*/
+const createStyleElement = (container, styleId, styleText, versionId) => {
+	const styleElm = ("ownerDocument" in container ? container.ownerDocument : container.ownerDocument).createElement("style");
+	styleElm.innerHTML = styleText.replace(/\\n/g, "\n");
+	styleElm.setAttribute(STYLE_ID_ATTR, styleId);
+	styleElm.setAttribute("data-hmr", versionId);
+	if (container.firstChild) container.insertBefore(styleElm, container.firstChild);
+	else container.appendChild(styleElm);
+};
+//#endregion
+//#region src/client/hmr/window.ts
+const hmrWindow = (data) => {
+	const results = {
+		updatedComponents: [],
+		updatedExternalStyles: [],
+		updatedInlineStyles: [],
+		updatedImages: [],
+		versionId: ""
+	};
+	try {
+		if (!data || !data.window || !data.window.document.documentElement || !data.hmr || typeof data.hmr.versionId !== "string") return results;
+		const win = data.window;
+		const doc = win.document;
+		const hmr = data.hmr;
+		const documentElement = doc.documentElement;
+		const versionId = hmr.versionId;
+		results.versionId = versionId;
+		if (hmr.componentsUpdated) results.updatedComponents = hmrComponents(documentElement, versionId, hmr.componentsUpdated);
+		if (hmr.inlineStylesUpdated) results.updatedInlineStyles = hmrInlineStyles(documentElement, versionId, hmr.inlineStylesUpdated);
+		if (hmr.externalStylesUpdated) results.updatedExternalStyles = hmrExternalStyles(documentElement, versionId, hmr.externalStylesUpdated);
+		if (hmr.imagesUpdated) results.updatedImages = hmrImages(win, doc, versionId, hmr.imagesUpdated);
+		setHmrAttr(documentElement, versionId);
+	} catch (e) {
+		console.error(e);
+	}
+	return results;
+};
+//#endregion
+//#region src/client/logger.ts
+const YELLOW = "#f39c12";
+const RED = "#c0392b";
+const BLUE = "#3498db";
+const GRAY = "#717171";
+const log = (color, prefix, msg) => {
+	console.log("%c" + prefix, `background: ${color}; color: white; padding: 2px 3px; border-radius: 2px; font-size: 0.8em;`, msg);
+};
+const logBuild = (msg) => log(BLUE, "Build", msg);
+const logReload = (msg) => logWarn("Reload", msg);
+const logWarn = (prefix, msg) => log(YELLOW, prefix, msg);
+const logDisabled = (prefix, msg) => log(GRAY, prefix, msg);
+const logDiagnostic = (diag) => {
+	let color = RED;
+	let prefix = "Error";
+	if (diag.level === "warn") {
+		color = YELLOW;
+		prefix = "Warning";
+	}
+	if (diag.header) prefix = diag.header;
+	let msg = "";
+	if (diag.relFilePath) {
+		msg += diag.relFilePath;
+		if (typeof diag.lineNumber === "number" && diag.lineNumber > 0) {
+			msg += ", line " + diag.lineNumber;
+			if (typeof diag.columnNumber === "number" && diag.columnNumber > 0) msg += ", column " + diag.columnNumber;
+		}
+		msg += "\n";
+	}
+	msg += diag.messageText;
+	log(color, prefix, msg);
+};
+//#endregion
+//#region src/client/status.ts
+/**
+* Build status and favicon utilities for dev server client.
+*/
+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=";
+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=";
+const ICON_ERROR = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAAkFBMVEUAAAD5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0H5Q0HYvLBZAAAAL3RSTlMAsGDjA/rsC/ElHRUBBssz9pFCvoh0UEcsD9ec3K19OLiiaNLEYlmoVeiCbmE+GuMl4I8AAAKQSURBVHja7d1njupQDIZhAimEUIZQQu9taN7/7q50pfl/TmTJtvQ9q3hzLDsEAAAAAAAAAACGzFjKiTS0WcqONMxZypg0fH5YyLFPChZdFnIYkILil4VcclLw3bCQ85KULM8sZPMlBfmFhfwWpGBwYCHdESnoH1nIz4c0jFnKnDTsWEqbNJxYyow03FjKlDTUKQtZqwTQXizgtgkpWGQsZKIScL0OCxmqBFC5EQugkhQshyyk0yMFgwkLyRakIGmJBdCeFPTXLCStScOUpdwogsEXrBdpuLKUJ4XDC9afKmUh94QUjLy/YGViAZRTOIMBtypJQXn2HUC5WMBleMFqILmzkLSicBZfsB6k4clSrqTh5XyEd3MeQHXqe4Qn94LVSiicwRHkJScNdVvKkgAAwI+qZdM0/AXFpE4v+AXFpKwIfkExKfR7ulyxSWkV/IJi0zx4BGbTm4IkW7ZpFjwCs2kaPAKzad0PHYHZtE1CR2A2TQahIzCbhnnwCMykVYmAi4aAQ8BZ4T3grgi4BhBwCDgbEHCNIOAQcCYg4BpCwCHgLEDAaYgPuDfbhIBrBAGHgDMhNOBo2rKpIgAA8KNoS6kplq2dsu6CFJQr30vd+dD3Uvf/nTLHS93J3flZwrHznaad852mE/veaXqw752mKvW90zTq+j5LWGS+r/J8xQKoU1AUa2chm1zlsXQWUifgkoPvgOsffQccjZ0H3Mx5wL2dB9zcecB9sJTePOBM3cU+46wiziq6C7hk6zvg3J9VfDK7vir0ch5wN+cBV6e+A27v/ccgme+AkxshTXKKYW6EFH0X29gIKTLgzI2QYgPO2ggpLuDsvaDEBZy9EVJcwBkcIT0IAAAAAAAAAADs+AdjeyF69/r87QAAAABJRU5ErkJggg==";
+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=";
+const ICON_TYPE = "image/x-icon";
+const initBuildStatus = (data) => {
+	const win = data.window;
+	const doc = win.document;
+	getFavIcons(doc).forEach((iconElm) => {
+		if (iconElm.href) {
+			iconElm.dataset.href = iconElm.href;
+			iconElm.dataset.type = iconElm.type;
+		}
+	});
+	onBuildStatus(win, (buildStatus) => {
+		updateBuildStatus(doc, buildStatus);
+	});
+};
+const updateBuildStatus = (doc, status) => {
+	getFavIcons(doc).forEach((iconElm) => {
+		updateFavIcon(iconElm, status);
+	});
+};
+const updateFavIcon = (linkElm, status) => {
+	if (status === "pending") {
+		linkElm.href = ICON_PENDING;
+		linkElm.type = ICON_TYPE;
+		linkElm.setAttribute("data-status", status);
+	} else if (status === "error") {
+		linkElm.href = ICON_ERROR;
+		linkElm.type = ICON_TYPE;
+		linkElm.setAttribute("data-status", status);
+	} else if (status === "disabled") {
+		linkElm.href = ICON_DISABLED;
+		linkElm.type = ICON_TYPE;
+		linkElm.setAttribute("data-status", status);
+	} else {
+		linkElm.removeAttribute("data-status");
+		if (linkElm.dataset.href) {
+			linkElm.href = linkElm.dataset.href;
+			linkElm.type = linkElm.dataset.type || ICON_TYPE;
+		} else {
+			linkElm.href = ICON_DEFAULT;
+			linkElm.type = ICON_TYPE;
+		}
+	}
+};
+const getFavIcons = (doc) => {
+	const iconElms = [];
+	const linkElms = doc.querySelectorAll("link");
+	for (let i = 0; i < linkElms.length; i++) if (linkElms[i].href && linkElms[i].rel && (linkElms[i].rel.indexOf("shortcut") > -1 || linkElms[i].rel.indexOf("icon") > -1)) iconElms.push(linkElms[i]);
+	if (iconElms.length === 0) {
+		const linkElm = doc.createElement("link");
+		linkElm.rel = "shortcut icon";
+		doc.head.appendChild(linkElm);
+		iconElms.push(linkElm);
+	}
+	return iconElms;
+};
+const PROGRESS_BAR_ID = `dev-server-progress-bar`;
+const initBuildProgress = (data) => {
+	const win = data.window;
+	const doc = win.document;
+	const barColor = `#5851ff`;
+	const errorColor = `#b70c19`;
+	let addBarTimerId;
+	let removeBarTimerId;
+	let opacityTimerId;
+	let incIntervalId;
+	let progressIncrease;
+	let currentProgress = 0;
+	function update() {
+		clearTimeout(opacityTimerId);
+		clearTimeout(removeBarTimerId);
+		const progressBar = getProgressBar();
+		if (!progressBar) {
+			createProgressBar();
+			addBarTimerId = setTimeout(update, 16);
+			return;
+		}
+		progressBar.style.background = barColor;
+		progressBar.style.opacity = `1`;
+		progressBar.style.transform = `scaleX(${Math.min(1, displayProgress())})`;
+		if (incIntervalId == null) incIntervalId = setInterval(() => {
+			progressIncrease += Math.random() * .05 + .01;
+			if (displayProgress() < .9) update();
+			else clearInterval(incIntervalId);
+		}, 800);
+	}
+	function reset() {
+		clearInterval(incIntervalId);
+		progressIncrease = .05;
+		incIntervalId = null;
+		clearTimeout(opacityTimerId);
+		clearTimeout(addBarTimerId);
+		clearTimeout(removeBarTimerId);
+		let progressBar = getProgressBar();
+		if (progressBar) {
+			if (currentProgress >= 1) progressBar.style.transform = `scaleX(1)`;
+			opacityTimerId = setTimeout(() => {
+				try {
+					progressBar = getProgressBar();
+					if (progressBar) progressBar.style.opacity = `0`;
+				} catch {}
+			}, 150);
+			removeBarTimerId = setTimeout(() => {
+				try {
+					progressBar = getProgressBar();
+					if (progressBar?.parentNode) progressBar.parentNode.removeChild(progressBar);
+				} catch {}
+			}, 1e3);
+		}
+	}
+	function displayProgress() {
+		const p = currentProgress + progressIncrease;
+		return Math.max(0, Math.min(1, p));
+	}
+	reset();
+	onBuildLog(win, (buildLog) => {
+		currentProgress = buildLog.progress;
+		if (currentProgress >= 0 && currentProgress < 1) update();
+		else reset();
+	});
+	onBuildResults(win, (buildResults) => {
+		if (buildResults.hasError) {
+			const progressBar = getProgressBar();
+			if (progressBar) {
+				progressBar.style.transform = `scaleX(1)`;
+				progressBar.style.background = errorColor;
+			}
+		}
+		reset();
+	});
+	onBuildStatus(win, (buildStatus) => {
+		if (buildStatus === "disabled") reset();
+	});
+	if (doc.head.dataset.tmpl === "tmpl-initial-load") update();
+	function getProgressBar() {
+		return doc.getElementById(PROGRESS_BAR_ID);
+	}
+	function createProgressBar() {
+		const progressBar = doc.createElement("div");
+		progressBar.id = PROGRESS_BAR_ID;
+		progressBar.style.position = `absolute`;
+		progressBar.style.top = `0`;
+		progressBar.style.left = `0`;
+		progressBar.style.zIndex = `100001`;
+		progressBar.style.width = `100%`;
+		progressBar.style.height = `2px`;
+		progressBar.style.transform = `scaleX(0)`;
+		progressBar.style.opacity = `1`;
+		progressBar.style.background = barColor;
+		progressBar.style.transformOrigin = `left center`;
+		progressBar.style.transition = `transform .1s ease-in-out, opacity .5s ease-in`;
+		progressBar.style.contain = `strict`;
+		doc.body.appendChild(progressBar);
+	}
+};
+//#endregion
+//#region src/client/websocket.ts
+/**
+* WebSocket client for dev server communication.
+*/
+const initClientWebSocket = (win, config) => {
+	let clientWs = null;
+	let reconnectTmrId = null;
+	let reconnectAttempts = 0;
+	let requestBuildResultsTmrId = null;
+	let hasGottenBuildResults = false;
+	let buildResultsRequests = 0;
+	function onOpen() {
+		if (reconnectAttempts > 0) emitBuildStatus(win, "pending");
+		if (!hasGottenBuildResults) requestBuildResultsTmrId = setInterval(() => {
+			buildResultsRequests++;
+			if (!hasGottenBuildResults && this.readyState === WebSocket.OPEN && buildResultsRequests < 500) this.send(JSON.stringify({ requestBuildResults: true }));
+			else if (requestBuildResultsTmrId) clearInterval(requestBuildResultsTmrId);
+		}, 500);
+		if (reconnectTmrId) clearTimeout(reconnectTmrId);
+	}
+	function onError() {
+		queueReconnect();
+	}
+	function onClose(event) {
+		emitBuildStatus(win, "disabled");
+		if (event.code > 1e3) logWarn("Dev Server", `web socket closed: ${event.code} ${event.reason}`);
+		else logDisabled("Dev Server", "Disconnected, attempting to reconnect...");
+		queueReconnect();
+	}
+	function onMessage(event) {
+		const msg = JSON.parse(event.data);
+		if (reconnectAttempts > 0) {
+			if (msg.isActivelyBuilding) return;
+			if (msg.buildResults) {
+				logReload("Reconnected to dev server");
+				hasGottenBuildResults = true;
+				buildResultsRequests = 0;
+				if (requestBuildResultsTmrId) clearInterval(requestBuildResultsTmrId);
+				if (win["s-build-id"] !== msg.buildResults.buildId) win.location.reload();
+				win["s-build-id"] = msg.buildResults.buildId;
+				return;
+			}
+		}
+		if (msg.buildLog) {
+			if (msg.buildLog.progress < 1) emitBuildStatus(win, "pending");
+			emitBuildLog(win, msg.buildLog);
+			return;
+		}
+		if (msg.buildResults) {
+			hasGottenBuildResults = true;
+			buildResultsRequests = 0;
+			if (requestBuildResultsTmrId) clearInterval(requestBuildResultsTmrId);
+			emitBuildStatus(win, "default");
+			emitBuildResults(win, msg.buildResults);
+		}
+	}
+	function connect() {
+		if (reconnectTmrId) clearTimeout(reconnectTmrId);
+		clientWs = new win.WebSocket(config.socketUrl, ["xmpp"]);
+		clientWs.addEventListener("open", onOpen);
+		clientWs.addEventListener("error", onError);
+		clientWs.addEventListener("close", onClose);
+		clientWs.addEventListener("message", onMessage);
+	}
+	function queueReconnect() {
+		hasGottenBuildResults = false;
+		if (clientWs) {
+			if (clientWs.readyState === WebSocket.OPEN || clientWs.readyState === WebSocket.CONNECTING) clientWs.close(NORMAL_CLOSURE_CODE);
+			clientWs.removeEventListener("open", onOpen);
+			clientWs.removeEventListener("error", onError);
+			clientWs.removeEventListener("close", onClose);
+			clientWs.removeEventListener("message", onMessage);
+			clientWs = null;
+		}
+		if (reconnectTmrId) clearTimeout(reconnectTmrId);
+		if (reconnectAttempts >= 1e3) logWarn("Dev Server", "Canceling reconnect attempts");
+		else {
+			reconnectAttempts++;
+			reconnectTmrId = setTimeout(connect, RECONNECT_RETRY_MS);
+			emitBuildStatus(win, "disabled");
+		}
+	}
+	connect();
+};
+//#endregion
+//#region src/client/index.ts
+/**
+* Stencil Dev Server Client
+*
+* Browser-side HMR (Hot Module Replacement) client for Stencil dev server.
+* Handles WebSocket communication, component updates, style updates, and image updates.
+*
+* This module runs in the browser and is injected into pages during development.
+* @module @stencil/dev-server/client
+*/
+/**
+* Initialize the app update handler for build results.
+*
+* @param win - the dev client window object
+* @param config - the dev client configuration
+*/
+const initAppUpdate = (win, config) => {
+	onBuildResults(win, (buildResults) => {
+		appUpdate(win, config, buildResults);
+	});
+};
+/**
+* Process app update based on build results.
+*
+* @param win - the dev client window object
+* @param config - the dev client configuration
+* @param buildResults - the compiler build results
+*/
+const appUpdate = (win, config, buildResults) => {
+	try {
+		if (buildResults.buildId === win["s-build-id"]) return;
+		win["s-build-id"] = buildResults.buildId;
+		clearAppErrorModal({ window: win });
+		if (buildResults.hasError) {
+			const errorResults = appError({
+				window: win,
+				buildResults,
+				openInEditor: Array.isArray(config.editors) && config.editors.length > 0 ? (data) => {
+					const url = `${OPEN_IN_EDITOR_URL}?${new URLSearchParams({
+						file: data.file,
+						line: String(data.line),
+						column: String(data.column)
+					}).toString()}`;
+					win.fetch(url).catch((err) => {
+						console.error("Failed to open in editor:", err);
+					});
+				} : void 0
+			});
+			errorResults.diagnostics.forEach(logDiagnostic);
+			if (errorResults.status) emitBuildStatus(win, errorResults.status);
+			if (win["s-initial-load"]) appReset(win, config, () => {
+				logReload("Initial load (with errors)");
+				win.location.reload();
+			});
+			return;
+		}
+		if (win["s-initial-load"]) {
+			appReset(win, config, () => {
+				logReload("Initial load");
+				win.location.reload();
+			});
+			return;
+		}
+		if (buildResults.hmr) appHmr(win, buildResults.hmr);
+	} catch (e) {
+		console.error(e);
+	}
+};
+/**
+* Apply hot module replacement updates to the window.
+*
+* @param win - the browser window
+* @param hmr - the hot module replacement data
+*/
+const appHmr = (win, hmr) => {
+	let shouldWindowReload = false;
+	if (hmr.reloadStrategy === "pageReload") shouldWindowReload = true;
+	if (hmr.indexHtmlUpdated) {
+		logReload("Updated index.html");
+		shouldWindowReload = true;
+	}
+	if (hmr.serviceWorkerUpdated) {
+		logReload("Updated Service Worker: sw");
+		shouldWindowReload = true;
+	}
+	if (hmr.scriptsAdded && hmr.scriptsAdded.length > 0) {
+		logReload(`Added scripts: ${hmr.scriptsAdded.join(", ")}`);
+		shouldWindowReload = true;
+	}
+	if (hmr.scriptsDeleted && hmr.scriptsDeleted.length > 0) {
+		logReload(`Deleted scripts: ${hmr.scriptsDeleted.join(", ")}`);
+		shouldWindowReload = true;
+	}
+	if (hmr.excludeHmr && hmr.excludeHmr.length > 0) {
+		logReload(`Excluded From Hmr: ${hmr.excludeHmr.join(", ")}`);
+		shouldWindowReload = true;
+	}
+	if (shouldWindowReload) {
+		win.location.reload();
+		return;
+	}
+	const results = hmrWindow({
+		window: win,
+		hmr
+	});
+	if (results.updatedComponents.length > 0) logBuild(`Updated component${results.updatedComponents.length > 1 ? "s" : ""}: ${results.updatedComponents.join(", ")}`);
+	if (results.updatedInlineStyles.length > 0) logBuild(`Updated styles: ${results.updatedInlineStyles.join(", ")}`);
+	if (results.updatedExternalStyles.length > 0) logBuild(`Updated stylesheets: ${results.updatedExternalStyles.join(", ")}`);
+	if (results.updatedImages.length > 0) logBuild(`Updated images: ${results.updatedImages.join(", ")}`);
+};
+/**
+* Reset the app state and unregister service workers.
+*
+* @param win - the dev client window object
+* @param config - the dev client configuration
+* @param cb - callback to invoke after reset
+*/
+const appReset = (win, config, cb) => {
+	win.history.replaceState({}, "App", config.basePath);
+	if (!win.navigator.serviceWorker?.getRegistration) cb();
+	else win.navigator.serviceWorker.getRegistration().then((swRegistration) => {
+		if (swRegistration) swRegistration.unregister().then((hasUnregistered) => {
+			if (hasUnregistered) logBuild("unregistered service worker");
+			cb();
+		});
+		else cb();
+	}).catch((err) => {
+		logWarn("Service Worker", err);
+		cb();
+	});
+};
+/**
+* Initialize the dev server client in the browser.
+*
+* @param win - the dev client window object
+* @param config - the dev client configuration
+*/
+const initDevClient = (win, config) => {
+	try {
+		if (win["s-dev-server"]) return;
+		win["s-dev-server"] = true;
+		win.devServerConfig = config;
+		initBuildStatus({ window: win });
+		initBuildProgress({ window: win });
+		initAppUpdate(win, config);
+		if (isInitialDevServerLoad(win, config)) {
+			win["s-initial-load"] = true;
+			appReset(win, config, () => {
+				initClientWebSocket(win, config);
+			});
+		} else initClientWebSocket(win, config);
+	} catch (e) {
+		console.error(e);
+	}
+};
+/**
+* Check if this is the initial dev server load.
+*
+* @param win - the dev client window object
+* @param config - the dev client configuration
+* @returns true if this is the initial load
+*/
+const isInitialDevServerLoad = (win, config) => {
+	let pathname = win.location.pathname;
+	pathname = "/" + pathname.substring(config.basePath.length);
+	return pathname === DEV_SERVER_INIT_URL;
+};
+if (typeof appWindow !== "undefined" && typeof config !== "undefined") {
+	const defaultConfig = {
+		basePath: appWindow.location.pathname,
+		editors: [],
+		reloadStrategy: "hmr",
+		socketUrl: `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.hostname}${location.port !== "" ? ":" + location.port : ""}/`
+	};
+	initDevClient(appWindow, {
+		...defaultConfig,
+		...appWindow.devServerConfig,
+		...config
+	});
+}
+//#endregion
+export { BUILD_LOG, BUILD_RESULTS, BUILD_STATUS, DEV_SERVER_INIT_URL, DEV_SERVER_URL, NODE_TYPE_DOCUMENT_FRAGMENT, NODE_TYPE_ELEMENT, NORMAL_CLOSURE_CODE, OPEN_IN_EDITOR_URL, RECONNECT_ATTEMPTS, RECONNECT_RETRY_MS, REQUEST_BUILD_RESULTS_INTERVAL_MS, appError, clearAppErrorModal, emitBuildLog, emitBuildResults, emitBuildStatus, hmrWindow, initBuildProgress, initBuildStatus, initClientWebSocket, initDevClient, logBuild, logDiagnostic, logDisabled, logReload, logWarn, onBuildLog, onBuildResults, onBuildStatus, updateFavIcon };