@tanstack/router-core 1.167.4 → 1.168.0

package/src/scroll-restoration.ts

@@ -262,7 +262,7 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
   //     // console.log('mutation observer restoreScroll')
   //     restoreScroll(
   //       storageKey,
-  //       getKey(router.state.location),
+  //       getKey(router.stores.location.state),
   //       router.options.scrollRestorationBehavior,
   //     )
   //   })
@@ -306,7 +306,7 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
       }
     }
 
-    const restoreKey = getKey(router.state.location)
+    const restoreKey = getKey(router.stores.location.state)
 
     scrollRestorationCache.set((state) => {
       const keyEntry = (state[restoreKey] ||= {} as ScrollRestorationByElement)
@@ -389,11 +389,12 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
  */
 export function handleHashScroll(router: AnyRouter) {
   if (typeof document !== 'undefined' && (document as any).querySelector) {
+    const location = router.stores.location.state
     const hashScrollIntoViewOptions =
-      router.state.location.state.__hashScrollIntoViewOptions ?? true
+      location.state.__hashScrollIntoViewOptions ?? true
 
-    if (hashScrollIntoViewOptions && router.state.location.hash !== '') {
-      const el = document.getElementById(router.state.location.hash)
+    if (hashScrollIntoViewOptions && location.hash !== '') {
+      const el = document.getElementById(location.hash)
       if (el) {
         el.scrollIntoView(hashScrollIntoViewOptions)
       }

package/src/ssr/createRequestHandler.ts

@@ -78,12 +78,13 @@ export function createRequestHandler<TRouter extends AnyRouter>({
 }
 
 function getRequestHeaders(opts: { router: AnyRouter }): Headers {
-  const matchHeaders = opts.router.state.matches.map<AnyHeaders>(
-    (match) => match.headers,
-  )
+  const matchHeaders =
+    opts.router.stores.activeMatchesSnapshot.state.map<AnyHeaders>(
+      (match) => match.headers,
+    )
 
   // Handle Redirects
-  const { redirect } = opts.router.state
+  const redirect = opts.router.stores.redirect.state
   if (redirect) {
     matchHeaders.push(redirect.headers)
   }

package/src/ssr/ssr-client.ts

@@ -1,5 +1,4 @@
 import invariant from 'tiny-invariant'
-import { batch } from '../utils/batch'
 import { isNotFound } from '../not-found'
 import { createControlledPromise } from '../utils'
 import { hydrateSsrMatchId } from './ssr-match-id'
@@ -86,7 +85,7 @@ export async function hydrate(router: AnyRouter): Promise<any> {
   }
 
   // Hydrate the router state
-  const matches = router.matchRoutes(router.state.location)
+  const matches = router.matchRoutes(router.stores.location.state)
 
   // kick off loading the route chunks
   const routeChunkPromise = Promise.all(
@@ -153,10 +152,7 @@ export async function hydrate(router: AnyRouter): Promise<any> {
     }
   })
 
-  router.__store.setState((s) => ({
-    ...s,
-    matches,
-  }))
+  router.stores.setActiveMatches(matches)
 
   // Allow the user to handle custom hydration data
   await router.options.hydrate?.(dehydratedData)
@@ -164,12 +160,14 @@ export async function hydrate(router: AnyRouter): Promise<any> {
   // now that all necessary data is hydrated:
   // 1) fully reconstruct the route context
   // 2) execute `head()` and `scripts()` for each match
+  const activeMatches = router.stores.activeMatchesSnapshot.state
+  const location = router.stores.location.state
   await Promise.all(
-    router.state.matches.map(async (match) => {
+    activeMatches.map(async (match) => {
       try {
         const route = router.looseRoutesById[match.routeId]!
 
-        const parentMatch = router.state.matches[match.index - 1]
+        const parentMatch = activeMatches[match.index - 1]
         const parentContext = parentMatch?.context ?? router.options.context
 
         // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed
@@ -180,11 +178,11 @@ export async function hydrate(router: AnyRouter): Promise<any> {
               deps: match.loaderDeps,
               params: match.params,
               context: parentContext ?? {},
-              location: router.state.location,
+              location,
               navigate: (opts: any) =>
                 router.navigate({
                   ...opts,
-                  _fromLocation: router.state.location,
+                  _fromLocation: location,
                 }),
               buildLocation: router.buildLocation,
               cause: match.cause,
@@ -205,7 +203,7 @@ export async function hydrate(router: AnyRouter): Promise<any> {
 
         const assetContext = {
           ssr: router.options.ssr,
-          matches: router.state.matches,
+          matches: activeMatches,
           match,
           params: match.params,
           loaderData: match.loaderData,
@@ -270,16 +268,17 @@ export async function hydrate(router: AnyRouter): Promise<any> {
     match._nonReactive.displayPendingPromise = loadPromise
 
     loadPromise.then(() => {
-      batch(() => {
+      router.batch(() => {
         // ensure router is not in status 'pending' anymore
         // this usually happens in Transitioner but if loading synchronously resolves,
         // Transitioner won't be rendered while loading so it cannot track the change from loading:true to loading:false
-        if (router.__store.state.status === 'pending') {
-          router.__store.setState((s) => ({
-            ...s,
-            status: 'idle',
-            resolvedLocation: s.location,
-          }))
+        if (router.stores.status.state === 'pending') {
+          router.batch(() => {
+            router.stores.status.setState(() => 'idle')
+            router.stores.resolvedLocation.setState(
+              () => router.stores.location.state,
+            )
+          })
         }
         // hide the pending component once the load is finished
         router.updateMatch(match.id, (prev) => ({

package/src/ssr/ssr-server.ts

@@ -202,7 +202,7 @@ export function attachRouterServerSsrUtils({
     },
     dehydrate: async () => {
       invariant(!_dehydrated, 'router is already dehydrated!')
-      let matchesToDehydrate = router.state.matches
+      let matchesToDehydrate = router.stores.activeMatchesSnapshot.state
       if (router.isShell()) {
         // In SPA mode we only want to dehydrate the root match
         matchesToDehydrate = matchesToDehydrate.slice(0, 1)

package/src/stores.ts

@@ -0,0 +1,342 @@
+import { createLRUCache } from './lru-cache'
+import { arraysEqual } 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> {
+  readonly state: TValue
+}
+
+export interface RouterWritableStore<
+  TValue,
+> extends RouterReadableStore<TValue> {
+  setState: (updater: (prev: TValue) => TValue) => void
+}
+
+export type RouterBatchFn = (fn: () => void) => void
+
+export type MutableStoreFactory = <TValue>(
+  initialValue: TValue,
+) => RouterWritableStore<TValue>
+
+export type ReadonlyStoreFactory = <TValue>(
+  read: () => TValue,
+) => RouterReadableStore<TValue>
+
+export type GetStoreConfig = (opts: { isServer?: boolean }) => StoreConfig
+
+export type StoreConfig = {
+  createMutableStore: MutableStoreFactory
+  createReadonlyStore: ReadonlyStoreFactory
+  batch: RouterBatchFn
+  init?: (stores: RouterStores<AnyRoute>) => void
+}
+
+type MatchStore = RouterWritableStore<AnyRouteMatch> & {
+  routeId?: string
+}
+type ReadableStore<TValue> = RouterReadableStore<TValue>
+
+/** SSR non-reactive createMutableStore */
+export function createNonReactiveMutableStore<TValue>(
+  initialValue: TValue,
+): RouterWritableStore<TValue> {
+  let value = initialValue
+
+  return {
+    get state() {
+      return value
+    },
+    setState(updater: (prev: TValue) => TValue) {
+      value = updater(value)
+    },
+  }
+}
+
+/** SSR non-reactive createReadonlyStore */
+export function createNonReactiveReadonlyStore<TValue>(
+  read: () => TValue,
+): RouterReadableStore<TValue> {
+  return {
+    get state() {
+      return read()
+    },
+  }
+}
+
+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>>
+  pendingMatchesId: RouterWritableStore<Array<string>>
+  /** @internal */
+  cachedMatchesId: RouterWritableStore<Array<string>>
+  activeMatchesSnapshot: ReadableStore<Array<AnyRouteMatch>>
+  pendingMatchesSnapshot: ReadableStore<Array<AnyRouteMatch>>
+  cachedMatchesSnapshot: ReadableStore<Array<AnyRouteMatch>>
+  firstMatchId: ReadableStore<string | undefined>
+  hasPendingMatches: ReadableStore<boolean>
+  matchRouteReactivity: ReadableStore<{
+    locationHref: string
+    resolvedLocationHref: string | undefined
+    status: RouterState<TRouteTree>['status']
+  }>
+  __store: RouterReadableStore<RouterState<TRouteTree>>
+
+  activeMatchStoresById: Map<string, MatchStore>
+  pendingMatchStoresById: Map<string, MatchStore>
+  cachedMatchStoresById: 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.
+   */
+  getMatchStoreByRouteId: (
+    routeId: string,
+  ) => RouterReadableStore<AnyRouteMatch | undefined>
+
+  setActiveMatches: (nextMatches: Array<AnyRouteMatch>) => void
+  setPendingMatches: (nextMatches: Array<AnyRouteMatch>) => void
+  setCachedMatches: (nextMatches: Array<AnyRouteMatch>) => void
+}
+
+export function createRouterStores<TRouteTree extends AnyRoute>(
+  initialState: RouterState<TRouteTree>,
+  config: StoreConfig,
+): RouterStores<TRouteTree> {
+  const { createMutableStore, createReadonlyStore, batch, init } = config
+
+  // non reactive utilities
+  const activeMatchStoresById = new Map<string, MatchStore>()
+  const pendingMatchStoresById = new Map<string, MatchStore>()
+  const cachedMatchStoresById = 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 pendingMatchesId = createMutableStore<Array<string>>([])
+  const cachedMatchesId = createMutableStore<Array<string>>([])
+
+  // 1st order derived stores
+  const activeMatchesSnapshot = createReadonlyStore(() =>
+    readPoolMatches(activeMatchStoresById, matchesId.state),
+  )
+  const pendingMatchesSnapshot = createReadonlyStore(() =>
+    readPoolMatches(pendingMatchStoresById, pendingMatchesId.state),
+  )
+  const cachedMatchesSnapshot = createReadonlyStore(() =>
+    readPoolMatches(cachedMatchStoresById, cachedMatchesId.state),
+  )
+  const firstMatchId = createReadonlyStore(() => matchesId.state[0])
+  const hasPendingMatches = createReadonlyStore(() =>
+    matchesId.state.some((matchId) => {
+      const store = activeMatchStoresById.get(matchId)
+      return store?.state.status === 'pending'
+    }),
+  )
+  const matchRouteReactivity = createReadonlyStore(() => ({
+    locationHref: location.state.href,
+    resolvedLocationHref: resolvedLocation.state?.href,
+    status: status.state,
+  }))
+
+  // compatibility "big" state store
+  const __store = createReadonlyStore(() => ({
+    status: status.state,
+    loadedAt: loadedAt.state,
+    isLoading: isLoading.state,
+    isTransitioning: isTransitioning.state,
+    matches: activeMatchesSnapshot.state,
+    location: location.state,
+    resolvedLocation: resolvedLocation.state,
+    statusCode: statusCode.state,
+    redirect: redirect.state,
+  }))
+
+  // 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 getMatchStoreByRouteId(
+    routeId: string,
+  ): RouterReadableStore<AnyRouteMatch | undefined> {
+    let cached = matchStoreByRouteIdCache.get(routeId)
+    if (!cached) {
+      cached = createReadonlyStore(() => {
+        // Reading matchesId.state tracks it as a dependency.
+        // When matchesId changes (navigation), this computed re-evaluates.
+        const ids = matchesId.state
+        for (const id of ids) {
+          const matchStore = activeMatchStoresById.get(id)
+          if (matchStore && matchStore.routeId === routeId) {
+            // Reading matchStore.state tracks it as a dependency.
+            // When the match store's state changes, this re-evaluates.
+            return matchStore.state
+          }
+        }
+        return undefined
+      })
+      matchStoreByRouteIdCache.set(routeId, cached)
+    }
+    return cached
+  }
+
+  const store = {
+    // atoms
+    status,
+    loadedAt,
+    isLoading,
+    isTransitioning,
+    location,
+    resolvedLocation,
+    statusCode,
+    redirect,
+    matchesId,
+    pendingMatchesId,
+    cachedMatchesId,
+
+    // derived
+    activeMatchesSnapshot,
+    pendingMatchesSnapshot,
+    cachedMatchesSnapshot,
+    firstMatchId,
+    hasPendingMatches,
+    matchRouteReactivity,
+
+    // non-reactive state
+    activeMatchStoresById,
+    pendingMatchStoresById,
+    cachedMatchStoresById,
+
+    // compatibility "big" state
+    __store,
+
+    // per-key computed stores
+    getMatchStoreByRouteId,
+
+    // methods
+    setActiveMatches,
+    setPendingMatches,
+    setCachedMatches,
+  }
+
+  // initialize the active matches
+  setActiveMatches(initialState.matches as Array<AnyRouteMatch>)
+  init?.(store)
+
+  // setters to update non-reactive utilities in sync with the reactive stores
+  function setActiveMatches(nextMatches: Array<AnyRouteMatch>) {
+    reconcileMatchPool(
+      nextMatches,
+      activeMatchStoresById,
+      matchesId,
+      createMutableStore,
+      batch,
+    )
+  }
+
+  function setPendingMatches(nextMatches: Array<AnyRouteMatch>) {
+    reconcileMatchPool(
+      nextMatches,
+      pendingMatchStoresById,
+      pendingMatchesId,
+      createMutableStore,
+      batch,
+    )
+  }
+
+  function setCachedMatches(nextMatches: Array<AnyRouteMatch>) {
+    reconcileMatchPool(
+      nextMatches,
+      cachedMatchStoresById,
+      cachedMatchesId,
+      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.state)
+    }
+  }
+  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)
+      }
+    }
+
+    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
+      }
+
+      existing.routeId = nextMatch.routeId
+      if (existing.state !== nextMatch) {
+        existing.setState(() => nextMatch)
+      }
+    }
+
+    if (!arraysEqual(idStore.state, nextIds)) {
+      idStore.setState(() => nextIds)
+    }
+  })
+}

package/src/utils.ts

@@ -697,3 +697,12 @@ export function buildDevStylesUrl(
   const normalizedBasepath = trimmedBasepath === '' ? '' : `/${trimmedBasepath}`
   return `${normalizedBasepath}/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds.join(','))}`
 }
+
+export function arraysEqual<T>(a: Array<T>, b: Array<T>) {
+  if (a === b) return true
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false
+  }
+  return true
+}

package/dist/cjs/utils/batch.cjs

@@ -1,16 +0,0 @@
-require("../_virtual/_rolldown/runtime.cjs");
-let _tanstack_store = require("@tanstack/store");
-let _tanstack_router_core_isServer = require("@tanstack/router-core/isServer");
-//#region src/utils/batch.ts
-function batch(fn) {
-	if (_tanstack_router_core_isServer.isServer) return fn();
-	let result;
-	(0, _tanstack_store.batch)(() => {
-		result = fn();
-	});
-	return result;
-}
-//#endregion
-exports.batch = batch;
-
-//# sourceMappingURL=batch.cjs.map

package/dist/cjs/utils/batch.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"batch.cjs","names":[],"sources":["../../../src/utils/batch.ts"],"sourcesContent":["import { batch as storeBatch } from '@tanstack/store'\n\nimport { isServer } from '@tanstack/router-core/isServer'\n\n// `@tanstack/store`'s `batch` is for reactive notification batching.\n// On the server we don't subscribe/render reactively, so a lightweight\n// implementation that just executes is enough.\nexport function batch<T>(fn: () => T): T {\n  if (isServer) {\n    return fn()\n  }\n\n  let result!: T\n  storeBatch(() => {\n    result = fn()\n  })\n  return result\n}\n"],"mappings":";;;;AAOA,SAAgB,MAAS,IAAgB;AACvC,KAAI,+BAAA,SACF,QAAO,IAAI;CAGb,IAAI;AACJ,EAAA,GAAA,gBAAA,aAAiB;AACf,WAAS,IAAI;GACb;AACF,QAAO"}

package/dist/cjs/utils/batch.d.cts

@@ -1 +0,0 @@
-export declare function batch<T>(fn: () => T): T;

package/dist/esm/utils/batch.d.ts

@@ -1 +0,0 @@
-export declare function batch<T>(fn: () => T): T;

package/dist/esm/utils/batch.js

@@ -1,15 +0,0 @@
-import { batch } from "@tanstack/store";
-import { isServer } from "@tanstack/router-core/isServer";
-//#region src/utils/batch.ts
-function batch$1(fn) {
-	if (isServer) return fn();
-	let result;
-	batch(() => {
-		result = fn();
-	});
-	return result;
-}
-//#endregion
-export { batch$1 as batch };
-
-//# sourceMappingURL=batch.js.map

package/dist/esm/utils/batch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"batch.js","names":[],"sources":["../../../src/utils/batch.ts"],"sourcesContent":["import { batch as storeBatch } from '@tanstack/store'\n\nimport { isServer } from '@tanstack/router-core/isServer'\n\n// `@tanstack/store`'s `batch` is for reactive notification batching.\n// On the server we don't subscribe/render reactively, so a lightweight\n// implementation that just executes is enough.\nexport function batch<T>(fn: () => T): T {\n  if (isServer) {\n    return fn()\n  }\n\n  let result!: T\n  storeBatch(() => {\n    result = fn()\n  })\n  return result\n}\n"],"mappings":";;;AAOA,SAAgB,QAAS,IAAgB;AACvC,KAAI,SACF,QAAO,IAAI;CAGb,IAAI;AACJ,aAAiB;AACf,WAAS,IAAI;GACb;AACF,QAAO"}

package/src/utils/batch.ts

@@ -1,18 +0,0 @@
-import { batch as storeBatch } from '@tanstack/store'
-
-import { isServer } from '@tanstack/router-core/isServer'
-
-// `@tanstack/store`'s `batch` is for reactive notification batching.
-// On the server we don't subscribe/render reactively, so a lightweight
-// implementation that just executes is enough.
-export function batch<T>(fn: () => T): T {
-  if (isServer) {
-    return fn()
-  }
-
-  let result!: T
-  storeBatch(() => {
-    result = fn()
-  })
-  return result
-}