@jasonshimmy/custom-elements-runtime 2.3.0 → 2.4.0

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

@@ -1,267 +1,273 @@
-import { component as O, html as S, useOnConnected as N, useOnDisconnected as j, useProps as W, useStyle as F } from "./custom-elements-runtime.es.js";
-import { r as _, c as g } from "./namespace-helpers-Dw1mgQab.js";
-import { createStore as B } from "./custom-elements-runtime.store.es.js";
-import { d as C, a as $ } from "./logger-BuUYv7C_.js";
-import { match as M } from "./custom-elements-runtime.directives.es.js";
-const T = (n) => n ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(n)) : {}, U = /* @__PURE__ */ new WeakMap();
-function V(n) {
+import { component as T, html as P, useOnConnected as U, useOnDisconnected as W, useProps as M, useStyle as V } from "./custom-elements-runtime.es.js";
+import { r as O, c as b } from "./namespace-helpers-Dw1mgQab.js";
+import { createStore as D } from "./custom-elements-runtime.store.es.js";
+import { d as A, a as $ } from "./logger-BuUYv7C_.js";
+import { match as z } from "./custom-elements-runtime.directives.es.js";
+const I = (n) => n ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(n)) : {}, F = /* @__PURE__ */ new WeakMap();
+function H(n) {
   return n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function D(n) {
+function _(n) {
   if (!n) return "/";
   let r = n.replace(/\/+/g, "/");
   return r.startsWith("/") || (r = "/" + r), r.length > 1 && r.endsWith("/") && (r = r.slice(0, -1)), r;
 }
-function z(n) {
-  const r = n.path || "/", t = D(r), f = t === "/" ? [] : t.split("/").filter(Boolean), s = [], i = [];
-  for (let c = 0; c < f.length; c++) {
-    const d = f[c];
+function Q(n) {
+  const r = n.path || "/", t = _(r), h = t === "/" ? [] : t.split("/").filter(Boolean), o = [], s = [];
+  for (let u = 0; u < h.length; u++) {
+    const d = h[u];
     if (d === "*") {
-      if (c !== f.length - 1)
+      if (u !== h.length - 1)
         return $(
           `Route '${n.path}' contains a '*' splat in a non-terminal position; splats must be the last segment. This route will be ignored.`
         ), { invalid: !0 };
-      const p = `splat${s.length}`;
-      s.push(p), i.push("__SPLAT__");
+      const p = `splat${o.length}`;
+      o.push(p), s.push("__SPLAT__");
       continue;
     }
-    const w = d.match(/^:([A-Za-z0-9_-]+)(\*)?$/);
-    if (w) {
-      const p = w[1], b = !!w[2];
-      if (b && c !== f.length - 1)
+    const y = d.match(/^:([A-Za-z0-9_-]+)(\*)?$/);
+    if (y) {
+      const p = y[1], w = !!y[2];
+      if (w && u !== h.length - 1)
         return $(
           `Route '${n.path}' contains a splat param ':${p}*' in a non-terminal position; splats must be the last segment. This route will be ignored.`
         ), { invalid: !0 };
-      s.push(p), i.push(b ? "__SPLAT__" : "([^/]+)");
+      o.push(p), s.push(w ? "__SPLAT__" : "([^/]+)");
       continue;
     }
-    i.push(V(d));
+    s.push(H(d));
   }
-  let o;
-  if (i.length === 0)
-    o = "^/$";
-  else if (i[i.length - 1] === "__SPLAT__") {
-    const d = i.slice(0, -1).join("/");
-    d ? o = `^/${d}(?:/(.*))?(?:/)?$` : o = "^(?:/(.*))?(?:/)?$";
+  let c;
+  if (s.length === 0)
+    c = "^/$";
+  else if (s[s.length - 1] === "__SPLAT__") {
+    const d = s.slice(0, -1).join("/");
+    d ? c = `^/${d}(?:/(.*))?(?:/)?$` : c = "^(?:/(.*))?(?:/)?$";
   } else
-    o = `^/${i.join("/")}(?:/)?$`;
+    c = `^/${s.join("/")}(?:/)?$`;
   try {
-    return { regex: new RegExp(o), paramNames: s };
-  } catch (c) {
-    return $(`Failed to compile route regex for '${n.path}': ${String(c)}`), { invalid: !0 };
+    return { regex: new RegExp(c), paramNames: o };
+  } catch (u) {
+    return $(`Failed to compile route regex for '${n.path}': ${String(u)}`), { invalid: !0 };
   }
 }
-const x = (n, r) => {
-  const t = D(r);
-  for (const f of n) {
-    let s = U.get(f);
-    if (s || (s = z(f), U.set(f, s)), s.invalid) continue;
-    const { regex: i, paramNames: o } = s, c = i.exec(t);
-    if (c) {
-      const d = {}, w = (p) => {
+const C = (n, r) => {
+  const t = _(r);
+  for (const h of n) {
+    let o = F.get(h);
+    if (o || (o = Q(h), F.set(h, o)), o.invalid) continue;
+    const { regex: s, paramNames: c } = o, u = s.exec(t);
+    if (u) {
+      const d = {}, y = (p) => {
         try {
           return decodeURIComponent(p);
         } catch {
           return p;
         }
       };
-      for (let p = 0; p < o.length; p++) {
-        const b = c[p + 1] || "";
-        d[o[p]] = b ? w(b) : "";
+      for (let p = 0; p < c.length; p++) {
+        const w = u[p + 1] || "";
+        d[c[p]] = w ? y(w) : "";
       }
-      return { route: f, params: d };
+      return { route: h, params: d };
     }
   }
   return { route: null, params: {} };
 };
-function A(n, r) {
+function L(n, r) {
   for (const t of n)
-    if (x([t], r).route !== null) return t;
+    if (C([t], r).route !== null) return t;
   return null;
 }
-const L = {};
-async function H(n) {
+const j = {};
+async function Z(n) {
   if (n.component) return n.component;
   if (n.load) {
-    if (L[n.path]) return L[n.path];
+    if (j[n.path]) return j[n.path];
     try {
       const r = await n.load();
-      return L[n.path] = r.default, r.default;
+      return j[n.path] = r.default, r.default;
     } catch {
       throw new Error(`Failed to load component for route: ${n.path}`);
     }
   }
   throw new Error(`No component or loader defined for route: ${n.path}`);
 }
-function I(n) {
-  const { routes: r, base: t = "", initialUrl: f } = n;
-  let s, i, o, c, d, w, p;
-  const b = async (u, l) => {
-    const e = A(r, u.path);
+function G(n) {
+  const { routes: r, base: t = "", initialUrl: h } = n;
+  let o, s, c, u, d, y, p;
+  const w = async (f, i) => {
+    const e = L(r, f.path);
     if (!e || !e.beforeEnter) return !0;
     try {
-      const a = await e.beforeEnter(u, l);
+      const a = await e.beforeEnter(f, i);
       return typeof a == "string" ? (await R(a, !0), !1) : a !== !1;
     } catch (a) {
-      return C("beforeEnter error", a), !1;
+      return A("beforeEnter error", a), !1;
     }
-  }, k = async (u, l) => {
-    const e = A(r, u.path);
+  }, q = async (f, i) => {
+    const e = L(r, f.path);
     if (!e || !e.onEnter) return !0;
     try {
-      const a = await e.onEnter(u, l);
+      const a = await e.onEnter(f, i);
       return typeof a == "string" ? (await R(a, !0), !1) : a !== !1;
     } catch (a) {
-      return C("onEnter error", a), !1;
+      return A("onEnter error", a), !1;
     }
-  }, q = (u, l) => {
-    const e = A(r, u.path);
+  }, N = (f, i) => {
+    const e = L(r, f.path);
     if (!(!e || !e.afterEnter))
       try {
-        e.afterEnter(u, l);
+        e.afterEnter(f, i);
       } catch (a) {
-        C("afterEnter error", a);
+        A("afterEnter error", a);
       }
-  }, R = async (u, l = !1) => {
+  }, R = async (f, i = !1) => {
     try {
-      const e = {
-        path: u.replace(t, "") || "/",
-        query: {}
-      }, a = x(r, e.path);
-      if (!a.route) throw new Error(`No route found for ${e.path}`);
-      const m = o.getState(), h = {
-        path: e.path,
-        params: a.params,
-        query: e.query
+      const e = f.indexOf("#"), a = e >= 0 ? f.slice(e + 1) : "", l = {
+        path: (e >= 0 ? f.slice(0, e) : f).replace(t, "") || "/",
+        query: {},
+        fragment: a
+      }, m = C(r, l.path);
+      if (!m.route) throw new Error(`No route found for ${l.path}`);
+      const v = c.getState(), E = {
+        path: l.path,
+        params: m.params,
+        query: l.query,
+        fragment: l.fragment
       };
-      if (!await b(h, m) || !await k(h, m)) return;
-      typeof window < "u" && typeof document < "u" && (l ? window.history.replaceState({}, "", t + u) : window.history.pushState({}, "", t + u)), o.setState(h), q(h, m);
+      if (!await w(E, v) || !await q(E, v)) return;
+      typeof window < "u" && typeof document < "u" && (i ? window.history.replaceState({}, "", t + f) : window.history.pushState({}, "", t + f)), c.setState(E), N(E, v);
     } catch (e) {
-      C("Navigation error:", e);
+      A("Navigation error:", e);
     }
   };
-  if (typeof window < "u" && typeof document < "u" && typeof f > "u") {
-    s = () => {
-      const l = new URL(window.location.href), e = l.pathname.replace(t, "") || "/", a = T(l.search);
-      return { path: e, query: a };
-    }, i = s();
-    const u = x(r, i.path);
-    o = B({
-      path: i.path,
-      params: u.params,
-      query: i.query
-    }), c = async (l = !1) => {
-      const e = s();
-      await R(e.path, l);
-    }, window.addEventListener("popstate", () => c(!0)), d = (l) => R(l, !1), w = (l) => R(l, !0), p = () => window.history.back();
+  if (typeof window < "u" && typeof document < "u" && typeof h > "u") {
+    o = () => {
+      const i = new URL(window.location.href), e = i.pathname.replace(t, "") || "/", a = I(i.search), g = i.hash && i.hash.length ? i.hash.slice(1) : "";
+      return { path: e, query: a, fragment: g };
+    }, s = o();
+    const f = C(r, s.path);
+    c = D({
+      path: s.path,
+      params: f.params,
+      query: s.query,
+      fragment: s.fragment
+    }), u = async (i = !1) => {
+      const e = o();
+      await R(e.path, i);
+    }, window.addEventListener("popstate", () => u(!0)), d = (i) => R(i, !1), y = (i) => R(i, !0), p = () => window.history.back();
   } else {
-    s = () => {
-      const e = new URL(f || "/", "http://localhost"), a = e.pathname.replace(t, "") || "/", m = T(e.search);
-      return { path: a, query: m };
-    }, i = s();
-    const u = x(r, i.path);
-    o = B({
-      path: i.path,
-      params: u.params,
-      query: i.query
-    }), c = async () => {
-      const e = s();
-      await l(e.path);
+    o = () => {
+      const e = new URL(h || "/", "http://localhost"), a = e.pathname.replace(t, "") || "/", g = I(e.search), l = e.hash && e.hash.length ? e.hash.slice(1) : "";
+      return { path: a, query: g, fragment: l };
+    }, s = o();
+    const f = C(r, s.path);
+    c = D({
+      path: s.path,
+      params: f.params,
+      query: s.query,
+      fragment: s.fragment
+    }), u = async () => {
+      const e = o();
+      await i(e.path);
     };
-    const l = async (e) => {
+    const i = async (e) => {
       try {
-        const a = {
-          path: e.replace(t, "") || "/",
-          query: {}
-        }, m = x(r, a.path);
-        if (!m.route) throw new Error(`No route found for ${a.path}`);
-        const h = o.getState(), v = {
-          path: a.path,
-          params: m.params,
-          query: a.query
-        }, y = A(r, v.path);
-        if (y?.beforeEnter) {
-          const E = await y.beforeEnter(v, h);
-          if (typeof E == "string") {
-            await l(E);
+        const a = e.indexOf("#"), g = a >= 0 ? e.slice(a + 1) : "", m = {
+          path: (a >= 0 ? e.slice(0, a) : e).replace(t, "") || "/",
+          query: {},
+          fragment: g
+        }, v = C(r, m.path);
+        if (!v.route) throw new Error(`No route found for ${m.path}`);
+        const E = c.getState(), k = {
+          path: m.path,
+          params: v.params,
+          query: m.query,
+          fragment: m.fragment
+        }, x = L(r, k.path);
+        if (x?.beforeEnter) {
+          const S = await x.beforeEnter(k, E);
+          if (typeof S == "string") {
+            await i(S);
             return;
           }
-          if (E === !1) return;
+          if (S === !1) return;
         }
-        if (y?.onEnter) {
-          const E = await y.onEnter(v, h);
-          if (typeof E == "string") {
-            await l(E);
+        if (x?.onEnter) {
+          const S = await x.onEnter(k, E);
+          if (typeof S == "string") {
+            await i(S);
             return;
           }
-          if (E === !1) return;
+          if (S === !1) return;
         }
-        o.setState(v), y?.afterEnter && y.afterEnter(v, h);
+        c.setState(k), x?.afterEnter && x.afterEnter(k, E);
       } catch (a) {
-        throw C("SSR navigation error:", a), a;
+        throw A("SSR navigation error:", a), a;
       }
     };
-    d = async (e) => l(e), w = async (e) => l(e), p = () => {
+    d = async (e) => i(e), y = async (e) => i(e), p = () => {
     };
   }
   return {
-    store: o,
+    store: c,
     push: d,
-    replace: w,
+    replace: y,
     back: p,
-    subscribe: o.subscribe,
-    matchRoute: (u) => x(r, u),
-    getCurrent: () => o.getState(),
-    resolveRouteComponent: H
+    subscribe: c.subscribe,
+    matchRoute: (f) => C(r, f),
+    getCurrent: () => c.getState(),
+    resolveRouteComponent: Z
   };
 }
-function X(n, r) {
-  return x(n, r);
+function et(n, r) {
+  return C(n, r);
 }
-let P = null;
-function Y(n) {
-  const r = I(n);
-  return P = r, O("router-view", async () => {
-    const t = P || r;
-    if (!t) return S`<div>Router not initialized.</div>`;
-    const f = _(t.getCurrent());
-    let s;
-    N(() => {
+let B = null;
+function rt(n) {
+  const r = G(n);
+  return B = r, T("router-view", async () => {
+    const t = B || r;
+    if (!t) return P`<div>Router not initialized.</div>`;
+    const h = O(t.getCurrent());
+    let o;
+    U(() => {
       try {
-        t && typeof t.subscribe == "function" && (s = t.subscribe((o) => {
+        t && typeof t.subscribe == "function" && (o = t.subscribe((c) => {
           try {
-            f.value = o;
-          } catch (c) {
-            $("router-view subscription update failed", c);
+            h.value = c;
+          } catch (u) {
+            $("router-view subscription update failed", u);
           }
         }));
-      } catch (o) {
-        $("router-view subscribe failed", o);
+      } catch (c) {
+        $("router-view subscribe failed", c);
       }
-    }), j(() => {
-      if (typeof s == "function")
+    }), W(() => {
+      if (typeof o == "function")
         try {
-          s();
-        } catch (o) {
-          $("router-view unsubscribe failed", o);
+          o();
+        } catch (c) {
+          $("router-view unsubscribe failed", c);
         }
     });
-    const i = t.matchRoute(f.value.path);
-    if (!i || !i.route) return S`<div>Not found</div>`;
+    const s = t.matchRoute(h.value.path);
+    if (!s || !s.route) return P`<div>Not found</div>`;
     try {
-      const c = await t.resolveRouteComponent(i.route);
-      if (typeof c == "string")
-        return { tag: c, props: {}, children: [] };
-      if (typeof c == "function") {
-        const d = c();
+      const u = await t.resolveRouteComponent(s.route);
+      if (typeof u == "string")
+        return { tag: u, props: {}, children: [] };
+      if (typeof u == "function") {
+        const d = u();
         return (d instanceof Promise ? d : Promise.resolve(d)).then((p) => typeof p == "string" ? { tag: p, props: {}, children: [] } : p);
       }
-      return S`<div>Invalid route component</div>`;
+      return P`<div>Invalid route component</div>`;
     } catch {
-      return S`<div>Invalid route component</div>`;
+      return P`<div>Invalid route component</div>`;
     }
-  }), O("router-link", () => {
-    const t = W({
+  }), T("router-link", () => {
+    const t = M({
       to: "",
       tag: "a",
       replace: !1,
@@ -274,94 +280,106 @@ function Y(n) {
       // allow host `class` and `style` attributes to be read via useProps
       class: "",
       style: ""
-    }), f = P || r, s = _(f.getCurrent());
-    let i;
-    F(() => "a,button{display:inline-block;}");
-    const o = _(t.class || ""), c = _(t.style || "");
-    N((m) => {
+    }), h = B || r, o = O(h.getCurrent());
+    let s;
+    V(() => "a,button{display:inline-block;}");
+    const c = O(t.class || ""), u = O(t.style || "");
+    U((g) => {
       try {
-        f && typeof f.subscribe == "function" && (i = f.subscribe((h) => {
+        h && typeof h.subscribe == "function" && (s = h.subscribe((l) => {
           try {
-            s.value = h;
-          } catch (v) {
-            $("router-link subscription update failed", v);
+            o.value = l;
+          } catch (m) {
+            $("router-link subscription update failed", m);
           }
         }));
-      } catch (h) {
-        $("router-link subscribe failed", h);
+      } catch (l) {
+        $("router-link subscribe failed", l);
       }
       try {
-        const h = m?._host;
-        if (h instanceof HTMLElement) {
-          const v = h.getAttribute("class"), y = h.getAttribute("style");
-          v && (o.value = v), y && (c.value = y), v !== null && h.removeAttribute("class"), y !== null && h.removeAttribute("style");
+        const l = g?._host;
+        if (l instanceof HTMLElement) {
+          const m = l.getAttribute("class"), v = l.getAttribute("style");
+          m && (c.value = m), v && (u.value = v), m !== null && l.removeAttribute("class"), v !== null && l.removeAttribute("style");
         }
-      } catch (h) {
-        $("router-link host migration failed", h);
+      } catch (l) {
+        $("router-link host migration failed", l);
       }
-    }), j(() => {
-      if (typeof i == "function")
+    }), W(() => {
+      if (typeof s == "function")
         try {
-          i();
-        } catch (m) {
-          $("router-link unsubscribe failed", m);
+          s();
+        } catch (g) {
+          $("router-link unsubscribe failed", g);
         }
     });
-    const d = g(
-      () => s.value.path === t.to
-    ), w = g(
-      () => t.exact ? d.value : s.value && typeof s.value.path == "string" ? s.value.path.startsWith(t.to) : !1
-    ), p = g(() => {
-      const h = (o && o.value || t.class || "").split(/\s+/).filter(Boolean), v = {};
-      for (const y of h) v[y] = !0;
-      return v;
-    }), b = g(() => ({
+    const d = b(() => {
+      const l = (t.to || "").split("#")[0];
+      try {
+        return _(o.value.path) === _(l);
+      } catch {
+        return o.value.path === l;
+      }
+    }), y = b(() => {
+      const l = (t.to || "").split("#")[0];
+      if (t.exact) return d.value;
+      try {
+        const m = _(o.value.path), v = _(l);
+        return m.startsWith(v);
+      } catch {
+        return o.value && typeof o.value.path == "string" && o.value.path.startsWith(l);
+      }
+    }), p = b(() => {
+      const l = (c && c.value || t.class || "").split(/\s+/).filter(Boolean), m = {};
+      for (const v of l) m[v] = !0;
+      return m;
+    }), w = b(() => ({
       ...p.value,
-      [t.activeClass || "active"]: w.value,
+      [t.activeClass || "active"]: y.value,
       [t.exactActiveClass || "exact-active"]: d.value
-    })), k = g(
-      () => Object.keys(b.value).filter((m) => b.value[m]).join(" ")
-    ), q = g(() => t.tag === "button"), R = g(
+    })), q = b(
+      () => Object.keys(w.value).filter((g) => w.value[g]).join(" ")
+    ), N = b(() => t.tag === "button"), R = b(
       () => d.value ? t.ariaCurrentValue : ""
-    ), u = g(() => !!t.disabled), l = g(
+    ), f = b(() => !!t.disabled), i = b(
       () => !!t.external && (t.tag === "a" || !t.tag)
-    ), e = g(
-      () => c && c.value || t.style || ""
-    ), a = (m) => {
+    ), e = b(
+      () => u && u.value || t.style || ""
+    ), a = (g) => {
       if (t.disabled) {
-        m.preventDefault();
+        g.preventDefault();
         return;
       }
-      t.external && (t.tag === "a" || !t.tag) || (m.preventDefault(), t.replace ? f.replace(t.to) : f.push(t.to));
+      t.external && (t.tag === "a" || !t.tag) || (g.preventDefault(), t.replace ? h.replace(t.to) : h.push(t.to));
     };
-    return S`
-      ${M().when(
-      q.value,
-      S`
+    return P`
+      ${z().when(
+      N.value,
+      P`
             <button
               part="button"
-              class="${k.value}"
+              class="${q.value}"
               style="${e.value || null}"
               aria-current="${R.value}"
-              disabled="${u.value ? "" : null}"
-              aria-disabled="${u.value ? "true" : null}"
-              tabindex="${u.value ? "-1" : null}"
+              disabled="${f.value ? "" : null}"
+              aria-disabled="${f.value ? "true" : null}"
+              tabindex="${f.value ? "-1" : null}"
               @click="${a}"
             >
               <slot></slot>
             </button>
           `
-    ).otherwise(S`
+    ).otherwise(P`
           <a
             part="link"
             href="${t.to}"
-            class="${k.value}"
+            class="${q.value}"
             style="${e.value || null}"
             aria-current="${R.value}"
-            aria-disabled="${u.value ? "true" : null}"
-            tabindex="${u.value ? "-1" : null}"
-            target="${l.value ? "_blank" : null}"
-            rel="${l.value ? "noopener noreferrer" : null}"
+            aria-disabled="${f.value ? "true" : null}"
+            tabindex="${f.value ? "-1" : null}"
+            target="${i.value ? "_blank" : null}"
+            rel="${i.value ? "noopener noreferrer" : null}"
             @click="${a}"
             ><slot></slot
           ></a>
@@ -370,11 +388,12 @@ function Y(n) {
   }), r;
 }
 export {
-  Y as initRouter,
-  x as matchRoute,
-  X as matchRouteSSR,
-  T as parseQuery,
-  H as resolveRouteComponent,
-  I as useRouter
+  rt as initRouter,
+  C as matchRoute,
+  et as matchRouteSSR,
+  _ as normalizePathForRoute,
+  I as parseQuery,
+  Z as resolveRouteComponent,
+  G as useRouter
 };
 //# sourceMappingURL=custom-elements-runtime.router.es.js.map