@jasonshimmy/custom-elements-runtime 2.2.4 → 2.2.5

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

@@ -1,27 +1,27 @@
-import { component as P, html as R, useOnConnected as A, useOnDisconnected as B, useProps as j, useStyle as F } from "./custom-elements-runtime.es.js";
-import { r as U, c as w } from "./namespace-helpers-Vwt2Fzds.js";
-import { createStore as D } from "./custom-elements-runtime.store.es.js";
-import { d as k, a as x } from "./logger-BpibrmKL.js";
-import { match as I } from "./custom-elements-runtime.directives.es.js";
-const V = (c) => c ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(c)) : {}, $ = (c, o) => {
+import { component as P, html as R, useOnConnected as B, useOnDisconnected as U, useProps as V, useStyle as H } from "./custom-elements-runtime.es.js";
+import { r as q, c as m } from "./namespace-helpers-Vwt2Fzds.js";
+import { createStore as j } from "./custom-elements-runtime.store.es.js";
+import { d as x, a as $ } from "./logger-BpibrmKL.js";
+import { match as F } from "./custom-elements-runtime.directives.es.js";
+const D = (c) => c ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(c)) : {}, S = (c, o) => {
   for (const t of c) {
-    const f = [], u = t.path.replace(/:[^/]+/g, (l) => (f.push(l.slice(1)), "([^/]+)")), i = new RegExp(`^${u}$`), s = o.match(i);
+    const h = [], l = t.path.replace(/:[^/]+/g, (i) => (h.push(i.slice(1)), "([^/]+)")), f = new RegExp(`^${l}$`), s = o.match(f);
     if (s) {
-      const l = {};
-      return f.forEach((p, h) => {
-        l[p] = s[h + 1];
-      }), { route: t, params: l };
+      const i = {};
+      return h.forEach((v, b) => {
+        i[v] = s[b + 1];
+      }), { route: t, params: i };
     }
   }
   return { route: null, params: {} };
 };
