@tanstack/router-core 1.171.15 → 1.171.16-pre.0

package/src/ssr/transformStreamWithRouter.ts

@@ -4,6 +4,8 @@ import { TSR_SCRIPT_BARRIER_ID } from './constants'
 import type { AnyRouter } from '../router'
 
 export type TransformStreamWithRouterOptions = {
+  /** The request lifetime that owns this response stream. */
+  signal?: AbortSignal
   /** Timeout for serialization to complete after app render finishes (default: 60000ms) */
   timeoutMs?: number
   /** Maximum lifetime of the stream transform (default: 120000ms). Safety net for cleanup. */
@@ -196,6 +198,22 @@ function createAbortNotifier(opts?: TransformStreamWithRouterOptions) {
   }
 }
 
+function listenToAbort(
+  signal: AbortSignal | undefined,
+  onAbort: (reason?: unknown) => void,
+) {
+  if (!signal) {
+    return
+  }
+  if (signal.aborted) {
+    onAbort(signal.reason)
+    return
+  }
+  const listener = () => onAbort(signal.reason)
+  signal.addEventListener('abort', listener, { once: true })
+  return () => signal.removeEventListener('abort', listener)
+}
+
 export function transformStreamWithRouter(
   router: AnyRouter,
   appStream: ReadableStream,
@@ -224,6 +242,7 @@ function makeFastPathStream(
   let controller: ReadableStreamDefaultController<Uint8Array> | undefined
   let state: MergeState = MergeState.ReadingBody
   let lifetimeTimeoutHandle: ReturnType<typeof setTimeout> | undefined
+  let stopListeningToAbort: (() => void) | undefined
   let stopListeningToInjectedHtml: (() => void) | undefined
   const readerState = createReaderState(appStream)
   const notifyAbort = createAbortNotifier(opts)
@@ -251,6 +270,8 @@ function makeFastPathStream(
       clearTimeout(lifetimeTimeoutHandle)
       lifetimeTimeoutHandle = undefined
     }
+    stopListeningToAbort?.()
+    stopListeningToAbort = undefined
     try {
       stopListeningToInjectedHtml?.()
     } catch {
@@ -360,6 +381,11 @@ function makeFastPathStream(
     },
   })
 
+  stopListeningToAbort = listenToAbort(opts?.signal, (reason) => {
+    safeError(reason)
+    cleanup(reason)
+  })
+
   return stream
 }
 
