@depup/tanstack__react-router 1.167.5-depup.0 → 1.168.2-depup.0

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/renderRouteNotFound.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import warning from 'tiny-warning'
 import { DefaultGlobalNotFound } from './not-found'
 import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
 
@@ -21,11 +20,12 @@ export function renderRouteNotFound(
       return <router.options.defaultNotFoundComponent {...data} />
     }
 
-    if (process.env.NODE_ENV === 'development') {
-      warning(
-        route.options.notFoundComponent,
-        `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<p>Not Found</p>)`,
-      )
+    if (process.env.NODE_ENV !== 'production') {
+      if (!route.options.notFoundComponent) {
+        console.warn(
+          `Warning: A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<p>Not Found</p>)`,
+        )
+      }
     }
 
     return <DefaultGlobalNotFound />

package/src/route.tsx

@@ -258,7 +258,6 @@ export class Route<
     >,
   ) {
     super(options)
-    ;(this as any).$$typeof = Symbol.for('react.memo')
   }
 
   useMatch: UseMatchRoute<TId> = (opts) => {
@@ -530,7 +529,6 @@ export class RootRoute<
     >,
   ) {
     super(options)
-    ;(this as any).$$typeof = Symbol.for('react.memo')
   }
 
   useMatch: UseMatchRoute<RootRouteId> = (opts) => {

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()

package/src/ssr/renderRouterToStream.tsx

@@ -36,7 +36,7 @@ export const renderRouterToStream = async ({
       stream as unknown as ReadableStream,
     )
     return new Response(responseStream as any, {
-      status: router.state.statusCode,
+      status: router.stores.statusCode.state,
       headers: responseHeaders,
     })
   }
@@ -79,7 +79,7 @@ export const renderRouterToStream = async ({
       reactAppPassthrough,
     )
     return new Response(responseStream as any, {
-      status: router.state.statusCode,
+      status: router.stores.statusCode.state,
       headers: responseHeaders,
     })
   }

package/src/ssr/renderRouterToString.tsx

@@ -21,7 +21,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,17 @@
-import { useRouterState } from './useRouterState'
+import { useStore } from '@tanstack/react-store'
+import { isServer } from '@tanstack/router-core/isServer'
+import { useRouter } from './useRouter'
 
 export function useCanGoBack() {
-  return useRouterState({ select: (s) => s.location.state.__TSR_index !== 0 })
+  const router = useRouter()
+
+  if (isServer ?? router.isServer) {
+    return router.stores.location.state.state.__TSR_index !== 0
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  return useStore(
+    router.stores.location,
+    (location) => location.state.__TSR_index !== 0,
+  )
 }

package/src/useLocation.tsx

@@ -1,4 +1,8 @@
-import { useRouterState } from './useRouterState'
+import { useStore } from '@tanstack/react-store'
+import { useRef } from 'react'
+import { replaceEqualDeep } from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
+import { useRouter } from './useRouter'
 import type {
   StructuralSharingOption,
   ValidateSelected,
@@ -45,8 +49,31 @@ export function useLocation<
   opts?: UseLocationBaseOptions<TRouter, TSelected, TStructuralSharing> &
     StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
 ): UseLocationResult<TRouter, TSelected> {
-  return useRouterState({
-    select: (state: any) =>
-      opts?.select ? opts.select(state.location) : state.location,
-  } as any) as UseLocationResult<TRouter, TSelected>
+  const router = useRouter<TRouter>()
+
+  if (isServer ?? router.isServer) {
+    const location = router.stores.location.state
+    return (
+      opts?.select ? opts.select(location as any) : location
+    ) as UseLocationResult<TRouter, TSelected>
+  }
+
+  const previousResult =
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+    useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(undefined)
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  return useStore(router.stores.location, (location) => {
+    const selected = (
+      opts?.select ? opts.select(location as any) : location
+    ) as ValidateSelected<TRouter, TSelected, TStructuralSharing>
+
+    if (opts?.structuralSharing ?? router.options.defaultStructuralSharing) {
+      const shared = replaceEqualDeep(previousResult.current, selected)
+      previousResult.current = shared
+      return shared
+    }
+
+    return selected
+  }) as UseLocationResult<TRouter, TSelected>
 }

package/src/useMatch.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react'
-import invariant from 'tiny-invariant'
-import { useRouterState } from './useRouterState'
+import { useStore } from '@tanstack/react-store'
+import { invariant, replaceEqualDeep } from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
 import { dummyMatchContext, matchContext } from './matchContext'
+import { useRouter } from './useRouter'
 import type {
   StructuralSharingOption,
   ValidateSelected,
@@ -16,6 +18,12 @@ import type {
   ThrowOrOptional,
 } from '@tanstack/router-core'
 
+const dummyStore = {
+  state: undefined,
+  get: () => undefined,
+  subscribe: () => () => {},
+} as any
+
 export interface UseMatchBaseOptions<
   TRouter extends AnyRouter,
   TFrom,
@@ -96,28 +104,69 @@ export function useMatch<
     TStructuralSharing
   >,
 ): ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow> {
+  const router = useRouter<TRouter>()
   const nearestMatchId = React.useContext(
     opts.from ? dummyMatchContext : matchContext,
   )
 
-  const matchSelection = useRouterState({
-    select: (state: any) => {
-      const match = state.matches.find((d: any) =>
-        opts.from ? opts.from === d.routeId : d.id === nearestMatchId,
-      )
-      invariant(
-        !((opts.shouldThrow ?? true) && !match),
-        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
-      )
-
-      if (match === undefined) {
-        return undefined
+  const key = opts.from ?? nearestMatchId
+  const matchStore = key
+    ? opts.from
+      ? router.stores.getMatchStoreByRouteId(key)
+      : router.stores.activeMatchStoresById.get(key)
+    : undefined
+
+  if (isServer ?? router.isServer) {
+    const match = matchStore?.state
+    if ((opts.shouldThrow ?? true) && !match) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+        )
       }
 
-      return opts.select ? opts.select(match) : match
-    },
-    structuralSharing: opts.structuralSharing,
-  } as any)
+      invariant()
+    }
+
+    if (match === undefined) {
+      return undefined as any
+    }
+
+    return (opts.select ? opts.select(match as any) : match) as any
+  }
+
+  const previousResult =
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+    React.useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(
+      undefined,
+    )
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
+  return useStore(matchStore ?? dummyStore, (match) => {
+    if ((opts.shouldThrow ?? true) && !match) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+        )
+      }
+
+      invariant()
+    }
+
+    if (match === undefined) {
+      return undefined
+    }
+
+    const selected = (
+      opts.select ? opts.select(match as any) : match
+    ) as ValidateSelected<TRouter, TSelected, TStructuralSharing>
+
+    if (opts.structuralSharing ?? router.options.defaultStructuralSharing) {
+      const shared = replaceEqualDeep(previousResult.current, selected)
+      previousResult.current = shared
+      return shared
+    }
 
