fix(router): migrate to Store 0.11.1

.changeset/warm-stores-select.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/react-router': patch
+'@tanstack/vue-router': patch
+---
+
+Migrate to TanStack Store 0.11.1 and preserve subscription cleanup for Vue functional components.

packages/react-router/package.json

@@ -93,7 +93,7 @@
   },
   "dependencies": {
     "@tanstack/history": "workspace:*",
-    "@tanstack/react-store": "^0.9.3",
+    "@tanstack/react-store": "^0.11.1",
     "@tanstack/router-core": "workspace:*",
     "isbot": "^5.1.22"
   },

packages/react-router/src/Match.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { isNotFound, rootRouteId } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
@@ -51,7 +51,7 @@ export const Match = React.memo(function MatchImpl({
 
   const matchStore = router.stores.getMatchStore(routeId)
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const match = useStore(matchStore, (value) => value)
+  const match = useSelector(matchStore)
   return <MatchView router={router} match={match!} />
 })
 
@@ -238,14 +238,14 @@ export const Outlet = React.memo(function OutletImpl() {
     const parentMatchStore = router.stores.getMatchStore(routeId)
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    ;[parentGlobalNotFound, parentNotFoundError] = useStore(
+    ;[parentGlobalNotFound, parentNotFoundError] = useSelector(
       parentMatchStore,
       (match): OutletMatchSelection => [!!match!._notFound, match!.error],
-      outletMatchSelectionEqual,
+      { compare: outletMatchSelectionEqual },
     )
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    childRouteId = useStore(router.stores.ids, (ids) => {
+    childRouteId = useSelector(router.stores.ids, (ids) => {
       return ids[ids.indexOf(routeId) + 1]
     })
   }

packages/react-router/src/Matches.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { rootRouteId } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { CatchBoundary } from './CatchBoundary'
@@ -87,7 +87,7 @@ function MatchesInner() {
     (isServer ?? router.isServer)
       ? router.stores.matches.get()
       : // eslint-disable-next-line react-hooks/rules-of-hooks
-        useStore(
+        useSelector(
           router.stores.matches,
           (value) => acknowledgement[0 /* offered */] ?? value,
         )
@@ -156,11 +156,11 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
 
   if (!(isServer ?? router.isServer)) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useStore(router.stores.location, (location) => location.href)
+    useSelector(router.stores.location, (location) => location.href)
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useStore(router.stores.resolvedLocation, (location) => location?.href)
+    useSelector(router.stores.resolvedLocation, (location) => location?.href)
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useStore(router.stores.status, (status) => status)
+    useSelector(router.stores.status)
   }
 
   return React.useCallback(
@@ -264,7 +264,7 @@ export function useMatches<
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  return useStore(
+  return useSelector(
     router.stores.matches,
     // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
     useStructuralSharing(opts, router),

packages/react-router/src/Scripts.tsx

@@ -1,4 +1,4 @@
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { _getAssetMatches, deepEqual } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { Asset } from './Asset'
@@ -69,7 +69,9 @@ export const Scripts = () => {
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const scripts = useStore(router.stores.matches, getScripts, deepEqual)
+  const scripts = useSelector(router.stores.matches, getScripts, {
+    compare: deepEqual,
+  })
 
   return renderScripts(router, scripts)
 }

packages/react-router/src/headContentUtils.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import {
   _getAssetMatches,
   appendUniqueUserTags,
@@ -212,5 +212,5 @@ export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
     [assetCrossOrigin, nonce, router],
   )
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  return useStore(router.stores.matches, selectTags, deepEqual)
+  return useSelector(router.stores.matches, selectTags, { compare: deepEqual })
 }

packages/react-router/src/link.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { flushSync } from 'react-dom'
 import {
   deepEqual,
@@ -400,11 +400,9 @@ export function useLinkProps<
   )
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const currentLocation = useStore(
-    router.stores.location,
-    (l) => l,
-    (prev, next) => prev.href === next.href,
-  )
+  const currentLocation = useSelector(router.stores.location, (l) => l, {
+    compare: (prev, next) => prev.href === next.href,
+  })
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const next = React.useMemo(() => {

packages/react-router/src/not-found.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { isNotFound } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { CatchBoundary } from './CatchBoundary'
 import { useRouter } from './useRouter'
 import type { ErrorInfo } from 'react'
@@ -44,12 +44,12 @@ export function CatchNotFound(props: {
 
   // TODO: Some way for the user to programmatically reset the not-found boundary?
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const pathname = useStore(
+  const pathname = useSelector(
     router.stores.location,
     (location) => location.pathname,
   )
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const status = useStore(router.stores.status, (status) => status)
+  const status = useSelector(router.stores.status)
   const resetKey = `not-found-${pathname}-${status}`
 
   return (

packages/react-router/src/useCanGoBack.ts

@@ -1,4 +1,4 @@
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
 
@@ -10,7 +10,7 @@ export function useCanGoBack() {
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  return useStore(
+  return useSelector(
     router.stores.location,
     (location) => location.state.__TSR_index !== 0,
   )

packages/react-router/src/useLocation.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
 import { useStructuralSharing } from './useMatch'
@@ -60,7 +60,7 @@ export function useLocation<
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  return useStore(
+  return useSelector(
     router.stores.location,
     // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
     useStructuralSharing(opts, router),

packages/react-router/src/useMatch.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { invariant, replaceEqualDeep } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { dummyMatchContext, matchContext } from './matchContext'
@@ -173,7 +173,7 @@ export function useMatch<
     useStructuralSharing(opts, router)
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  const matchSelection = useStore(matchStore, (match) =>
+  const matchSelection = useSelector(matchStore, (match) =>
     match ? selector(match as any) : dummyMatch,
   )
 

packages/react-router/src/useRouterState.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useStore } from '@tanstack/react-store'
+import { useSelector } from '@tanstack/react-store'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
 import { useStructuralSharing } from './useMatch'
@@ -68,7 +68,7 @@ export function useRouterState<
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
-  return useStore(
+  return useSelector(
     router.stores.__store,
     // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
     useStructuralSharing(opts, router),

packages/router-core/package.json

@@ -188,7 +188,7 @@
     "seroval-plugins": "^1.6.2"
   },
   "devDependencies": {
-    "@tanstack/store": "^0.9.3",
+    "@tanstack/store": "^0.11.1",
     "@types/node": "25.0.9",
     "esbuild": "^0.27.4",
     "vite": "*"

packages/vue-router/package.json

@@ -75,7 +75,7 @@
   "dependencies": {
     "@tanstack/history": "workspace:*",
     "@tanstack/router-core": "workspace:*",
-    "@tanstack/vue-store": "^0.9.3",
+    "@tanstack/vue-store": "^0.11.1",
     "@vue/runtime-dom": "^3.5.25",
     "isbot": "^5.1.22"
   },

packages/vue-router/src/Match.tsx

@@ -1,7 +1,7 @@
 import * as Vue from 'vue'
 import { isNotFound, rootRouteId } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from './useSelector'
 import { CatchBoundary } from './CatchBoundary'
 import { ClientOnly } from './ClientOnly'
 import { useRouter } from './useRouter'
@@ -25,11 +25,7 @@ export const Match = Vue.defineComponent({
 
     const routeId = props.routeId
 
-    const activeMatch = useStore(
-      router.stores.getMatchStore(routeId),
-      (value) => value,
-      { equal: Object.is },
-    )
+    const activeMatch = useSelector(router.stores.getMatchStore(routeId))
     // Provide routeId context (stable string) for children.
     // MatchInner, Outlet, and useMatch all consume this.
     Vue.provide(routeIdContext, routeId)
@@ -142,7 +138,7 @@ export const MatchInner = Vue.defineComponent({
 
     // Use routeId from context (provided by parent Match) — stable string.
     const routeId = Vue.inject(routeIdContext)!
-    const activeMatch = useStore(router.stores.getMatchStore(routeId))
+    const activeMatch = useSelector(router.stores.getMatchStore(routeId))
 
     // Combined selector for match state AND remount key
     // This ensures both are computed in the same selector call with consistent data
@@ -252,11 +248,11 @@ export const Outlet = Vue.defineComponent({
     const router = useRouter()
     const parentRouteId = Vue.inject(routeIdContext)!
 
-    const parentMatch = useStore(router.stores.getMatchStore(parentRouteId))
+    const parentMatch = useSelector(router.stores.getMatchStore(parentRouteId))
 
     const route = router.routesById[parentRouteId]!
 
-    const childMatch = useStore(router.stores.matches, (matches) => {
+    const childMatch = useSelector(router.stores.matches, (matches) => {
       const index = matches.findIndex(
         (match) => match.routeId === parentRouteId,
       )

packages/vue-router/src/Matches.tsx

@@ -1,6 +1,6 @@
 import * as Vue from 'vue'
 import { isServer } from '@tanstack/router-core/isServer'
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from './useSelector'
 import { CatchBoundary } from './CatchBoundary'
 import { useRouter } from './useRouter'
 import { useTransitionerSetup } from './Transitioner'
@@ -79,7 +79,7 @@ const MatchesInner = Vue.defineComponent({
   setup() {
     const router = useRouter()
 
-    const matches = useStore(router.stores.matches)
+    const matches = useSelector(router.stores.matches)
     const routeId = Vue.computed(() => matches.value[0]?.routeId)
 
     return () => {
@@ -126,12 +126,12 @@ export type UseMatchRouteOptions<
 export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
   const router = useRouter()
 
-  const location = useStore(router.stores.location, (value) => value.href)
-  const resolvedLocation = useStore(
+  const location = useSelector(router.stores.location, (value) => value.href)
+  const resolvedLocation = useSelector(
     router.stores.resolvedLocation,
     (value) => value?.href,
   )
-  const status = useStore(router.stores.status)
+  const status = useSelector(router.stores.status)
 
   return <
     const TFrom extends string = string,
@@ -264,7 +264,7 @@ export function useMatches<
   opts?: UseMatchesBaseOptions<TRouter, TSelected>,
 ): Vue.Ref<UseMatchesResult<TRouter, TSelected>> {
   const router = useRouter<TRouter>()
-  return useStore(router.stores.matches, (matches) => {
+  return useSelector(router.stores.matches, (matches) => {
     return opts?.select
       ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)
       : (matches as any)

packages/vue-router/src/Scripts.tsx

@@ -1,7 +1,7 @@
 import * as Vue from 'vue'
 import { _getAssetMatches } from '@tanstack/router-core'
-import { useStore } from '@tanstack/vue-store'
 import { isServer } from '@tanstack/router-core/isServer'
+import { useSelector } from './useSelector'
 import { Asset } from './Asset'
 import { useRouter } from './useRouter'
 import type { RouterManagedTag } from '@tanstack/router-core'
@@ -18,7 +18,7 @@ export const Scripts = Vue.defineComponent({
   setup() {
     const router = useRouter()
     const nonce = router.options.ssr?.nonce
-    const matches = useStore(router.stores.matches, _getAssetMatches)
+    const matches = useSelector(router.stores.matches, _getAssetMatches)
 
     const scripts = Vue.computed(() => {
       const userScripts: Array<RouterManagedTag> = []

packages/vue-router/src/headContentUtils.tsx

@@ -7,7 +7,7 @@ import {
   getScriptPreloadAttrs,
   resolveManifestCssLink,
 } from '@tanstack/router-core'
-import { useStore } from '@tanstack/vue-store'
+import { useSelector } from './useSelector'
 import { useRouter } from './useRouter'
 import type {
   AssetCrossOriginConfig,
@@ -16,7 +16,7 @@ import type {
 
 export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
   const router = useRouter()
-  const matches = useStore(router.stores.matches, _getAssetMatches)
+  const matches = useSelector(router.stores.matches, _getAssetMatches)
 
   const tags = Vue.computed<Array<RouterManagedTag>>(() => {
     const currentMatches = matches.value