@@ -380,6 +406,7 @@ function makeMainStream(
   let stopListeningToSerializationFinished: (() => void) | undefined
   let serializationTimeoutHandle: ReturnType<typeof setTimeout> | undefined
   let lifetimeTimeoutHandle: ReturnType<typeof setTimeout> | undefined
+  let stopListeningToAbort: (() => void) | undefined
   let cleanedUp = false
 
   let controller: ReadableStreamDefaultController<Uint8Array> | undefined
@@ -509,6 +536,8 @@ function makeMainStream(
     }
     stopListeningToInjectedHtml = undefined
     stopListeningToSerializationFinished = undefined
+    stopListeningToAbort?.()
+    stopListeningToAbort = undefined
 
     if (serializationTimeoutHandle !== undefined) {
       clearTimeout(serializationTimeoutHandle)
@@ -763,7 +792,14 @@ function makeMainStream(
     if (cleanedUp || isDone()) return stream
   }
 
-  // Transform the appStream
+  stopListeningToAbort = listenToAbort(opts?.signal, (reason) => {
+    safeError(reason)
+    cleanup(reason)
+  })
+  if (cleanedUp || isDone())
+    return stream
+
+    // Transform the appStream
   ;(async () => {
     try {
       while (true) {

package/src/ssr/types.ts

@@ -15,7 +15,6 @@ export interface DehydratedMatch {
 export interface DehydratedRouter {
   manifest: Manifest | undefined
   dehydratedData?: any
-  lastMatchId?: string
   matches: Array<DehydratedMatch>
 }
 

package/src/stores.ts

@@ -1,11 +1,9 @@
-import { createLRUCache } from './lru-cache'
 import { arraysEqual, functionalUpdate } from './utils'
 
 import type { AnyRoute } from './route'
 import type { RouterState } from './router'
 import type { FullSearchSchema } from './routeInfo'
 import type { ParsedLocation } from './location'
-import type { AnyRedirect } from './redirect'
 import type { AnyRouteMatch } from './Matches'
 
 export interface RouterReadableStore<TValue> {
@@ -34,12 +32,9 @@ export type StoreConfig = {
   createMutableStore: MutableStoreFactory
   createReadonlyStore: ReadonlyStoreFactory
   batch: RouterBatchFn
-  init?: (stores: RouterStores<AnyRoute>) => void
 }
 
-type MatchStore = RouterWritableStore<AnyRouteMatch> & {
-  routeId?: string
-}
+type MatchStore = RouterWritableStore<AnyRouteMatch | undefined>
 type ReadableStore<TValue> = RouterReadableStore<TValue>
 
 /** SSR non-reactive createMutableStore */
@@ -71,272 +66,115 @@ export function createNonReactiveReadonlyStore<TValue>(
 
 export interface RouterStores<in out TRouteTree extends AnyRoute> {
   status: RouterWritableStore<RouterState<TRouteTree>['status']>
-  loadedAt: RouterWritableStore<number>
-  isLoading: RouterWritableStore<boolean>
-  isTransitioning: RouterWritableStore<boolean>
   location: RouterWritableStore<ParsedLocation<FullSearchSchema<TRouteTree>>>
   resolvedLocation: RouterWritableStore<
     ParsedLocation<FullSearchSchema<TRouteTree>> | undefined
   >
-  statusCode: RouterWritableStore<number>
-  redirect: RouterWritableStore<AnyRedirect | undefined>
-  matchesId: RouterWritableStore<Array<string>>
-  pendingIds: RouterWritableStore<Array<string>>
-  /** @internal */
-  cachedIds: RouterWritableStore<Array<string>>
+  ids: RouterWritableStore<Array<string>>
   matches: ReadableStore<Array<AnyRouteMatch>>
-  pendingMatches: ReadableStore<Array<AnyRouteMatch>>
-  cachedMatches: ReadableStore<Array<AnyRouteMatch>>
-  firstId: ReadableStore<string | undefined>
-  hasPending: ReadableStore<boolean>
-  matchRouteDeps: ReadableStore<{
-    locationHref: string
-    resolvedLocationHref: string | undefined
-    status: RouterState<TRouteTree>['status']
-  }>
   __store: RouterReadableStore<RouterState<TRouteTree>>
 
-  matchStores: Map<string, MatchStore>
-  pendingMatchStores: Map<string, MatchStore>
-  cachedMatchStores: Map<string, MatchStore>
+  byRoute: Map<string, MatchStore>
 
   /**
-   * Get a computed store that resolves a routeId to its current match state.
-   * Returns the same cached store instance for repeated calls with the same key.
-   * The computed depends on matchesId + the individual match store, so
-   * subscribers are only notified when the resolved match state changes.
+   * Get the stable atom for a route's presented match. The atom remains in the
+   * pool when the route leaves and contains `undefined` until it re-enters.
    */
-  getRouteMatchStore: (
+  getMatchStore: (
     routeId: string,
   ) => RouterReadableStore<AnyRouteMatch | undefined>
 
   setMatches: (nextMatches: Array<AnyRouteMatch>) => void
-  setPending: (nextMatches: Array<AnyRouteMatch>) => void
-  setCached: (nextMatches: Array<AnyRouteMatch>) => void
 }
 
 export function createRouterStores<TRouteTree extends AnyRoute>(
-  initialState: RouterState<TRouteTree>,
+  initialLocation: RouterState<TRouteTree>['location'],
   config: StoreConfig,
 ): RouterStores<TRouteTree> {
-  const { createMutableStore, createReadonlyStore, batch, init } = config
+  const { createMutableStore, createReadonlyStore, batch } = config
 
   // non reactive utilities
-  const matchStores = new Map<string, MatchStore>()
-  const pendingMatchStores = new Map<string, MatchStore>()
-  const cachedMatchStores = new Map<string, MatchStore>()
+  const byRoute = new Map<string, MatchStore>()
 
   // atoms
-  const status = createMutableStore(initialState.status)
-  const loadedAt = createMutableStore(initialState.loadedAt)
-  const isLoading = createMutableStore(initialState.isLoading)
-  const isTransitioning = createMutableStore(initialState.isTransitioning)
-  const location = createMutableStore(initialState.location)
-  const resolvedLocation = createMutableStore(initialState.resolvedLocation)
-  const statusCode = createMutableStore(initialState.statusCode)
-  const redirect = createMutableStore(initialState.redirect)
-  const matchesId = createMutableStore<Array<string>>([])
-  const pendingIds = createMutableStore<Array<string>>([])
-  const cachedIds = createMutableStore<Array<string>>([])
+  const status = createMutableStore<RouterState<TRouteTree>['status']>('idle')
+  const location = createMutableStore(initialLocation)
+  const resolvedLocation =
+    createMutableStore<RouterState<TRouteTree>['resolvedLocation']>(undefined)
+  const ids = createMutableStore<Array<string>>([])
 
   // 1st order derived stores
   const matches = createReadonlyStore(() =>
-    readPoolMatches(matchStores, matchesId.get()),
-  )
-  const pendingMatches = createReadonlyStore(() =>
-    readPoolMatches(pendingMatchStores, pendingIds.get()),
-  )
-  const cachedMatches = createReadonlyStore(() =>
-    readPoolMatches(cachedMatchStores, cachedIds.get()),
-  )
-  const firstId = createReadonlyStore(() => matchesId.get()[0])
-  const hasPending = createReadonlyStore(() =>
-    matchesId.get().some((matchId) => {
-      const store = matchStores.get(matchId)
-      return store?.get().status === 'pending'
-    }),
+    ids.get().map((id) => byRoute.get(id)!.get()!),
   )
-  const matchRouteDeps = createReadonlyStore(() => ({
-    locationHref: location.get().href,
-    resolvedLocationHref: resolvedLocation.get()?.href,
-    status: status.get(),
-  }))
 
   // compatibility "big" state store
   const __store = createReadonlyStore(() => ({
     status: status.get(),
-    loadedAt: loadedAt.get(),
-    isLoading: isLoading.get(),
-    isTransitioning: isTransitioning.get(),
+    isLoading: status.get() === 'pending',
     matches: matches.get(),
     location: location.get(),
     resolvedLocation: resolvedLocation.get(),
-    statusCode: statusCode.get(),
-    redirect: redirect.get(),
   }))
 
-  // Per-routeId computed store cache.
-  // Each entry resolves routeId → match state through the signal graph,
-  // giving consumers a single store to subscribe to instead of the
-  // two-level byRouteId → matchStore pattern.
-  //
-  // 64 max size is arbitrary, this is only for active matches anyway so
-  // it should be plenty. And we already have a 32 limit due to route
-  // matching bitmask anyway.
-  const matchStoreByRouteIdCache = createLRUCache<
-    string,
-    RouterReadableStore<AnyRouteMatch | undefined>
-  >(64)
-
-  function getRouteMatchStore(
-    routeId: string,
-  ): RouterReadableStore<AnyRouteMatch | undefined> {
-    let cached = matchStoreByRouteIdCache.get(routeId)
-    if (!cached) {
-      cached = createReadonlyStore(() => {
-        // Reading matchesId.get() tracks it as a dependency.
-        // When matchesId changes (navigation), this computed re-evaluates.
-        const ids = matchesId.get()
-        for (const id of ids) {
-          const matchStore = matchStores.get(id)
-          if (matchStore && matchStore.routeId === routeId) {
-            // Reading matchStore.get() tracks it as a dependency.
-            // When the match store's state changes, this re-evaluates.
-            return matchStore.get()
-          }
-        }
-        return undefined
-      })
-      matchStoreByRouteIdCache.set(routeId, cached)
+  function getMatchStore(routeId: string): MatchStore {
+    let matchStore = byRoute.get(routeId)
+    if (!matchStore) {
+      matchStore = createMutableStore<AnyRouteMatch | undefined>(undefined)
+      byRoute.set(routeId, matchStore)
     }
-    return cached
+    return matchStore
   }
 
   const store = {
     // atoms
     status,
-    loadedAt,
-    isLoading,
-    isTransitioning,
     location,
     resolvedLocation,
-    statusCode,
-    redirect,
-    matchesId,
-    pendingIds,
-    cachedIds,
+    ids,
 
     // derived
     matches,
-    pendingMatches,
-    cachedMatches,
-    firstId,
-    hasPending,
-    matchRouteDeps,
 
     // non-reactive state
-    matchStores,
-    pendingMatchStores,
-    cachedMatchStores,
+    byRoute,
 
     // compatibility "big" state
     __store,
 
-    // per-key computed stores
-    getRouteMatchStore,
+    // stable per-route presentation atoms
+    getMatchStore,
 
     // methods
     setMatches,
-    setPending,
-    setCached,
   }
 
-  // initialize the active matches
-  setMatches(initialState.matches as Array<AnyRouteMatch>)
-  init?.(store)
-
   // setters to update non-reactive utilities in sync with the reactive stores
   function setMatches(nextMatches: Array<AnyRouteMatch>) {
-    reconcileMatchPool(
-      nextMatches,
-      matchStores,
-      matchesId,
-      createMutableStore,
-      batch,
-    )
-  }
-
-  function setPending(nextMatches: Array<AnyRouteMatch>) {
-    reconcileMatchPool(
-      nextMatches,
-      pendingMatchStores,
-      pendingIds,
-      createMutableStore,
-      batch,
-    )
-  }
-
-  function setCached(nextMatches: Array<AnyRouteMatch>) {
-    reconcileMatchPool(
-      nextMatches,
-      cachedMatchStores,
-      cachedIds,
-      createMutableStore,
-      batch,
-    )
-  }
-
-  return store
-}
-
-function readPoolMatches(
-  pool: Map<string, MatchStore>,
-  ids: Array<string>,
-): Array<AnyRouteMatch> {
-  const matches: Array<AnyRouteMatch> = []
-  for (const id of ids) {
-    const matchStore = pool.get(id)
-    if (matchStore) {
-      matches.push(matchStore.get())
-    }
-  }
-  return matches
-}
-
-function reconcileMatchPool(
-  nextMatches: Array<AnyRouteMatch>,
-  pool: Map<string, MatchStore>,
-  idStore: RouterWritableStore<Array<string>>,
-  createMutableStore: MutableStoreFactory,
-  batch: RouterBatchFn,
-): void {
-  const nextIds = nextMatches.map((d) => d.id)
-  const nextIdSet = new Set(nextIds)
-
-  batch(() => {
-    for (const id of pool.keys()) {
-      if (!nextIdSet.has(id)) {
-        pool.delete(id)
+    const previousIds = ids.get()
+    const nextIds = nextMatches.map((match) => match.routeId)
+
+    batch(() => {
+      // Publish lane membership first so framework trees reconcile departures
+      // before observers of a leaving route receive its tombstone.
+      if (!arraysEqual(previousIds, nextIds)) {
+        ids.set(nextIds)
       }
-    }
 
-    for (const nextMatch of nextMatches) {
-      const existing = pool.get(nextMatch.id)
-      if (!existing) {
-        const matchStore = createMutableStore(nextMatch) as MatchStore
-        matchStore.routeId = nextMatch.routeId
-        pool.set(nextMatch.id, matchStore)
-        continue
+      for (const id of previousIds) {
+        if (!nextIds.includes(id)) {
+          byRoute.get(id)!.set(() => undefined)
+        }
       }
 
-      existing.routeId = nextMatch.routeId
-      if (existing.get() !== nextMatch) {
-        existing.set(nextMatch)
+      for (const nextMatch of nextMatches) {
+        const matchStore = getMatchStore(nextMatch.routeId)
+        if (matchStore.get() !== nextMatch) {
+          matchStore.set(nextMatch)
+        }
       }
-    }
+    })
+  }
 
-    if (!arraysEqual(idStore.get(), nextIds)) {
-      idStore.set(nextIds)
-    }
-  })
+  return store
 }