-  return matchSelection as any
+    return selected
+  }) as any
 }

package/src/useRouter.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import warning from 'tiny-warning'
 import { routerContext } from './routerContext'
 import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
 
@@ -17,9 +16,12 @@ export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
   warn?: boolean
 }): TRouter {
   const value = React.useContext(routerContext)
-  warning(
-    !((opts?.warn ?? true) && !value),
-    'useRouter must be used inside a <RouterProvider> component!',
-  )
+  if (process.env.NODE_ENV !== 'production') {
+    if ((opts?.warn ?? true) && !value) {
+      console.warn(
+        'Warning: useRouter must be used inside a <RouterProvider> component!',
+      )
+    }
+  }
   return value as any
 }

package/src/useRouterState.tsx

@@ -57,7 +57,9 @@ export function useRouterState<
   // Avoid subscribing to the store (and any structural sharing work) on the server.
   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 (opts?.select ? opts.select(state) : state) as UseRouterStateResult<
       TRouter,
       TSelected
@@ -69,7 +71,7 @@ export function useRouterState<
     useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(undefined)
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  return useStore(router.__store, (state) => {
+  return useStore(router.stores.__store, (state) => {
     if (opts?.select) {
       if (opts.structuralSharing ?? router.options.defaultStructuralSharing) {
         const newSlice = replaceEqualDeep(