@seithr/router

Declarative nested layout routing, store-synchronized navigation state, and W3C View Transitions Level 2 for Seithr.

Overview

@seithr/router (imported via the seithr/router umbrella subpath) provides unidirectional, fine-grained routing for Seithr applications. It synchronizes navigation state cleanly with application stores without bidirectional ping-pong loops. It features nested <Outlet /> lifecycles, asynchronous data loaders, accessible focus relocation, and first-class support for W3C View Transitions.

Installation

bun add seithr
# or using npm
npm install seithr

Features

• Nested Layout Composition:
  • <Router routes={routes} />: Root navigation coordinator.
  • <Outlet />: Dynamically renders child route components while surgically disposing obsolete computation branches upon navigation.
  • <Link href={path} prefetch="intent" />: Semantic anchor wrapper supporting intent prefetching on pointer hover/focus.
• Reactive Accessors & Navigation Control:
  • getNavigator(): Programmatic navigation (navigate, preload, back, forward, go).
  • getLocation(), getParams(), getRouteParams(), getRouteData(), getSearchParams(), getNavigationStatus(): Fine-grained reactive route accessors.
• W3C View Transitions Level 2: Automatic zero-jank cross-page animations leveraging native document.startViewTransition.
• Store Slice Integration:
  • createRouterSlice & createRouter: Binds navigation state directly into seithr/store, enabling time-travel and pure action dispatches.
• Route Data Loaders: Synchronous and asynchronous loader caching with route parameter extraction and automatic AbortSignal cancellation.

Usage

import {
  Router,
  Outlet,
  Link,
  getNavigator,
  getLocation,
  getParams,
  getRouteParams,
  getRouteData,
  getSearchParams,
  getNavigationStatus,
  createRouterSlice,
  createRouter,
} from "seithr/router"

const routes = [
  {
    path: "/",
    component: () => {
      const nav = getNavigator()
      return (
        <div>
          <nav>
            <Link href="/">Home</Link>
            <Link href="/about" prefetch="intent">
              About
            </Link>
            <button type="button" onClick={() => nav.navigate("/about")}>
              Go to About
            </button>
          </nav>
          <Outlet />
        </div>
      )
    },
    children: [
      { path: "/", component: () => <h2>Home Page</h2> },
      { path: "/about", component: () => <h2>About Page</h2> },
    ],
  },
]

export function App() {
  return <Router routes={routes} />
}