{"id":36964519,"url":"https://github.com/uhyo/funstack-router","last_synced_at":"2026-03-08T16:07:23.350Z","repository":{"id":327978095,"uuid":"1113818542","full_name":"uhyo/funstack-router","owner":"uhyo","description":"Router library based on Navigation API. In explocation of a router without History API legacy","archived":false,"fork":false,"pushed_at":"2026-02-18T06:38:28.000Z","size":1159,"stargazers_count":37,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-02-18T10:23:31.048Z","etag":null,"topics":["react","router"],"latest_commit_sha":null,"homepage":"https://router.funstack.work/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uhyo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-10T14:03:09.000Z","updated_at":"2026-02-18T06:38:31.000Z","dependencies_parsed_at":"2025-12-11T00:05:20.345Z","dependency_job_id":null,"html_url":"https://github.com/uhyo/funstack-router","commit_stats":null,"previous_names":["uhyo/funstack-router"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/uhyo/funstack-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uhyo%2Ffunstack-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uhyo%2Ffunstack-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uhyo%2Ffunstack-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uhyo%2Ffunstack-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uhyo","download_url":"https://codeload.github.com/uhyo/funstack-router/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uhyo%2Ffunstack-router/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29701956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T23:35:04.139Z","status":"ssl_error","status_checked_at":"2026-02-21T23:35:03.832Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","router"],"created_at":"2026-01-13T19:37:30.025Z","updated_at":"2026-02-22T02:16:26.317Z","avatar_url":"https://github.com/uhyo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# FUNSTACK Router\n\n![FUNSTACK Router](docs/FUNSTACK_Router_Hero_small.png)\n\nA modern React router built on the [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API).\n\n\u003e **Warning**\n\u003e This project is in early development and is not ready for production use. APIs may change without notice.\n\n## Features\n\n- **Navigation API based** - Uses the modern Navigation API instead of the History API\n- **Native `\u003ca\u003e` tags just work** - No special `\u003cLink\u003e` component needed; use standard HTML links\n- **Object-based routes** - Define routes as plain JavaScript objects\n- **Nested routing** - Support for layouts and nested routes with `\u003cOutlet\u003e`\n- **Type-safe** - Full TypeScript support\n- **Lightweight** - Minimal API surface\n\n## Installation\n\n```bash\nnpm install @funstack/router\n```\n\n## Development\n\nThis is a pnpm monorepo. To set up the development environment:\n\n```bash\n# Install dependencies\npnpm install\n\n# Build the router package\npnpm build\n\n# Run the example app\npnpm --filter funstack-router-example dev\n\n# Run tests\npnpm test\n```\n\n### Packages\n\n- `packages/router` - The main `@funstack/router` library\n- `packages/example` - Example application\n\n## Quick Start\n\n```tsx\nimport { Router, Outlet } from \"@funstack/router\";\nimport type { RouteDefinition } from \"@funstack/router\";\n\nfunction Layout() {\n  return (\n    \u003cdiv\u003e\n      \u003cnav\u003e\n        {/* Native \u003ca\u003e tags work for client-side navigation */}\n        \u003ca href=\"/\"\u003eHome\u003c/a\u003e\n        \u003ca href=\"/users\"\u003eUsers\u003c/a\u003e\n      \u003c/nav\u003e\n      \u003cOutlet /\u003e\n    \u003c/div\u003e\n  );\n}\n\nfunction Home() {\n  return \u003ch1\u003eHome\u003c/h1\u003e;\n}\n\nfunction Users() {\n  return \u003ch1\u003eUsers\u003c/h1\u003e;\n}\n\nfunction UserDetail({ params }: { params: { id: string } }) {\n  return \u003ch1\u003eUser {params.id}\u003c/h1\u003e;\n}\n\nconst routes: RouteDefinition[] = [\n  {\n    path: \"/\",\n    component: Layout,\n    children: [\n      { path: \"\", component: Home },\n      { path: \"users\", component: Users },\n      { path: \"users/:id\", component: UserDetail },\n    ],\n  },\n];\n\nfunction App() {\n  return \u003cRouter routes={routes} /\u003e;\n}\n```\n\n## API Reference\n\n### Components\n\n#### `\u003cRouter\u003e`\n\nThe root component that provides routing context.\n\n```tsx\n\u003cRouter routes={routes} /\u003e\n```\n\n| Prop         | Type                 | Description                                                          |\n| ------------ | -------------------- | -------------------------------------------------------------------- |\n| `routes`     | `RouteDefinition[]`  | Array of route definitions                                           |\n| `onNavigate` | `OnNavigateCallback` | Optional callback invoked before navigation is intercepted           |\n| `fallback`   | `FallbackMode`       | Fallback mode when Navigation API is unavailable (default: `\"none\"`) |\n\n#### `\u003cOutlet\u003e`\n\nRenders the matched child route. Used in layout components.\n\n```tsx\nfunction Layout() {\n  return (\n    \u003cdiv\u003e\n      \u003cnav\u003e...\u003c/nav\u003e\n      \u003cOutlet /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Hooks\n\n#### `useNavigate()`\n\nReturns a function for programmatic navigation.\n\n```tsx\nconst navigate = useNavigate();\n\n// Basic navigation\nnavigate(\"/users\");\n\n// With options\nnavigate(\"/users\", { replace: true, state: { from: \"home\" } });\n```\n\n#### `useLocation()`\n\nReturns the current location.\n\n```tsx\nconst location = useLocation();\n// { pathname: \"/users\", search: \"?page=1\", hash: \"#section\" }\n```\n\n#### `useParams()`\n\nReturns the current route's path parameters. Note that route components also receive `params` as a prop, so this hook is mainly useful for non-route components that need access to params.\n\n```tsx\n// Route: /users/:id\nconst { id } = useParams\u003c{ id: string }\u003e();\n```\n\n#### `useSearchParams()`\n\nReturns and allows updating URL search parameters.\n\n```tsx\nconst [searchParams, setSearchParams] = useSearchParams();\n\n// Read\nconst page = searchParams.get(\"page\");\n\n// Update\nsetSearchParams({ page: \"2\" });\n\n// Update with function\nsetSearchParams((prev) =\u003e {\n  prev.set(\"page\", \"2\");\n  return prev;\n});\n```\n\n### Types\n\n#### `RouteDefinition`\n\nRoute components receive a `params` prop with the matched path parameters. Use the `route()` helper for type-safe route definitions:\n\n```typescript\nimport { route } from \"@funstack/router\";\n\n// Route without loader - component receives params prop\nroute({\n  path: \"users/:id\",\n  component: UserDetail, // receives { params: { id: string } }\n});\n\n// Route with loader - component receives both data and params props\nroute({\n  path: \"users/:id\",\n  loader: async ({ params }) =\u003e fetchUser(params.id),\n  component: UserDetail, // receives { data: Promise\u003cUser\u003e, params: { id: string } }\n});\n```\n\nYou can also define routes as plain objects (without type inference):\n\n```typescript\ntype RouteDefinition = {\n  path: string;\n  component?: React.ComponentType\u003c{ params: Record\u003cstring, string\u003e }\u003e;\n  children?: RouteDefinition[];\n};\n```\n\n#### `Location`\n\n```typescript\ntype Location = {\n  pathname: string;\n  search: string;\n  hash: string;\n};\n```\n\n#### `NavigateOptions`\n\n```typescript\ntype NavigateOptions = {\n  replace?: boolean;\n  state?: unknown;\n};\n```\n\n## Path Patterns\n\nFUNSTACK Router uses the [URLPattern API](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) for path matching.\n\n| Pattern      | Example        | Matches         |\n| ------------ | -------------- | --------------- |\n| `/users`     | `/users`       | Exact match     |\n| `/users/:id` | `/users/123`   | Named parameter |\n| `/files/*`   | `/files/a/b/c` | Wildcard        |\n\n## Browser Support\n\nThe Navigation API is supported in:\n\n- Chrome 102+\n- Edge 102+\n- Firefox 147+\n- Safari 26.2+\n- Opera 88+\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuhyo%2Ffunstack-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuhyo%2Ffunstack-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuhyo%2Ffunstack-router/lists"}