@tanstack/vue-router 1.167.4 → 1.168.0

package/src/matchContext.tsx

@@ -1,41 +1,39 @@
 import * as Vue from 'vue'
 
-// Create a typed injection key with support for undefined values
-// This is the primary match context used throughout the router
+// Reactive nearest-match context used by hooks that work relative to the
+// current match in the tree.
 export const matchContext = Symbol('TanStackRouterMatch') as Vue.InjectionKey<
   Vue.Ref<string | undefined>
 >
 
-// Dummy match context for when we want to look up by explicit 'from' route
-export const dummyMatchContext = Symbol(
-  'TanStackRouterDummyMatch',
-) as Vue.InjectionKey<Vue.Ref<string | undefined>>
+// Pending match context for nearest-match lookups
+export const pendingMatchContext = Symbol(
+  'TanStackRouterPendingMatch',
+) as Vue.InjectionKey<Vue.Ref<boolean>>
 
-/**
- * Provides a match ID to child components
- */
-export function provideMatch(matchId: string | undefined) {
-  Vue.provide(matchContext, Vue.ref(matchId))
-}
+// Dummy pending context when nearest pending state is not needed
+export const dummyPendingMatchContext = Symbol(
+  'TanStackRouterDummyPendingMatch',
+) as Vue.InjectionKey<Vue.Ref<boolean>>
 
-/**
- * Retrieves the match ID from the component tree
- */
-export function injectMatch(): Vue.Ref<string | undefined> {
-  return Vue.inject(matchContext, Vue.ref(undefined))
-}
+// Stable routeId context — a plain string (not reactive) that identifies
+// which route this component belongs to. Provided by Match, consumed by
+// MatchInner, Outlet, and useMatch for routeId-based store lookups.
+export const routeIdContext = Symbol(
+  'TanStackRouterRouteId',
+) as Vue.InjectionKey<string>
 
 /**
- * Provides a dummy match ID to child components
+ * Retrieves nearest pending-match state from the component tree
  */
