@pyreon/router 0.14.0 → 0.15.0

package/src/tests/router.test.ts

@@ -2,6 +2,7 @@ import { h, popContext } from '@pyreon/core'
 import { mount } from '@pyreon/runtime-dom'
 import type { ResolvedRoute, RouteRecord } from '../index'
 import { isNotFoundError, NotFoundBoundary, notFound } from '../not-found'
+import { getRedirectInfo, redirect } from '../redirect'
 import {
   createRouter,
   hydrateLoaderData,
@@ -5258,3 +5259,151 @@ describe('loader cache', () => {
     router.destroy()
   })
 })
+
+// ─── redirect() — loader-thrown redirects propagate through the navigate flow
+
+describe('redirect() from loader', () => {
+  test('throws and triggers router.replace to the target path', async () => {
+    const Home = () => h('div', null, 'home')
+    const Login = () => h('div', null, 'login')
+    const Protected = () => h('div', null, 'protected')
+
+    const routes: RouteRecord[] = [
+      { path: '/', component: Home },
+      { path: '/login', component: Login },
+      {
+        path: '/app',
+        component: Protected,
+        loader: async () => {
+          // No session — redirect to /login
+          redirect('/login')
+        },
+      },
+    ]
+
+    const router = createRouter({ routes, url: '/' })
+    await router.push('/app')
+
+    expect(router.currentRoute().path).toBe('/login')
+    router.destroy()
+  })
+
+  test("doesn't fire when loader resolves normally", async () => {
+    const Home = () => h('div', null, 'home')
+    const Protected = () => h('div', null, 'protected')
+
+    let loaderRan = false
+    const routes: RouteRecord[] = [
+      { path: '/', component: Home },
+      {
+        path: '/app',
+        component: Protected,
+        loader: async () => {
+          loaderRan = true
+          return { user: 'me' }
+        },
+      },
+    ]
+
+    const router = createRouter({ routes, url: '/' })
+    await router.push('/app')
+
+    expect(loaderRan).toBe(true)
+    expect(router.currentRoute().path).toBe('/app')
+    router.destroy()
+  })
+
+  test('parent layout loader can redirect, blocking the child page', async () => {
+    const Home = () => h('div', null, 'home')
+    const Login = () => h('div', null, 'login')
+    const Layout = () => h('div', null, 'layout')
+    const Page = () => h('div', null, 'page')
+
+    const routes: RouteRecord[] = [
+      { path: '/', component: Home },
+      { path: '/login', component: Login },
+      {
+        path: '/app',
+        component: Layout,
+        loader: async () => {
+          redirect('/login')
+        },
+        children: [
+          {
+            // Relative path — `createRouter` joins it with the parent. fs-router
+            // emits absolute paths instead, but the routing semantics at runtime
+            // are identical via `resolveRoute`.
+            path: 'dashboard',
+            component: Page,
+            loader: async () => ({ data: 'page-data' }),
+          },
+        ],
+      },
+    ]
+
+    const router = createRouter({ routes, url: '/' })
+    await router.push('/app/dashboard')
+
+    // The contract: navigation lands on the redirect target, NOT the child page.
+    expect(router.currentRoute().path).toBe('/login')
+    router.destroy()
+  })
+
+  test('redirect() with custom status preserves the status on the thrown error', async () => {
+    // The router doesn't surface the status itself (it just calls .replace),
+    // but the SSR handler reads it via getRedirectInfo. Verify the throw path
+    // captures the status the same way the helper unit tests do.
+    const Home = () => h('div', null, 'home')
+    const Login = () => h('div', null, 'login')
+
+    const routes: RouteRecord[] = [
+      { path: '/', component: Home },
+      { path: '/login', component: Login },
+      {
+        path: '/old',
+        component: Home,
+        loader: async () => {
+          redirect('/login', 308)
+        },
+      },
+    ]
+
+    const router = createRouter({ routes, url: '/' })
+    await router.push('/old')
+    expect(router.currentRoute().path).toBe('/login')
+    router.destroy()
+  })
+
+  test('redirect from prefetchLoaderData propagates as a thrown RedirectError (SSR contract)', async () => {
+    const Home = () => h('div', null, 'home')
+    const Protected = () => h('div', null, 'protected')
+
+    const routes: RouteRecord[] = [
+      { path: '/', component: Home },
+      {
+        path: '/app',
+        component: Protected,
+        loader: async () => {
+          redirect('/login')
+        },
+      },
+    ]
+
+    const router = createRouter({ routes, url: '/' })
+
+    let caught: unknown
+    try {
+      await prefetchLoaderData(router as never, '/app')
+    } catch (err) {
+      caught = err
+    }
+
+    // The SSR handler catches this thrown error and converts it to a 302/307.
+    // The contract here is just "the throw propagates" — the conversion is
+    // tested in the server package's handler tests.
+    expect(caught).toBeDefined()
+    const info = getRedirectInfo(caught)
+    expect(info?.url).toBe('/login')
+    router.destroy()
+  })
+})

