@ripetchor/r-router 1.0.1 → 1.0.2

package/README.md

@@ -28,7 +28,7 @@ const routes = [
   },
   {
     path: '/about',
-    loadComponent: async () => {
+    lazy: async () => {
       const { default: About } = await import('./About');
       return About();
     },
@@ -111,7 +111,7 @@ Navigates, replacing history entry.
 ### Route Types
 
 - `SyncRoute`: Returns `HTMLElement` via `component(ctx: RouteContext)`.
-- `AsyncRoute`: Returns `Promise<HTMLElement>` via `loadComponent(ctx: RouteContext)`.
+- `AsyncRoute`: Returns `Promise<HTMLElement>` via `lazy(ctx: RouteContext)`.
 - `RedirectRoute`: Redirects via `redirectTo`.
 
 #### `Route.beforeEnter`

package/dist/index.d.ts

@@ -1,11 +1,5 @@
 export declare type AfterEnterHook = (ctx: RouteContext) => void | Promise<void>;
 
-declare interface AsyncRoute extends BaseRoute {
-    redirectTo?: never;
-    component?(): never;
-    loadComponent(ctx: RouteContext): Promise<HTMLElement>;
-}
-
 declare interface BaseRoute {
     path: string;
     title?: string | ((ctx: RouteContext) => string);
@@ -18,36 +12,107 @@ export declare type BeforeEnterHook = (ctx: RouteContext) => boolean | string |
 
 export declare function createRouter(routes: Route[], options?: RouterOptions): Router;
 
+declare interface LazyRoute extends BaseRoute {
+    redirectTo?: never;
+    component?(): never;
+    lazy(ctx: RouteContext): Promise<HTMLElement>;
+}
+
 declare interface RedirectRoute extends BaseRoute {
     redirectTo: string;
     component?(): never;
-    loadComponent?(): never;
+    lazy?(): never;
 }
 
-export declare type Route = SyncRoute | AsyncRoute | RedirectRoute;
+export declare type Route = SyncRoute | LazyRoute | RedirectRoute;
 
 export declare interface RouteContext {
     from: string | null;
     to: string;
-    params: Record<string, string>;
+    params: Record<string, string | undefined>;
     query: URLSearchParams;
     signal: AbortSignal;
 }
 
 export declare class Router {
+    static instance: Router | null;
+    private readonly dispatcher;
     private readonly routerController;
-    private initialized;
     private navigationController;
+    private initialized;
     private readonly routeMatchers;
     private readonly options;
     private readonly outlet;
     private currentPath;
+    private pendingPath;
     constructor(routes: Route[], options?: RouterOptions);
+    on<K extends keyof RouterEventMap>(event: K, handler: RouterDispatcherHandler<RouterEventMap[K]>): () => void;
+    private emit;
     initialize(): Promise<Readonly<RouterOutlet>>;
+    private handlePopState;
     destroy(): void;
     private navigate;
+    private abortNavigation;
+    private cancelCurrentNavigation;
+    private finalizeNavigation;
     push(path: string, state?: unknown): Promise<void>;
     replace(path: string, state?: unknown): Promise<void>;
+    getCurrentPath(): string | null;
+    getPendingPath(): string | null;
+}
+
+declare type RouterDispatcherHandler<T> = (payload: T) => void;
+
+declare type RouterEventMap = {
+    navigationstart: {
+        from: string | null;
+        to: string;
+        mode: "push" | "replace" | "none";
+    };
+    navigating: {
+        from: string | null;
+        to: string;
+        depth: number;
+    };
+    navigationend: {
+        from: string | null;
+        to: string;
+        successful: boolean;
+    };
+    pathchanged: {
+        from: string | null;
+        to: string;
+    };
+    querychanged: {
+        from: URLSearchParams;
+        to: URLSearchParams;
+    };
+    navigationabort: {
+        from: string | null;
+        to: string;
+        reason: string;
+    };
+};
+
+export declare class RouterLink extends HTMLAnchorElement {
+    private isActive;
+    private isPending;
+    private unsubscribeFns;
+    private props;
+    constructor(props: RouterLinkProps);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private applyClass;
+}
+
+declare interface RouterLinkProps {
+    to: string;
+    className?: string | ((params: {
+        isActive: boolean;
+        isPending: boolean;
+    }) => string);
+    textContent: string;
+    replace?: boolean;
 }
 
 declare interface RouterOptions {
@@ -68,7 +133,7 @@ declare type RouterOutletProps = {
 declare interface SyncRoute extends BaseRoute {
     redirectTo?: never;
     component(ctx: RouteContext): HTMLElement;
-    loadComponent?(): Promise<HTMLElement>;
+    lazy?(): never;
 }
 
 export declare function withAbortSignal<T>(fn: () => Promise<T>, signal: AbortSignal): Promise<T>;

package/dist/index.js

@@ -1,6 +1,6 @@
-function P(t, e) {
-  const o = document.createElement("div");
-  o.style.cssText = `
+function z(e, t) {
+  const n = document.createElement("div");
+  n.style.cssText = `
     position: fixed;
     inset: 0;
     background-color: rgba(0, 0, 0, 0.5);
@@ -11,8 +11,8 @@ function P(t, e) {
     backdrop-filter: blur(4px);
     animation: fadeIn 0.25s ease;
   `;
-  const n = document.createElement("div");
-  n.style.cssText = `
+  const o = document.createElement("div");
+  o.style.cssText = `
     position: relative;
     max-width: 80dvh;
     width: 100%;
@@ -33,15 +33,15 @@ function P(t, e) {
     color: var(--accent);
   `;
   const i = document.createElement("h2");
-  i.textContent = t?.message || "An unexpected error occurred.", i.style.cssText = `
+  i.textContent = e?.message || "An unexpected error occurred.", i.style.cssText = `
     font-size: 1.1rem;
     margin-bottom: 16px;
     opacity: 0.9;
   `;
-  const a = document.createElement("div"), s = document.createElement("p"), c = document.createElement("p");
-  s.textContent = e?.from ?? "", c.textContent = e?.to ?? "", a.append(s, c);
-  const d = document.createElement("pre");
-  d.textContent = t?.stack || "", d.style.cssText = `
+  const a = document.createElement("div"), f = document.createElement("p"), l = document.createElement("p");
+  f.textContent = t?.from ?? "", l.textContent = t?.to ?? "", a.append(f, l);
+  const c = document.createElement("pre");
+  c.textContent = e?.stack || "", c.style.cssText = `
     font-size: 0.9rem;
     max-height: 30vh;
     overflow: auto;
@@ -52,8 +52,8 @@ function P(t, e) {
     white-space: pre-wrap;
     margin-bottom: 24px;
   `;
-  const f = document.createElement("button");
-  f.textContent = "Reload Page", f.style.cssText = `
+  const s = document.createElement("button");
+  s.textContent = "Reload Page", s.style.cssText = `
     cursor: pointer;
     padding: 10px 20px;
     border: none;
@@ -64,8 +64,8 @@ function P(t, e) {
     color: var(--button-text);
     transition: background-color 0.25s;
   `;
-  const l = document.createElement("button");
-  l.innerHTML = "✕", l.setAttribute("aria-label", "Close error dialog"), l.style.cssText = `
+  const u = document.createElement("button");
+  u.innerHTML = "✕", u.setAttribute("aria-label", "Close error dialog"), u.style.cssText = `
     position: absolute;
     top: 12px;
     right: 12px;
@@ -76,391 +76,444 @@ function P(t, e) {
     cursor: pointer;
     opacity: 0.7;
     transition: opacity 0.25s;
-  `, l.onmouseenter = () => {
-    l.style.opacity = "1";
-  }, l.onmouseleave = () => {
-    l.style.opacity = "0.7";
-  }, l.onclick = () => {
-    o.remove();
-  }, f.onmouseenter = () => {
-    f.style.backgroundColor = "var(--button-bg-hover)";
-  }, f.onmouseleave = () => {
-    f.style.backgroundColor = "var(--button-bg)";
-  }, f.onclick = () => {
+  `, u.onmouseenter = () => {
+    u.style.opacity = "1";
+  }, u.onmouseleave = () => {
+    u.style.opacity = "0.7";
+  }, u.onclick = () => {
+    n.remove();
+  }, s.onmouseenter = () => {
+    s.style.backgroundColor = "var(--button-bg-hover)";
+  }, s.onmouseleave = () => {
+    s.style.backgroundColor = "var(--button-bg)";
+  }, s.onclick = () => {
     location.reload();
-  }, o.appendChild(n), n.append(l, r, i, a), t.stack && n.append(d), n.append(f);
-  const g = (u) => {
-    u.key === "Escape" && o.remove();
+  }, n.appendChild(o), o.append(u, r, i, a), e.stack && o.append(c), o.append(s);
+  const w = (h) => {
+    h.key === "Escape" && n.remove();
   };
-  window.addEventListener("keydown", g);
-  const w = new MutationObserver(() => {
-    document.body.contains(o) || (window.removeEventListener("keydown", g), w.disconnect());
+  window.addEventListener("keydown", w);
+  const b = new MutationObserver(() => {
+    document.body.contains(n) || (window.removeEventListener("keydown", w), b.disconnect());
   });
-  w.observe(document.body, { childList: !0 });
-  const y = () => {
-    const u = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    n.style.setProperty("--bg", u ? "#2b2b2b" : "#fff"), n.style.setProperty("--text", u ? "#eee" : "#222"), n.style.setProperty("--accent", u ? "#ff6b6b" : "#e74c3c"), n.style.setProperty(
+  b.observe(document.body, { childList: !0 });
+  const v = () => {
+    const h = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    o.style.setProperty("--bg", h ? "#2b2b2b" : "#fff"), o.style.setProperty("--text", h ? "#eee" : "#222"), o.style.setProperty("--accent", h ? "#ff6b6b" : "#e74c3c"), o.style.setProperty(
       "--code-bg",
-      u ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
-    ), n.style.setProperty("--button-bg", u ? "#3498db55" : "#3498db"), n.style.setProperty(
+      h ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
+    ), o.style.setProperty("--button-bg", h ? "#3498db55" : "#3498db"), o.style.setProperty(
       "--button-bg-hover",
-      u ? "#3498db88" : "#2980b9"
-    ), n.style.setProperty("--button-text", "#fff");
+      h ? "#3498db88" : "#2980b9"
+    ), o.style.setProperty("--button-text", "#fff");
   };
-  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", y), y();
-  const b = document.createElement("style");
-  return b.textContent = `
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", v), v();
+  const E = document.createElement("style");
+  return E.textContent = `
     @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
     @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-  `, document.head.appendChild(b), o;
+  `, document.head.appendChild(E), n;
 }
-async function p(t, e) {
-  if (e.aborted)
-    throw new DOMException("Aborted", "AbortError");
-  return new Promise((o, n) => {
-    const r = () => n(new DOMException("Aborted", "AbortError"));
-    e.addEventListener("abort", r), t().then(o).catch(n).finally(() => {
-      e.removeEventListener("abort", r);
-    });
-  });
+function g(e, t) {
+  const { promise: n, resolve: o, reject: r } = Promise.withResolvers(), i = new DOMException("Aborted", "AbortError");
+  if (t.aborted)
+    return r(i), n;
+  function a() {
+    r(i);
+  }
+  return t.addEventListener("abort", a, { once: !0 }), e().then(o, r), n;
 }
-function k(t) {
-  const e = typeof t == "string" ? t : "Unknown error";
-  return t instanceof Error ? t : new Error(e);
+function R(e) {
+  const t = typeof e == "string" ? e : "Unknown error";
+  return e instanceof Error ? e : new Error(t);
 }
-function T(t, e, o) {
-  t.title ? document.title = typeof t.title == "function" ? t.title(e) : t.title : document.title = o ?? "";
+function S(e, t, n) {
+  e.title ? document.title = typeof e.title == "function" ? e.title(t) : e.title : document.title = n ?? "";
 }
-function m(t, e, o) {
-  const n = e ?? null;
-  switch (o) {
+function y(e, t, n) {
+  const o = t ?? null;
+  switch (n) {
     case "push":
-      window.history.pushState(n, "", t);
+      window.history.pushState(o, "", e);
       break;
     case "replace":
-      window.history.replaceState(n, "", t);
+      window.history.replaceState(o, "", e);
       break;
   }
 }
-function L(t, e) {
-  t.replaceChildren(e);
+function T(e, t) {
+  e.replaceChildren(t);
 }
-function h(t, e, o, n, r) {
-  const i = k(e), a = o?.errorComponent?.(i, n) ?? r?.(i) ?? P(i, n);
-  t.replaceChildren(a);
+function m(e, t, n, o, r) {
+  const i = R(t), a = n?.errorComponent?.(i, o) ?? r?.(i) ?? z(i, o);
+  e.replaceChildren(a);
 }
-const A = "*";
-function z({ path: t }) {
-  return t.includes(":");
+function L(e) {
+  const [, t] = e.split("?");
+  return new URLSearchParams(t || "");
 }
-function x(t) {
-  const [, e] = t.split("?");
-  return new URLSearchParams(e || "");
-}
-function S({ path: t }) {
-  const e = t.replace(
-    /:([^/]+)/g,
-    (o, n) => `(?<${n}>[^/]+)`
-  );
-  return new RegExp(`^${e}$`);
-}
-function $(t) {
-  const e = S(t);
-  return {
-    route: t,
-    redirectTo: t.redirectTo || null,
-    match(o) {
-      const n = o.split("?")[0];
-      return e.test(n);
-    },
-    getParams(o) {
-      return e.exec(o)?.groups ?? {};
-    },
-    getQuery: x
-  };
-}
-function M({ path: t }) {
-  return t === A ? new RegExp("^.*$") : new RegExp(`^${t}$`);
-}
-function W(t) {
-  const e = M(t);
+function A(e) {
+  const t = new URLPattern({ pathname: e.path });
   return {
-    route: t,
-    redirectTo: t.redirectTo || null,
-    match(o) {
-      const n = o.split("?")[0];
-      return e.test(n);
+    route: e,
+    redirectTo: e.redirectTo || null,
+    match(n) {
+      const o = n.split("?")[0];
+      return t.test({ pathname: o });
     },
-    getParams() {
-      return {};
+    getParams(n) {
+      const o = n.split("?")[0];
+      return t.exec({ pathname: o })?.pathname.groups ?? {};
     },
-    getQuery: x
+    getQuery: L
   };
 }
-function U(t) {
-  return z(t) ? $(t) : W(t);
+class d {
+  static instance;
+  static getInstance() {
+    return d.instance || (d.instance = new d()), d.instance;
+  }
+  listeners = /* @__PURE__ */ new Map();
+  on(t, n) {
+    let o = this.listeners.get(t);
+    return o || (o = /* @__PURE__ */ new Set(), this.listeners.set(t, o)), o.add(n), () => o.delete(n);
+  }
+  emit(t, n) {
+    this.listeners.get(t)?.forEach((o) => o(n));
+  }
+  clear() {
+    this.listeners.clear();
+  }
 }
-function B(t, e) {
-  for (let o = 0; o < e.length; o++)
-    if (e[o].match(t))
-      return e[o];
+function N(e, t) {
+  for (let n = 0; n < t.length; n++)
+    if (t[n].match(e))
+      return t[n];
   return null;
 }
-async function H(t, e) {
-  return typeof t.component == "function" ? t.component(e) : typeof t.loadComponent == "function" ? await t.loadComponent(e) : new Error("Failed to get component for route: " + t.path);
+async function M(e, t) {
+  return typeof e.component == "function" ? e.component(t) : e.lazy && typeof e.lazy == "function" ? await e.lazy(t) : new Error("Failed to get component for route: " + e.path);
 }
-async function I(t, e) {
-  const o = t.afterEnter;
-  if (!(!o || o.length === 0))
-    for (const n of o)
-      await n(e);
+async function $(e, t) {
+  const n = e.afterEnter;
+  if (!(!n || n.length === 0))
+    for (const o of n)
+      await o(t);
 }
-async function O(t, e) {
-  const o = t.beforeEnter;
-  if (!o || o.length === 0)
+async function U(e, t) {
+  const n = e.beforeEnter;
+  if (!n || n.length === 0)
     return null;
-  for (const n of o) {
-    const r = await n(e);
+  for (const o of n) {
+    if (t.signal.aborted)
+      return !1;
+    const r = await o(t);
     if (r === !1 || typeof r == "string")
       return r;
   }
   return null;
 }
-function E(t) {
-  return t instanceof DOMException && t.name === "AbortError";
+function C(e) {
+  return e instanceof DOMException && e.name === "AbortError";
 }
-function v(t) {
-  const e = t.split("/").filter(Boolean);
-  if (e.length === 0)
+function x(e) {
+  const t = e.split("/").filter(Boolean);
+  if (t.length === 0)
     return 0;
-  let o = 0;
-  for (let n = 0; n < e.length; n++) {
-    const r = e[n];
-    r === "*" ? o -= 100 : r.startsWith(":") ? o += 5 : o += 10;
+  let n = 0;
+  for (let o = 0; o < t.length; o++) {
+    const r = t[o];
+    r === "*" ? n -= 100 : r.startsWith(":") ? n += 5 : n += 10;
   }
-  return o += e.length * 0.1, o;
+  return n += t.length * 0.1, n;
 }
-function D(t) {
-  return t.toSorted((e, o) => v(o.path) - v(e.path));
+function B(e) {
+  return e.toSorted((t, n) => x(n.path) - x(t.path));
 }
-function Q(t, e) {
-  if (t === null)
+function I(e, t) {
+  if (e === null)
     return !1;
-  const o = new URL(t, location.origin), n = new URL(e, location.origin);
-  return !(o.pathname !== n.pathname || o.search !== n.search);
+  const n = new URL(e, location.origin), o = new URL(t, location.origin);
+  return !(n.pathname !== o.pathname || n.search !== o.search);
 }
-class C extends HTMLElement {
-  constructor(e) {
-    super(), this.setAttribute("outlet-id", e.outletId);
+class P extends HTMLElement {
+  constructor(t) {
+    super(), this.setAttribute("outlet-id", t.outletId);
   }
 }
-customElements.define("router-outlet", C);
-function R(t) {
-  if (typeof t != "string")
-    throw new Error(`Path must be a string, got ${typeof t}`);
-  if (t.trim() === "")
+customElements.define("router-outlet", P);
+function k(e) {
+  if (typeof e != "string")
+    throw new Error(`Path must be a string, got ${typeof e}`);
+  if (e.trim() === "")
     throw new Error("Path cannot be an empty string");
-  if (t !== "*" && !t.startsWith("/"))
-    throw new Error(`Path must start with '/': "${t}"`);
-  if (t.length > 1 && t.endsWith("/"))
-    throw new Error(`Path must not end with '/': "${t}"`);
-  if (t.includes("//"))
-    throw new Error(
-      `Path must not contain multiple consecutive slashes: "${t}"`
-    );
-  if (t === "*") return;
-  const e = t.match(/[^A-Za-z0-9\-._~:/@]/g);
-  if (e)
-    throw new Error(
-      `Path contains invalid characters: "${e.join("")}" in "${t}"`
-    );
+  if (e !== "*" && !e.startsWith("/"))
+    throw new Error(`Path must start with '/': "${e}"`);
+  if (e.length > 1 && e.endsWith("/"))
+    throw new Error(`Path must not end with '/': "${e}"`);
+  if (e.includes("//"))
+    throw new Error(`Path must not contain multiple consecutive slashes: "${e}"`);
+  if (e === "*")
+    return;
+  const t = e.match(/[^A-Za-z0-9\-._~:/]/g);
+  if (t)
+    throw new Error(`Path contains invalid characters: "${t.join("")}" in "${e}"`);
 }
-function _(t) {
-  const e = /* @__PURE__ */ new Set();
-  for (let o = 0; o < t.length; o++) {
-    const n = t[o].path;
-    if (e.has(n))
-      throw new Error(`Duplicate root route path: "${n}"`);
-    e.add(n);
+function q(e) {
+  const t = /* @__PURE__ */ new Set();
+  for (let n = 0; n < e.length; n++) {
+    const o = e[n].path;
+    if (t.has(o))
+      throw new Error(`Duplicate root route path: "${o}"`);
+    t.add(o);
   }
 }
-function q(t) {
-  if (!(t.redirectTo === null || t.redirectTo == null) && typeof t.redirectTo == "string") {
-    const e = t.redirectTo;
-    if (R(e), e === t.path)
-      throw new Error(`Route "${t.path}" cannot redirect to itself`);
-    if (t.path === "*")
+function W(e, t) {
+  const n = e.split("/"), o = t.split("/");
+  return n.length !== o.length ? !1 : n.every((r, i) => {
+    const a = o[i];
+    return r === a || r.startsWith(":") || a.startsWith(":");
+  });
+}
+function F(e) {
+  for (let t = 0; t < e.length; t++)
+    for (let n = t + 1; n < e.length; n++)
+      if (W(e[t].path, e[n].path))
+        throw new Error(`Conflicting routes: "${e[t].path}" and "${e[n].path}"`);
+}
+function H(e) {
+  if (!(e.redirectTo === null || e.redirectTo == null) && typeof e.redirectTo == "string") {
+    const t = e.redirectTo;
+    if (k(t), t === e.path)
+      throw new Error(`Route "${e.path}" cannot redirect to itself`);
+    if (e.path === "*")
       throw new Error('Catch-all route "*" cannot have a redirect');
   }
 }
-function F(t) {
-  const e = typeof t.redirectTo == "string", o = typeof t.component == "function", n = typeof t.loadComponent == "function";
-  if (e && (o || n))
-    throw new Error(
-      `Redirect route "${t.path}" must not define components`
-    );
-  if (o && n)
-    throw new Error(
-      `Route "${t.path}" cannot have both component and loadComponent`
-    );
-  if (!e && !o && !n)
-    throw new Error(
-      `Route "${t.path}" must define either "component" or "loadComponent"`
-    );
+function Q(e) {
+  const t = typeof e.redirectTo == "string", n = typeof e.component == "function", o = typeof e.lazy == "function";
+  if (t && (n || o))
+    throw new Error(`Redirect route "${e.path}" must not define components`);
+  if (n && o)
+    throw new Error(`Route "${e.path}" cannot have both "component" and "lazy"`);
+  if (!t && !n && !o)
+    throw new Error(`Route "${e.path}" must define either "component" or "lazy"`);
 }
-function j(t) {
-  R(t.path), q(t), F(t);
+function D(e) {
+  if (e.path === "*") return;
+  const t = e.path.match(/:([^/]+)/g);
+  if (!t) return;
+  const n = t.map((r) => r.slice(1));
+  if (new Set(n).size !== n.length)
+    throw new Error(`Duplicate parameter names in path "${e.path}"`);
 }
-function K(t) {
-  _(t);
-  for (let e = 0; e < t.length; e++) {
-    const o = t[e];
-    j(o);
-  }
+function O(e) {
+  k(e.path), H(e), Q(e), D(e);
 }
-class Z {
+function j(e) {
+  q(e), F(e);
+  for (let t = 0; t < e.length; t++)
+    O(e[t]);
+}
+class p {
+  static instance = null;
+  dispatcher = d.getInstance();
   routerController = new AbortController();
-  initialized = !1;
   navigationController = null;
-  routeMatchers = [];
+  initialized = !1;
+  routeMatchers;
   options;
-  outlet = new C({ outletId: "root" });
+  outlet = new P({ outletId: "root" });
   currentPath = null;
-  constructor(e, o) {
-    K(e), this.options = {
+  pendingPath = null;
+  constructor(t, n) {
+    j(t), this.options = {
       defaultTitle: document.title,
       sortRoutesBySpecificity: !0,
       ignoreSameLocation: !0,
-      ...o
+      ...n
     };
-    const n = this.options.sortRoutesBySpecificity ? D(e) : e;
-    this.routeMatchers = n.map(U);
+    const o = this.options.sortRoutesBySpecificity ? B(t) : t;
+    this.routeMatchers = o.map(A);
+  }
+  on(t, n) {
+    return this.dispatcher.on(t, n);
+  }
+  emit(t, n) {
+    this.dispatcher.emit(t, n);
   }
   async initialize() {
     if (this.initialized)
       throw new Error("Router already initialized");
-    const e = async (n) => {
-      const r = window.location.pathname + window.location.search;
-      await this.navigate(r, n.state, "none");
-    };
-    window.addEventListener(
+    p.instance = this, window.addEventListener(
       "popstate",
       (n) => {
-        e(n).catch(console.error);
+        this.handlePopState(n).catch(console.error);
       },
-      { signal: this.routerController.signal }
+      {
+        signal: this.routerController.signal
+      }
     );
-    const o = window.location.pathname + window.location.search;
-    return await this.navigate(o, null, "none"), this.initialized = !0, this.outlet;
+    const t = window.location.pathname + window.location.search;
+    return await this.navigate(t, null, "none"), this.initialized = !0, this.outlet;
+  }
+  async handlePopState(t) {
+    const n = window.location.pathname + window.location.search;
+    await this.navigate(n, t.state, "none");
   }
   destroy() {
     if (!this.initialized)
       throw new Error("Router not initialized");
-    this.routerController.abort(), this.navigationController && (this.navigationController.abort(), this.navigationController = null), this.initialized = !1;
+    this.routerController.abort(), this.navigationController?.abort(), this.navigationController = null, this.dispatcher.clear(), this.initialized = !1, p.instance = null;
   }
-  async navigate(e, o, n, r = 0) {
-    if (r > 5) {
-      h(
-        this.outlet,
-        new Error("Too many redirects"),
-        null,
-        null,
-        this.options.globalErrorComponent
-      );
-      return;
-    }
-    if (this.options.ignoreSameLocation && Q(this.currentPath, e))
-      return;
-    this.navigationController && (this.navigationController.abort("navigation canceled"), this.navigationController = null), this.navigationController = new AbortController();
-    const i = this.navigationController.signal, a = B(e, this.routeMatchers), s = {
-      from: this.currentPath,
-      to: e,
-      params: a?.getParams(e) ?? {},
-      query: a?.getQuery(e) ?? new URLSearchParams(),
+  async navigate(t, n, o, r = 0) {
+    if (r === 0 && (this.emit("navigationstart", { from: this.currentPath, to: t, mode: o }), this.pendingPath = t), this.emit("navigating", { from: this.currentPath, to: t, depth: r }), r > 5)
+      return this.abortNavigation(t, "too many redirects", new Error("Too many redirects"));
+    if (this.options.ignoreSameLocation && I(this.currentPath, t))
+      return this.pendingPath = null, this.abortNavigation(t, "same location");
+    this.cancelCurrentNavigation(), this.navigationController = new AbortController();
+    const i = this.navigationController.signal;
+    i.addEventListener(
+      "abort",
+      () => this.emit("navigationabort", {
+        from: this.currentPath,
+        to: t,
+        reason: String(i.reason ?? "aborted")
+      })
+    );
+    const a = N(t, this.routeMatchers), f = this.currentPath, l = {
+      from: f,
+      to: t,
+      params: a?.getParams(t) ?? {},
+      query: a?.getQuery(t) ?? new URLSearchParams(),
       signal: i
     };
     try {
-      if (!a) {
-        m(e, o, n), h(
+      if (!a)
+        return y(t, n, o), m(
           this.outlet,
           new Error('Route not found. Add "*" catch-all route'),
           null,
-          s,
+          l,
           this.options.globalErrorComponent
-        ), this.currentPath = e;
-        return;
-      }
-      if (a.redirectTo) {
-        await this.navigate(a.redirectTo, o, "replace", r + 1);
-        return;
-      }
+        ), this.finalizeNavigation(t, f, !1);
+      if (a.redirectTo)
+        return this.navigate(a.redirectTo, n, "replace", r + 1);
       if (i.aborted)
         return;
-      const c = await p(
-        () => O(a.route, s),
+      const c = await g(
+        () => U(a.route, l),
         i
       );
       if (c === !1)
         return;
-      if (typeof c == "string") {
-        await this.navigate(c, o, "replace", r + 1);
-        return;
-      }
+      if (typeof c == "string")
+        return this.navigate(c, n, "replace", r + 1);
       if (i.aborted)
         return;
-      const d = await p(
-        () => H(a.route, s),
+      const s = await g(
+        () => M(a.route, l),
         i
       );
-      if (d instanceof Error) {
-        if (E(d))
-          return;
-        m(e, o, n), h(
+      if (s instanceof Error)
+        return C(s) ? void 0 : (y(t, n, o), m(
           this.outlet,
-          d,
-          a.route,
           s,
+          a.route,
+          l,
           this.options.globalErrorComponent
-        ), this.currentPath = e;
-        return;
-      }
+        ), this.finalizeNavigation(t, f, !1));
       if (i.aborted)
         return;
-      L(this.outlet, d), m(e, o, n), T(a.route, s, this.options.defaultTitle), this.currentPath = e, await p(() => I(a.route, s), i);
+      T(this.outlet, s), y(t, n, o), S(a.route, l, this.options.defaultTitle), this.finalizeNavigation(t, f, !0), await g(() => $(a.route, l), i);
     } catch (c) {
-      if (E(c))
+      if (C(c))
         return;
-      h(
+      m(
         this.outlet,
         c instanceof Error ? c : new Error("Unknown error"),
         a?.route ?? null,
-        s,
+        l,
         this.options.globalErrorComponent
-      );
+      ), this.emit("navigationend", { from: this.currentPath, to: t, successful: !1 });
     } finally {
       this.navigationController?.signal === i && (this.navigationController = null);
     }
   }
-  async push(e, o) {
-    try {
-      await this.navigate(e, o, "push");
-    } catch (n) {
-      console.error("[Router.push] Error:", n);
-    }
+  abortNavigation(t, n, o) {
+    this.pendingPath = null, this.emit("navigationabort", { from: this.currentPath, to: t, reason: n }), o && m(this.outlet, o, null, null, this.options.globalErrorComponent);
   }
-  async replace(e, o) {
-    try {
-      await this.navigate(e, o, "replace");
-    } catch (n) {
-      console.error("[Router.replace] Error:", n);
-    }
+  cancelCurrentNavigation() {
+    this.navigationController && (this.navigationController.abort("navigation canceled"), this.navigationController = null);
+  }
+  finalizeNavigation(t, n, o) {
+    const r = n ? new URLSearchParams(n.split("?")[1] ?? "") : null, i = new URLSearchParams(t.split("?")[1] ?? "");
+    this.currentPath = t, this.pendingPath = null, this.emit("pathchanged", { from: n, to: t }), (!r || r?.toString() !== i.toString()) && this.emit("querychanged", { from: r ?? new URLSearchParams(), to: i }), this.emit("navigationend", { from: n, to: t, successful: o });
   }
+  async push(t, n) {
+    await this.navigate(t, n, "push");
+  }
+  async replace(t, n) {
+    await this.navigate(t, n, "replace");
+  }
+  getCurrentPath() {
+    return this.currentPath;
+  }
+  getPendingPath() {
+    return this.pendingPath;
+  }
+}
+function G(e, t) {
+  return new p(e, t);
 }
-function J(t, e) {
-  return new Z(t, e);
+class K extends HTMLAnchorElement {
+  isActive = !1;
+  isPending = !1;
+  unsubscribeFns = [];
+  props;
+  constructor(t) {
+    super(), this.props = t, this.href = t.to, this.textContent = t.textContent, this.addEventListener("click", (n) => {
+      n.preventDefault();
+      const o = p.instance;
+      t.replace ? o?.replace(t.to) : o?.push(t.to);
+    });
+  }
+  connectedCallback() {
+    const t = p.instance;
+    if (!t) return;
+    const n = () => {
+      const o = t.getCurrentPath() || "", r = this.props.to;
+      this.isActive = o.split("?")[0] === r.split("?")[0], this.isPending = t.getPendingPath() === r, this.applyClass();
+    };
+    n(), this.unsubscribeFns.push(
+      t.on("navigationstart", n),
+      t.on("navigating", n),
+      t.on("navigationend", n),
+      t.on("navigationabort", n),
+      t.on("pathchanged", n),
+      t.on("querychanged", n)
+    );
+  }
+  disconnectedCallback() {
+    this.unsubscribeFns.forEach((t) => t()), this.unsubscribeFns = [];
+  }
+  applyClass() {
+    if (this.props.className) {
+      if (typeof this.props.className == "string") {
+        this.className = this.props.className;
+        return;
+      }
+      this.className = this.props.className({
+        isActive: this.isActive,
+        isPending: this.isPending
+      });
+    }
+  }
 }
+customElements.define("router-link", K, { extends: "a" });
 export {
-  Z as Router,
-  J as createRouter,
-  p as withAbortSignal
+  p as Router,
+  K as RouterLink,
+  G as createRouter,
+  g as withAbortSignal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripetchor/r-router",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
+    "@types/node": "^25.0.3",
     "eslint": "^9.37.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",