@tanstack/react-router 1.167.5 → 1.168.0

package/src/Transitioner.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { batch, useStore } from '@tanstack/react-store'
 import {
   getLocationChangeInfo,
   handleHashScroll,
@@ -6,7 +7,6 @@ import {
 } from '@tanstack/router-core'
 import { useLayoutEffect, usePrevious } from './utils'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 
 export function Transitioner() {
   const router = useRouter()
@@ -14,13 +14,11 @@ export function Transitioner() {
 
   const [isTransitioning, setIsTransitioning] = React.useState(false)
   // Track pending state changes
-  const { hasPendingMatches, isLoading } = useRouterState({
-    select: (s) => ({
-      isLoading: s.isLoading,
-      hasPendingMatches: s.matches.some((d) => d.status === 'pending'),
-    }),
-    structuralSharing: true,
-  })
+  const isLoading = useStore(router.stores.isLoading, (value) => value)
+  const hasPendingMatches = useStore(
+    router.stores.hasPendingMatches,
+    (value) => value,
+  )
 
   const previousIsLoading = usePrevious(isLoading)
 
@@ -95,7 +93,10 @@ export function Transitioner() {
     if (previousIsLoading && !isLoading) {
       router.emit({
         type: 'onLoad', // When the new URL has committed, when the new matches have been loaded into state.matches
-        ...getLocationChangeInfo(router.state),
+        ...getLocationChangeInfo(
+          router.stores.location.state,
+          router.stores.resolvedLocation.state,
+        ),
       })
     }
   }, [previousIsLoading, router, isLoading])
@@ -105,24 +106,31 @@ export function Transitioner() {
     if (previousIsPagePending && !isPagePending) {
       router.emit({
         type: 'onBeforeRouteMount',
-        ...getLocationChangeInfo(router.state),
+        ...getLocationChangeInfo(
+          router.stores.location.state,
+          router.stores.resolvedLocation.state,
+        ),
       })
     }
   }, [isPagePending, previousIsPagePending, router])
 
   useLayoutEffect(() => {
     if (previousIsAnyPending && !isAnyPending) {
-      const changeInfo = getLocationChangeInfo(router.state)
+      const changeInfo = getLocationChangeInfo(
+        router.stores.location.state,
+        router.stores.resolvedLocation.state,
+      )
       router.emit({
         type: 'onResolved',
         ...changeInfo,
       })
 
-      router.__store.setState((s: typeof router.state) => ({
-        ...s,
-        status: 'idle',
-        resolvedLocation: s.location,
-      }))
+      batch(() => {
+        router.stores.status.setState(() => 'idle')
+        router.stores.resolvedLocation.setState(
+          () => router.stores.location.state,
+        )
+      })
 
       if (changeInfo.hrefChanged) {
         handleHashScroll(router)

package/src/headContentUtils.tsx

@@ -1,9 +1,171 @@
 import * as React from 'react'
-import { escapeHtml } from '@tanstack/router-core'
+import { useStore } from '@tanstack/react-store'
+import { deepEqual, escapeHtml } from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
-import { useRouterState } from './useRouterState'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
+function buildTagsFromMatches(
+  router: ReturnType<typeof useRouter>,
+  nonce: string | undefined,
+  matches: Array<any>,
+): Array<RouterManagedTag> {
+  const routeMeta = matches.map((match) => match.meta!).filter(Boolean)
+
+  const resultMeta: Array<RouterManagedTag> = []
+  const metaByAttribute: Record<string, true> = {}
+  let title: RouterManagedTag | undefined
+  for (let i = routeMeta.length - 1; i >= 0; i--) {
+    const metas = routeMeta[i]!
+    for (let j = metas.length - 1; j >= 0; j--) {
+      const m = metas[j]
+      if (!m) continue
+
+      if (m.title) {
+        if (!title) {
+          title = {
+            tag: 'title',
+            children: m.title,
+          }
+        }
+      } else if ('script:ld+json' in m) {
+        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]) {
+            continue
+          } else {
+            metaByAttribute[attribute] = true
+          }
+        }
+
+        resultMeta.push({
+          tag: 'meta',
+          attrs: {
+            ...m,
+            nonce,
+          },
+        })
+      }
+    }
+  }
+
+  if (title) {
+    resultMeta.push(title)
+  }
+
+  if (nonce) {
+    resultMeta.push({
+      tag: 'meta',
+      attrs: {
+        property: 'csp-nonce',
+        content: nonce,
+      },
+    })
+  }
+  resultMeta.reverse()
+
+  const constructedLinks = matches
+    .map((match) => match.links!)
+    .filter(Boolean)
+    .flat(1)
+    .map((link) => ({
+      tag: 'link',
+      attrs: {
+        ...link,
+        nonce,
+      },
+    })) satisfies Array<RouterManagedTag>
+
+  const manifest = router.ssr?.manifest
+  const assetLinks = matches
+    .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
+    .filter(Boolean)
+    .flat(1)
+    .filter((asset) => asset.tag === 'link')
+    .map(
+      (asset) =>
+        ({
+          tag: 'link',
+          attrs: {
+            ...asset.attrs,
+            suppressHydrationWarning: true,
+            nonce,
+          },
+        }) satisfies RouterManagedTag,
+    )
+
+  const preloadLinks: Array<RouterManagedTag> = []
+  matches
+    .map((match) => router.looseRoutesById[match.routeId]!)
+    .forEach((route) =>
+      router.ssr?.manifest?.routes[route.id]?.preloads
+        ?.filter(Boolean)
+        .forEach((preload) => {
+          preloadLinks.push({
+            tag: 'link',
+            attrs: {
+              rel: 'modulepreload',
+              href: preload,
+              nonce,
+            },
+          })
+        }),
+    )
+
+  const styles = (
+    matches
+      .map((match) => match.styles!)
+      .flat(1)
+      .filter(Boolean) as Array<RouterManagedTag>
+  ).map(({ children, ...attrs }) => ({
+    tag: 'style',
+    attrs: {
+      ...attrs,
+      nonce,
+    },
+    children,
+  }))
+
+  const headScripts = (
+    matches
+      .map((match) => match.headScripts!)
+      .flat(1)
+      .filter(Boolean) as Array<RouterManagedTag>
+  ).map(({ children, ...script }) => ({
+    tag: 'script',
+    attrs: {
+      ...script,
+      nonce,
+    },
+    children,
+  }))
+
+  return uniqBy(
+    [
+      ...resultMeta,
+      ...preloadLinks,
+      ...constructedLinks,
+      ...assetLinks,
+      ...styles,
+      ...headScripts,
+    ] as Array<RouterManagedTag>,
+    (d) => JSON.stringify(d),
+  )
+}
+
 /**
  * Build the list of head/link/meta/script tags to render for active matches.
  * Used internally by `HeadContent`.
@@ -11,12 +173,25 @@ import type { RouterManagedTag } from '@tanstack/router-core'
 export const useTags = () => {
   const router = useRouter()
   const nonce = router.options.ssr?.nonce
-  const routeMeta = useRouterState({
-    select: (state) => {
-      return state.matches.map((match) => match.meta!).filter(Boolean)
+
+  if (isServer ?? router.isServer) {
+    return buildTagsFromMatches(
+      router,
+      nonce,
+      router.stores.activeMatchesSnapshot.state,
+    )
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const routeMeta = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) => {
+      return matches.map((match) => match.meta!).filter(Boolean)
     },
-  })
+    deepEqual,
+  )
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
   const meta: Array<RouterManagedTag> = React.useMemo(() => {
     const resultMeta: Array<RouterManagedTag> = []
     const metaByAttribute: Record<string, true> = {}
@@ -88,9 +263,11 @@ export const useTags = () => {
     return resultMeta
   }, [routeMeta, nonce])
 
-  const links = useRouterState({
-    select: (state) => {
-      const constructed = state.matches
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const links = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) => {
+      const constructed = matches
         .map((match) => match.links!)
         .filter(Boolean)
         .flat(1)
@@ -106,7 +283,7 @@ export const useTags = () => {
 
       // These are the assets extracted from the ViteManifest
       // using the `startManifestPlugin`
-      const assets = state.matches
+      const assets = matches
         .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
         .filter(Boolean)
         .flat(1)
@@ -125,14 +302,16 @@ export const useTags = () => {
 
       return [...constructed, ...assets]
     },
-    structuralSharing: true as any,
-  })
+    deepEqual,
+  )
 
-  const preloadLinks = useRouterState({
-    select: (state) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const preloadLinks = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) => {
       const preloadLinks: Array<RouterManagedTag> = []
 
-      state.matches
+      matches
         .map((match) => router.looseRoutesById[match.routeId]!)
         .forEach((route) =>
           router.ssr?.manifest?.routes[route.id]?.preloads
@@ -151,13 +330,15 @@ export const useTags = () => {
 
       return preloadLinks
     },
-    structuralSharing: true as any,
-  })
+    deepEqual,
+  )
 
-  const styles = useRouterState({
-    select: (state) =>
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const styles = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) =>
       (
-        state.matches
+        matches
           .map((match) => match.styles!)
           .flat(1)
           .filter(Boolean) as Array<RouterManagedTag>
@@ -169,13 +350,15 @@ export const useTags = () => {
         },
         children,
       })),
-    structuralSharing: true as any,
-  })
+    deepEqual,
+  )
 
-  const headScripts: Array<RouterManagedTag> = useRouterState({
-    select: (state) =>
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const headScripts: Array<RouterManagedTag> = useStore(
+    router.stores.activeMatchesSnapshot,
+    (matches) =>
       (
-        state.matches
+        matches
           .map((match) => match.headScripts!)
           .flat(1)
           .filter(Boolean) as Array<RouterManagedTag>
@@ -187,8 +370,8 @@ export const useTags = () => {
         },
         children,
       })),
-    structuralSharing: true as any,
-  })
+    deepEqual,
+  )
 
   return uniqBy(
     [

package/src/link.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useStore } from '@tanstack/react-store'
 import { flushSync } from 'react-dom'
 import {
   deepEqual,
@@ -9,7 +10,6 @@ import {
   removeTrailingSlash,
 } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
-import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 
 import { useForwardedRef, useIntersectionObserver } from './utils'
@@ -102,7 +102,7 @@ export function useLinkProps<
   //
   // For SSR parity (to avoid hydration errors), we still compute the link's
   // active status on the server, but we avoid creating any router-state
-  // subscriptions by reading from `router.state` directly.
+  // subscriptions by reading from the location store directly.
   //
   // Note: `location.hash` is not available on the server.
   // ==========================================================================
@@ -204,7 +204,7 @@ export function useLinkProps<
     const isActive = (() => {
       if (externalLink) return false
 
-      const currentLocation = router.state.location
+      const currentLocation = router.stores.location.state
 
       const exact = activeOptions?.exact ?? false
 
@@ -377,32 +377,13 @@ export function useLinkProps<
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const isHydrated = useHydrated()
 
-  // subscribe to path/search/hash/params to re-build location when they change
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const currentLocationState = useRouterState({
-    select: (s) => {
-      const leaf = s.matches[s.matches.length - 1]
-      return {
-        search: leaf?.search,
-        hash: s.location.hash,
-        path: leaf?.pathname, // path + params
-      }
-    },
-    structuralSharing: true as any,
-  })
-
-  const from = options.from
-
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const _options = React.useMemo(
-    () => {
-      return { ...options, from }
-    },
+    () => options,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       router,
-      currentLocationState,
-      from,
+      options.from,
       options._fromLocation,
       options.hash,
       options.to,
@@ -415,11 +396,18 @@ export function useLinkProps<
   )
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const next = React.useMemo(
-    () => router.buildLocation({ ..._options } as any),
-    [router, _options],
+  const currentLocation = useStore(
+    router.stores.location,
+    (l) => l,
+    (prev, next) => prev.href === next.href,
   )
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const next = React.useMemo(() => {
+    const opts = { _fromLocation: currentLocation, ..._options }
+    return router.buildLocation(opts as any)
+  }, [router, currentLocation, _options])
+
   // Use publicHref - it contains the correct href for display
   // When a rewrite changes the origin, publicHref is the full URL
   // Otherwise it's the origin-stripped path
@@ -474,54 +462,61 @@ export function useLinkProps<
   }, [to, hrefOption, router.protocolAllowlist])
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isActive = useRouterState({
-    select: (s) => {
-      if (externalLink) return false
-      if (activeOptions?.exact) {
-        const testExact = exactPathTest(
-          s.location.pathname,
-          next.pathname,
-          router.basepath,
-        )
-        if (!testExact) {
-          return false
-        }
-      } else {
-        const currentPathSplit = removeTrailingSlash(
-          s.location.pathname,
-          router.basepath,
-        )
-        const nextPathSplit = removeTrailingSlash(
-          next.pathname,
-          router.basepath,
-        )
-
-        const pathIsFuzzyEqual =
-          currentPathSplit.startsWith(nextPathSplit) &&
-          (currentPathSplit.length === nextPathSplit.length ||
-            currentPathSplit[nextPathSplit.length] === '/')
-
-        if (!pathIsFuzzyEqual) {
-          return false
-        }
+  const isActive = React.useMemo(() => {
+    if (externalLink) return false
+    if (activeOptions?.exact) {
+      const testExact = exactPathTest(
+        currentLocation.pathname,
+        next.pathname,
+        router.basepath,
+      )
+      if (!testExact) {
+        return false
       }
-
-      if (activeOptions?.includeSearch ?? true) {
-        const searchTest = deepEqual(s.location.search, next.search, {
-          partial: !activeOptions?.exact,
-          ignoreUndefined: !activeOptions?.explicitUndefined,
-        })
-        if (!searchTest) {
-          return false
-        }
+    } else {
+      const currentPathSplit = removeTrailingSlash(
+        currentLocation.pathname,
+        router.basepath,
+      )
+      const nextPathSplit = removeTrailingSlash(next.pathname, router.basepath)
+
+      const pathIsFuzzyEqual =
+        currentPathSplit.startsWith(nextPathSplit) &&
+        (currentPathSplit.length === nextPathSplit.length ||
+          currentPathSplit[nextPathSplit.length] === '/')
+
+      if (!pathIsFuzzyEqual) {
+        return false
       }
+    }
 
-      if (activeOptions?.includeHash) {
-        return isHydrated && s.location.hash === next.hash
+    if (activeOptions?.includeSearch ?? true) {
+      const searchTest = deepEqual(currentLocation.search, next.search, {
+        partial: !activeOptions?.exact,
+        ignoreUndefined: !activeOptions?.explicitUndefined,
+      })
+      if (!searchTest) {
+        return false
       }
-      return true
-    },
-  })
+    }
+
+    if (activeOptions?.includeHash) {
+      return isHydrated && currentLocation.hash === next.hash
+    }
+    return true
+  }, [
+    activeOptions?.exact,
+    activeOptions?.explicitUndefined,
+    activeOptions?.includeHash,
+    activeOptions?.includeSearch,
+    currentLocation,
+    externalLink,
+    isHydrated,
+    next.hash,
+    next.pathname,
+    next.search,
+    router.basepath,
+  ])
 
   // Get the active props
   const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> = isActive

package/src/not-found.tsx

@@ -1,7 +1,9 @@
 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 { CatchBoundary } from './CatchBoundary'
-import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
 import type { ErrorInfo } from 'react'
 import type { NotFoundError } from '@tanstack/router-core'
 
@@ -10,10 +12,45 @@ export function CatchNotFound(props: {
   onCatch?: (error: Error, errorInfo: ErrorInfo) => void
   children: React.ReactNode
 }) {
+  const router = useRouter()
+
+  if (isServer ?? router.isServer) {
+    const pathname = router.stores.location.state.pathname
+    const status = router.stores.status.state
+    const resetKey = `not-found-${pathname}-${status}`
+
+    return (
+      <CatchBoundary
+        getResetKey={() => resetKey}
+        onCatch={(error, errorInfo) => {
+          if (isNotFound(error)) {
+            props.onCatch?.(error, errorInfo)
+          } else {
+            throw error
+          }
+        }}
+        errorComponent={({ error }) => {
+          if (isNotFound(error)) {
+            return props.fallback?.(error)
+          } else {
+            throw error
+          }
+        }}
+      >
+        {props.children}
+      </CatchBoundary>
+    )
+  }
+
   // 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}`,
-  })
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  const pathname = useStore(
+    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 resetKey = `not-found-${pathname}-${status}`
 
   return (
     <CatchBoundary

package/src/router.ts

@@ -1,5 +1,6 @@
 import { RouterCore } from '@tanstack/router-core'
 import { createFileRoute, createLazyFileRoute } from './fileRoute'
+import { getStoreFactory } from './routerStores'
 import type { RouterHistory } from '@tanstack/history'
 import type {
   AnyRoute,
@@ -114,7 +115,7 @@ export class Router<
       TDehydrated
     >,
   ) {
-    super(options)
+    super(options, getStoreFactory)
   }
 }
 

package/src/routerStores.ts

@@ -0,0 +1,26 @@
+import { batch, createStore } from '@tanstack/react-store'
+import {
+  createNonReactiveMutableStore,
+  createNonReactiveReadonlyStore,
+} from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
+import type { Readable } from '@tanstack/react-store'
+import type { GetStoreConfig } from '@tanstack/router-core'
+
+declare module '@tanstack/router-core' {
+  export interface RouterReadableStore<TValue> extends Readable<TValue> {}
+}
+export const getStoreFactory: GetStoreConfig = (opts) => {
+  if (isServer ?? opts.isServer) {
+    return {
+      createMutableStore: createNonReactiveMutableStore,
+      createReadonlyStore: createNonReactiveReadonlyStore,
+      batch: (fn) => fn(),
+    }
+  }
+  return {
+    createMutableStore: createStore,
+    createReadonlyStore: createStore,
+    batch: batch,
+  }
+}

package/src/ssr/RouterClient.tsx

@@ -7,7 +7,7 @@ let hydrationPromise: Promise<void | Array<Array<void>>> | undefined
 
 export function RouterClient(props: { router: AnyRouter }) {
   if (!hydrationPromise) {
-    if (!props.router.state.matches.length) {
+    if (!props.router.stores.matchesId.state.length) {
       hydrationPromise = hydrate(props.router)
     } else {
       hydrationPromise = Promise.resolve()