package/src/tests/routerlink-reactive-to.browser.test.tsx

@@ -0,0 +1,158 @@
+import { _rp, h } from '@pyreon/core'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createRouter, RouterLink, RouterProvider, useIsActive } from '../index'
+import { setActiveRouter } from '../router'
+
+describe('RouterLink reactive `to` prop', () => {
+  beforeEach(() => {
+    window.location.hash = ''
+  })
+  afterEach(() => {
+    setActiveRouter(null)
+    window.location.hash = ''
+  })
+
+  it('resolves _rp-wrapped `to` accessor to its string value, not the function literal', async () => {
+    const routes = [{ path: '/', component: () => h('div', null, 'home') }]
+    const router = createRouter({ routes, mode: 'hash' })
+    const { container, unmount } = mountInBrowser(
+      h(
+        RouterProvider,
+        { router },
+        h(RouterLink, { to: _rp(() => '/about') as unknown as string, id: 'link' }, 'Go'),
+      ),
+    )
+    await flush()
+    const link = container.querySelector<HTMLAnchorElement>('#link')
+    expect(link).not.toBeNull()
+    expect(link!.getAttribute('href')).toBe('#/about')
+    unmount()
+  })
+
+  it('NavItem-shape: parent gets `path` as `_rp` getter and forwards it to RouterLink', async () => {
+    // Mirrors `examples/fundamentals-playground/src/routes/_layout.tsx`:
+    //   function NavItem(props) {
+    //     return <RouterLink to={props.path} ...>{props.label}</RouterLink>
+    //   }
+    //   <NavItem path={tab.path} ... />
+    // The compiler emits `_rp(() => tab.path)` for the parent's `path` prop,
+    // which `makeReactiveProps` turns into a getter on NavItem's `props`.
+    // Then `<RouterLink to={props.path}>` re-wraps that getter access as
+    // `_rp(() => props.path)`. The outermost getter points back through
+    // NavItem's getter to the literal value.
+    const NavItem = (props: Record<string, unknown>) =>
+      h(RouterLink, {
+        to: _rp(() => props.path as string) as unknown as string,
+        id: 'nav-link',
+      })
+
+    const routes = [
+      { path: '/', component: () => h('div', { id: 'home' }, 'home') },
+      { path: '/about', component: () => h('div', { id: 'about' }, 'about') },
+    ]
+    const router = createRouter({ routes, mode: 'hash' })
+    const { container, unmount } = mountInBrowser(
+      h(
+        RouterProvider,
+        { router },
+        h(NavItem, { path: _rp(() => '/about') as unknown as string }),
+      ),
+    )
+    await flush()
+    const link = container.querySelector<HTMLAnchorElement>('#nav-link')
+    expect(link).not.toBeNull()
+    expect(link!.getAttribute('href')).toBe('#/about')
+    expect(link!.getAttribute('href')).not.toContain('=>')
+    unmount()
+  })
+
+  it('activeClass updates reactively when `to` is `_rp`-wrapped and route changes', async () => {
+    // Pre-fix, `RouterLink`'s own `activeClass` computation read `props.to`
+    // ONCE at component setup time and compared against the current path.
+    // Even if `props.to` correctly resolved to the string, the comparison
+    // was static — `activeClass` was a function returning a string but the
+    // captured `target = props.to` (declared inline) was hoisted in setup
+    // scope. After fixing setup-time captures of `props.to` (so the activeClass
+    // accessor reads `props.to` lazily on each invocation), navigation
+    // updates the class reactively.
+    const routes = [
+      { path: '/', component: () => h('div', { id: 'home' }, 'home') },
+      { path: '/about', component: () => h('div', { id: 'about' }, 'about') },
+    ]
+    const router = createRouter({ routes, mode: 'hash' })
+
+    const NavItem = (props: Record<string, unknown>) =>
+      h(RouterLink, {
+        to: _rp(() => props.path as string) as unknown as string,
+        id: `link-${(props as { _id: string })._id}`,
+      })
+
+    const { container, unmount } = mountInBrowser(
+      h(
+        RouterProvider,
+        { router },
+        h('div', null, [
+          h(NavItem, { _id: 'home', path: _rp(() => '/') as unknown as string }),
+          h(NavItem, { _id: 'about', path: _rp(() => '/about') as unknown as string }),
+        ]),
+      ),
+    )
+    await flush()
+
+    // RouterLink applies the default `router-link-active` class when the
+    // current path matches `to`.
+    expect(container.querySelector('#link-home')!.className).toContain('router-link-active')
+    expect(container.querySelector('#link-about')!.className).not.toContain('router-link-active')
+
+    await router.push('/about')
+    await flush()
+
+    expect(container.querySelector('#link-about')!.className).toContain('router-link-active')
+    expect(container.querySelector('#link-home')!.className).not.toContain('router-link-active')
+    unmount()
+  })
+
+  it('useIsActive(props.path) reactively flips when current route matches', async () => {
+    // The full fundamentals layout shape: NavItem reads `props.path` (a
+    // getter from `_rp`) and passes it BOTH to `RouterLink.to` AND to
+    // `useIsActive`. Pre-fix, `useIsActive(props.path)` captured the
+    // getter as the `path` argument — non-string — and silently returned
+    // false for every route check.
+    const routes = [
+      { path: '/', component: () => h('div', { id: 'home' }, 'home') },
+      { path: '/about', component: () => h('div', { id: 'about' }, 'about') },
+    ]
+    const router = createRouter({ routes, mode: 'hash' })
+
+    const NavItem = (props: Record<string, unknown>) => {
+      const isActive = useIsActive(props.path as string, true)
+      return h(RouterLink, {
+        to: _rp(() => props.path as string) as unknown as string,
+        id: `link-${(props as { _id: string })._id}`,
+        class: () => (isActive() ? 'is-active' : ''),
+      })
+    }
+
+    const { container, unmount } = mountInBrowser(
+      h(
+        RouterProvider,
+        { router },
+        h('div', null, [
+          h(NavItem, { _id: 'home', path: _rp(() => '/') as unknown as string }),
+          h(NavItem, { _id: 'about', path: _rp(() => '/about') as unknown as string }),
+        ]),
+      ),
+    )
+    await flush()
+
+    await router.push('/about')
+    await flush()
+
+    // The /about NavItem's useIsActive should now be true → className
+    // includes 'is-active'.
+    expect(container.querySelector('#link-about')!.className).toContain('is-active')
+    expect(container.querySelector('#link-home')!.className).not.toContain('is-active')
+    unmount()
+  })
+})

