@tanstack/react-router 1.45.0 → 1.45.3

package/src/CatchBoundary.tsx

@@ -3,7 +3,7 @@ import type { ErrorRouteComponent } from './route'
 import type { ErrorInfo } from 'react'
 
 export function CatchBoundary(props: {
-  getResetKey: () => string
+  getResetKey: () => number | string
   children: React.ReactNode
   errorComponent?: ErrorRouteComponent
   onCatch?: (error: Error, errorInfo: ErrorInfo) => void
@@ -29,7 +29,7 @@ export function CatchBoundary(props: {
 }
 
 class CatchBoundaryImpl extends React.Component<{
-  getResetKey: () => string
+  getResetKey: () => number | string
   children: (props: {
     error: Error | null
     reset: () => void
@@ -64,8 +64,12 @@ class CatchBoundaryImpl extends React.Component<{
     }
   }
   render() {
+    // If the resetKey has changed, don't render the error
     return this.props.children({
-      error: this.state.error,
+      error:
+        this.state.resetKey !== this.props.getResetKey()
+          ? null
+          : this.state.error,
       reset: () => {
         this.reset()
       },

package/src/Match.tsx

@@ -41,8 +41,8 @@ export function Match({ matchId }: { matchId: string }) {
 
   const routeNotFoundComponent = route.isRoot
     ? // If it's the root route, use the globalNotFound option, with fallback to the notFoundRoute's component
-      route.options.notFoundComponent ??
-      router.options.notFoundRoute?.options.component
+      (route.options.notFoundComponent ??
+      router.options.notFoundRoute?.options.component)
     : route.options.notFoundComponent
 
   const ResolvedSuspenseBoundary =
@@ -63,7 +63,7 @@ export function Match({ matchId }: { matchId: string }) {
     : SafeFragment
 
   const resetKey = useRouterState({
-    select: (s) => s.resolvedLocation.state.key!,
+    select: (s) => s.loadedAt,
   })
 
   return (
@@ -108,23 +108,44 @@ function MatchInner({ matchId }: { matchId: string }): any {
 
   const route = router.routesById[routeId]!
 
-  const [match, matchIndex] = useRouterState({
+  const matchIndex = useRouterState({
+    select: (s) => {
+      return s.matches.findIndex((d) => d.id === matchId)
+    },
+  })
+
+  const match = useRouterState({
     select: (s) => {
-      const matchIndex = s.matches.findIndex((d) => d.id === matchId)
       const match = s.matches[matchIndex]!
-      return [
-        pick(match, [
-          'id',
-          'status',
-          'error',
-          'loadPromise',
-          'minPendingPromise',
-        ]),
-        matchIndex,
-      ] as const
+      return pick(match, [
+        'id',
+        'status',
+        'error',
+        'loadPromise',
+        'minPendingPromise',
+      ])
     },
   })
 
+  // function useChangedDiff(value: any) {
+  //   const ref = React.useRef(value)
+  //   const changed = ref.current !== value
+  //   if (changed) {
+  //     console.log(
+  //       'Changed:',
+  //       value,
+  //       Object.fromEntries(
+  //         Object.entries(value).filter(
+  //           ([key, val]) => val !== ref.current[key],
+  //         ),
+  //       ),
+  //     )
+  //   }
+  //   ref.current = value
+  // }
+
+  // useChangedDiff(match)
+
   const RouteErrorComponent =
     (route.options.errorComponent ?? router.options.defaultErrorComponent) ||
     ErrorComponent
@@ -190,36 +211,24 @@ function MatchInner({ matchId }: { matchId: string }): any {
 
     if (pendingMinMs && !match.minPendingPromise) {
       // Create a promise that will resolve after the minPendingMs
-      match.minPendingPromise = createControlledPromise()
-
       if (!router.isServer) {
+        const minPendingPromise = createControlledPromise<void>()
+
         Promise.resolve().then(() => {
-          router.__store.setState((s) => ({
-            ...s,
-            matches: s.matches.map((d) =>
-              d.id === match.id
-                ? { ...d, minPendingPromise: createControlledPromise() }
-                : d,
-            ),
+          router.updateMatch(match.id, (prev) => ({
+            ...prev,
+            minPendingPromise,
           }))
         })
 
         setTimeout(() => {
+          minPendingPromise.resolve()
+
           // We've handled the minPendingPromise, so we can delete it
-          router.__store.setState((s) => {
-            return {
-              ...s,
-              matches: s.matches.map((d) =>
-                d.id === match.id
-                  ? {
-                      ...d,
-                      minPendingPromise:
-                        (d.minPendingPromise?.resolve(), undefined),
-                    }
-                  : d,
-              ),
-            }
-          })
+          router.updateMatch(match.id, (prev) => ({
+            ...prev,
+            minPendingPromise: undefined,
+          }))
         }, pendingMinMs)
       }
     }

package/src/Matches.tsx

@@ -47,8 +47,10 @@ export interface RouteMatch<
   paramsError: unknown
   searchError: unknown
   updatedAt: number
-  loadPromise: ControlledPromise<void>
-  loaderPromise: Promise<TLoaderData>
+  componentsPromise?: Promise<Array<void>>
+  loadPromise?: ControlledPromise<void>
+  beforeLoadPromise?: ControlledPromise<void>
+  loaderPromise?: ControlledPromise<void>
   loaderData?: TLoaderData
   routeContext: TRouteContext
   context: TAllContext
@@ -132,7 +134,7 @@ function MatchesInner() {
   })
 
   const resetKey = useRouterState({
-    select: (s) => s.resolvedLocation.state.key!,
+    select: (s) => s.loadedAt,
   })
 
   return (

package/src/RouterProvider.tsx

@@ -104,17 +104,6 @@ export function RouterProvider<
   )
 }
 
-export function getRouteMatch<TRouteTree extends AnyRoute>(
-  state: RouterState<TRouteTree>,
-  id: string,
-): undefined | MakeRouteMatch<TRouteTree> {
-  return [
-    ...state.cachedMatches,
-    ...(state.pendingMatches ?? []),
-    ...state.matches,
-  ].find((d) => d.id === id)
-}
-
 export type RouterProps<
   TRouter extends AnyRouter = RegisteredRouter,
   TDehydrated extends Record<string, any> = Record<string, any>,

package/src/Transitioner.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { pick, useLayoutEffect, usePrevious } from './utils'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
+import { trimPathRight } from '.'
 
 export function Transitioner() {
   const router = useRouter()
@@ -40,7 +41,10 @@ export function Transitioner() {
       state: true,
     })
 
-    if (router.state.location.href !== nextLocation.href) {
+    if (
+      trimPathRight(router.latestLocation.href) !==
+      trimPathRight(nextLocation.href)
+    ) {
       router.commitLocation({ ...nextLocation, replace: true })
     }
 

package/src/index.tsx

@@ -207,7 +207,6 @@ export {
 export {
   RouterProvider,
   RouterContextProvider,
-  getRouteMatch,
   type RouterProps,
   type CommitLocationOptions,
   type MatchLocation,

package/src/link.tsx

@@ -619,7 +619,7 @@ export function useLinkProps<
         ? s.location.hash === next.hash
         : true
       const searchTest =
-        activeOptions?.includeSearch ?? true
+        (activeOptions?.includeSearch ?? true)
           ? deepEqual(s.location.search, next.search, !activeOptions?.exact)
           : true
 
@@ -733,7 +733,7 @@ export function useLinkProps<
 
   // Get the active props
   const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> = isActive
-    ? functionalUpdate(activeProps as any, {}) ?? {}
+    ? (functionalUpdate(activeProps as any, {}) ?? {})
     : {}
 
   // Get the inactive props

package/src/path.ts

@@ -175,7 +175,7 @@ export function parsePathname(pathname?: string): Array<Segment> {
 
       return {
         type: 'pathname',
-        value: part,
+        value: decodeURIComponent(part),
       }
     }),
   )

package/src/route.ts

@@ -638,6 +638,7 @@ export class Route<
   router?: AnyRouter
   rank!: number
   lazyFn?: () => Promise<LazyRoute<any>>
+  _lazyPromise?: Promise<void>
 
   /**
    * @deprecated Use the `createRoute` function instead.