-function L(c, o) {
+function A(c, o) {
   for (const t of c)
-    if ($([t], o).route !== null) return t;
+    if (S([t], o).route !== null) return t;
   return null;
 }
 const O = {};
-async function W(c) {
+async function I(c) {
   if (c.component) return c.component;
   if (c.load) {
     if (O[c.path]) return O[c.path];
@@ -34,175 +34,175 @@ async function W(c) {
   }
   throw new Error(`No component or loader defined for route: ${c.path}`);
 }
-function z(c) {
-  const { routes: o, base: t = "", initialUrl: f } = c;
-  let u, i, s, l, p, h, d;
-  const C = async (a, n) => {
-    const e = L(o, a.path);
+function M(c) {
+  const { routes: o, base: t = "", initialUrl: h } = c;
+  let l, f, s, i, v, b, w;
+  const k = async (n, a) => {
+    const e = A(o, n.path);
     if (!e || !e.beforeEnter) return !0;
     try {
-      const r = await e.beforeEnter(a, n);
-      return typeof r == "string" ? (await m(r, !0), !1) : r !== !1;
+      const r = await e.beforeEnter(n, a);
+      return typeof r == "string" ? (await g(r, !0), !1) : r !== !1;
     } catch (r) {
-      return k("beforeEnter error", r), !1;
+      return x("beforeEnter error", r), !1;
     }
-  }, b = async (a, n) => {
-    const e = L(o, a.path);
+  }, C = async (n, a) => {
+    const e = A(o, n.path);
     if (!e || !e.onEnter) return !0;
     try {
-      const r = await e.onEnter(a, n);
-      return typeof r == "string" ? (await m(r, !0), !1) : r !== !1;
+      const r = await e.onEnter(n, a);
+      return typeof r == "string" ? (await g(r, !0), !1) : r !== !1;
     } catch (r) {
-      return k("onEnter error", r), !1;
+      return x("onEnter error", r), !1;
     }
-  }, q = (a, n) => {
-    const e = L(o, a.path);
+  }, L = (n, a) => {
+    const e = A(o, n.path);
     if (!(!e || !e.afterEnter))
       try {
-        e.afterEnter(a, n);
+        e.afterEnter(n, a);
       } catch (r) {
-        k("afterEnter error", r);
+        x("afterEnter error", r);
       }
-  }, m = async (a, n = !1) => {
+  }, g = async (n, a = !1) => {
     try {
       const e = {
-        path: a.replace(t, "") || "/",
+        path: n.replace(t, "") || "/",
         query: {}
-      }, r = $(o, e.path);
+      }, r = S(o, e.path);
       if (!r.route) throw new Error(`No route found for ${e.path}`);
-      const v = s.getState(), y = {
+      const p = s.getState(), u = {
         path: e.path,
         params: r.params,
         query: e.query
       };
-      if (!await C(y, v) || !await b(y, v)) return;
-      typeof window < "u" && typeof document < "u" && (n ? window.history.replaceState({}, "", t + a) : window.history.pushState({}, "", t + a)), s.setState(y), q(y, v);
+      if (!await k(u, p) || !await C(u, p)) return;
+      typeof window < "u" && typeof document < "u" && (a ? window.history.replaceState({}, "", t + n) : window.history.pushState({}, "", t + n)), s.setState(u), L(u, p);
     } catch (e) {
-      k("Navigation error:", e);
+      x("Navigation error:", e);
     }
   };
-  if (typeof window < "u" && typeof document < "u" && typeof f > "u") {
-    u = () => {
-      const n = new URL(window.location.href), e = n.pathname.replace(t, "") || "/", r = V(n.search);
+  if (typeof window < "u" && typeof document < "u" && typeof h > "u") {
+    l = () => {
+      const a = new URL(window.location.href), e = a.pathname.replace(t, "") || "/", r = D(a.search);
       return { path: e, query: r };
-    }, i = u();
-    const a = $(o, i.path);
-    s = D({
-      path: i.path,
-      params: a.params,
-      query: i.query
-    }), l = async (n = !1) => {
-      const e = u();
-      await m(e.path, n);
-    }, window.addEventListener("popstate", () => l(!0)), p = (n) => m(n, !1), h = (n) => m(n, !0), d = () => window.history.back();
+    }, f = l();
+    const n = S(o, f.path);
+    s = j({
+      path: f.path,
+      params: n.params,
+      query: f.query
+    }), i = async (a = !1) => {
+      const e = l();
+      await g(e.path, a);
+    }, window.addEventListener("popstate", () => i(!0)), v = (a) => g(a, !1), b = (a) => g(a, !0), w = () => window.history.back();
   } else {
-    u = () => {
-      const e = new URL(f || "/", "http://localhost"), r = e.pathname.replace(t, "") || "/", v = V(e.search);
-      return { path: r, query: v };
-    }, i = u();
-    const a = $(o, i.path);
-    s = D({
-      path: i.path,
-      params: a.params,
-      query: i.query
-    }), l = async () => {
-      const e = u();
-      await n(e.path);
+    l = () => {
+      const e = new URL(h || "/", "http://localhost"), r = e.pathname.replace(t, "") || "/", p = D(e.search);
+      return { path: r, query: p };
+    }, f = l();
+    const n = S(o, f.path);
+    s = j({
+      path: f.path,
+      params: n.params,
+      query: f.query
+    }), i = async () => {
+      const e = l();
+      await a(e.path);
     };
-    const n = async (e) => {
+    const a = async (e) => {
       try {
         const r = {
           path: e.replace(t, "") || "/",
           query: {}
-        }, v = $(o, r.path);
-        if (!v.route) throw new Error(`No route found for ${r.path}`);
-        const y = s.getState(), S = {
+        }, p = S(o, r.path);
+        if (!p.route) throw new Error(`No route found for ${r.path}`);
+        const u = s.getState(), d = {
           path: r.path,
-          params: v.params,
+          params: p.params,
           query: r.query
-        }, g = L(o, S.path);
-        if (g?.beforeEnter) {
-          const E = await g.beforeEnter(S, y);
+        }, y = A(o, d.path);
+        if (y?.beforeEnter) {
+          const E = await y.beforeEnter(d, u);
           if (typeof E == "string") {
-            await n(E);
+            await a(E);
             return;
           }
           if (E === !1) return;
         }
-        if (g?.onEnter) {
-          const E = await g.onEnter(S, y);
+        if (y?.onEnter) {
+          const E = await y.onEnter(d, u);
           if (typeof E == "string") {
-            await n(E);
+            await a(E);
             return;
           }
           if (E === !1) return;
         }
-        s.setState(S), g?.afterEnter && g.afterEnter(S, y);
+        s.setState(d), y?.afterEnter && y.afterEnter(d, u);
       } catch (r) {
-        throw k("SSR navigation error:", r), r;
+        throw x("SSR navigation error:", r), r;
       }
     };
-    p = async (e) => n(e), h = async (e) => n(e), d = () => {
+    v = async (e) => a(e), b = async (e) => a(e), w = () => {
     };
   }
   return {
     store: s,
-    push: p,
-    replace: h,
-    back: d,
+    push: v,
+    replace: b,
+    back: w,
     subscribe: s.subscribe,
-    matchRoute: (a) => $(o, a),
+    matchRoute: (n) => S(o, n),
     getCurrent: () => s.getState(),
-    resolveRouteComponent: W
+    resolveRouteComponent: I
   };
 }
-function J(c, o) {
-  return $(c, o);
+function G(c, o) {
+  return S(c, o);
 }
 let N = null;
-function K(c) {
-  const o = z(c);
+function J(c) {
+  const o = M(c);
   return N = o, P("router-view", async () => {
     const t = N || o;
     if (!t) return R`<div>Router not initialized.</div>`;
-    const f = U(t.getCurrent());
-    let u;
-    A(() => {
+    const h = q(t.getCurrent());
+    let l;
+    B(() => {
       try {
-        t && typeof t.subscribe == "function" && (u = t.subscribe((s) => {
+        t && typeof t.subscribe == "function" && (l = t.subscribe((s) => {
           try {
-            f.value = s;
-          } catch (l) {
-            x("router-view subscription update failed", l);
+            h.value = s;
+          } catch (i) {
+            $("router-view subscription update failed", i);
           }
         }));
       } catch (s) {
-        x("router-view subscribe failed", s);
+        $("router-view subscribe failed", s);
       }
-    }), B(() => {
-      if (typeof u == "function")
+    }), U(() => {
+      if (typeof l == "function")
         try {
-          u();
+          l();
         } catch (s) {
-          x("router-view unsubscribe failed", s);
+          $("router-view unsubscribe failed", s);
         }
     });
-    const i = t.matchRoute(f.value.path);
-    if (!i || !i.route) return R`<div>Not found</div>`;
+    const f = t.matchRoute(h.value.path);
+    if (!f || !f.route) return R`<div>Not found</div>`;
     try {
-      const l = await t.resolveRouteComponent(i.route);
-      if (typeof l == "string")
-        return { tag: l, props: {}, children: [] };
-      if (typeof l == "function") {
-        const p = l();
-        return (p instanceof Promise ? p : Promise.resolve(p)).then((d) => typeof d == "string" ? { tag: d, props: {}, children: [] } : d);
+      const i = await t.resolveRouteComponent(f.route);
+      if (typeof i == "string")
+        return { tag: i, props: {}, children: [] };
+      if (typeof i == "function") {
+        const v = i();
+        return (v instanceof Promise ? v : Promise.resolve(v)).then((w) => typeof w == "string" ? { tag: w, props: {}, children: [] } : w);
       }
       return R`<div>Invalid route component</div>`;
     } catch {
       return R`<div>Invalid route component</div>`;
     }
   }), P("router-link", () => {
-    const t = j({
+    const t = V({
       to: "",
       tag: "a",
       replace: !1,
@@ -212,67 +212,82 @@ function K(c) {
       ariaCurrentValue: "page",
       disabled: !1,
       external: !1,
-      linkClass: "",
-      linkStyle: ""
-    }), f = N || o, u = U(f.getCurrent());
-    let i;
-    F(
-      () => "a,button{display:inline-block;}" + t.linkStyle
-    ), A(() => {
+      // allow host `class` and `style` attributes to be read via useProps
+      class: "",
+      style: ""
+    }), h = N || o, l = q(h.getCurrent());
+    let f;
+    H(() => "a,button{display:inline-block;}");
+    const s = q(t.class || ""), i = q(t.style || "");
+    B((p) => {
       try {
-        f && typeof f.subscribe == "function" && (i = f.subscribe((a) => {
+        h && typeof h.subscribe == "function" && (f = h.subscribe((u) => {
           try {
-            u.value = a;
-          } catch (n) {
-            x("router-link subscription update failed", n);
+            l.value = u;
+          } catch (d) {
+            $("router-link subscription update failed", d);
           }
         }));
-      } catch (a) {
-        x("router-link subscribe failed", a);
+      } catch (u) {
+        $("router-link subscribe failed", u);
       }
-    }), B(() => {
-      if (typeof i == "function")
+      try {
+        const u = p?._host;
+        if (u instanceof HTMLElement) {
+          const d = u.getAttribute("class"), y = u.getAttribute("style");
+          d && (s.value = d), y && (i.value = y), d !== null && u.removeAttribute("class"), y !== null && u.removeAttribute("style");
+        }
+      } catch (u) {
+        $("router-link host migration failed", u);
+      }
+    }), U(() => {
+      if (typeof f == "function")
         try {
-          i();
-        } catch (a) {
-          x("router-link unsubscribe failed", a);
+          f();
+        } catch (p) {
+          $("router-link unsubscribe failed", p);
         }
     });
-    const s = w(
-      () => u.value.path === t.to
-    ), l = w(
-      () => t.exact ? s.value : u.value && typeof u.value.path == "string" ? u.value.path.startsWith(t.to) : !1
-    ), p = w(() => {
-      const n = (t.linkClass || "").split(/\s+/).filter(Boolean), e = {};
-      for (const r of n) e[r] = !0;
-      return e;
-    }), h = w(() => ({
-      ...p.value,
-      [t.activeClass || "active"]: l.value,
-      [t.exactActiveClass || "exact-active"]: s.value
-    })), d = w(() => t.tag === "button"), C = w(
-      () => s.value ? t.ariaCurrentValue : ""
-    ), b = w(() => !!t.disabled), q = w(
+    const v = m(
+      () => l.value.path === t.to
+    ), b = m(
+      () => t.exact ? v.value : l.value && typeof l.value.path == "string" ? l.value.path.startsWith(t.to) : !1
+    ), w = m(() => {
+      const u = (s && s.value || t.class || "").split(/\s+/).filter(Boolean), d = {};
+      for (const y of u) d[y] = !0;
+      return d;
+    }), k = m(() => ({
+      ...w.value,
+      [t.activeClass || "active"]: b.value,
+      [t.exactActiveClass || "exact-active"]: v.value
+    })), C = m(
+      () => Object.keys(k.value).filter((p) => k.value[p]).join(" ")
+    ), L = m(() => t.tag === "button"), g = m(
+      () => v.value ? t.ariaCurrentValue : ""
+    ), n = m(() => !!t.disabled), a = m(
       () => !!t.external && (t.tag === "a" || !t.tag)
-    ), m = (a) => {
+    ), e = m(
+      () => i && i.value || t.style || ""
+    ), r = (p) => {
       if (t.disabled) {
-        a.preventDefault();
+        p.preventDefault();
         return;
       }
-      t.external && (t.tag === "a" || !t.tag) || (a.preventDefault(), t.replace ? f.replace(t.to) : f.push(t.to));
+      t.external && (t.tag === "a" || !t.tag) || (p.preventDefault(), t.replace ? h.replace(t.to) : h.push(t.to));
     };
     return R`
-      ${I().when(
-      d.value,
+      ${F().when(
+      L.value,
       R`
             <button
               part="button"
-              :class="${h.value}"
-              aria-current="${C.value}"
-              disabled="${b.value ? "" : null}"
-              aria-disabled="${b.value ? "true" : null}"
-              tabindex="${b.value ? "-1" : null}"
-              @click="${m}"
+              class="${C.value}"
+              style="${e.value || null}"
+              aria-current="${g.value}"
+              disabled="${n.value ? "" : null}"
+              aria-disabled="${n.value ? "true" : null}"
+              tabindex="${n.value ? "-1" : null}"
+              @click="${r}"
             >
               <slot></slot>
             </button>
@@ -281,13 +296,14 @@ function K(c) {
           <a
             part="link"
             href="${t.to}"
-            :class="${h.value}"
-            aria-current="${C.value}"
-            aria-disabled="${b.value ? "true" : null}"
-            tabindex="${b.value ? "-1" : null}"
-            target="${q.value ? "_blank" : null}"
-            rel="${q.value ? "noopener noreferrer" : null}"
-            @click="${m}"
+            class="${C.value}"
+            style="${e.value || null}"
+            aria-current="${g.value}"
+            aria-disabled="${n.value ? "true" : null}"
+            tabindex="${n.value ? "-1" : null}"
+            target="${a.value ? "_blank" : null}"
+            rel="${a.value ? "noopener noreferrer" : null}"
+            @click="${r}"
             ><slot></slot
           ></a>
         `).done()}
@@ -295,11 +311,11 @@ function K(c) {
   }), o;
 }
 export {
-  K as initRouter,
-  $ as matchRoute,
-  J as matchRouteSSR,
-  V as parseQuery,
-  W as resolveRouteComponent,
-  z as useRouter
+  J as initRouter,
+  S as matchRoute,
+  G as matchRouteSSR,
+  D as parseQuery,
+  I as resolveRouteComponent,
+  M as useRouter
 };
 //# sourceMappingURL=custom-elements-runtime.router.es.js.map