package/src/types.ts

@@ -166,6 +166,21 @@ export interface LoaderContext {
   query: Record<string, string>
   /** Aborted when a newer navigation supersedes this one */
   signal: AbortSignal
+  /**
+   * The incoming HTTP `Request` — populated only when the loader runs during
+   * SSR (via `prefetchLoaderData`); `undefined` on every CSR navigation.
+   * Lets server-side loaders read cookies / auth headers and decide whether
+   * to `throw redirect('/login')` BEFORE the layout renders.
+   *
+   * @example
+   * loader: ({ request }) => {
+   *   const cookie = request?.headers.get('cookie') ?? ''
+   *   const sid = cookie.match(/sid=([^;]+)/)?.[1]
+   *   if (!sid) redirect('/login')
+   *   return { sid }
+   * }
+   */
+  request?: Request
 }
 
 export type RouteLoaderFn = (ctx: LoaderContext) => Promise<unknown>
@@ -383,7 +398,7 @@ export interface Router<TNames extends string = string> {
    * separately when creating the router (`createRouter({ url, ... })`) or
    * call this for the same `url` you initialised the router with.
    */
-  preload(path: string): Promise<void>
+  preload(path: string, request?: Request): Promise<void>
   /**
    * Invalidate cached loader data. Forces loaders to re-run on next navigation.
    * - No args: invalidate ALL cached loader data
@@ -435,6 +450,13 @@ export interface RouterInstance extends Router {
   _navigationStartTime: number
   /** Key-based loader cache: cacheKey → { data, timestamp } */
   _loaderCache: Map<string, { data: unknown; timestamp: number }>
-  /** In-flight loader dedup: cacheKey → Promise */
-  _loaderInflight: Map<string, Promise<unknown>>
+  /**
+   * In-flight loader dedup: cacheKey → { promise, signal }.
+   * Tracking the signal lets dedup skip an in-flight entry whose signal is
+   * already aborted — otherwise nav-2 would inherit nav-1's aborted promise
+   * (`router.push` aborts the previous nav's controller before starting the
+   * next, so back-to-back nav to the same path could resolve nav-2 against
+   * nav-1's aborted fetch).
+   */
+  _loaderInflight: Map<string, { promise: Promise<unknown>; signal: AbortSignal }>
 }