fix(router): context issues

docs/framework/react/guide/data-loading.md

@@ -452,7 +452,7 @@ export const Route = createFileRoute('/posts')({
 })
 ```
 
-The `reset` function can be used to show a `retry` button. If you want to retry the route loading, you need to additionally call `router.invalidate()`:
+The `reset` function can be used to allow the user to retry rendering the error boundaries normal children:
 
 ```tsx
 // routes/posts.tsx
@@ -468,7 +468,31 @@ export const Route = createFileRoute('/posts')({
           onClick={() => {
             // Reset the router error boundary
             reset()
-            // Invalidate the route to reload the loader
+          }}
+        >
+          retry
+        </button>
+      </div>
+    )
+  },
+})
+```
+
+If the error was the result of a route load, you should instead call `router.invalidate()`, which will coordinate both a router reload and an error boundary reset:
+
+```tsx
+// routes/posts.tsx
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  errorComponent: ({ error, reset }) => {
+    const router = useRouter()
+
+    return (
+      <div>
+        {error.message}
+        <button
+          onClick={() => {
+            // Invalidate the route to reload the loader, which will also reset the error boundary
             router.invalidate()
           }}
         >

docs/framework/react/guide/external-data-loading.md

@@ -123,9 +123,7 @@ export const Route = createFileRoute('/posts')({
         {error.message}
         <button
           onClick={() => {
-            // Reset the router error boundary
-            reset()
-            // Invalidate the route to reload the loader
+            // Invalidate the route to reload the loader, and reset any router error boundaries
             router.invalidate()
           }}
         >

docs/framework/react/guide/server-functions.md

@@ -38,7 +38,7 @@ function Component() {
     if (!el) return
     el.addEventListener('click', async () => {
       const result = await yourFn()
-      console.log(result)
+      console.info(result)
     })
   }
 
@@ -56,7 +56,7 @@ Or from another server function:
 ```typescript
 const yourFn2 = createServerFn('POST', async () => {
   const result = await yourFn()
-  console.log(result)
+  console.info(result)
 })
 ```
 
@@ -140,7 +140,7 @@ const yourFn = createServerFn('POST', async () => {
   // Server-side code lives here
 })
 
-console.log(yourFn.url)
+console.info(yourFn.url)
 ```
 
 And pass this to the `action` attribute of the form:

examples/react/basic-react-query-file-based/src/routes/posts.$postId.tsx

@@ -35,7 +35,6 @@ export function PostErrorComponent({ error, reset }: ErrorComponentProps) {
     <div>
       <button
         onClick={() => {
-          reset()
           router.invalidate()
         }}
       >

examples/react/basic-react-query/src/main.tsx

@@ -201,7 +201,6 @@ function PostErrorComponent({ error, reset }: ErrorComponentProps) {
     <div>
       <button
         onClick={() => {
-          reset()
           router.invalidate()
         }}
       >

examples/react/start-trellaux/app/components/Column.tsx

@@ -3,7 +3,7 @@ import invariant from 'tiny-invariant'
 import { twMerge } from 'tailwind-merge'
 
 import { flushSync } from 'react-dom'
-import { CONTENT_TYPES, INTENTS, type RenderedItem } from '../types'
+import { CONTENT_TYPES, type RenderedItem } from '../types'
 import { Icon } from '../icons/icons'
 import {
   useDeleteColumnMutation,
@@ -119,8 +119,6 @@ export const Column = forwardRef<HTMLDivElement, ColumnProps>(
             acceptColumnDrop === 'left' ? previousOrder : nextOrder
           const moveOrder = (droppedOrder + order) / 2
 
-          console.log('moveOrder', moveOrder)
-
           updateColumnMutation.mutate({
             boardId,
             id: transfer.id,

packages/history/src/index.ts

@@ -7,6 +7,7 @@ export interface NavigateOptions {
 }
 export interface RouterHistory {
   location: HistoryLocation
+  subscribers: Set<() => void>
   subscribe: (cb: () => void) => () => void
   push: (path: string, state?: any, navigateOpts?: NavigateOptions) => void
   replace: (path: string, state?: any, navigateOpts?: NavigateOptions) => void
@@ -100,6 +101,7 @@ export function createHistory(opts: {
     get location() {
       return location
     },
+    subscribers,
     subscribe: (cb: () => void) => {
       subscribers.add(cb)
 
@@ -269,6 +271,10 @@ export function createBrowserHistory(opts?: {
     }
 
     if (!scheduled) {
+      if (process.env.NODE_ENV === 'test') {
+        flush()
+        return
+      }
       // Schedule an update to the browser history
       scheduled = Promise.resolve().then(() => flush())
     }

packages/react-router/package.json

@@ -34,7 +34,7 @@
     "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js -p tsconfig.legacy.json",
     "test:types:ts55": "tsc",
     "test:unit": "vitest",
-    "test:unit:dev": "pnpm run test:unit --watch",
+    "test:unit:dev": "pnpm run test:unit --watch --hideSkippedTests",
     "test:build": "publint --strict",
     "build": "vite build"
   },

packages/react-router/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()
       },

packages/react-router/src/Match.tsx

@@ -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)
       }
     }

packages/react-router/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 (

packages/react-router/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>,

packages/react-router/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 })
     }
 

packages/react-router/src/index.tsx

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

packages/react-router/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.