@pyreon/router 0.14.0 → 0.16.0

package/src/tests/redirect.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest'
+import { getRedirectInfo, isRedirectError, redirect } from '../redirect'
+
+describe('redirect()', () => {
+  it('throws an error branded with the REDIRECT symbol', () => {
+    expect(() => redirect('/login')).toThrow()
+  })
+
+  it('captures URL + default 307 status on the thrown error', () => {
+    let caught: unknown
+    try {
+      redirect('/login')
+    } catch (err) {
+      caught = err
+    }
+    const info = getRedirectInfo(caught)
+    expect(info).toEqual({ url: '/login', status: 307 })
+  })
+
+  it('captures the custom status when one is provided', () => {
+    let caught: unknown
+    try {
+      redirect('/perm', 308)
+    } catch (err) {
+      caught = err
+    }
+    expect(getRedirectInfo(caught)?.status).toBe(308)
+  })
+
+  it.each([301, 302, 303, 307, 308] as const)('accepts %s as a valid status', (status) => {
+    let caught: unknown
+    try {
+      redirect('/x', status)
+    } catch (err) {
+      caught = err
+    }
+    expect(getRedirectInfo(caught)?.status).toBe(status)
+  })
+
+  it('produces a human-readable Error message', () => {
+    let caught: Error | undefined
+    try {
+      redirect('/login')
+    } catch (err) {
+      caught = err as Error
+    }
+    expect(caught?.message).toBe('Redirect to /login')
+  })
+})
+
+describe('isRedirectError()', () => {
+  it('returns true for an error thrown by redirect()', () => {
+    let caught: unknown
+    try {
+      redirect('/x')
+    } catch (err) {
+      caught = err
+    }
+    expect(isRedirectError(caught)).toBe(true)
+  })
+
+  it('returns false for a plain Error', () => {
+    expect(isRedirectError(new Error('plain'))).toBe(false)
+  })
+
+  it('returns false for non-error values', () => {
+    expect(isRedirectError(null)).toBe(false)
+    expect(isRedirectError(undefined)).toBe(false)
+    expect(isRedirectError('string')).toBe(false)
+    expect(isRedirectError(42)).toBe(false)
+    expect(isRedirectError({})).toBe(false)
+  })
+
+  it('returns false for objects with a different brand', () => {
+    const fake = new Error('fake')
+    ;(fake as unknown as Record<symbol, unknown>)[Symbol.for('something.else')] = true
+    expect(isRedirectError(fake)).toBe(false)
+  })
+})
+
+describe('getRedirectInfo()', () => {
+  it('returns null for non-redirect errors', () => {
+    expect(getRedirectInfo(new Error('plain'))).toBeNull()
+    expect(getRedirectInfo(null)).toBeNull()
+  })
+
+  it('returns the redirect info for a thrown redirect()', () => {
+    let caught: unknown
+    try {
+      redirect('/destination', 303)
+    } catch (err) {
+      caught = err
+    }
+    expect(getRedirectInfo(caught)).toEqual({ url: '/destination', status: 303 })
+  })
+})

package/src/tests/router.browser.test.tsx

