@tanstack/vue-router 1.168.12 → 1.168.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-router",
-  "version": "1.168.12",
+  "version": "1.168.13",
   "description": "Modern and scalable routing for Vue applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -65,7 +65,7 @@
     "isbot": "^5.1.22",
     "jsesc": "^3.0.2",
     "@tanstack/history": "1.161.6",
-    "@tanstack/router-core": "1.168.9"
+    "@tanstack/router-core": "1.168.10"
   },
   "devDependencies": {
     "@tanstack/intent": "^0.0.14",

package/src/Match.tsx

@@ -268,8 +268,8 @@ const OnRendered = Vue.defineComponent({
             router.emit({
               type: 'onRendered',
               ...getLocationChangeInfo(
-                router.stores.location.state,
-                router.stores.resolvedLocation.state,
+                router.stores.location.get(),
+                router.stores.resolvedLocation.get(),
               ),
             })
             prevHref = currentHref
@@ -525,7 +525,7 @@ export const Outlet = Vue.defineComponent({
     const childMatchData = Vue.computed(() => {
       const childId = childMatchIdMap.value[parentRouteId]
       if (!childId) return null
-      const child = router.stores.activeMatchStoresById.get(childId)?.state
+      const child = router.stores.activeMatchStoresById.get(childId)?.get()
       if (!child) return null
 
       return {

package/src/Transitioner.tsx

@@ -60,7 +60,7 @@ export function useTransitionerSetup() {
     isTransitioning.value = true
     // Also update the router state so useMatch knows we're transitioning
     try {
-      router.stores.isTransitioning.setState(() => true)
+      router.stores.isTransitioning.set(true)
     } catch {
       // Ignore errors if component is unmounted
     }
@@ -71,7 +71,7 @@ export function useTransitionerSetup() {
       Vue.nextTick(() => {
         try {
           isTransitioning.value = false
-          router.stores.isTransitioning.setState(() => false)
+          router.stores.isTransitioning.set(false)
         } catch {
           // Ignore errors if component is unmounted
         }
@@ -140,12 +140,10 @@ export function useTransitionerSetup() {
   Vue.onMounted(() => {
     isMounted.value = true
     if (!isAnyPending.value) {
-      if (router.stores.status.state === 'pending') {
+      if (router.stores.status.get() === 'pending') {
         batch(() => {
-          router.stores.status.setState(() => 'idle')
-          router.stores.resolvedLocation.setState(
-            () => router.stores.location.state,
-          )
+          router.stores.status.set('idle')
+          router.stores.resolvedLocation.set(router.stores.location.get())
         })
       }
     }
@@ -188,8 +186,8 @@ export function useTransitionerSetup() {
           router.emit({
             type: 'onLoad',
             ...getLocationChangeInfo(
-              router.stores.location.state,
-              router.stores.resolvedLocation.state,
+              router.stores.location.get(),
+              router.stores.resolvedLocation.get(),
             ),
           })
         }
@@ -207,8 +205,8 @@ export function useTransitionerSetup() {
         router.emit({
           type: 'onBeforeRouteMount',
           ...getLocationChangeInfo(
-            router.stores.location.state,
-            router.stores.resolvedLocation.state,
+            router.stores.location.get(),
+            router.stores.resolvedLocation.get(),
           ),
         })
       }
@@ -220,20 +218,18 @@ export function useTransitionerSetup() {
   Vue.watch(isAnyPending, (newValue) => {
     if (!isMounted.value) return
     try {
-      if (!newValue && router.stores.status.state === 'pending') {
+      if (!newValue && router.stores.status.get() === 'pending') {
         batch(() => {
-          router.stores.status.setState(() => 'idle')
-          router.stores.resolvedLocation.setState(
-            () => router.stores.location.state,
-          )
+          router.stores.status.set('idle')
+          router.stores.resolvedLocation.set(router.stores.location.get())
         })
       }
 
       // The router was pending and now it's not
       if (previousIsAnyPending.value.previous && !newValue) {
         const changeInfo = getLocationChangeInfo(
-          router.stores.location.state,
-          router.stores.resolvedLocation.state,
+          router.stores.location.get(),
+          router.stores.resolvedLocation.get(),
         )
         router.emit({
           type: 'onResolved',

package/src/link.tsx

@@ -186,7 +186,7 @@ export function useLinkProps<
     })
 
     const isActive = getIsActive({
-      loc: router.stores.location.state,
+      loc: router.stores.location.get(),
       nextLoc: next,
       activeOptions: options.activeOptions,
       router,

package/src/routerStores.ts

@@ -1,4 +1,4 @@
-import { batch, createStore } from '@tanstack/vue-store'
+import { batch, createAtom } from '@tanstack/vue-store'
 import type {
   AnyRoute,
   GetStoreConfig,
@@ -18,16 +18,16 @@ declare module '@tanstack/router-core' {
 
 export const getStoreFactory: GetStoreConfig = (_opts) => {
   return {
-    createMutableStore: createStore,
-    createReadonlyStore: createStore,
+    createMutableStore: createAtom,
+    createReadonlyStore: createAtom,
     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
+      stores.childMatchIdByRouteId = createAtom(() => {
+        const ids = stores.matchesId.get()
         const obj: Record<string, string> = {}
         for (let i = 0; i < ids.length - 1; i++) {
           const parentStore = stores.activeMatchStoresById.get(ids[i]!)
@@ -38,8 +38,8 @@ export const getStoreFactory: GetStoreConfig = (_opts) => {
         return obj
       })
 
-      stores.pendingRouteIds = createStore(() => {
-        const ids = stores.pendingMatchesId.state
+      stores.pendingRouteIds = createAtom(() => {
+        const ids = stores.pendingMatchesId.get()
         const obj: Record<string, boolean> = {}
         for (const id of ids) {
           const store = stores.pendingMatchStoresById.get(id)

package/src/ssr/RouterClient.tsx

@@ -18,7 +18,7 @@ export const RouterClient = Vue.defineComponent({
     const isHydrated = Vue.ref(false)
 
     if (!hydrationPromise) {
-      if (!props.router.stores.matchesId.state.length) {
+      if (!props.router.stores.matchesId.get().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.stores.statusCode.state,
+      status: router.stores.statusCode.get(),
       headers: responseHeaders,
     })
   }
@@ -78,7 +78,7 @@ export const renderRouterToStream = async ({
   )
 
   return new Response(responseStream as any, {
-    status: router.stores.statusCode.state,
+    status: router.stores.statusCode.get(),
     headers: responseHeaders,
   })
 }

package/src/ssr/renderRouterToString.tsx

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

package/src/useMatch.tsx

@@ -85,7 +85,7 @@ export function useMatch<
       (opts.from ?? nearestRouteId)
         ? router.stores.getMatchStoreByRouteId(opts.from ?? nearestRouteId!)
         : undefined
-    const match = matchStore?.state
+    const match = matchStore?.get()
 
     if ((opts.shouldThrow ?? true) && !match) {
       if (process.env.NODE_ENV !== 'production') {

package/src/useRouterState.tsx

@@ -42,7 +42,7 @@ export function useRouterState<
   const _isServer = isServer ?? router.isServer
 
   if (_isServer) {
-    const state = router.stores.__store.state as RouterState<
+    const state = router.stores.__store.get() as RouterState<
       TRouter['routeTree']
     >
     return Vue.ref(opts?.select ? opts.select(state) : state) as Vue.Ref<