@ydant/router 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 cwd-k2
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,157 @@
+# @ydant/router
+
+SPA routing for Ydant using History API.
+
+## Installation
+
+```bash
+pnpm add @ydant/router
+```
+
+## Usage
+
+```typescript
+import { div, nav, text, type Component } from "@ydant/core";
+import { mount } from "@ydant/dom";
+import { RouterView, RouterLink, useRoute, navigate } from "@ydant/router";
+
+// Define pages
+const HomePage: Component = () => div(() => [text("Home Page")]);
+
+const UserPage: Component = () =>
+  div(function* () {
+    const route = useRoute();
+    yield* text(`User ID: ${route.params.id}`);
+  });
+
+const NotFoundPage: Component = () => div(() => [text("404 - Not Found")]);
+
+// Main app with routing
+const App: Component = () =>
+  div(function* () {
+    // Navigation
+    yield* nav(() => [
+      RouterLink({ href: "/", children: () => text("Home") }),
+      RouterLink({ href: "/users/1", children: () => text("User 1") }),
+    ]);
+
+    // Route definitions
+    yield* RouterView({
+      routes: [
+        { path: "/", component: HomePage },
+        { path: "/users/:id", component: UserPage },
+        { path: "*", component: NotFoundPage },
+      ],
+    });
+  });
+
+mount(App, document.getElementById("app")!);
+```
+
+## API
+
+### RouterView
+
+```typescript
+function RouterView(props: RouterViewProps): ElementGenerator;
+
+interface RouterViewProps {
+  routes: RouteDefinition[];
+  base?: string;
+}
+
+interface RouteDefinition {
+  path: string;
+  component: Component;
+  guard?: () => boolean | Promise<boolean>;
+}
+```
+
+Renders the component matching the current path.
+
+#### Route Guards
+
+Route guards control access to routes. They can be synchronous or asynchronous:
+
+```typescript
+// Synchronous guard
+{
+  path: "/admin",
+  component: AdminPage,
+  guard: () => isAuthenticated(),
+}
+
+// Async guard (e.g., checking server-side permissions)
+{
+  path: "/settings",
+  component: SettingsPage,
+  guard: async () => {
+    const response = await fetch("/api/permissions");
+    const { canAccess } = await response.json();
+    return canAccess;
+  },
+}
+```
+
+When a guard returns or resolves to `false`, the route is blocked and an empty view is rendered.
+
+### RouterLink
+
+```typescript
+function RouterLink(props: RouterLinkProps): ElementGenerator;
+
+interface RouterLinkProps {
+  href: string;
+  children: () => Render;
+  activeClass?: string;
+}
+```
+
+Creates a navigation link that updates the URL without page reload.
+
+### useRoute
+
+```typescript
+function useRoute(): RouteInfo;
+
+interface RouteInfo {
+  path: string;
+  params: Record<string, string>;
+  query: Record<string, string>;
+  hash: string;
+}
+```
+
+Returns current route information including path parameters.
+
+### navigate
+
+```typescript
+function navigate(path: string, replace?: boolean): void;
+```
+
+Programmatically navigate to a path. If `replace` is true, replaces the current history entry.
+
+### goBack / goForward
+
+```typescript
+function goBack(): void;
+function goForward(): void;
+```
+
+Navigate through browser history.
+
+## Path Patterns
+
+- `/users` - Exact match
+- `/users/:id` - Path parameter (captured as `params.id`)
+- `/users/*` - Wildcard (matches any suffix)
+- `*` - Catch-all (404 page)
+
+## Module Structure
+
+- `types.ts` - Type definitions
+- `matching.ts` - Path matching utilities
+- `state.ts` - Route state management
+- `navigation.ts` - Navigation functions
+- `components.ts` - RouterView, RouterLink

package/dist/RouterLink.d.ts