@@ -1,4 +1,4 @@
-import { h } from '@pyreon/core'
+import { h, onMount } from '@pyreon/core'
 import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import {
@@ -439,4 +439,71 @@ describe('router in real browser', () => {
     expect(container.querySelector('#home')).toBeNull()
     unmount()
   })
+
+  // ── Lock-in for the layout-remount loop fix (PR #406) ──────────────────────
+  //
+  // Pre-fix `RouterView`'s reactive child accessor read `_loadingSignal()` and
+  // the full `currentRoute` snapshot directly. Each navigation flow writes
+  // `_loadingSignal` at least twice (start tick + end tick) and writes
+  // `currentPath` once via `commitNavigation`. Any of those writes re-emitted
+  // the reactive child, and `mountReactive`'s teardown-then-mount cleanup
+  // remounted the entire matched-component subtree on each emission. So a
+  // single `router.push()` produced 2-3+ mounts of the destination component
+  // (instead of 1) — the "layout double/triple mount" loop.
+  //
+  // The fix routes the structural decision through a single
+  // `computed<DepthEntry>` keyed on `(rec, comp, errored, route)` reference
+  // equality. Within-navigation `_loadingSignal` ticks don't change
+  // `currentRoute` (it's `computed` memoized on `currentPath`), so the
+  // structural emission stays at exactly one per navigation.
+  //
+  // This test instruments a counter inside the destination component's
+  // `onMount` — an inflated count after a single `await router.push()` would
+  // mean the loop is back. Bisect-verifies against the structural decoupling
+  // commit: reverting that commit pushes the count to ≥ 2 and this assertion
+  // fails.
+  it('a single router.push() mounts the destination component exactly once (loop-prevention regression)', async () => {
+    let aboutMountCount = 0
+    const InstrumentedAbout = () => {
+      onMount(() => {
+        aboutMountCount++
+      })
+      return h('div', { id: 'about-instrumented' }, 'About Page')
+    }
+    const localRoutes = [
+      { path: '/', component: Home },
+      { path: '/about', component: InstrumentedAbout },
+    ]
+    const router = createRouter({ routes: localRoutes, mode: 'hash' })
+    const { container, unmount } = mountInBrowser(
+      h(RouterProvider, { router }, h(RouterView, {})),
+    )
+
+    // Sanity: starting at /, About is not yet mounted.
+    expect(aboutMountCount).toBe(0)
+    expect(container.querySelector('#about-instrumented')).toBeNull()
+
+    await router.push('/about')
+    await flush()
+
+    // The structural decoupling fix means a single navigation produces a
+    // single emission at this depth. If `RouterView` ever reverts to reading
+    // `_loadingSignal` reactively, every loadingSignal tick during the
+    // navigate flow will remount the destination subtree and this count
+    // jumps to 2 or 3.
+    expect(container.querySelector('#about-instrumented')?.textContent).toBe('About Page')
+    expect(aboutMountCount).toBe(1)
+
+    // And navigating BACK to / + forward again to /about produces exactly
+    // one more mount — covers the case where stale subscribers from a prior
+    // mount could double-fire across navigations.
+    await router.push('/')
+    await flush()
+    await router.push('/about')
+    await flush()
+    expect(aboutMountCount).toBe(2)
+
+    expect(unhandledRejections).toEqual([])
+    unmount()
+  })
 })

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

@@ -78,6 +78,15 @@ export interface ResolvedRoute<
   search?: Record<string, unknown> | undefined
   /** Middleware data attached during navigation (populated by middleware chain) */
   _middlewareData?: Record<string, unknown> | undefined
+  /**
+   * `true` when the URL didn't match any route AND a parent record's
+   * `notFoundComponent` was used as a synthetic fallback leaf. The
+   * `matched` chain ends with a synthetic `RouteRecord` rendering the
+   * not-found component INSIDE all its ancestor layouts — so 404 pages
+   * carry the same chrome (headers, footers, navigation) as regular
+   * pages. SSR handlers read this to set HTTP status 404.
+   */
+  isNotFound?: boolean
 }
 
 // ─── Lazy component ───────────────────────────────────────────────────────────
@@ -166,6 +175,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>
@@ -231,6 +255,14 @@ export interface RouteRecord<TPath extends string = string> {
   gcTime?: number
   /** Component rendered when this route's loader throws an error */
   errorComponent?: ComponentFn
+  /**
+   * Component rendered when a URL doesn't match any descendant route under
+   * this record's path. Acts as a "404 within layout" — the matched chain
+   * is `[...ancestors, this, syntheticLeaf]` so the not-found component
+   * renders INSIDE this layout's chrome. fs-router attaches this when it
+   * detects a `_404.tsx` / `_not-found.tsx` file under this layout.
+   */
+  notFoundComponent?: ComponentFn
   /**
    * Component rendered while this route's loader is running.
    * Only shown after `pendingMs` (default: 0) to avoid flash on fast loads.
@@ -383,7 +415,11 @@ 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,
+    options?: { skipLoaders?: boolean },
+  ): Promise<void>
   /**
    * Invalidate cached loader data. Forces loaders to re-run on next navigation.
    * - No args: invalidate ALL cached loader data
@@ -435,6 +471,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 }>
 }