@jasonshimmy/custom-elements-runtime 0.0.9-beta.4 → 0.0.9

package/dist/custom-elements-runtime.es.js

@@ -1,4 +1,4 @@
-function j(e) {
+function N(e) {
   let t = new Proxy(e, {
     set: (i, a, c) => (i[a] = c, s(), !0)
   });
@@ -161,7 +161,7 @@ function Z(e, t = {}) {
     const r = e.state, n = G(r), o = e.template(r, n);
     let s = "";
     t.includeStyles && e.style && (s = `<style>${typeof e.style == "function" ? e.style(r) : e.style}</style>`);
-    const i = t.sanitizeAttributes ? t.sanitizeAttributes(e.attrs || {}) : e.attrs || {}, a = Object.entries(i).map(([u, d]) => `${N(u)}="${N(d)}"`).join(" "), l = `${a ? `<${e.tag} ${a}>` : `<${e.tag}>`}${s}${o}</${e.tag}>`;
+    const i = t.sanitizeAttributes ? t.sanitizeAttributes(e.attrs || {}) : e.attrs || {}, a = Object.entries(i).map(([u, d]) => `${D(u)}="${D(d)}"`).join(" "), l = `${a ? `<${e.tag} ${a}>` : `<${e.tag}>`}${s}${o}</${e.tag}>`;
     return t.prettyPrint ? V(l) : l;
   } catch (r) {
     return console.error(`[SSR] Error rendering ${e.tag}:`, r), `<${e.tag}><div style="color: red;">SSR Error: ${X(String(r))}</div></${e.tag}>`;
@@ -225,27 +225,27 @@ function lt(e) {
   }
 <\/script>`.trim();
 }
-const X = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), N = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), V = (e) => e.replace(/></g, `>
+const X = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), D = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), V = (e) => e.replace(/></g, `>
 <`).split(`
 `).map((t) => {
   const r = (t.match(/^<[^\/]/g) || []).length - (t.match(/<\//g) || []).length;
   return "  ".repeat(Math.max(0, r)) + t.trim();
 }).join(`
 `);
-function D(e) {
+function I(e) {
   return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function L(e, t) {
   if (typeof e != "string" || !t) return String(e);
   for (const r in t) {
     if (typeof t[r] == "string" && e === t[r])
-      return D(e);
+      return I(e);
     if (Array.isArray(t[r])) {
       for (const n of t[r])
         if (n && typeof n == "object") {
           for (const o in n)
             if (typeof n[o] == "string" && e === n[o])
-              return D(e);
+              return I(e);
         }
     }
   }
@@ -352,7 +352,7 @@ function J(e, t, r) {
   };
   e.addEventListener("input", i), e.addEventListener("change", i), e.addEventListener("keydown", i), e.addEventListener("blur", i);
 }
-const x = (() => {
+const j = (() => {
   try {
     if (typeof process < "u" && process.env)
       return process.env.NODE_ENV === "development";
@@ -361,7 +361,7 @@ const x = (() => {
   return typeof window < "u" ? window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" : !1;
 })();
 function ht(e, t = {}) {
-  const { development: r = x, cache: n = !0, optimize: o = !0 } = t, s = F(e);
+  const { development: r = j, cache: n = !0, optimize: o = !0 } = t, s = K(e);
   if (n && S.has(s)) {
     if (r) {
       const i = v.get(s) || {
@@ -421,7 +421,7 @@ function Q(e, t) {
     const s = new DOMParser().parseFromString(`<div>${e}</div>`, "text/html").body.firstElementChild;
     return r(s) || [0];
   } catch (r) {
-    return x && console.warn("[Template Compiler] Error finding DOM path for placeholder:", t, r), [0];
+    return j && console.warn("[Template Compiler] Error finding DOM path for placeholder:", t, r), [0];
   }
 }
 function tt(e, t) {
@@ -437,7 +437,7 @@ class et {
   }
   compile() {
     this.parseTemplate();
-    const t = this.createStaticFragment(), r = F(this.template), n = (o, s) => {
+    const t = this.createStaticFragment(), r = K(this.template), n = (o, s) => {
       let i = "";
       for (let a = 0; a < this.statics.length; a++)
         if (i += this.statics[a], a < this.dynamics.length) {
@@ -544,7 +544,7 @@ function R(e, t) {
     return null;
   }
 }
-function I(e, t, r) {
+function P(e, t, r) {
   let n;
   return e.fragment && !e.hasDynamics ? n = e.fragment.cloneNode(!0) : n = nt(e, t, r), n;
 }
@@ -555,7 +555,7 @@ function rt(e, t, r, n, o) {
         const i = s.getValue(r, n);
         if (o !== void 0 && s.getValue(o, n) === i)
           continue;
-        W(t, s, i);
+        F(t, s, i);
       } catch (i) {
         console.warn("[Template Compiler] Error applying update:", i);
       }
@@ -577,11 +577,11 @@ function nt(e, t, r) {
     i.appendChild(s.body.firstChild);
   for (const a of e.dynamics) {
     const c = a.getValue(t, r), l = R(i, a.path);
-    W(l, a, c);
+    F(l, a, c);
   }
   return i;
 }
-function W(e, t, r) {
+function F(e, t, r) {
   try {
     if (t.type === "text") {
       const o = document.createTreeWalker(
@@ -630,11 +630,11 @@ function W(e, t, r) {
         throw new Error(`Unknown update type: ${t.type}`);
     }
   } catch (n) {
-    (typeof globalThis < "u" ? globalThis.isDevelopment : x) && console.warn("[Template Compiler] Error applying update:", t, n);
+    (typeof globalThis < "u" ? globalThis.isDevelopment : j) && console.warn("[Template Compiler] Error applying update:", t, n);
   }
 }
 const S = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
-function F(e) {
+function K(e) {
   let t = 0;
   for (let r = 0; r < e.length; r++) {
     const n = e.charCodeAt(r);
@@ -642,10 +642,10 @@ function F(e) {
   }
   return `tpl_${Math.abs(t).toString(36)}`;
 }
-function P(e, t, r, n, o) {
+function q(e, t, r, n, o) {
   return n && o ? `${t}.${e}[${r}]:${n}:${o}` : n ? `${t}.${e}[${r}]:${n}` : `${t}.${e}[${r}]`;
 }
-function q(e, t, r) {
+function z(e, t, r) {
   if (!(!e || !(e instanceof Element)) && e.contains(r) && r.parentNode === e)
     try {
       e.replaceChild(t, r);
@@ -693,7 +693,7 @@ function $(e, t = "", r = 0) {
   if (!e)
     return { type: "#unknown", key: void 0, props: {}, children: [], dom: void 0 };
   if (e.nodeType === Node.TEXT_NODE)
-    return !e.nodeValue || /^\s*$/.test(e.nodeValue) ? { type: "#whitespace", key: void 0, props: {}, children: [], dom: void 0 } : { type: "#text", key: P("#text", t, r), props: { nodeValue: e.nodeValue }, children: [], dom: e };
+    return !e.nodeValue || /^\s*$/.test(e.nodeValue) ? { type: "#whitespace", key: void 0, props: {}, children: [], dom: void 0 } : { type: "#text", key: q("#text", t, r), props: { nodeValue: e.nodeValue }, children: [], dom: e };
   if (e.nodeType === Node.ELEMENT_NODE) {
     const n = e, o = {};
     Array.from(n.attributes).forEach((l) => {
@@ -706,7 +706,7 @@ function $(e, t = "", r = 0) {
       i = `${s}:${l}:${u}`, o["data-uid"] = i, n.setAttribute("data-uid", i);
       let d = n.getAttribute("value"), f = n.getAttribute("checked");
       d && (o.value = d), f && (o.checked = f);
-    } else s === "input" || s === "textarea" || s === "select" || n.hasAttribute("contenteditable") ? (i = `${s}:${t}:${r}`, o["data-uid"] = i, n.setAttribute("data-uid", i)) : (i = P(s, t, r), s === "li" && (o["data-uid"] = i, n.setAttribute("data-uid", i)));
+    } else s === "input" || s === "textarea" || s === "select" || n.hasAttribute("contenteditable") ? (i = `${s}:${t}:${r}`, o["data-uid"] = i, n.setAttribute("data-uid", i)) : (i = q(s, t, r), s === "li" && (o["data-uid"] = i, n.setAttribute("data-uid", i)));
     const a = Array.from(n.childNodes).map((l, u) => $(l, i, u));
     return {
       type: s,
@@ -727,7 +727,7 @@ function M(e, t, r) {
   if (t.type !== r.type || t.key !== r.key) {
     const c = g(r);
     if (c instanceof Node && t.dom instanceof Node && e.contains(t.dom)) {
-      if (q(e, c, t.dom), i && r.props && e.firstChild instanceof HTMLInputElement) {
+      if (z(e, c, t.dom), i && r.props && e.firstChild instanceof HTMLInputElement) {
         const l = e.firstChild;
         l.type === "radio" || l.type, l.value = r.props.value, l.setAttribute("value", r.props.value), "checked" in r.props && (l.checked = r.props.checked === !0 || r.props.checked === "true");
       }
@@ -785,7 +785,7 @@ function M(e, t, r) {
       a.nodeValue !== r.props.nodeValue && (a.nodeValue = r.props.nodeValue), r.dom = a;
     else {
       const c = document.createTextNode(r.props.nodeValue ?? "");
-      a && e.contains(a) && a.parentNode === e ? q(e, c, a) : e.appendChild(c), r.dom = c;
+      a && e.contains(a) && a.parentNode === e ? z(e, c, a) : e.appendChild(c), r.dom = c;
     }
     return;
   }
@@ -869,7 +869,7 @@ function at(e) {
       return { path: f, query: h };
     }, o = n();
     const u = b(t, o.path);
-    s = j({
+    s = N({
       path: o.path,
       params: u.params,
       query: o.query
@@ -884,7 +884,7 @@ function at(e) {
   } else {
     n = () => ({ path: "/", query: {} }), o = n();
     const u = b(t, o.path);
-    s = j({
+    s = N({
       path: o.path,
       params: u.params,
       query: o.query
@@ -965,8 +965,8 @@ function _(e, t = /* @__PURE__ */ new WeakSet()) {
 function O(e) {
   return !!e && typeof e.then == "function";
 }
-let K;
-typeof HTMLElement < "u" && (K = class extends HTMLElement {
+let x;
+typeof HTMLElement < "u" ? x = class extends HTMLElement {
   /**
    * Syncs whitelisted state properties to attributes after render.
    * Only keys listed in config.reflect are reflected.
@@ -1376,13 +1376,13 @@ typeof HTMLElement < "u" && (K = class extends HTMLElement {
         } else {
           const r = !this.shadowRoot.firstElementChild, n = this.lastCompiledTemplate?.id === e.id;
           if (r) {
-            const o = I(e, this.stateObj, this.api);
+            const o = P(e, this.stateObj, this.api);
             this.shadowRoot.appendChild(o);
           } else if (n && this.shadowRoot.firstElementChild) {
             const o = this.lastState;
             rt(e, this.shadowRoot.firstElementChild, this.stateObj, this.api, o || void 0);
           } else {
-            const o = I(e, this.stateObj, this.api);
+            const o = P(e, this.stateObj, this.api);
             let s = this.shadowRoot.querySelector("style");
             s || (s = document.createElement("style"), this.shadowRoot.insertBefore(s, this.shadowRoot.firstChild)), this.config.style ? s.textContent = typeof this.config.style == "function" ? this.config.style(this.stateObj) : this.config.style : s.textContent = "";
             let i = this.shadowRoot.querySelector("[data-root]");
@@ -1490,8 +1490,12 @@ typeof HTMLElement < "u" && (K = class extends HTMLElement {
         </div>
       `;
   }
-});
-function z(e, t) {
+} : x = class {
+  // No-op for SSR, just a stub
+  constructor() {
+  }
+};
+function W(e, t) {
   if (t = _(t), t.debug && console.log(`[runtime] Debugging component: ${e}`, t), !e || !t.template) {
     t && typeof t.onError == "function" && t.onError(new Error("Component requires tag and template"), t.state ?? {}, {
       state: t.state ?? {},
@@ -1536,7 +1540,7 @@ function z(e, t) {
   const i = t.state ?? {}, a = Object.keys(i).filter(
     (u) => ["string", "number", "boolean"].includes(typeof i[u])
   );
-  class c extends K {
+  class c extends x {
     static get observedAttributes() {
       return a;
     }
@@ -1549,7 +1553,7 @@ function z(e, t) {
 }
 function yt(e) {
   const t = at(e);
-  return z("router-view", {
+  return W("router-view", {
     template: async () => {
       if (!t) return "<div>Router not initialized.</div>";
       const r = t.getCurrent(), { path: n } = r, o = t.matchRoute(n);
@@ -1560,7 +1564,7 @@ function yt(e) {
         n.render();
       });
     }
-  }), z("router-link", {
+  }), W("router-link", {
     state: {
       to: "",
       tag: "a",
@@ -1639,17 +1643,17 @@ function yt(e) {
   }), t;
 }
 export {
-  j as Store,
+  N as Store,
   dt as classes,
   ut as compile,
   ht as compileTemplate,
-  z as component,
+  W as component,
   $ as createVNodeFromElement,
   Y as css,
   _ as deepSanitizeObject,
   w as eventBus,
   lt as generateHydrationScript,
-  P as getVNodeKey,
+  q as getVNodeKey,
   T as html,
   yt as initRouter,
   O as isPromise,
@@ -1657,12 +1661,12 @@ export {
   g as mountVNode,
   st as parseVNodeFromHTML,
   M as patchVNode,
-  I as renderCompiledTemplate,
+  P as renderCompiledTemplate,
   ct as renderComponentsToString,
   Z as renderToString,
   ot as resolveRouteComponent,
   A as runtimePlugins,
-  q as safeReplaceChild,
+  z as safeReplaceChild,
   ft as styles,
   rt as updateCompiledTemplate,
   J as useDataModel,