@@ -0,0 +1,15 @@
+import { Render } from '@ydant/core';
+import { RouterLinkProps } from './types';
+/**
+ * RouterLink コンポーネント
+ *
+ * クリック時にブラウザのデフォルト動作を防ぎ、
+ * History API を使用して SPA ルーティングを行う。
+ *
+ * @param props - RouterLink のプロパティ
+ * @param props.href - リンク先のパス
+ * @param props.children - リンクの子要素
+ * @param props.activeClass - アクティブ時に適用するクラス名（オプション）
+ * @returns リンク要素の Render
+ */
+export declare function RouterLink(props: RouterLinkProps): Render;

package/dist/RouterView.d.ts

@@ -0,0 +1,14 @@
+import { Render } from '@ydant/core';
+import { RouterViewProps } from './types';
+/**
+ * RouterView コンポーネント
+ *
+ * 現在のパスに基づいて適切なコンポーネントを表示する。
+ * History API の popstate イベントを監視し、URL 変更時に再レンダリングする。
+ *
+ * @param props - RouterView のプロパティ
+ * @param props.routes - ルート定義の配列
+ * @param props.base - ベースパス（オプション、デフォルト: ""）
+ * @returns コンテナ要素の Render
+ */
+export declare function RouterView(props: RouterViewProps): Render;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export type { RouteDefinition, RouteInfo, RouterViewProps, RouterLinkProps } from './types';
+export { getRoute, navigate, goBack, goForward } from './navigation';
+export { RouterView } from './RouterView';
+export { RouterLink } from './RouterLink';

package/dist/index.es.js

