@ripetchor/r-router 1.0.0

package/README.md

@@ -0,0 +1 @@
+# r-router

package/dist/index.d.ts

@@ -0,0 +1,74 @@
+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);
+    beforeEnter?: BeforeEnterHook[];
+    afterEnter?: AfterEnterHook[];
+    errorComponent?(error: unknown, ctx: RouteContext | null): HTMLElement;
+}
+
+export declare type BeforeEnterHook = (ctx: RouteContext) => boolean | string | Promise<boolean | string>;
+
+export declare function createRouter(routes: Route[], options?: RouterOptions): Router;
+
+declare interface RedirectRoute extends BaseRoute {
+    redirectTo: string;
+    component?(): never;
+    loadComponent?(): never;
+}
+
+export declare type Route = SyncRoute | AsyncRoute | RedirectRoute;
+
+declare interface RouteContext {
+    from: string | null;
+    to: string;
+    params: Record<string, string>;
+    query: URLSearchParams;
+    signal: AbortSignal;
+}
+
+export declare class Router {
+    private readonly routerController;
+    private initialized;
+    private navigationController;
+    private readonly matchers;
+    private readonly options;
+    private readonly rootOutletInternal;
+    private currentPath;
+    constructor(routes: Route[], options?: RouterOptions);
+    initialize(): Promise<Readonly<RouterOutlet>>;
+    destroy(): void;
+    private navigate;
+    push(path: string, state?: unknown): Promise<void>;
+    replace(path: string, state?: unknown): Promise<void>;
+}
+
+declare interface RouterOptions {
+    defaultTitle?: string;
+    globalErrorComponent?: (error: unknown) => HTMLElement;
+    sortRoutesBySpecificity?: boolean;
+    ignoreSameLocation?: boolean;
+}
+
+declare class RouterOutlet extends HTMLElement {
+    constructor(props: RouterOutletProps);
+}
+
+declare type RouterOutletProps = {
+    outletId: string;
+};
+
+declare interface SyncRoute extends BaseRoute {
+    redirectTo?: never;
+    component(ctx: RouteContext): HTMLElement;
+    loadComponent?(): Promise<HTMLElement>;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,460 @@
+function P(t, e) {
+  const n = document.createElement("div");
+  n.style.cssText = `
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    backdrop-filter: blur(4px);
+    animation: fadeIn 0.25s ease;
+  `;
+  const o = document.createElement("div");
+  o.style.cssText = `
+    position: relative;
+    max-width: 80dvh;
+    width: 100%;
+    background-color: var(--bg);
+    color: var(--text);
+    border-radius: 16px;
+    padding: 32px 28px;
+    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    text-align: center;
+    animation: scaleIn 0.25s ease;
+  `;
+  const r = document.createElement("h1");
+  r.textContent = "Something went wrong", r.style.cssText = `
+    margin: 0 0 12px;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--accent);
+  `;
+  const i = document.createElement("h2");
+  i.textContent = t?.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 = `
+    font-size: 0.9rem;
+    max-height: 30vh;
+    overflow: auto;
+    background: var(--code-bg);
+    padding: 12px;
+    border-radius: 8px;
+    text-align: left;
+    white-space: pre-wrap;
+    margin-bottom: 24px;
+  `;
+  const f = document.createElement("button");
+  f.textContent = "Reload Page", f.style.cssText = `
+    cursor: pointer;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-weight: 600;
+    background-color: var(--button-bg);
+    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 = `
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    font-size: 1.2rem;
+    background: none;
+    border: none;
+    color: var(--text);
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.25s;
+  `, l.onmouseenter = () => {
+    l.style.opacity = "1";
+  }, l.onmouseleave = () => {
+    l.style.opacity = "0.7";
+  }, l.onclick = () => {
+    n.remove();
+  }, f.onmouseenter = () => {
+    f.style.backgroundColor = "var(--button-bg-hover)";
+  }, f.onmouseleave = () => {
+    f.style.backgroundColor = "var(--button-bg)";
+  }, f.onclick = () => {
+    location.reload();
+  }, n.appendChild(o), o.append(l, r, i, a), t.stack && o.append(d), o.append(f);
+  const g = (u) => {
+    u.key === "Escape" && n.remove();
+  };
+  window.addEventListener("keydown", g);
+  const w = new MutationObserver(() => {
+    document.body.contains(n) || (window.removeEventListener("keydown", g), w.disconnect());
+  });
+  w.observe(document.body, { childList: !0 });
+  const y = () => {
+    const u = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    o.style.setProperty("--bg", u ? "#2b2b2b" : "#fff"), o.style.setProperty("--text", u ? "#eee" : "#222"), o.style.setProperty("--accent", u ? "#ff6b6b" : "#e74c3c"), o.style.setProperty(
+      "--code-bg",
+      u ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
+    ), o.style.setProperty("--button-bg", u ? "#3498db55" : "#3498db"), o.style.setProperty(
+      "--button-bg-hover",
+      u ? "#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 = `
+    @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), n;
+}
+function k(t, e, n) {
+  t.title ? document.title = typeof t.title == "function" ? t.title(e) : t.title : document.title = n ?? "";
+}
+function p(t, e, n) {
+  const o = e ?? null;
+  switch (n) {
+    case "push":
+      window.history.pushState(o, "", t);
+      break;
+    case "replace":
+      window.history.replaceState(o, "", t);
+      break;
+  }
+}
+function T(t, e) {
+  t.replaceChildren(e);
+}
+function h(t, e, n, o, r) {
+  const i = n?.errorComponent?.(e, o) ?? r?.(e) ?? P(e, o);
+  t.replaceChildren(i);
+}
+const A = "*";
+function L({ path: t }) {
+  return t.includes(":");
+}
+function x(t) {
+  const [, e] = t.split("?");
+  return new URLSearchParams(e || "");
+}
+function $({ path: t }) {
+  const e = t.replace(
+    /:([^/]+)/g,
+    (n, o) => `(?<${o}>[^/]+)`
+  );
+  return new RegExp(`^${e}$`);
+}
+function S(t) {
+  const e = $(t);
+  return {
+    route: t,
+    redirectTo: t.redirectTo || null,
+    match(n) {
+      const o = n.split("?")[0];
+      return e.test(o);
+    },
+    getParams(n) {
+      return e.exec(n)?.groups ?? {};
+    },
+    getQuery: x
+  };
+}
+function z({ path: t }) {
+  return t === A ? new RegExp("^.*$") : new RegExp(`^${t}$`);
+}
+function I(t) {
+  const e = z(t);
+  return {
+    route: t,
+    redirectTo: t.redirectTo || null,
+    match(n) {
+      const o = n.split("?")[0];
+      return e.test(o);
+    },
+    getParams() {
+      return {};
+    },
+    getQuery: x
+  };
+}
+function O(t) {
+  return L(t) ? S(t) : I(t);
+}
+function M(t, e) {
+  for (let n = 0; n < e.length; n++)
+    if (e[n].match(t))
+      return e[n];
+  return null;
+}
+async function W(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");
+}
+async function B(t, e) {
+  const n = t.afterEnter;
+  if (!(!n || n.length === 0))
+    for (const o of n)
+      await o(e);
+}
+async function H(t, e) {
+  const n = t.beforeEnter;
+  if (!n || n.length === 0)
+    return null;
+  for (const o of n) {
+    const r = await o(e);
+    if (r === !1 || typeof r == "string")
+      return r;
+  }
+  return null;
+}
+function E(t) {
+  return t instanceof DOMException && t.name === "AbortError";
+}
+class C extends HTMLElement {
+  constructor(e) {
+    super(), this.setAttribute("outlet-id", e.outletId);
+  }
+}
+customElements.define("router-outlet", C);
+async function m(t, e) {
+  if (e.aborted)
+    throw new DOMException("Aborted", "AbortError");
+  return new Promise((n, o) => {
+    const r = () => o(new DOMException("Aborted", "AbortError"));
+    e.addEventListener("abort", r), t().then(n).catch(o).finally(() => {
+      e.removeEventListener("abort", r);
+    });
+  });
+}
+function v(t) {
+  const e = t.split("/").filter(Boolean);
+  if (e.length === 0)
+    return 0;
+  let n = 0;
+  for (let o = 0; o < e.length; o++) {
+    const r = e[o];
+    r === "*" ? n -= 100 : r.startsWith(":") ? n += 5 : n += 10;
+  }
+  return n += e.length * 0.1, n;
+}
+function U(t) {
+  return t.toSorted((e, n) => v(n.path) - v(e.path));
+}
+function D(t, e) {
+  if (t === null)
+    return !1;
+  const n = new URL(t, location.origin), o = new URL(e, location.origin);
+  return !(n.pathname !== o.pathname || n.search !== o.search);
+}
+function R(t) {
+  if (typeof t != "string")
+    throw new Error(`Path must be a string, got ${typeof t}`);
+  if (t.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}"`
+    );
+}
+function Q(t) {
+  const e = /* @__PURE__ */ new Set();
+  for (let n = 0; n < t.length; n++) {
+    const o = t[n].path;
+    if (e.has(o))
+      throw new Error(`Duplicate root route path: "${o}"`);
+    e.add(o);
+  }
+}
+function _(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 === "*")
+      throw new Error('Catch-all route "*" cannot have a redirect');
+  }
+}
+function q(t) {
+  const e = typeof t.redirectTo == "string", n = typeof t.component == "function", o = typeof t.loadComponent == "function";
+  if (e && (n || o))
+    throw new Error(
+      `Redirect route "${t.path}" must not define components`
+    );
+  if (n && o)
+    throw new Error(
+      `Route "${t.path}" cannot have both component and loadComponent`
+    );
+  if (!e && !n && !o)
+    throw new Error(
+      `Route "${t.path}" must define either "component" or "loadComponent"`
+    );
+}
+function F(t) {
+  R(t.path), _(t), q(t);
+}
+function j(t) {
+  Q(t);
+  for (let e = 0; e < t.length; e++) {
+    const n = t[e];
+    F(n);
+  }
+}
+class K {
+  routerController = new AbortController();
+  initialized = !1;
+  navigationController = null;
+  matchers = [];
+  options;
+  rootOutletInternal = new C({ outletId: "root" });
+  currentPath = null;
+  constructor(e, n) {
+    j(e), this.options = {
+      defaultTitle: document.title,
+      sortRoutesBySpecificity: !0,
+      ...n
+    };
+    const o = this.options.sortRoutesBySpecificity ? U(e) : e;
+    this.matchers = o.map(O);
+  }
+  async initialize() {
+    if (this.initialized)
+      throw new Error("Router already initialized");
+    const e = async (o) => {
+      const r = window.location.pathname + window.location.search;
+      await this.navigate(r, o.state, "none");
+    };
+    window.addEventListener(
+      "popstate",
+      (o) => {
+        e(o).catch(console.error);
+      },
+      { signal: this.routerController.signal }
+    );
+    const n = window.location.pathname + window.location.search;
+    return await this.navigate(n, null, "none"), this.initialized = !0, this.rootOutletInternal;
+  }
+  destroy() {
+    if (!this.initialized)
+      throw new Error("Router not initialized");
+    this.routerController.abort(), this.navigationController && (this.navigationController.abort(), this.navigationController = null), this.initialized = !1;
+  }
+  async navigate(e, n, o, r = 0) {
+    if (r > 5) {
+      h(
+        this.rootOutletInternal,
+        new Error("Too many redirects"),
+        null,
+        null,
+        this.options.globalErrorComponent
+      );
+      return;
+    }
+    if (this.options.ignoreSameLocation && D(this.currentPath, e))
+      return;
+    this.navigationController && (this.navigationController.abort("navigation canceled"), this.navigationController = null), this.navigationController = new AbortController();
+    const i = this.navigationController.signal, a = M(e, this.matchers), s = {
+      from: this.currentPath,
+      to: e,
+      params: a?.getParams(e) ?? {},
+      query: a?.getQuery(e) ?? new URLSearchParams(),
+      signal: i
+    };
+    try {
+      if (!a) {
+        p(e, n, o), h(
+          this.rootOutletInternal,
+          new Error('Route not found. Add "*" catch-all route'),
+          null,
+          s,
+          this.options.globalErrorComponent
+        ), this.currentPath = e;
+        return;
+      }
+      if (a.redirectTo) {
+        await this.navigate(a.redirectTo, n, "replace", r + 1);
+        return;
+      }
+      if (i.aborted)
+        return;
+      const c = await m(
+        () => H(a.route, s),
+        i
+      );
+      if (c === !1)
+        return;
+      if (typeof c == "string") {
+        await this.navigate(c, n, "replace", r + 1);
+        return;
+      }
+      if (i.aborted)
+        return;
+      const d = await m(
+        () => W(a.route, s),
+        i
+      );
+      if (d instanceof Error) {
+        if (E(d))
+          return;
+        p(e, n, o), h(
+          this.rootOutletInternal,
+          d,
+          a.route,
+          s,
+          this.options.globalErrorComponent
+        ), this.currentPath = e;
+        return;
+      }
+      if (i.aborted)
+        return;
+      T(this.rootOutletInternal, d), p(e, n, o), k(a.route, s, this.options.defaultTitle), this.currentPath = e, await m(() => B(a.route, s), i);
+    } catch (c) {
+      if (E(c))
+        return;
+      h(
+        this.rootOutletInternal,
+        c instanceof Error ? c : new Error("Unknown error"),
+        a?.route ?? null,
+        s,
+        this.options.globalErrorComponent
+      );
+    } finally {
+      this.navigationController?.signal === i && (this.navigationController = null);
+    }
+  }
+  async push(e, n) {
+    try {
+      await this.navigate(e, n, "push");
+    } catch (o) {
+      console.error("[Router.push] Error:", o);
+    }
+  }
+  async replace(e, n) {
+    try {
+      await this.navigate(e, n, "replace");
+    } catch (o) {
+      console.error("[Router.replace] Error:", o);
+    }
+  }
+}
+function G(t, e) {
+  return new K(t, e);
+}
+export {
+  K as Router,
+  G as createRouter
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@ripetchor/r-router",
+  "version": "1.0.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "typecheck": "tsc -b --noEmit"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.37.0",
+    "eslint": "^9.37.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}