-export function provideDummyMatch(matchId: string | undefined) {
-  Vue.provide(dummyMatchContext, Vue.ref(matchId))
+export function injectPendingMatch(): Vue.Ref<boolean> {
+  return Vue.inject(pendingMatchContext, Vue.ref(false))
 }
 
 /**
- * Retrieves the dummy match ID from the component tree
- * This only exists so we can conditionally inject a value when we are not interested in the nearest match
+ * Retrieves dummy pending-match state from the component tree
+ * This only exists so we can conditionally inject a value when we are not interested in the nearest pending match
  */
-export function injectDummyMatch(): Vue.Ref<string | undefined> {
-  return Vue.inject(dummyMatchContext, Vue.ref(undefined))
+export function injectDummyPendingMatch(): Vue.Ref<boolean> {
+  return Vue.inject(dummyPendingMatchContext, Vue.ref(false))
 }

package/src/not-found.tsx

@@ -1,7 +1,8 @@
 import * as Vue from 'vue'
 import { isNotFound } from '@tanstack/router-core'
+import { useStore } from '@tanstack/vue-store'
 import { CatchBoundary } from './CatchBoundary'
-import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
 import type { ErrorComponentProps, NotFoundError } from '@tanstack/router-core'
 
 export function CatchNotFound(props: {
@@ -9,10 +10,13 @@ export function CatchNotFound(props: {
   onCatch?: (error: Error) => void
   children: Vue.VNode
 }) {
+  const router = useRouter()
   // TODO: Some way for the user to programmatically reset the not-found boundary?
-  const resetKey = useRouterState({
-    select: (s) => `not-found-${s.location.pathname}-${s.status}`,
-  })
+  const pathname = useStore(
+    router.stores.location,
+    (location) => location.pathname,
+  )
+  const status = useStore(router.stores.status, (value) => value)
 
   // Create a function that returns a VNode to match the SyncRouteComponent signature
   const errorComponentFn = (componentProps: ErrorComponentProps) => {
@@ -32,7 +36,7 @@ export function CatchNotFound(props: {
   }
 
   return Vue.h(CatchBoundary, {
-    getResetKey: () => resetKey.value,
+    getResetKey: () => `not-found-${pathname.value}-${status.value}`,
     onCatch: (error: Error) => {
       if (isNotFound(error)) {
         if (props.onCatch) {

package/src/router.ts

@@ -1,4 +1,5 @@
 import { RouterCore } from '@tanstack/router-core'
+import { getStoreFactory } from './routerStores'
 import type { RouterHistory } from '@tanstack/history'
 import type {
   AnyRoute,
@@ -98,6 +99,6 @@ export class Router<
       TDehydrated
     >,
   ) {
-    super(options)
+    super(options, getStoreFactory)
   }
 }

package/src/routerStores.ts

@@ -0,0 +1,54 @@
+import { batch, createStore } from '@tanstack/vue-store'
+import type {
+  AnyRoute,
+  GetStoreConfig,
+  RouterStores,
+} from '@tanstack/router-core'
+import type { Readable } from '@tanstack/vue-store'
+
+declare module '@tanstack/router-core' {
+  export interface RouterReadableStore<TValue> extends Readable<TValue> {}
+  export interface RouterStores<in out TRouteTree extends AnyRoute> {
+    /** Maps each active routeId to the matchId of its child in the match tree. */
+    childMatchIdByRouteId: RouterReadableStore<Record<string, string>>
+    /** Maps each pending routeId to true for quick lookup. */
+    pendingRouteIds: RouterReadableStore<Record<string, boolean>>
+  }
+}
+
+export const getStoreFactory: GetStoreConfig = (_opts) => {
+  return {
+    createMutableStore: createStore,
+    createReadonlyStore: createStore,
+    batch,
+    init: (stores: RouterStores<AnyRoute>) => {
+      // Single derived store: one reactive node that maps every active
+      // routeId to its child's matchId. Depends only on matchesId +
+      // the pool's routeId tags (which are set during reconciliation).
+      // Outlet reads the map and then does a direct pool lookup.
+      stores.childMatchIdByRouteId = createStore(() => {
+        const ids = stores.matchesId.state
+        const obj: Record<string, string> = {}
+        for (let i = 0; i < ids.length - 1; i++) {
+          const parentStore = stores.activeMatchStoresById.get(ids[i]!)
+          if (parentStore?.routeId) {
+            obj[parentStore.routeId] = ids[i + 1]!
+          }
+        }
+        return obj
+      })
+
+      stores.pendingRouteIds = createStore(() => {
+        const ids = stores.pendingMatchesId.state
+        const obj: Record<string, boolean> = {}
+        for (const id of ids) {
+          const store = stores.pendingMatchStoresById.get(id)
+          if (store?.routeId) {
+            obj[store.routeId] = true
+          }
+        }
+        return obj
+      })
+    },
+  }
+}

package/src/ssr/RouterClient.tsx

@@ -18,7 +18,7 @@ export const RouterClient = Vue.defineComponent({
     const isHydrated = Vue.ref(false)
 
     if (!hydrationPromise) {
-      if (!props.router.state.matches.length) {
+      if (!props.router.stores.matchesId.state.length) {
         hydrationPromise = hydrate(props.router)
       } else {
         hydrationPromise = Promise.resolve()

package/src/ssr/renderRouterToStream.tsx

@@ -62,7 +62,7 @@ export const renderRouterToStream = async ({
     }
 
     return new Response(`<!DOCTYPE html>${fullHtml}`, {
-      status: router.state.statusCode,
+      status: router.stores.statusCode.state,
       headers: responseHeaders,
     })
   }
@@ -78,7 +78,7 @@ export const renderRouterToStream = async ({
   )
 
   return new Response(responseStream as any, {
-    status: router.state.statusCode,
+    status: router.stores.statusCode.state,
     headers: responseHeaders,
   })
 }

package/src/ssr/renderRouterToString.tsx

@@ -24,7 +24,7 @@ export const renderRouterToString = async ({
     }
 
     return new Response(`<!DOCTYPE html>${html}`, {
-      status: router.state.statusCode,
+      status: router.stores.statusCode.state,
       headers: responseHeaders,
     })
   } catch (error) {

package/src/useCanGoBack.ts

@@ -1,5 +1,10 @@
-import { useRouterState } from './useRouterState'
+import { useStore } from '@tanstack/vue-store'
+import { useRouter } from './useRouter'
 
 export function useCanGoBack() {
-  return useRouterState({ select: (s) => s.location.state.__TSR_index !== 0 })
+  const router = useRouter()
+  return useStore(
+    router.stores.location,
+    (location) => location.state.__TSR_index !== 0,
+  )
 }

package/src/useLocation.tsx

@@ -1,4 +1,5 @@
-import { useRouterState } from './useRouterState'
+import { useStore } from '@tanstack/vue-store'
+import { useRouter } from './useRouter'
 import type {
   AnyRouter,
   RegisteredRouter,
@@ -23,8 +24,10 @@ export function useLocation<
 >(
   opts?: UseLocationBaseOptions<TRouter, TSelected>,
 ): Vue.Ref<UseLocationResult<TRouter, TSelected>> {
-  return useRouterState({
-    select: (state: any) =>
-      opts?.select ? opts.select(state.location) : state.location,
-  } as any) as Vue.Ref<UseLocationResult<TRouter, TSelected>>
+  const router = useRouter<TRouter>()
+  return useStore(
+    router.stores.location,
+    (location) =>
+      (opts?.select ? opts.select(location as any) : location) as any,
+  ) as Vue.Ref<UseLocationResult<TRouter, TSelected>>
 }

package/src/useMatch.tsx

@@ -1,6 +1,13 @@
 import * as Vue from 'vue'
-import { useRouterState } from './useRouterState'
-import { injectDummyMatch, injectMatch } from './matchContext'
+import { useStore } from '@tanstack/vue-store'
+import { isServer } from '@tanstack/router-core/isServer'
+import invariant from 'tiny-invariant'
+import {
+  injectDummyPendingMatch,
+  injectPendingMatch,
+  routeIdContext,
+} from './matchContext'
+import { useRouter } from './useRouter'
 import type {
   AnyRouter,
   MakeRouteMatch,
@@ -68,60 +75,99 @@ export function useMatch<
 ): Vue.Ref<
   ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
 > {
-  const nearestMatchId = opts.from ? injectDummyMatch() : injectMatch()
+  const router = useRouter<TRouter>()
 
-  // Store to track pending error for deferred throwing
-  const pendingError = Vue.ref<Error | null>(null)
+  // During SSR we render exactly once and do not need reactivity.
+  // Avoid store subscriptions and pending/transition bookkeeping on the server.
+  if (isServer ?? router.isServer) {
+    const nearestRouteId = opts.from ? undefined : Vue.inject(routeIdContext)
+    const matchStore =
+      (opts.from ?? nearestRouteId)
+        ? router.stores.getMatchStoreByRouteId(opts.from ?? nearestRouteId!)
+        : undefined
+    const match = matchStore?.state
 
-  // Select the match from router state
-  const matchSelection = useRouterState({
-    select: (state: any) => {
-      const match = state.matches.find((d: any) =>
-        opts.from ? opts.from === d.routeId : d.id === nearestMatchId.value,
+    invariant(
+      !((opts.shouldThrow ?? true) && !match),
+      `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+    )
+
+    if (match === undefined) {
+      return Vue.ref(undefined) as Vue.Ref<
+        ThrowOrOptional<
+          UseMatchResult<TRouter, TFrom, TStrict, TSelected>,
+          TThrow
+        >
+      >
+    }
+
+    return Vue.ref(opts.select ? opts.select(match) : match) as Vue.Ref<
+      ThrowOrOptional<
+        UseMatchResult<TRouter, TFrom, TStrict, TSelected>,
+        TThrow
+      >
+    >
+  }
+
+  const hasPendingNearestMatch = opts.from
+    ? injectDummyPendingMatch()
+    : injectPendingMatch()
+  // Set up reactive match value based on lookup strategy.
+  let match: Readonly<Vue.Ref<any>>
+
+  if (opts.from) {
+    // routeId case: single subscription via per-routeId computed store.
+    // The store reference is stable (cached by routeId).
+    const matchStore = router.stores.getMatchStoreByRouteId(opts.from)
+    match = useStore(matchStore, (value) => value)
+  } else {
+    // matchId case: use routeId from context for stable store lookup.
+    // The routeId is provided by the nearest Match component and doesn't
+    // change for the component's lifetime, so the store is stable.
+    const nearestRouteId = Vue.inject(routeIdContext)
+    if (nearestRouteId) {
+      match = useStore(
+        router.stores.getMatchStoreByRouteId(nearestRouteId),
+        (value) => value,
       )
+    } else {
+      // No route context — will fall through to error handling below
+      match = Vue.ref(undefined) as Readonly<Vue.Ref<undefined>>
+    }
+  }
+
+  const hasPendingRouteMatch = opts.from
+    ? useStore(router.stores.pendingRouteIds, (ids) => ids)
+    : undefined
+  const isTransitioning = useStore(
+    router.stores.isTransitioning,
+    (value) => value,
+    { equal: Object.is },
+  )
 
-      if (match === undefined) {
-        // During navigation transitions, check if the match exists in pendingMatches
-        const pendingMatch = state.pendingMatches?.find((d: any) =>
-          opts.from ? opts.from === d.routeId : d.id === nearestMatchId.value,
-        )
-
-        // If there's a pending match or we're transitioning, return undefined without throwing
-        if (pendingMatch || state.isTransitioning) {
-          pendingError.value = null
-          return undefined
-        }
-
-        // Store the error to throw later if shouldThrow is enabled
-        if (opts.shouldThrow ?? true) {
-          pendingError.value = new Error(
-            `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
-          )
-        }
-
-        return undefined
-      }
-
-      pendingError.value = null
-      return opts.select ? opts.select(match) : match
-    },
-  } as any)
-
-  // Throw the error if we have one - this happens after the selector runs
-  // Using a computed so the error is thrown when the return value is accessed
   const result = Vue.computed(() => {
-    // Check for pending error first
-    if (pendingError.value) {
-      throw pendingError.value
+    const selectedMatch = match.value
+    if (selectedMatch === undefined) {
+      const hasPendingMatch = opts.from
+        ? Boolean(hasPendingRouteMatch?.value[opts.from!])
+        : hasPendingNearestMatch.value
+      invariant(
+        !(
+          !hasPendingMatch &&
+          !isTransitioning.value &&
+          (opts.shouldThrow ?? true)
+        ),
+        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+      )
+
+      return undefined
     }
-    return matchSelection.value
+
+    return opts.select ? opts.select(selectedMatch) : selectedMatch
   })
 
-  // Also immediately throw if there's already an error from initial render
-  // This ensures errors are thrown even if the returned ref is never accessed
-  if (pendingError.value) {
-    throw pendingError.value
-  }
+  // Keep eager throw behavior for setups that call useMatch for side effects only.
+  result.value
 
-  return result as any
+  return result
 }

package/src/useRouterState.tsx

@@ -1,6 +1,6 @@
-import { useStore } from '@tanstack/vue-store'
 import * as Vue from 'vue'
 import { isServer } from '@tanstack/router-core/isServer'
+import { useStore } from '@tanstack/vue-store'
 import { useRouter } from './useRouter'
 import type {
   AnyRouter,
@@ -30,7 +30,7 @@ export function useRouterState<
   const router = opts?.router || contextRouter
 
   // Return a safe default if router is undefined
-  if (!router || !router.__store) {
+  if (!router || !router.stores.__store) {
     return Vue.ref(undefined) as Vue.Ref<
       UseRouterStateResult<TRouter, TSelected>
     >
@@ -42,13 +42,15 @@ export function useRouterState<
   const _isServer = isServer ?? router.isServer
 
   if (_isServer) {
-    const state = router.state as RouterState<TRouter['routeTree']>
+    const state = router.stores.__store.state as RouterState<
+      TRouter['routeTree']
+    >
     return Vue.ref(opts?.select ? opts.select(state) : state) as Vue.Ref<
       UseRouterStateResult<TRouter, TSelected>
     >
   }
 
-  return useStore(router.__store, (state) => {
+  return useStore(router.stores.__store, (state) => {
     if (opts?.select) return opts.select(state)
 
     return state