@jasonshimmy/custom-elements-runtime 2.2.8 → 2.3.0

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

@@ -1,208 +1,267 @@
-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 h = [], l = t.path.replace(/:[^/]+/g, (i) => (h.push(i.slice(1)), "([^/]+)")), f = new RegExp(`^${l}$`), s = o.match(f);
-    if (s) {
-      const i = {};
-      return h.forEach((v, b) => {
-        i[v] = s[b + 1];
-      }), { route: t, params: i };
+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) {
+  return n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function D(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];
+    if (d === "*") {
+      if (c !== f.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__");
+      continue;
+    }
+    const w = d.match(/^:([A-Za-z0-9_-]+)(\*)?$/);
+    if (w) {
+      const p = w[1], b = !!w[2];
+      if (b && c !== f.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__" : "([^/]+)");
+      continue;
+    }
+    i.push(V(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 = "^(?:/(.*))?(?:/)?$";
+  } else
+    o = `^/${i.join("/")}(?:/)?$`;
+  try {
+    return { regex: new RegExp(o), paramNames: s };
+  } catch (c) {
+    return $(`Failed to compile route regex for '${n.path}': ${String(c)}`), { 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) => {
+        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) : "";
+      }
+      return { route: f, params: d };
     }
   }
   return { route: null, params: {} };
 };
-function A(c, o) {
-  for (const t of c)
-    if (S([t], o).route !== null) return t;
+function A(n, r) {
+  for (const t of n)
+    if (x([t], r).route !== null) return t;
   return null;
 }
-const O = {};
-async function I(c) {
-  if (c.component) return c.component;
-  if (c.load) {
-    if (O[c.path]) return O[c.path];
+const L = {};
+async function H(n) {
+  if (n.component) return n.component;
+  if (n.load) {
+    if (L[n.path]) return L[n.path];
     try {
-      const o = await c.load();
-      return O[c.path] = o.default, o.default;
+      const r = await n.load();
+      return L[n.path] = r.default, r.default;
     } catch {
-      throw new Error(`Failed to load component for route: ${c.path}`);
+      throw new Error(`Failed to load component for route: ${n.path}`);
     }
   }
-  throw new Error(`No component or loader defined for route: ${c.path}`);
+  throw new Error(`No component or loader defined for route: ${n.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);
+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);
     if (!e || !e.beforeEnter) return !0;
     try {
-      const r = await e.beforeEnter(n, a);
-      return typeof r == "string" ? (await g(r, !0), !1) : r !== !1;
-    } catch (r) {
-      return x("beforeEnter error", r), !1;
+      const a = await e.beforeEnter(u, l);
+      return typeof a == "string" ? (await R(a, !0), !1) : a !== !1;
+    } catch (a) {
+      return C("beforeEnter error", a), !1;
     }
-  }, C = async (n, a) => {
-    const e = A(o, n.path);
+  }, k = async (u, l) => {
+    const e = A(r, u.path);
     if (!e || !e.onEnter) return !0;
     try {
-      const r = await e.onEnter(n, a);
-      return typeof r == "string" ? (await g(r, !0), !1) : r !== !1;
-    } catch (r) {
-      return x("onEnter error", r), !1;
+      const a = await e.onEnter(u, l);
+      return typeof a == "string" ? (await R(a, !0), !1) : a !== !1;
+    } catch (a) {
+      return C("onEnter error", a), !1;
     }
-  }, L = (n, a) => {
-    const e = A(o, n.path);
+  }, q = (u, l) => {
+    const e = A(r, u.path);
     if (!(!e || !e.afterEnter))
       try {
-        e.afterEnter(n, a);
-      } catch (r) {
-        x("afterEnter error", r);
+        e.afterEnter(u, l);
+      } catch (a) {
+        C("afterEnter error", a);
       }
-  }, g = async (n, a = !1) => {
+  }, R = async (u, l = !1) => {
     try {
       const e = {
-        path: n.replace(t, "") || "/",
+        path: u.replace(t, "") || "/",
         query: {}
-      }, r = S(o, e.path);
-      if (!r.route) throw new Error(`No route found for ${e.path}`);
-      const p = s.getState(), u = {
+      }, 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: r.params,
+        params: a.params,
         query: e.query
       };
-      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);
+      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);
     } catch (e) {
-      x("Navigation error:", e);
+      C("Navigation error:", e);
     }
   };
-  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 };
-    }, 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();
+  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();
   } else {
-    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);
+    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);
     };
-    const a = async (e) => {
+    const l = async (e) => {
       try {
-        const r = {
+        const a = {
           path: e.replace(t, "") || "/",
           query: {}
-        }, 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: p.params,
-          query: r.query
-        }, y = A(o, d.path);
+        }, 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(d, u);
+          const E = await y.beforeEnter(v, h);
           if (typeof E == "string") {
-            await a(E);
+            await l(E);
             return;
           }
           if (E === !1) return;
         }
         if (y?.onEnter) {
-          const E = await y.onEnter(d, u);
+          const E = await y.onEnter(v, h);
           if (typeof E == "string") {
-            await a(E);
+            await l(E);
             return;
           }
           if (E === !1) return;
         }
-        s.setState(d), y?.afterEnter && y.afterEnter(d, u);
-      } catch (r) {
-        throw x("SSR navigation error:", r), r;
+        o.setState(v), y?.afterEnter && y.afterEnter(v, h);
+      } catch (a) {
+        throw C("SSR navigation error:", a), a;
       }
     };
-    v = async (e) => a(e), b = async (e) => a(e), w = () => {
+    d = async (e) => l(e), w = async (e) => l(e), p = () => {
     };
   }
   return {
-    store: s,
-    push: v,
-    replace: b,
-    back: w,
-    subscribe: s.subscribe,
-    matchRoute: (n) => S(o, n),
-    getCurrent: () => s.getState(),
-    resolveRouteComponent: I
+    store: o,
+    push: d,
+    replace: w,
+    back: p,
+    subscribe: o.subscribe,
+    matchRoute: (u) => x(r, u),
+    getCurrent: () => o.getState(),
+    resolveRouteComponent: H
   };
 }
-function G(c, o) {
-  return S(c, o);
+function X(n, r) {
+  return x(n, r);
 }
-let N = null;
-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 h = q(t.getCurrent());
-    let l;
-    B(() => {
+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(() => {
       try {
-        t && typeof t.subscribe == "function" && (l = t.subscribe((s) => {
+        t && typeof t.subscribe == "function" && (s = t.subscribe((o) => {
           try {
-            h.value = s;
-          } catch (i) {
-            $("router-view subscription update failed", i);
+            f.value = o;
+          } catch (c) {
+            $("router-view subscription update failed", c);
           }
         }));
-      } catch (s) {
-        $("router-view subscribe failed", s);
+      } catch (o) {
+        $("router-view subscribe failed", o);
       }
-    }), U(() => {
-      if (typeof l == "function")
+    }), j(() => {
+      if (typeof s == "function")
         try {
-          l();
-        } catch (s) {
-          $("router-view unsubscribe failed", s);
+          s();
+        } catch (o) {
+          $("router-view unsubscribe failed", o);
         }
     });
-    const f = t.matchRoute(h.value.path);
-    if (!f || !f.route) return R`<div>Not found</div>`;
+    const i = t.matchRoute(f.value.path);
+    if (!i || !i.route) return S`<div>Not found</div>`;
     try {
-      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);
+      const c = await t.resolveRouteComponent(i.route);
+      if (typeof c == "string")
+        return { tag: c, props: {}, children: [] };
+      if (typeof c == "function") {
+        const d = c();
+        return (d instanceof Promise ? d : Promise.resolve(d)).then((p) => typeof p == "string" ? { tag: p, props: {}, children: [] } : p);
       }
-      return R`<div>Invalid route component</div>`;
+      return S`<div>Invalid route component</div>`;
     } catch {
-      return R`<div>Invalid route component</div>`;
+      return S`<div>Invalid route component</div>`;
     }
-  }), P("router-link", () => {
-    const t = V({
+  }), O("router-link", () => {
+    const t = W({
       to: "",
       tag: "a",
       replace: !1,
@@ -215,107 +274,107 @@ function J(c) {
       // 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) => {
+    }), f = P || r, s = _(f.getCurrent());
+    let i;
+    F(() => "a,button{display:inline-block;}");
+    const o = _(t.class || ""), c = _(t.style || "");
+    N((m) => {
       try {
-        h && typeof h.subscribe == "function" && (f = h.subscribe((u) => {
+        f && typeof f.subscribe == "function" && (i = f.subscribe((h) => {
           try {
-            l.value = u;
-          } catch (d) {
-            $("router-link subscription update failed", d);
+            s.value = h;
+          } catch (v) {
+            $("router-link subscription update failed", v);
           }
         }));
-      } catch (u) {
-        $("router-link subscribe failed", u);
+      } catch (h) {
+        $("router-link subscribe failed", h);
       }
       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");
+        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");
         }
-      } catch (u) {
-        $("router-link host migration failed", u);
+      } catch (h) {
+        $("router-link host migration failed", h);
       }
-    }), U(() => {
-      if (typeof f == "function")
+    }), j(() => {
+      if (typeof i == "function")
         try {
-          f();
-        } catch (p) {
-          $("router-link unsubscribe failed", p);
+          i();
+        } catch (m) {
+          $("router-link unsubscribe failed", m);
         }
     });
-    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(
+    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(() => ({
+      ...p.value,
+      [t.activeClass || "active"]: w.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(
+      () => d.value ? t.ariaCurrentValue : ""
+    ), u = g(() => !!t.disabled), l = g(
       () => !!t.external && (t.tag === "a" || !t.tag)
-    ), e = m(
-      () => i && i.value || t.style || ""
-    ), r = (p) => {
+    ), e = g(
+      () => c && c.value || t.style || ""
+    ), a = (m) => {
       if (t.disabled) {
-        p.preventDefault();
+        m.preventDefault();
         return;
       }
-      t.external && (t.tag === "a" || !t.tag) || (p.preventDefault(), t.replace ? h.replace(t.to) : h.push(t.to));
+      t.external && (t.tag === "a" || !t.tag) || (m.preventDefault(), t.replace ? f.replace(t.to) : f.push(t.to));
     };
-    return R`
-      ${F().when(
-      L.value,
-      R`
+    return S`
+      ${M().when(
+      q.value,
+      S`
             <button
               part="button"
-              class="${C.value}"
+              class="${k.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}"
+              aria-current="${R.value}"
+              disabled="${u.value ? "" : null}"
+              aria-disabled="${u.value ? "true" : null}"
+              tabindex="${u.value ? "-1" : null}"
+              @click="${a}"
             >
               <slot></slot>
             </button>
           `
-    ).otherwise(R`
+    ).otherwise(S`
           <a
             part="link"
             href="${t.to}"
-            class="${C.value}"
+            class="${k.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}"
+            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}"
+            @click="${a}"
             ><slot></slot
           ></a>
         `).done()}
     `;
-  }), o;
+  }), r;
 }
 export {
-  J as initRouter,
-  S as matchRoute,
-  G as matchRouteSSR,
-  D as parseQuery,
-  I as resolveRouteComponent,
-  M as useRouter
+  Y as initRouter,
+  x as matchRoute,
+  X as matchRouteSSR,
+  T as parseQuery,
+  H as resolveRouteComponent,
+  I as useRouter
 };
 //# sourceMappingURL=custom-elements-runtime.router.es.js.map