@@ -0,0 +1,123 @@
+import { div as f, onMount as m, a as g, attr as l, on as y } from "@ydant/base";
+function R(t) {
+  const e = t.match(/:([^/]+)/g);
+  return e ? e.map((o) => o.slice(1)) : [];
+}
+function v(t) {
+  if (t === "*")
+    return /.*/;
+  const e = "___PARAM___", r = t.replace(/:([^/]+)/g, e).replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(new RegExp(e, "g"), "([^/]+)");
+  return new RegExp(`^${r}$`);
+}
+function h(t) {
+  const e = {};
+  if (t.startsWith("?") && (t = t.slice(1)), t)
+    for (const o of t.split("&")) {
+      const [n, r] = o.split("=");
+      n && (e[decodeURIComponent(n)] = decodeURIComponent(r || ""));
+    }
+  return e;
+}
+function P(t, e) {
+  const o = v(e), n = t.match(o);
+  if (!n)
+    return { match: !1, params: {} };
+  const r = R(e), a = {};
+  for (let i = 0; i < r.length; i++)
+    a[r[i]] = n[i + 1] || "";
+  return { match: !0, params: a };
+}
+function x() {
+  return {
+    path: typeof window < "u" ? window.location.pathname : "/",
+    params: {},
+    query: h(typeof window < "u" ? window.location.search : ""),
+    hash: typeof window < "u" ? window.location.hash : ""
+  };
+}
+let c = x();
+const d = /* @__PURE__ */ new Set();
+function p(t) {
+  const e = new URL(t, window.location.origin);
+  c = {
+    path: e.pathname,
+    params: {},
+    query: h(e.search),
+    hash: e.hash
+  };
+  for (const o of d)
+    o();
+}
+function k() {
+  return c;
+}
+function S(t, e = !1) {
+  e ? window.history.replaceState(null, "", t) : window.history.pushState(null, "", t), p(t);
+}
+function C() {
+  window.history.back();
+}
+function E() {
+  window.history.forward();
+}
+function w(t, e) {
+  const o = c.path.startsWith(e) ? c.path.slice(e.length) || "/" : c.path;
+  for (const n of t) {
+    const { match: r, params: a } = P(o, n.path);
+    if (r)
+      return { route: n, params: a };
+  }
+  return null;
+}
+function s(t, e) {
+  const o = w(t, e);
+  if (!o) return [];
+  const { route: n, params: r } = o;
+  if (c.params = r, !n.guard)
+    return [n.component()];
+  const a = n.guard();
+  return a instanceof Promise ? [] : a ? [n.component()] : [];
+}
+async function u(t, e, o) {
+  const n = w(t, e);
+  if (!n) return;
+  const { route: r, params: a } = n;
+  if (r.guard) {
+    const i = r.guard();
+    i instanceof Promise && await i && (c.params = a, o(() => [r.component()]));
+  }
+}
+function M(t) {
+  const { routes: e, base: o = "" } = t;
+  return f(function* () {
+    const n = yield* f(() => s(e, o));
+    u(e, o, (r) => n.refresh(r)), yield* m(() => {
+      const r = () => {
+        p(window.location.pathname), n.refresh(() => s(e, o)), u(e, o, (i) => n.refresh(i));
+      };
+      window.addEventListener("popstate", r);
+      const a = () => {
+        n.refresh(() => s(e, o)), u(e, o, (i) => n.refresh(i));
+      };
+      return d.add(a), () => {
+        window.removeEventListener("popstate", r), d.delete(a);
+      };
+    });
+  });
+}
+function $(t) {
+  const { href: e, children: o, activeClass: n } = t;
+  return g(function* () {
+    yield* l("href", e), n && c.path === e && (yield* l("class", n)), yield* y("click", (r) => {
+      r.preventDefault(), S(e);
+    }), yield* o();
+  });
+}
+export {
+  $ as RouterLink,
+  M as RouterView,
+  k as getRoute,
+  C as goBack,
+  E as goForward,
+  S as navigate
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(i,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("@ydant/base")):typeof define=="function"&&define.amd?define(["exports","@ydant/base"],c):(i=typeof globalThis<"u"?globalThis:i||self,c(i.YdantRouter={},i.YdantBase))})(this,(function(i,c){"use strict";function g(t){const e=t.match(/:([^/]+)/g);return e?e.map(o=>o.slice(1)):[]}function y(t){if(t==="*")return/.*/;const e="___PARAM___",r=t.replace(/:([^/]+)/g,e).replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace(new RegExp(e,"g"),"([^/]+)");return new RegExp(`^${r}$`)}function h(t){const e={};if(t.startsWith("?")&&(t=t.slice(1)),t)for(const o of t.split("&")){const[n,r]=o.split("=");n&&(e[decodeURIComponent(n)]=decodeURIComponent(r||""))}return e}function R(t,e){const o=y(e),n=t.match(o);if(!n)return{match:!1,params:{}};const r=g(e),a={};for(let s=0;s<r.length;s++)a[r[s]]=n[s+1]||"";return{match:!0,params:a}}function v(){return{path:typeof window<"u"?window.location.pathname:"/",params:{},query:h(typeof window<"u"?window.location.search:""),hash:typeof window<"u"?window.location.hash:""}}let u=v();const d=new Set;function p(t){const e=new URL(t,window.location.origin);u={path:e.pathname,params:{},query:h(e.search),hash:e.hash};for(const o of d)o()}function P(){return u}function w(t,e=!1){e?window.history.replaceState(null,"",t):window.history.pushState(null,"",t),p(t)}function S(){window.history.back()}function k(){window.history.forward()}function m(t,e){const o=u.path.startsWith(e)?u.path.slice(e.length)||"/":u.path;for(const n of t){const{match:r,params:a}=R(o,n.path);if(r)return{route:n,params:a}}return null}function f(t,e){const o=m(t,e);if(!o)return[];const{route:n,params:r}=o;if(u.params=r,!n.guard)return[n.component()];const a=n.guard();return a instanceof Promise?[]:a?[n.component()]:[]}async function l(t,e,o){const n=m(t,e);if(!n)return;const{route:r,params:a}=n;if(r.guard){const s=r.guard();s instanceof Promise&&await s&&(u.params=a,o(()=>[r.component()]))}}function L(t){const{routes:e,base:o=""}=t;return c.div(function*(){const n=yield*c.div(()=>f(e,o));l(e,o,r=>n.refresh(r)),yield*c.onMount(()=>{const r=()=>{p(window.location.pathname),n.refresh(()=>f(e,o)),l(e,o,s=>n.refresh(s))};window.addEventListener("popstate",r);const a=()=>{n.refresh(()=>f(e,o)),l(e,o,s=>n.refresh(s))};return d.add(a),()=>{window.removeEventListener("popstate",r),d.delete(a)}})})}function _(t){const{href:e,children:o,activeClass:n}=t;return c.a(function*(){yield*c.attr("href",e),n&&u.path===e&&(yield*c.attr("class",n)),yield*c.on("click",r=>{r.preventDefault(),w(e)}),yield*o()})}i.RouterLink=_,i.RouterView=L,i.getRoute=P,i.goBack=S,i.goForward=k,i.navigate=w,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/dist/matching.d.ts

@@ -0,0 +1,14 @@
+/**
+ * パスマッチングユーティリティ
+ */
+/** パスパターンからパラメータ名を抽出 */
+export declare function extractParamNames(pattern: string): string[];
+/** パスパターンを正規表現に変換 */
+export declare function patternToRegex(pattern: string): RegExp;
+/** クエリ文字列をパース */
+export declare function parseQuery(search: string): Record<string, string>;
+/** パスがパターンにマッチするか確認し、パラメータを抽出 */
+export declare function matchPath(path: string, pattern: string): {
+    match: boolean;
+    params: Record<string, string>;
+};

package/dist/navigation.d.ts

@@ -0,0 +1,22 @@
+import { RouteInfo } from './types';
+/**
+ * 現在のルート情報を取得
+ *
+ * @returns 現在のルート情報（パス、パラメータ、クエリ）
+ */
+export declare function getRoute(): RouteInfo;
+/**
+ * プログラムによるナビゲーション
+ *
+ * @param path - 遷移先のパス
+ * @param replace - true の場合、履歴に追加せずに置き換え
+ */
+export declare function navigate(path: string, replace?: boolean): void;
+/**
+ * 履歴を戻る
+ */
+export declare function goBack(): void;
+/**
+ * 履歴を進む
+ */
+export declare function goForward(): void;

package/dist/state.d.ts

@@ -0,0 +1,12 @@
+import { RouteInfo } from './types';
+/** 現在のルート情報 */
+export declare let currentRoute: RouteInfo;
+/** ルート変更リスナー */
+export declare const routeListeners: Set<() => void>;
+/**
+ * テスト用: 状態をリセット
+ * @internal
+ */
+export declare function __resetForTesting__(): void;
+/** ルート情報を更新 */
+export declare function updateRoute(path: string): void;

package/dist/types.d.ts

@@ -0,0 +1,37 @@
+import { Component, Instruction } from '@ydant/core';
+/** ルート定義 */
+export interface RouteDefinition {
+    /** パスパターン（例: "/users/:id"） */
+    path: string;
+    /** パスにマッチした時に表示するコンポーネント */
+    component: Component;
+    /** ルートガード（false を返すとナビゲーションをキャンセル） */
+    guard?: () => boolean | Promise<boolean>;
+}
+/** ルート情報 */
+export interface RouteInfo {
+    /** 現在のパス */
+    path: string;
+    /** パスパラメータ（例: { id: "123" }） */
+    params: Record<string, string>;
+    /** クエリパラメータ */
+    query: Record<string, string>;
+    /** ハッシュ */
+    hash: string;
+}
+/** RouterView コンポーネントの props */
+export interface RouterViewProps {
+    /** ルート定義の配列 */
+    routes: RouteDefinition[];
+    /** ベースパス（オプション） */
+    base?: string;
+}
+/** RouterLink コンポーネントの props */
+export interface RouterLinkProps {
+    /** リンク先のパス */
+    href: string;
+    /** リンクの子要素 */
+    children: () => Instruction;
+    /** アクティブ時に追加するクラス */
+    activeClass?: string;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ydant/router",
+  "version": "0.1.0",
+  "description": "Router for Ydant SPA applications",
+  "keywords": [
+    "navigation",
+    "router",
+    "spa",
+    "ydant"
+  ],
+  "homepage": "https://github.com/cwd-k2/ydant#readme",
+  "bugs": {
+    "url": "https://github.com/cwd-k2/ydant/issues"
+  },
+  "license": "MIT",
+  "author": "cwd-k2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cwd-k2/ydant.git",
+    "directory": "packages/router"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "@ydant/dev": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "peerDependencies": {
+    "@ydant/base": "0.1.0",
+    "@ydant/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  }
+}