@jasonshimmy/custom-elements-runtime 1.0.10 → 1.1.0

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

@@ -340,7 +340,7 @@ function lt(e) {
   const t = e.replace(/-([a-z])/g, (r, n) => n.toUpperCase());
   return Ce.size < Ve && Ce.set(e, t), t;
 }
-function he(e) {
+function ge(e) {
   if (typeof e == "string") {
     if (_e.has(e))
       return _e.get(e);
@@ -375,7 +375,7 @@ const ut = typeof process < "u" && process.env?.NODE_ENV !== "production";
 function oe(e, ...t) {
   ut && console.error(e, ...t);
 }
-function Pe(e, ...t) {
+function Le(e, ...t) {
   ut && console.warn(e, ...t);
 }
 function vt(e, t, r) {
@@ -474,7 +474,7 @@ class At {
     const n = this.cache.get(t);
     if (n) {
       if (!n.isSecure) {
-        Pe("Blocked cached dangerous expression:", t);
+        Le("Blocked cached dangerous expression:", t);
         return;
       }
       return n.evaluator(r);
@@ -485,7 +485,7 @@ class At {
       s && this.cache.delete(s);
     }
     if (this.cache.set(t, i), !i.isSecure) {
-      Pe("Blocked dangerous expression:", t);
+      Le("Blocked dangerous expression:", t);
       return;
     }
     return i.evaluator(r);
@@ -500,7 +500,7 @@ class At {
     try {
       return { evaluator: this.createSafeEvaluator(t), isSecure: !0 };
     } catch (r) {
-      return Pe("Failed to create evaluator for expression:", t, r), { evaluator: () => {
+      return Le("Failed to create evaluator for expression:", t, r), { evaluator: () => {
       }, isSecure: !1 };
     }
   }
@@ -844,7 +844,7 @@ function fe(e, t) {
       fe(r, t);
   }
 }
-function ye(e, t, r) {
+function be(e, t, r) {
   if (typeof e == "string") return;
   const n = e.props?.reactiveRef ?? (e.props?.props && e.props.props.reactiveRef), i = e.props?.ref ?? (e.props?.props && e.props.props.ref);
   n ? n.value = t : i && r && (r[i] = t);
@@ -1010,7 +1010,7 @@ function Ot(e, t, r, n) {
   else if (typeof e == "string") {
     if (!n) return;
     try {
-      const i = we(e, n);
+      const i = xe(e, n);
       if (typeof i == "object" && i !== null) {
         for (const [s, o] of Object.entries(i))
           s.startsWith("data-") || s.startsWith("aria-") || s === "class" ? r[s] = o : t[s] = o;
@@ -1029,7 +1029,7 @@ function Tt(e, t, r) {
   let n;
   if (typeof e == "string") {
     if (!r) return;
-    n = we(e, r);
+    n = xe(e, r);
   } else
     n = e;
   const i = t.style || "";
@@ -1050,14 +1050,14 @@ function Tt(e, t, r) {
     s = "display: none";
   s !== i && (s ? t.style = s : delete t.style);
 }
-function we(e, t) {
+function xe(e, t) {
   return At.evaluate(e, t);
 }
 function Rt(e, t, r) {
   let n;
   if (typeof e == "string") {
     if (!r) return;
-    n = we(e, r);
+    n = xe(e, r);
   } else
     n = e;
   let i = [];
@@ -1065,11 +1065,11 @@ function Rt(e, t, r) {
   const s = t.class || "", o = s ? `${s} ${i.join(" ")}`.trim() : i.join(" ");
   o && (t.class = o);
 }
-function Lt(e, t, r) {
+function Pt(e, t, r) {
   let n;
   if (typeof e == "string") {
     if (!r) return;
-    n = we(e, r);
+    n = xe(e, r);
   } else
     n = e;
   let i = "";
@@ -1116,9 +1116,9 @@ function Lt(e, t, r) {
   const s = t.style || "";
   t.style = s + (s && !s.endsWith(";") ? "; " : "") + i;
 }
-function Pt(e, t, r) {
+function Lt(e, t, r) {
   let n = e;
-  typeof e == "string" && r && (n = we(e, r)), ee(n) ? t.reactiveRef = n : t.ref = n;
+  typeof e == "string" && r && (n = xe(e, r)), ee(n) ? t.reactiveRef = n : t.ref = n;
 }
 function dt(e, t, r, n) {
   const i = {}, s = { ...n || {} }, o = {};
@@ -1150,10 +1150,10 @@ function dt(e, t, r, n) {
         Rt(h, s, t);
         break;
       case "style":
-        Lt(h, s, t);
+        Pt(h, s, t);
         break;
       case "ref":
-        Pt(h, i, t);
+        Lt(h, i, t);
         break;
     }
   }
@@ -1426,7 +1426,7 @@ function Z(e, t, r) {
       ...c.props
     }
   };
-  ye(x, n, r);
+  be(x, n, r);
   try {
     if (typeof n._applyProps == "function")
       try {
@@ -1584,7 +1584,7 @@ function je(e, t, r, n, i) {
   if (!t || typeof t == "string") {
     fe(e, i);
     const o = Z(r, n, i);
-    return ye(r, o, i), e.parentNode?.replaceChild(o, e), o;
+    return be(r, o, i), e.parentNode?.replaceChild(o, e), o;
   }
   if (r.tag === "#anchor") {
     const o = Array.isArray(r.children) ? r.children : [], c = r._startNode ?? document.createTextNode(""), a = r._endNode ?? document.createTextNode("");
@@ -1597,17 +1597,17 @@ function je(e, t, r, n, i) {
   }
   if (typeof t != "string" && typeof r != "string" && t.tag === r.tag && t.key === r.key) {
     const o = e;
-    return Ge(o, t.props || {}, r.props || {}, n), Mt(o, t.children, r.children, n, i), ye(r, o, i), o;
+    return Ge(o, t.props || {}, r.props || {}, n), Mt(o, t.children, r.children, n, i), be(r, o, i), o;
   }
   if (typeof t != "string" && typeof r != "string" && t.tag === r.tag && (t.tag && String(t.tag).includes("-") || r.props && r.props.isCustomElement || t.props && t.props.isCustomElement))
     try {
       const c = e;
-      return Ge(c, t.props || {}, r.props || {}, n), ye(r, c, i), c;
+      return Ge(c, t.props || {}, r.props || {}, n), be(r, c, i), c;
     } catch {
     }
   fe(e, i);
   const s = Z(r, n, i);
-  return ye(r, s, i), e.parentNode?.replaceChild(s, e), s;
+  return be(r, s, i), e.parentNode?.replaceChild(s, e), s;
 }
 function Wt(e, t, r, n) {
   let i;
@@ -1628,16 +1628,16 @@ function Wt(e, t, r, n) {
   a.forEach((h) => e.removeChild(h)), e._prevVNode = i, e._prevDom = c;
 }
 function Me(e) {
-  if (typeof e == "string") return he(e);
+  if (typeof e == "string") return ge(e);
   if (e.tag === "#text")
-    return typeof e.children == "string" ? he(e.children) : "";
+    return typeof e.children == "string" ? ge(e.children) : "";
   if (e.tag === "#anchor")
     return (Array.isArray(e.children) ? e.children.filter(Boolean) : []).map(Me).join("");
   let t = "";
-  e.props && e.props.attrs && (t = Object.entries(e.props.attrs).map(([i, s]) => ` ${i}="${he(String(s))}"`).join(""));
+  e.props && e.props.attrs && (t = Object.entries(e.props.attrs).map(([i, s]) => ` ${i}="${ge(String(s))}"`).join(""));
   let r = "";
-  e.props && (r = Object.entries(e.props).filter(([i]) => i !== "attrs" && i !== "directives" && i !== "ref" && i !== "key").map(([i, s]) => ` ${i}="${he(String(s))}"`).join(""));
-  const n = Array.isArray(e.children) ? e.children.filter(Boolean).map(Me).join("") : typeof e.children == "string" ? he(e.children) : e.children ? Me(e.children) : "";
+  e.props && (r = Object.entries(e.props).filter(([i]) => i !== "attrs" && i !== "directives" && i !== "ref" && i !== "key").map(([i, s]) => ` ${i}="${ge(String(s))}"`).join(""));
+  const n = Array.isArray(e.children) ? e.children.filter(Boolean).map(Me).join("") : typeof e.children == "string" ? ge(e.children) : e.children ? Me(e.children) : "";
   return `<${e.tag}${t}${r}>${n}</${e.tag}>`;
 }
 function Dt(e, ...t) {
@@ -2499,9 +2499,9 @@ function Gt(e) {
   }
   return r;
 }
-const ge = /* @__PURE__ */ new Map(), Xt = 16, rt = 1e3;
+const me = /* @__PURE__ */ new Map(), Xt = 16, rt = 1e3;
 function Qt(e) {
-  const t = Date.now(), r = ge.get(e);
+  const t = Date.now(), r = me.get(e);
   if (r && t - r.timestamp < Xt) return r.css;
   const n = Gt(e);
   if (!n.length) return "";
@@ -2661,15 +2661,15 @@ function Qt(e) {
       w && s[0].push(w);
     }
   const d = s.flat().join("");
-  return ge.size >= rt && Array.from(ge.keys()).slice(
+  return me.size >= rt && Array.from(me.keys()).slice(
     0,
     Math.floor(rt / 2)
-  ).forEach((y) => ge.delete(y)), ge.set(e, { css: d, timestamp: t }), d;
+  ).forEach((y) => me.delete(y)), me.set(e, { css: d, timestamp: t }), d;
 }
-const be = [];
+const we = [];
 function Yt(e, t, r, n, i, s, o, c) {
   if (e) {
-    be.push(r);
+    we.push(r);
     try {
       const a = t.render(r);
       if (a instanceof Promise) {
@@ -2682,7 +2682,7 @@ function Yt(e, t, r, n, i, s, o, c) {
       }
       nt(e, a, r, n, i), c(e.innerHTML);
     } finally {
-      be.pop();
+      we.pop();
     }
   }
 }
@@ -2737,20 +2737,20 @@ ${s}
   let a = n;
   a || (a = new CSSStyleSheet()), (a.cssRules.length === 0 || a.toString() !== c) && a.replaceSync(c), e.adoptedStyleSheets = [Xe(), a], i(a);
 }
-let M = null;
+let P = null;
 function rr(e) {
-  M = e;
+  P = e;
 }
 function nr() {
-  M = null;
+  P = null;
 }
 function br() {
-  if (!M)
+  if (!P)
     throw new Error("useEmit must be called during component render");
-  const e = M.emit;
+  const e = P.emit;
   return (t, r) => e(t, r);
 }
-function xe(e) {
+function he(e) {
   e._hookCallbacks || Object.defineProperty(e, "_hookCallbacks", {
     value: {},
     writable: !0,
@@ -2759,39 +2759,58 @@ function xe(e) {
   });
 }
 function wr(e) {
-  if (!M)
+  if (!P)
     throw new Error("useOnConnected must be called during component render");
-  xe(M), M._hookCallbacks.onConnected = e;
+  he(P), P._hookCallbacks.onConnected = e;
 }
 function xr(e) {
-  if (!M)
+  if (!P)
     throw new Error("useOnDisconnected must be called during component render");
-  xe(M), M._hookCallbacks.onDisconnected = e;
+  he(P), P._hookCallbacks.onDisconnected = e;
 }
 function vr(e) {
-  if (!M)
+  if (!P)
     throw new Error("useOnAttributeChanged must be called during component render");
-  xe(M), M._hookCallbacks.onAttributeChanged = e;
+  he(P), P._hookCallbacks.onAttributeChanged = e;
 }
 function $r(e) {
-  if (!M)
+  if (!P)
     throw new Error("useOnError must be called during component render");
-  xe(M), M._hookCallbacks.onError = e;
+  he(P), P._hookCallbacks.onError = e;
 }
 function kr(e) {
-  if (!M)
+  if (!P)
+    throw new Error("useProps must be called during component render");
+  he(P), P._hookCallbacks.props = {
+    ...P._hookCallbacks.props || {},
+    ...e
+  };
+  const t = P, r = {};
+  return Object.keys(e).forEach((n) => {
+    Object.defineProperty(r, n, {
+      enumerable: !0,
+      configurable: !0,
+      get() {
+        const i = t[n];
+        return i != null && i !== "" ? i : e[n];
+      }
+    });
+  }), r;
+}
+function Cr(e) {
+  if (!P)
     throw new Error("useStyle must be called during component render");
-  xe(M);
+  he(P);
   try {
     const t = e();
-    Object.defineProperty(M, "_computedStyle", {
+    Object.defineProperty(P, "_computedStyle", {
       value: t,
       writable: !0,
       enumerable: !1,
       configurable: !0
     });
   } catch (t) {
-    console.warn("Error in useStyle callback:", t), Object.defineProperty(M, "_computedStyle", {
+    console.warn("Error in useStyle callback:", t), Object.defineProperty(P, "_computedStyle", {
       value: "",
       writable: !0,
       enumerable: !1,
@@ -3357,7 +3376,7 @@ function or(e, t) {
     `💡 Tip: If your event handler function returns undefined, make sure you're passing the function reference, not calling it. Use @${t}="\${fn}" not @${t}="\${fn()}"`
   );
 }
-function me(e, t = {}, r, n) {
+function ye(e, t = {}, r, n) {
   const i = n ?? t.key;
   return { tag: e, key: i, props: t, children: r };
 }
@@ -3407,13 +3426,13 @@ function cr(e, t = [], r = {}) {
   return { props: n, attrs: i, directives: s, bound: o };
 }
 function lr(e, t, r) {
-  const n = be.length > 0 ? be[be.length - 1] : void 0, i = r ?? n, s = !r && t.length === 0, o = s ? e.join("<!--TEMPLATE_DELIM-->") : null;
+  const n = we.length > 0 ? we[we.length - 1] : void 0, i = r ?? n, s = !r && t.length === 0, o = s ? e.join("<!--TEMPLATE_DELIM-->") : null;
   if (s && o) {
     const g = Ue.get(o);
     if (g) return g;
   }
   function c(g, $) {
-    return me("#text", {}, g, $);
+    return ye("#text", {}, g, $);
   }
   let a = "";
   for (let g = 0; g < e.length; g++)
@@ -3559,14 +3578,14 @@ function lr(e, t, r) {
           } catch {
           }
         if (Object.keys(A).length > 0 && (S.directives = { ...A }), $) {
-          const O = me(
+          const O = ye(
             d,
             u,
             m.length === 1 && Se(m[0]) && m[0].tag === "#text" ? typeof m[0].children == "string" ? m[0].children : "" : m.length ? m : void 0,
             y
           ), H = p.pop();
           H ? (d = H.tag, u = H.props, y = H.key, m = H.children, m.push(O)) : (l.push(O), d = null, u = {}, y = void 0, m = []);
-        } else j ? d ? m.push(me(g, S, void 0, void 0)) : l.push(me(g, S, void 0, void 0)) : (d && p.push({
+        } else j ? d ? m.push(ye(g, S, void 0, void 0)) : l.push(ye(g, S, void 0, void 0)) : (d && p.push({
           tag: d,
           props: u,
           children: m,
@@ -3598,19 +3617,19 @@ function lr(e, t, r) {
     const g = C;
     return s && o && Ue.set(o, g), g;
   }
-  return me("div", {}, "", "fallback-root");
+  return ye("div", {}, "", "fallback-root");
 }
 function le(e, ...t) {
   const r = t[t.length - 1], n = typeof r == "object" && r && !Array.isArray(r) ? r : void 0;
   return lr(e, t, n);
 }
-function Le(e, t) {
-  return P(e ? t : [], "when-block");
+function Pe(e, t) {
+  return M(e ? t : [], "when-block");
 }
-function Cr(e, t) {
+function _r(e, t) {
   return e.map((r, n) => {
     const i = typeof r == "object" ? r?.key ?? r?.id ?? `idx-${n}` : String(r);
-    return P(t(r, n), `each-${i}`);
+    return M(t(r, n), `each-${i}`);
   });
 }
 function ur() {
@@ -3630,11 +3649,11 @@ function ur() {
 function fr(...e) {
   for (let t = 0; t < e.length; t++) {
     const [r, n] = e[t];
-    if (r) return [P(n, `whenChain-branch-${t}`)];
+    if (r) return [M(n, `whenChain-branch-${t}`)];
   }
-  return [P([], "whenChain-empty")];
+  return [M([], "whenChain-empty")];
 }
-function P(e, t) {
+function M(e, t) {
   const r = e ? Array.isArray(e) ? e.filter(Boolean) : [e].filter(Boolean) : [];
   return {
     tag: "#anchor",
@@ -3642,53 +3661,53 @@ function P(e, t) {
     children: r
   };
 }
-function _r(e, t) {
-  return Le(!e, t);
-}
 function Er(e, t) {
-  const r = !e || e.length === 0;
-  return Le(r, t);
+  return Pe(!e, t);
 }
 function Sr(e, t) {
+  const r = !e || e.length === 0;
+  return Pe(r, t);
+}
+function Ar(e, t) {
   const r = !!(e && e.length > 0);
-  return Le(r, t);
+  return Pe(r, t);
 }
-function Ar(e, t, r) {
+function jr(e, t, r) {
   const n = [];
   return e.forEach((i, s) => {
     t(i, s) && n.push({ item: i, originalIndex: s });
   }), n.map(({ item: i, originalIndex: s }, o) => {
     const c = typeof i == "object" && i != null ? i?.key ?? i?.id ?? `filtered-${s}` : `filtered-${s}`;
-    return P(r(i, s, o), `each-where-${c}`);
+    return M(r(i, s, o), `each-where-${c}`);
   });
 }
-function jr(e, t) {
+function Or(e, t) {
   const r = e?.length ?? 0;
-  return r === 0 && t.empty ? P(t.empty, "switch-length-empty") : r === 1 && t.one ? P(t.one(e[0]), "switch-length-one") : t.exactly?.[r] ? P(t.exactly[r](e), `switch-length-${r}`) : r > 1 && t.many ? P(t.many(e), "switch-length-many") : P([], "switch-length-fallback");
+  return r === 0 && t.empty ? M(t.empty, "switch-length-empty") : r === 1 && t.one ? M(t.one(e[0]), "switch-length-one") : t.exactly?.[r] ? M(t.exactly[r](e), `switch-length-${r}`) : r > 1 && t.many ? M(t.many(e), "switch-length-many") : M([], "switch-length-fallback");
 }
-function Or(e, t, r) {
+function Tr(e, t, r) {
   const n = /* @__PURE__ */ new Map();
   return e.forEach((i) => {
     const s = t(i);
     n.has(s) || n.set(s, []), n.get(s).push(i);
-  }), Array.from(n.entries()).map(([i, s], o) => P(
+  }), Array.from(n.entries()).map(([i, s], o) => M(
     r(i, s, o),
     `each-group-${i}`
   ));
 }
-function Tr(e, t, r, n) {
+function Rr(e, t, r, n) {
   const i = r * t, s = Math.min(i + t, e.length);
   return e.slice(i, s).map((c, a) => {
     const h = i + a, p = typeof c == "object" && c != null ? c?.key ?? c?.id ?? `page-${h}` : `page-${h}`;
-    return P(n(c, h, a), `each-page-${p}`);
+    return M(n(c, h, a), `each-page-${p}`);
   });
 }
-function Rr(e, t) {
-  return e.loading && t.loading ? P(t.loading, "promise-loading") : e.error && t.error ? P(t.error(e.error), "promise-error") : e.data !== void 0 && t.success ? P(t.success(e.data), "promise-success") : t.idle ? P(t.idle, "promise-idle") : P([], "promise-fallback");
+function Pr(e, t) {
+  return e.loading && t.loading ? M(t.loading, "promise-loading") : e.error && t.error ? M(t.error(e.error), "promise-error") : e.data !== void 0 && t.success ? M(t.success(e.data), "promise-success") : t.idle ? M(t.idle, "promise-idle") : M([], "promise-fallback");
 }
 function q(e, t) {
   const r = typeof window < "u" && window.matchMedia?.(e)?.matches;
-  return Le(!!r, t);
+  return Pe(!!r, t);
 }
 const ne = {
   // Responsive breakpoints (matching style.ts)
@@ -3728,14 +3747,14 @@ function Lr(e, t) {
   const s = r.length > 0 ? r.join(" and ") : "all";
   return q(s, t);
 }
-function Pr(e) {
+function Mr(e) {
   const t = [];
-  return e.base && t.push(P(e.base, "responsive-base")), gt.forEach((r) => {
+  return e.base && t.push(M(e.base, "responsive-base")), gt.forEach((r) => {
     const n = e[r];
     n && t.push(dr[r](n));
   }), t;
 }
-function Mr(e) {
+function Wr(e) {
   const t = [];
   let r = null;
   return {
@@ -3753,9 +3772,9 @@ function Mr(e) {
       for (let n = 0; n < t.length; n++) {
         const { condition: i, content: s } = t[n];
         if (i(e))
-          return P(s, `switch-case-${n}`);
+          return M(s, `switch-case-${n}`);
       }
-      return P(r || [], "switch-otherwise");
+      return M(r || [], "switch-otherwise");
     }
   };
 }
@@ -3880,7 +3899,7 @@ class pe extends EventTarget {
     this.eventCounters.clear();
   }
 }
-const ve = pe.getInstance(), Wr = (e, t) => ve.emit(e, t), Dr = (e, t) => ve.on(e, t), Ir = (e, t) => ve.off(e, t), Nr = (e, t) => ve.once(e, t), Hr = (e, t, r) => ve.listen(e, t, r);
+const ve = pe.getInstance(), Dr = (e, t) => ve.emit(e, t), Ir = (e, t) => ve.on(e, t), Nr = (e, t) => ve.off(e, t), Hr = (e, t) => ve.once(e, t), Br = (e, t, r) => ve.listen(e, t, r);
 function ot(e) {
   let t = { ...e };
   const r = [];
@@ -4057,10 +4076,10 @@ function hr(e) {
     resolveRouteComponent: pr
   };
 }
-function Br(e, t) {
+function zr(e, t) {
   return Y(e, t);
 }
-function zr(e) {
+function Ur(e) {
   const t = hr(e);
   return st("router-view", (r = {}, n = {}) => {
     const { onConnected: i } = n;
@@ -4130,50 +4149,51 @@ function zr(e) {
 }
 export {
   pe as GlobalEventBus,
-  P as anchorBlock,
+  M as anchorBlock,
   st as component,
   mr as computed,
   ot as createStore,
   Dt as css,
-  Cr as each,
-  Or as eachGroup,
-  Tr as eachPage,
-  Ar as eachWhere,
-  Wr as emit,
+  _r as each,
+  Tr as eachGroup,
+  Rr as eachPage,
+  jr as eachWhere,
+  Dr as emit,
   ve as eventBus,
   le as html,
-  zr as initRouter,
-  Hr as listen,
+  Ur as initRouter,
+  Br as listen,
   ur as match,
   Y as matchRoute,
-  Br as matchRouteSSR,
+  zr as matchRouteSSR,
   ne as mediaVariants,
-  Ir as off,
-  Dr as on,
-  Nr as once,
+  Nr as off,
+  Ir as on,
+  Hr as once,
   at as parseQuery,
   gr as ref,
   Me as renderToString,
   pr as resolveRouteComponent,
   dr as responsive,
   gt as responsiveOrder,
-  Pr as responsiveSwitch,
-  Mr as switchOn,
-  jr as switchOnLength,
-  Rr as switchOnPromise,
-  _r as unless,
+  Mr as responsiveSwitch,
+  Wr as switchOn,
+  Or as switchOnLength,
+  Pr as switchOnPromise,
+  Er as unless,
   br as useEmit,
   vr as useOnAttributeChanged,
   wr as useOnConnected,
   xr as useOnDisconnected,
   $r as useOnError,
+  kr as useProps,
   hr as useRouter,
-  kr as useStyle,
+  Cr as useStyle,
   yr as watch,
-  Le as when,
-  Er as whenEmpty,
+  Pe as when,
+  Sr as whenEmpty,
   q as whenMedia,
-  Sr as whenNotEmpty,
+  Ar as whenNotEmpty,
   Lr as whenVariants
 };
 //# sourceMappingURL=custom-elements-runtime.es.js.map