@tanstack/vue-router 1.167.4 → 1.168.0

package/src/Transitioner.tsx

@@ -5,8 +5,8 @@ import {
   trimPathRight,
 } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
+import { batch, useStore } from '@tanstack/vue-store'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 import { usePrevious } from './utils'
 
 // Track mount state per router to avoid double-loading
@@ -30,17 +30,16 @@ export function useTransitionerSetup() {
     return
   }
 
-  const isLoading = useRouterState({
-    select: ({ isLoading }) => isLoading,
-  })
+  const isLoading = useStore(router.stores.isLoading, (value) => value)
 
   // Track if we're in a transition - using a ref to track async transitions
   const isTransitioning = Vue.ref(false)
 
   // Track pending state changes
-  const hasPendingMatches = useRouterState({
-    select: (s) => s.matches.some((d) => d.status === 'pending'),
-  })
+  const hasPendingMatches = useStore(
+    router.stores.hasPendingMatches,
+    (value) => value,
+  )
 
   const previousIsLoading = usePrevious(() => isLoading.value)
 
@@ -61,7 +60,7 @@ export function useTransitionerSetup() {
     isTransitioning.value = true
     // Also update the router state so useMatch knows we're transitioning
     try {
-      router.__store.setState((s) => ({ ...s, isTransitioning: true }))
+      router.stores.isTransitioning.setState(() => true)
     } catch {
       // Ignore errors if component is unmounted
     }
@@ -72,7 +71,7 @@ export function useTransitionerSetup() {
       Vue.nextTick(() => {
         try {
           isTransitioning.value = false
-          router.__store.setState((s) => ({ ...s, isTransitioning: false }))
+          router.stores.isTransitioning.setState(() => false)
         } catch {
           // Ignore errors if component is unmounted
         }
@@ -141,11 +140,14 @@ export function useTransitionerSetup() {
   Vue.onMounted(() => {
     isMounted.value = true
     if (!isAnyPending.value) {
-      router.__store.setState((s) =>
-        s.status === 'pending'
-          ? { ...s, status: 'idle', resolvedLocation: s.location }
-          : s,
-      )
+      if (router.stores.status.state === 'pending') {
+        batch(() => {
+          router.stores.status.setState(() => 'idle')
+          router.stores.resolvedLocation.setState(
+            () => router.stores.location.state,
+          )
+        })
+      }
     }
   })
 
@@ -185,7 +187,10 @@ export function useTransitionerSetup() {
         if (previousIsLoading.value.previous && !newValue) {
           router.emit({
             type: 'onLoad',
-            ...getLocationChangeInfo(router.state),
+            ...getLocationChangeInfo(
+              router.stores.location.state,
+              router.stores.resolvedLocation.state,
+            ),
           })
         }
       } catch {
@@ -201,7 +206,10 @@ export function useTransitionerSetup() {
       if (previousIsPagePending.value.previous && !newValue) {
         router.emit({
           type: 'onBeforeRouteMount',
-          ...getLocationChangeInfo(router.state),
+          ...getLocationChangeInfo(
+            router.stores.location.state,
+            router.stores.resolvedLocation.state,
+          ),
         })
       }
     } catch {
@@ -212,17 +220,21 @@ export function useTransitionerSetup() {
   Vue.watch(isAnyPending, (newValue) => {
     if (!isMounted.value) return
     try {
-      if (!newValue && router.__store.state.status === 'pending') {
-        router.__store.setState((s) => ({
-          ...s,
-          status: 'idle',
-          resolvedLocation: s.location,
-        }))
+      if (!newValue && router.stores.status.state === 'pending') {
+        batch(() => {
+          router.stores.status.setState(() => 'idle')
+          router.stores.resolvedLocation.setState(
+            () => router.stores.location.state,
+          )
+        })
       }
 
       // The router was pending and now it's not
       if (previousIsAnyPending.value.previous && !newValue) {
-        const changeInfo = getLocationChangeInfo(router.state)
+        const changeInfo = getLocationChangeInfo(
+          router.stores.location.state,
+          router.stores.resolvedLocation.state,
+        )
         router.emit({
           type: 'onResolved',
           ...changeInfo,

package/src/headContentUtils.tsx

@@ -1,68 +1,67 @@
 import * as Vue from 'vue'
-
 import { escapeHtml } from '@tanstack/router-core'
+import { useStore } from '@tanstack/vue-store'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
 export const useTags = () => {
   const router = useRouter()
+  const matches = useStore(
+    router.stores.activeMatchesSnapshot,
+    (value) => value,
+  )
 
-  const routeMeta = useRouterState({
-    select: (state) => {
-      return state.matches.map((match) => match.meta!).filter(Boolean)
-    },
-  })
-
-  const meta: Vue.Ref<Array<RouterManagedTag>> = Vue.computed(() => {
+  const meta = Vue.computed<Array<RouterManagedTag>>(() => {
     const resultMeta: Array<RouterManagedTag> = []
     const metaByAttribute: Record<string, true> = {}
     let title: RouterManagedTag | undefined
-    ;[...routeMeta.value].reverse().forEach((metas) => {
-      ;[...metas].reverse().forEach((m) => {
-        if (!m) return
-
-        if (m.title) {
-          if (!title) {
-            title = {
-              tag: 'title',
-              children: m.title,
+    ;[...matches.value.map((match) => match.meta!).filter(Boolean)]
+      .reverse()
+      .forEach((metas) => {
+        ;[...metas].reverse().forEach((m) => {
+          if (!m) return
+
+          if (m.title) {
+            if (!title) {
+              title = {
+                tag: 'title',
+                children: m.title,
+              }
             }
-          }
-        } else if ('script:ld+json' in m) {
-          // Handle JSON-LD structured data
-          // Content is HTML-escaped to prevent XSS when injected via innerHTML
-          try {
-            const json = JSON.stringify(m['script:ld+json'])
+          } else if ('script:ld+json' in m) {
+            // Handle JSON-LD structured data
+            // Content is HTML-escaped to prevent XSS when injected via innerHTML
+            try {
+              const json = JSON.stringify(m['script:ld+json'])
+              resultMeta.push({
+                tag: 'script',
+                attrs: {
+                  type: 'application/ld+json',
+                },
+                children: escapeHtml(json),
+              })
+            } catch {
+              // Skip invalid JSON-LD objects
+            }
+          } else {
+            const attribute = m.name ?? m.property
+            if (attribute) {
+              if (metaByAttribute[attribute]) {
+                return
+              } else {
+                metaByAttribute[attribute] = true
+              }
+            }
+
             resultMeta.push({
-              tag: 'script',
+              tag: 'meta',
               attrs: {
-                type: 'application/ld+json',
+                ...m,
               },
-              children: escapeHtml(json),
             })
-          } catch {
-            // Skip invalid JSON-LD objects
-          }
-        } else {
-          const attribute = m.name ?? m.property
-          if (attribute) {
-            if (metaByAttribute[attribute]) {
-              return
-            } else {
-              metaByAttribute[attribute] = true
-            }
           }
-
-          resultMeta.push({
-            tag: 'meta',
-            attrs: {
-              ...m,
-            },
-          })
-        }
+        })
       })
-    })
 
     if (title) {
       resultMeta.push(title)
@@ -73,9 +72,9 @@ export const useTags = () => {
     return resultMeta
   })
 
-  const links = useRouterState({
-    select: (state) =>
-      state.matches
+  const links = Vue.computed<Array<RouterManagedTag>>(
+    () =>
+      matches.value
         .map((match) => match.links!)
         .filter(Boolean)
         .flat(1)
@@ -85,67 +84,62 @@ export const useTags = () => {
             ...link,
           },
         })) as Array<RouterManagedTag>,
-  })
-
-  const preloadMeta = useRouterState({
-    select: (state) => {
-      const preloadMeta: Array<RouterManagedTag> = []
-
-      state.matches
-        .map((match) => router.looseRoutesById[match.routeId]!)
-        .forEach((route) =>
-          router.ssr?.manifest?.routes[route.id]?.preloads
-            ?.filter(Boolean)
-            .forEach((preload) => {
-              preloadMeta.push({
-                tag: 'link',
-                attrs: {
-                  rel: 'modulepreload',
-                  href: preload,
-                },
-              })
-            }),
-        )
-
-      return preloadMeta
-    },
-  })
+  )
+
+  const preloadMeta = Vue.computed<Array<RouterManagedTag>>(() => {
+    const preloadMeta: Array<RouterManagedTag> = []
+
+    matches.value
+      .map((match) => router.looseRoutesById[match.routeId]!)
+      .forEach((route) =>
+        router.ssr?.manifest?.routes[route.id]?.preloads
+          ?.filter(Boolean)
+          .forEach((preload) => {
+            preloadMeta.push({
+              tag: 'link',
+              attrs: {
+                rel: 'modulepreload',
+                href: preload,
+              },
+            })
+          }),
+      )
 
-  const headScripts = useRouterState({
-    select: (state) =>
-      (
-        state.matches
-          .map((match) => match.headScripts!)
-          .flat(1)
-          .filter(Boolean) as Array<RouterManagedTag>
-      ).map(({ children, ...script }) => ({
-        tag: 'script',
-        attrs: {
-          ...script,
-        },
-        children,
-      })),
+    return preloadMeta
   })
 
-  const manifestAssets = useRouterState({
-    select: (state) => {
-      const manifest = router.ssr?.manifest
-
-      const assets = state.matches
-        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
-        .filter(Boolean)
+  const headScripts = Vue.computed<Array<RouterManagedTag>>(() =>
+    (
+      matches.value
+        .map((match) => match.headScripts!)
         .flat(1)
-        .filter((asset) => asset.tag === 'link')
-        .map(
-          (asset) =>
-            ({
-              tag: 'link',
-              attrs: { ...asset.attrs },
-            }) satisfies RouterManagedTag,
-        )
-
-      return assets
-    },
+        .filter(Boolean) as Array<RouterManagedTag>
+    ).map(({ children, ...script }) => ({
+      tag: 'script',
+      attrs: {
+        ...script,
+      },
+      children,
+    })),
+  )
+
+  const manifestAssets = Vue.computed<Array<RouterManagedTag>>(() => {
+    const manifest = router.ssr?.manifest
+
+    const assets = matches.value
+      .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
+      .filter(Boolean)
+      .flat(1)
+      .filter((asset) => asset.tag === 'link')
+      .map(
+        (asset) =>
+          ({
+            tag: 'link',
+            attrs: { ...asset.attrs },
+          }) satisfies RouterManagedTag,
+      )
+
+    return assets
   })
 
   return () =>