@jasonshimmy/custom-elements-runtime 0.0.9 → 0.0.10

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

@@ -138,8 +138,8 @@ class y extends EventTarget {
     this.eventCounters.clear();
   }
 }
-const w = y.getInstance(), B = typeof window > "u" || typeof document > "u";
-function G(e) {
+const w = y.getInstance(), G = typeof window > "u" || typeof document > "u";
+function Z(e) {
   return {
     state: e,
     emit: () => {
@@ -155,19 +155,19 @@ function G(e) {
     }
   };
 }
-function Z(e, t = {}) {
-  B || console.warn("[SSR] renderToString should only be used on the server");
+function V(e, t = {}) {
+  G || console.warn("[SSR] renderToString should only be used on the server");
   try {
-    const r = e.state, n = G(r), o = e.template(r, n);
+    const r = e.state, n = Z(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]) => `${D(u)}="${D(d)}"`).join(" "), l = `${a ? `<${e.tag} ${a}>` : `<${e.tag}>`}${s}${o}</${e.tag}>`;
-    return t.prettyPrint ? V(l) : l;
+    return t.prettyPrint ? Y(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}>`;
   }
 }
-function ct(e, t = {}) {
+function lt(e, t = {}) {
   const r = {
     components: /* @__PURE__ */ new Map(),
     styles: /* @__PURE__ */ new Set()
@@ -177,7 +177,7 @@ function ct(e, t = {}) {
       const c = typeof i.style == "function" ? i.style(i.state) : i.style;
       r.styles.add(c);
     }
-    const a = Z(i, { ...t, includeStyles: !1 });
+    const a = V(i, { ...t, includeStyles: !1 });
     n.push(a);
   });
   const o = Array.from(r.styles).join(`
@@ -185,7 +185,7 @@ function ct(e, t = {}) {
   return { html: n.join(`
 `), styles: o, context: r };
 }
-function lt(e) {
+function ut(e) {
   const t = Array.from(e.components.entries()).map(([r, n]) => ({
     tag: r,
     state: n.state
@@ -225,13 +225,16 @@ function lt(e) {
   }
 <\/script>`.trim();
 }
-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, `>
+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;"), Y = (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 F(e) {
+  return typeof e != "string" ? String(e) : /expression\s*\(|url\s*\(\s*['"]?javascript:/i.test(e) ? "" : e.replace(/[\u0000-\u001F\u007F-\u009F]/g, "").replace(/<|>|"|'|`|;/g, "");
+}
 function I(e) {
   return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -284,7 +287,7 @@ function T(e, ...t) {
     }) : s;
   };
 }
-function ut(e, ...t) {
+function dt(e, ...t) {
   const r = "compiled-" + Math.random().toString(36).slice(2);
   function n(s, i, a) {
     return Array.isArray(s) ? s.map((c) => n(c, i, a)).join("") : typeof s == "function" ? n(s(i, a), i, a) : s == null ? "" : String(s);
@@ -301,19 +304,22 @@ function ut(e, ...t) {
   };
   return o.id = r, o;
 }
-function Y(e, ...t) {
+function J(e, ...t) {
   let r = "";
   for (let n = 0; n < e.length; n++)
-    r += e[n], n < t.length && (r += t[n] ?? "");
+    r += e[n], n < t.length && (r += F(t[n]));
   return r;
 }
-function dt(e) {
+function ft(e) {
   return Object.keys(e).filter((t) => e[t]).join(" ");
 }
-function ft(e) {
-  return Object.entries(e).map(([t, r]) => `${t}: ${r}`).join("; ");
+function ht(e) {
+  return Object.entries(e).map(([t, r]) => {
+    const n = t.replace(/[^a-zA-Z0-9\-]/g, ""), o = typeof r == "string" ? F(r) : r;
+    return `${n}: ${o}`;
+  }).join("; ");
 }
-function J(e, t, r) {
+function Q(e, t, r) {
   const [n, ...o] = r.split("|").map((a) => a.trim());
   if (!n || n === "__proto__" || n === "constructor" || n === "prototype") return;
   function s(a, c, l) {
@@ -360,8 +366,8 @@ const j = (() => {
   }
   return typeof window < "u" ? window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" : !1;
 })();
-function ht(e, t = {}) {
-  const { development: r = j, cache: n = !0, optimize: o = !0 } = t, s = K(e);
+function pt(e, t = {}) {
+  const { development: r = j, cache: n = !0, optimize: o = !0 } = t, s = U(e);
   if (n && S.has(s)) {
     if (r) {
       const i = v.get(s) || {
@@ -386,7 +392,7 @@ function ht(e, t = {}) {
     i.cacheMisses++, v.set(s, i);
   }
   try {
-    const i = tt(e, { development: r, optimize: o });
+    const i = et(e, { development: r, optimize: o });
     return n && S.set(s, i), i;
   } catch (i) {
     return r && (console.error("[Template Compiler] Error compiling template:", i), console.error("[Template Compiler] Template:", e)), {
@@ -399,7 +405,7 @@ function ht(e, t = {}) {
     };
   }
 }
-function Q(e, t) {
+function tt(e, t) {
   if (typeof document > "u")
     return [0];
   try {
@@ -424,10 +430,10 @@ function Q(e, t) {
     return j && console.warn("[Template Compiler] Error finding DOM path for placeholder:", t, r), [0];
   }
 }
-function tt(e, t) {
-  return new et(e, t).compile();
+function et(e, t) {
+  return new rt(e, t).compile();
 }
-class et {
+class rt {
   template;
   options;
   dynamics = [];
@@ -437,7 +443,7 @@ class et {
   }
   compile() {
     this.parseTemplate();
-    const t = this.createStaticFragment(), r = K(this.template), n = (o, s) => {
+    const t = this.createStaticFragment(), r = U(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) {
@@ -488,7 +494,7 @@ class et {
     let s = "text", i;
     n ? n === "class" ? (s = "class", i = "class") : n === "style" ? (s = "style", i = o || "style") : n === "value" ? (s = "property", i = "value") : (s = "attribute", i = n) : t.includes("class.") ? (s = "class", i = t.split(".")[1]) : t.includes("style.") ? (s = "style", i = t.split(".")[1]) : t.includes("@") ? (s = "event", i = t.split("@")[1]) : t === "class" ? (s = "class", i = "class") : t === "style" ? (s = "style", i = "style") : t === "value" ? (s = "property", i = "value") : t === "title" && (s = "attribute", i = "title");
     const a = `__DYNAMIC_${r}__`, c = this.statics.join(a);
-    let l = Q(c, a);
+    let l = tt(c, a);
     this.statics.length === 2 && s !== "text" ? l = [0] : this.statics.length === 2 && l.length === 0 && (l = [0]), this.dynamics.push({
       path: l,
       type: s,
@@ -546,21 +552,21 @@ function R(e, t) {
 }
 function P(e, t, r) {
   let n;
-  return e.fragment && !e.hasDynamics ? n = e.fragment.cloneNode(!0) : n = nt(e, t, r), n;
+  return e.fragment && !e.hasDynamics ? n = e.fragment.cloneNode(!0) : n = st(e, t, r), n;
 }
-function rt(e, t, r, n, o) {
+function nt(e, t, r, n, o) {
   if (e.hasDynamics)
     for (const s of e.dynamics)
       try {
         const i = s.getValue(r, n);
         if (o !== void 0 && s.getValue(o, n) === i)
           continue;
-        F(t, s, i);
+        K(t, s, i);
       } catch (i) {
         console.warn("[Template Compiler] Error applying update:", i);
       }
 }
-function nt(e, t, r) {
+function st(e, t, r) {
   let n = "";
   for (let a = 0; a < e.statics.length; a++)
     if (n += e.statics[a], a < e.dynamics.length) {
@@ -577,11 +583,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);
-    F(l, a, c);
+    K(l, a, c);
   }
   return i;
 }
-function F(e, t, r) {
+function K(e, t, r) {
   try {
     if (t.type === "text") {
       const o = document.createTreeWalker(
@@ -634,7 +640,7 @@ function F(e, t, r) {
   }
 }
 const S = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
-function K(e) {
+function U(e) {
   let t = 0;
   for (let r = 0; r < e.length; r++) {
     const n = e.charCodeAt(r);
@@ -677,7 +683,7 @@ function g(e) {
   }
   return t;
 }
-function st(e) {
+function it(e) {
   const t = document.createElement("template");
   t.innerHTML = e.trim();
   const r = Array.from(t.content.childNodes);
@@ -835,7 +841,7 @@ function M(e, t, r) {
     });
   }
 }
-const it = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(e)) : {}, b = (e, t) => {
+const ot = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(e)) : {}, b = (e, t) => {
   for (const r of e) {
     const n = [], o = r.path.replace(/:[^/]+/g, (a) => (n.push(a.slice(1)), "([^/]+)")), s = new RegExp(`^${o}$`), i = t.match(s);
     if (i) {
@@ -847,7 +853,7 @@ const it = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new
   }
   return { route: null, params: {} };
 }, k = {};
-async function ot(e) {
+async function at(e) {
   if (e.component) return e.component;
   if (e.load) {
     if (k[e.path]) return k[e.path];
@@ -860,12 +866,12 @@ async function ot(e) {
   }
   throw new Error(`No component or loader defined for route: ${e.path}`);
 }
-function at(e) {
+function ct(e) {
   const { routes: t, base: r = "" } = e;
   let n, o, s, i, a, c, l;
   if (typeof window < "u" && typeof document < "u") {
     n = () => {
-      const d = new URL(window.location.href), f = d.pathname.replace(r, "") || "/", h = it(d.search);
+      const d = new URL(window.location.href), f = d.pathname.replace(r, "") || "/", h = ot(d.search);
       return { path: f, query: h };
     }, o = n();
     const u = b(t, o.path);
@@ -902,13 +908,13 @@ function at(e) {
     subscribe: s.subscribe,
     matchRoute: (u) => b(t, u),
     getCurrent: () => s.getState(),
-    resolveRouteComponent: ot
+    resolveRouteComponent: at
   };
 }
-function pt(e, t) {
+function mt(e, t) {
   return b(e, t);
 }
-function H(e, t) {
+function x(e, t) {
   const r = [], n = t ? Object.keys(t) : [], o = { ...e };
   let s = null;
   function i(u) {
@@ -936,7 +942,7 @@ function H(e, t) {
         if (t && n.includes(h))
           return !1;
         const C = f[h], E = Reflect.set(f, h, m, p);
-        return C !== m && r.forEach((U) => U(s)), E;
+        return C !== m && r.forEach((B) => B(s)), E;
       },
       deleteProperty(f, h) {
         if (t && n.includes(h))
@@ -950,7 +956,7 @@ function H(e, t) {
   return s = l(o), s;
 }
 const A = [];
-function mt(e) {
+function yt(e) {
   A.push(e);
 }
 function _(e, t = /* @__PURE__ */ new WeakSet()) {
@@ -965,8 +971,8 @@ function _(e, t = /* @__PURE__ */ new WeakSet()) {
 function O(e) {
   return !!e && typeof e.then == "function";
 }
-let x;
-typeof HTMLElement < "u" ? x = class extends HTMLElement {
+let H;
+typeof HTMLElement < "u" ? H = class extends HTMLElement {
   /**
    * Syncs whitelisted state properties to attributes after render.
    * Only keys listed in config.reflect are reflected.
@@ -1122,7 +1128,7 @@ typeof HTMLElement < "u" ? x = class extends HTMLElement {
     const e = this.shadowRoot;
     e && (e.querySelectorAll("[data-model]").forEach((t) => {
       const r = t.getAttribute("data-model");
-      r && (t._dataModelBound || (J(t, this.stateObj, r), t._dataModelBound = !0));
+      r && (t._dataModelBound || (Q(t, this.stateObj, r), t._dataModelBound = !0));
     }), e.querySelectorAll("[data-model]").forEach((t) => {
       const [r] = t.getAttribute("data-model")?.split("|").map((n) => n.trim()) ?? [];
       if (!(!r || !(r in this.stateObj)))
@@ -1157,7 +1163,7 @@ typeof HTMLElement < "u" ? x = class extends HTMLElement {
     if (!r.state || typeof r.state != "object")
       throw new Error("Invalid component config: state must be an object");
     this.config = r;
-    const n = r.computed ? H(r.state, r.computed) : H(r.state);
+    const n = r.computed ? x(r.state, r.computed) : x(r.state);
     if (this.stateObj = n, typeof this.stateObj.subscribe == "function" && this.unsubscribes.push(this.stateObj.subscribe(() => {
       this.scheduleRender();
     })), this.api = {
@@ -1331,7 +1337,7 @@ typeof HTMLElement < "u" ? x = class extends HTMLElement {
           }, n = function(c) {
             c.children.forEach(n);
           };
-          const o = r(e), s = st(o);
+          const o = r(e), s = it(o);
           n(s);
           const i = this.shadowRoot;
           if (!i)
@@ -1380,7 +1386,7 @@ typeof HTMLElement < "u" ? x = class extends HTMLElement {
             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);
+            nt(e, this.shadowRoot.firstElementChild, this.stateObj, this.api, o || void 0);
           } else {
             const o = P(e, this.stateObj, this.api);
             let s = this.shadowRoot.querySelector("style");
@@ -1490,7 +1496,7 @@ typeof HTMLElement < "u" ? x = class extends HTMLElement {
         </div>
       `;
   }
-} : x = class {
+} : H = class {
   // No-op for SSR, just a stub
   constructor() {
   }
@@ -1535,12 +1541,12 @@ function W(e, t) {
     t.debug && console.warn(`[runtime] Component "${e}" already registered`);
     return;
   }
-  const s = H(t.state ?? {}, t.computed);
+  const s = x(t.state ?? {}, t.computed);
   t.state = s, t._subscribe = s.subscribe;
   const i = t.state ?? {}, a = Object.keys(i).filter(
     (u) => ["string", "number", "boolean"].includes(typeof i[u])
   );
-  class c extends x {
+  class c extends H {
     static get observedAttributes() {
       return a;
     }
@@ -1551,8 +1557,8 @@ function W(e, t) {
   const l = c;
   typeof customElements < "u" && !customElements.get(e) && (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[e] = t, customElements.define(e, l));
 }
-function yt(e) {
-  const t = at(e);
+function gt(e) {
+  const t = ct(e);
   return W("router-view", {
     template: async () => {
       if (!t) return "<div>Router not initialized.</div>";
@@ -1575,7 +1581,7 @@ function yt(e) {
       ariaCurrentValue: "page",
       disabled: !1,
       external: !1,
-      style: Y`
+      style: J`
         [aria-disabled="true"] {
           pointer-events: none;
           opacity: 0.5;
@@ -1644,33 +1650,33 @@ function yt(e) {
 }
 export {
   N as Store,
-  dt as classes,
-  ut as compile,
-  ht as compileTemplate,
+  ft as classes,
+  dt as compile,
+  pt as compileTemplate,
   W as component,
   $ as createVNodeFromElement,
-  Y as css,
+  J as css,
   _ as deepSanitizeObject,
   w as eventBus,
-  lt as generateHydrationScript,
+  ut as generateHydrationScript,
   q as getVNodeKey,
   T as html,
-  yt as initRouter,
+  gt as initRouter,
   O as isPromise,
-  pt as matchRouteSSR,
+  mt as matchRouteSSR,
   g as mountVNode,
-  st as parseVNodeFromHTML,
+  it as parseVNodeFromHTML,
   M as patchVNode,
   P as renderCompiledTemplate,
-  ct as renderComponentsToString,
-  Z as renderToString,
-  ot as resolveRouteComponent,
+  lt as renderComponentsToString,
+  V as renderToString,
+  at as resolveRouteComponent,
   A as runtimePlugins,
   z as safeReplaceChild,
-  ft as styles,
-  rt as updateCompiledTemplate,
-  J as useDataModel,
-  at as useRouter,
-  mt as useRuntimePlugin
+  ht as styles,
+  nt as updateCompiledTemplate,
+  Q as useDataModel,
+  ct as useRouter,
+  yt as useRuntimePlugin
 };
 //# sourceMappingURL=custom-elements-runtime.es.js.map