@jasonshimmy/custom-elements-runtime 2.5.8 → 2.6.0

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

@@ -1,6 +1,6 @@
 import { a as y, d as I } from "./logger-BvkEbVM4.js";
 import { f as rt, r as tt, c as T } from "./namespace-helpers-DcD_6_K1.js";
-import { c as st, h as F, k as ct, l as it, b as bt, n as wt } from "./template-compiler-DbHgEJzb.js";
+import { c as st, h as F, l as ct, m as it, b as bt, o as wt } from "./template-compiler-xSxUyqRI.js";
 import { createStore as lt } from "./custom-elements-runtime.store.es.js";
 import { match as St } from "./custom-elements-runtime.directives.es.js";
 const ut = {
@@ -49,12 +49,12 @@ function At(t) {
     }
     const d = u.match(/^:([A-Za-z0-9_-]+)(\*)?$/);
     if (d) {
-      const A = d[1], k = !!d[2];
-      if (k && l !== a.length - 1)
+      const A = d[1], P = !!d[2];
+      if (P && l !== a.length - 1)
         return y(
           `Route '${t.path}' contains a splat param ':${A}*' in a non-terminal position; splats must be the last segment. This route will be ignored.`
         ), { invalid: !0 };
-      i.push(A), o.push(k ? "__SPLAT__" : "([^/]+)");
+      i.push(A), o.push(P ? "__SPLAT__" : "([^/]+)");
       continue;
     }
     o.push(Ct(u));
@@ -103,7 +103,7 @@ let J = {}, U = {};
 function xt() {
   J = {}, U = {};
 }
-function kt() {
+function Pt() {
   const t = Object.entries(J);
   if (t.length <= pt) return;
   const g = t.sort(
@@ -115,7 +115,7 @@ function kt() {
   for (const [a] of g)
     delete J[a];
 }
-async function Pt(t) {
+async function kt(t) {
   if (t.component) return t.component;
   if (t.load) {
     const r = J[t.path];
@@ -126,7 +126,7 @@ async function Pt(t) {
     const g = typeof window > "u";
     try {
       const a = t.load().then((i) => {
-        kt();
+        Pt();
         const o = i.default;
         return J[t.path] = {
           component: o,
@@ -295,9 +295,9 @@ const E = {
 };
 function Tt(t) {
   const { routes: r, base: g = "", initialUrl: a, scrollToFragment: i = !0 } = t, o = Et(g), b = typeof i == "boolean" ? { ...ut, enabled: i } : { ...ut, ...i };
-  let l, u, d, A, k, L, j;
+  let l, u, d, A, P, L, j;
   const _ = /* @__PURE__ */ new Set(), B = 10;
-  let P = 0;
+  let k = 0;
   const X = async (s, c) => {
     const e = et(r, s.path);
     if (!e || !e.beforeEnter) return !0;
@@ -305,7 +305,7 @@ function Tt(t) {
       const n = await e.beforeEnter(s, c);
       if (typeof n == "string") {
         const p = `${s.path}->${n}`;
-        return _.has(p) || P >= B ? (I(`Redirect loop detected: ${p}`), !1) : n;
+        return _.has(p) || k >= B ? (I(`Redirect loop detected: ${p}`), !1) : n;
       }
       return n !== !1;
     } catch (n) {
@@ -323,7 +323,7 @@ function Tt(t) {
       const n = await e.onEnter(s, c);
       if (typeof n == "string") {
         const p = `${s.path}->${n}`;
-        return _.has(p) || P >= B ? (I(`Redirect loop detected: ${p}`), !1) : n;
+        return _.has(p) || k >= B ? (I(`Redirect loop detected: ${p}`), !1) : n;
       }
       return n !== !1;
     } catch (n) {
@@ -429,11 +429,11 @@ function Tt(t) {
       y(`Navigation to ${s} blocked - navigation already in progress`);
       return;
     }
-    R = !0, P = 0, _.clear();
+    R = !0, k = 0, _.clear();
     try {
       await N(s, c);
     } finally {
-      R = !1, P = 0, _.clear();
+      R = !1, k = 0, _.clear();
     }
   }, q = (s) => {
     const c = s.indexOf("#"), e = c >= 0 ? s.slice(c + 1) : "", n = c >= 0 ? s.slice(0, c) : s, p = n.indexOf("?"), m = p >= 0 ? n.slice(0, p) : n, w = p >= 0 ? at(n.slice(p)) : {}, S = m.startsWith(o) ? m.slice(o.length) : m;
@@ -454,7 +454,7 @@ function Tt(t) {
       }, w = await X(m, p);
       if (w === !1) return;
       if (typeof w == "string") {
-        P++;
+        k++;
         const $ = `${m.path}->${w}`;
         _.add($), await N(w, !0);
         return;
@@ -462,7 +462,7 @@ function Tt(t) {
       const S = await G(m, p);
       if (S === !1) return;
       if (typeof S == "string") {
-        P++;
+        k++;
         const $ = `${m.path}->${S}`;
         _.add($), await N(S, !0);
         return;
@@ -544,7 +544,7 @@ function Tt(t) {
       await f(n.path, e);
     };
     const c = () => A(!0);
-    window.addEventListener("popstate", c), k = (e) => f(e, !1), L = (e) => f(e, !0), j = () => window.history.back();
+    window.addEventListener("popstate", c), P = (e) => f(e, !1), L = (e) => f(e, !0), j = () => window.history.back();
   } else {
     l = () => {
       try {
@@ -568,7 +568,7 @@ function Tt(t) {
       await c(e.path);
     };
     const c = async (e) => {
-      if (P++, P > B) {
+      if (k++, k > B) {
         I(`SSR redirect depth exceeded for path: ${e}`);
         return;
       }
@@ -604,19 +604,19 @@ function Tt(t) {
         throw I("SSR navigation error:", n), n;
       }
     };
-    k = async (e) => (P = 0, _.clear(), c(e)), L = async (e) => (P = 0, _.clear(), c(e)), j = () => {
+    P = async (e) => (k = 0, _.clear(), c(e)), L = async (e) => (k = 0, _.clear(), c(e)), j = () => {
     };
   }
   return {
     _cleanupScrollState: Y,
     store: d,
-    push: k,
+    push: P,
     replace: L,
     back: j,
     subscribe: d.subscribe,
     matchRoute: (s) => O(s),
     getCurrent: () => d.getState(),
-    resolveRouteComponent: Pt,
+    resolveRouteComponent: kt,
     base: o,
     // Public API: allow components or tests to explicitly request scrolling to
     // a fragment when they know their DOM is ready. Returns true if scrolled.
@@ -696,7 +696,7 @@ function Ft(t) {
         return { tag: u, props: {}, children: [] };
       if (typeof u == "function") {
         const d = u();
-        return (d instanceof Promise ? d : Promise.resolve(d)).then((k) => typeof k == "string" ? { tag: k, props: {}, children: [] } : k);
+        return (d instanceof Promise ? d : Promise.resolve(d)).then((P) => typeof P == "string" ? { tag: P, props: {}, children: [] } : P);
       }
       return F`<div>Invalid route component</div>`;
     } catch {
@@ -731,7 +731,7 @@ function Ft(t) {
     } : null;
     let d;
     wt(() => "a,button{display:inline-block;}");
-    const A = tt(a.class || ""), k = tt(a.style || "");
+    const A = tt(a.class || ""), P = tt(a.style || "");
     if (!i) {
       let h = null;
       ct((R) => {
@@ -769,7 +769,7 @@ function Ft(t) {
           const f = R?._host;
           if (f instanceof HTMLElement) {
             const q = f.getAttribute("class"), N = f.getAttribute("style");
-            q && (A.value = q), N && (k.value = N), q !== null && f.removeAttribute("class"), N !== null && f.removeAttribute("style");
+            q && (A.value = q), N && (P.value = N), q !== null && f.removeAttribute("class"), N !== null && f.removeAttribute("style");
             try {
               R?._requestRender?.();
               try {
@@ -835,19 +835,19 @@ function Ft(t) {
       const R = (A && A.value || a.class || "").split(/\s+/).filter(Boolean), f = {};
       for (const q of R) f[q] = !0;
       return f;
-    }), P = T(() => ({
+    }), k = T(() => ({
       ...B.value,
       [a.activeClass || "active"]: j.value,
       [a.exactActiveClass || "exact-active"]: L.value
     })), X = T(
-      () => Object.keys(P.value).filter((h) => P.value[h]).join(" ")
+      () => Object.keys(k.value).filter((h) => k.value[h]).join(" ")
     ), G = T(() => a.tag || "a"), nt = T(() => G.value === "button"), z = T(
       () => L.value ? a.ariaCurrentValue : null
     ), M = T(() => !!a.disabled), O = T(() => {
       const h = String(a.to || "");
       return (Z(h) || !!a.external) && G.value === "a";
     }), Y = T(
-      () => k && k.value || a.style || ""
+      () => P && P.value || a.style || ""
     ), K = (h) => {
       if (h.defaultPrevented || h.button !== 0 || h.metaKey || h.altKey || h.ctrlKey || h.shiftKey)
         return;
@@ -934,7 +934,7 @@ export {
   Lt as matchRouteSSR,
   C as normalizePathForRoute,
   at as parseQuery,
-  Pt as resolveRouteComponent,
+  kt as resolveRouteComponent,
   $t as safeDecode,
   Rt as serializeQuery,
   Tt as useRouter

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { component } from './runtime/component';
-export { useEmit, useOnConnected, useOnDisconnected, useOnAttributeChanged, useOnError, useStyle, useProps, provide, inject, createComposable, useExpose, useSlots, getCurrentComponentContext, } from './runtime/hooks';
+export { useEmit, useOnConnected, useOnDisconnected, useOnAttributeChanged, useOnError, useStyle, useProps, defineModel, provide, inject, createComposable, useExpose, useSlots, getCurrentComponentContext, } from './runtime/hooks';
+export type { ModelRef } from './runtime/hooks';
 export { ref, computed, watch, watchEffect, isReactiveState, } from './runtime/reactive';
 export { ReactiveState } from './runtime/reactive';
 export { html } from './runtime/template-compiler';

package/dist/runtime/hooks.d.ts

@@ -252,3 +252,62 @@ export declare function useSlots(): {
     getNodes(name?: string): Element[];
     names(): string[];
 };
+/**
+ * A writable ref that reads from a component prop and emits `update:<propName>`
+ * when its value is set, enabling two-way binding with a parent's `:model` or
+ * `:model:<propName>` directive.
+ *
+ * Also recognised by the vdom `:model` directive as a reactive value so it can
+ * be passed directly to native inputs inside the child template.
+ */
+export interface ModelRef<T> {
+    /** The current prop value. Reactive — reads trigger re-renders. */
+    value: T;
+}
+/**
+ * Define a two-way binding model for a component prop, similar to Vue's
+ * `defineModel()`. It combines `useProps` + `useEmit` into a single ergonomic
+ * API so child components don't need to wire the plumbing manually.
+ *
+ * The returned `ModelRef` object:
+ * - **reads** `.value` → returns the current prop value (reactive)
+ * - **writes** `.value = x` → emits `update:<propName>` so the parent's
+ *   `:model` / `:model:<propName>` directive can update its reactive state
+ *
+ * The object is also recognised by the vdom `:model` directive, so you can
+ * pass it directly to a native input's `:model` binding inside the child
+ * template and the two-way sync is wired up automatically.
+ *
+ * @example
+ * ```ts
+ * // Default model — maps to the parent's :model="..."
+ * component('my-input', () => {
+ *   const model = defineModel('');
+ *
+ *   return html`
+ *     <input :model="${model}" />
+ *   `;
+ * });
+ *
+ * // Named model — maps to the parent's :model:title="..."
+ * component('my-field', () => {
+ *   const title = defineModel('title', '');
+ *   const count = defineModel('count', 0);
+ *
+ *   return html`
+ *     <input :model="${title}" />
+ *     <input type="number" :model="${count}" />
+ *   `;
+ * });
+ * ```
+ *
+ * @param args - Either:
+ *   - No arguments → `modelValue` prop, no default.
+ *   - One argument → treated as the **default value** for the `modelValue` prop;
+ *     type is inferred from the value.
+ *   - Two arguments → first is the **prop name**, second is the **default value**;
+ *     type is inferred from the default value.
+ */
+export declare function defineModel<T = unknown>(): ModelRef<T | undefined>;
+export declare function defineModel<T>(defaultValue: T): ModelRef<T>;
+export declare function defineModel<T>(propName: string, defaultValue: T): ModelRef<T>;