@tanstack/react-router 0.0.1-beta.214 → 0.0.1-beta.216

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.214",
+  "version": "0.0.1-beta.216",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -42,7 +42,7 @@
     "@babel/runtime": "^7.16.7",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.214"
+    "@tanstack/history": "0.0.1-beta.216"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -8,7 +8,7 @@ import { ResolveRelativePath, ToOptions } from './link'
 import { AnyRoute, ReactNode, rootRouteId } from './route'
 import { RouteById, RouteByPath, RouteIds, RoutePaths } from './routeInfo'
 import { RegisteredRouter } from './router'
-import { NoInfer, StrictOrFrom } from './utils'
+import { NoInfer, StrictOrFrom, functionalUpdate } from './utils'
 
 export function Matches() {
   const { routesById, state } = useRouter()
@@ -16,7 +16,7 @@ export function Matches() {
 
   const locationKey = useRouterState().location.state.key
 
-  const route = routesById[rootRouteId]
+  const route = routesById[rootRouteId]!
 
   const errorComponent = React.useCallback(
     (props: any) => {
@@ -58,7 +58,7 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
   const { options, routesById } = useRouter()
   const match = matches[0]!
   const routeId = match?.routeId
-  const route = routesById[routeId]
+  const route = routesById[routeId]!
   const locationKey = useRouterState().location.state?.key
 
   const PendingComponent = (route.options.pendingComponent ??
@@ -70,9 +70,9 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
     options.defaultErrorComponent ??
     ErrorComponent
 
-  const ResolvedSuspenseBoundary =
-    route.options.wrapInSuspense ?? React.Suspense
-  // const ResolvedSuspenseBoundary = SafeFragment
+  const ResolvedSuspenseBoundary = route.options.wrapInSuspense
+    ? React.Suspense
+    : SafeFragment
 
   const errorComponent = React.useCallback(
     (props: any) => {
@@ -112,7 +112,7 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
 }
 function MatchInner({ match }: { match: RouteMatch }): any {
   const { options, routesById } = useRouter()
-  const route = routesById[match.routeId]
+  const route = routesById[match.routeId]!
 
   if (match.status === 'error') {
     throw match.error
@@ -131,7 +131,8 @@ function MatchInner({ match }: { match: RouteMatch }): any {
         useRouteContext: route.useRouteContext as any,
         useSearch: route.useSearch,
         useParams: route.useParams as any,
-      } as any)
+        useLoaderData: route.useLoaderData,
+      })
     }
 
     return <Outlet />
@@ -248,7 +249,7 @@ export function useMatch<
   opts: StrictOrFrom<TFrom> & {
     select?: (match: TRouteMatchState) => TSelected
   },
-): TStrict extends true ? TRouteMatchState : TRouteMatchState | undefined {
+): TStrict extends true ? TSelected : TSelected | undefined {
   const nearestMatch = React.useContext(matchesContext)[0]!
   const nearestMatchRouteId = nearestMatch?.routeId
 
@@ -313,3 +314,24 @@ export function useMatches<T = RouteMatch[]>(opts?: {
     },
   })
 }
+
+export function useLoaderData<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TStrict extends boolean = true,
+  TRouteMatch extends RouteMatch<TRouteTree, TFrom> = RouteMatch<
+    TRouteTree,
+    TFrom
+  >,
+  TSelected = TRouteMatch['loaderData'],
+>(
+  opts: StrictOrFrom<TFrom> & {
+    select?: (match: TRouteMatch) => TSelected
+  },
+): TStrict extends true ? TSelected : TSelected | undefined {
+  const match = useMatch({ ...opts, select: undefined })!
+
+  return typeof opts.select === 'function'
+    ? opts.select(match?.loaderData)
+    : match?.loaderData
+}

package/src/RouterProvider.tsx

@@ -27,7 +27,13 @@ import {
   trimPathRight,
 } from './path'
 import { isRedirect } from './redirects'
-import { AnyPathParams, AnyRoute, AnySearchSchema, Route } from './route'
+import {
+  AnyPathParams,
+  AnyRoute,
+  AnySearchSchema,
+  LoaderFnContext,
+  Route,
+} from './route'
 import {
   FullSearchSchema,
   ParseRoute,
@@ -83,16 +89,13 @@ export type BuildLinkFn<TRouteTree extends AnyRoute> = <
 ) => LinkInfo
 
 export type NavigateFn<TRouteTree extends AnyRoute> = <
-  TRouteTree extends AnyRoute,
   TFrom extends RoutePaths<TRouteTree> = '/',
   TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
   TMaskTo extends string = '',
->({
-  from,
-  to = '' as any,
-  ...rest
-}: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>) => Promise<void>
+>(
+  opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+) => Promise<void>
 
 export type MatchRouteFn<TRouteTree extends AnyRoute> = <
   TFrom extends RoutePaths<TRouteTree> = '/',
@@ -250,12 +253,14 @@ export function RouterProvider<
     getInitialRouterState(latestLocationRef.current),
   )
   const [isTransitioning, startReactTransition] = React.useTransition()
+  const pendingMatchesRef = React.useRef<AnyRouteMatch[]>([])
 
   const state = React.useMemo<RouterState<TRouteTree>>(
     () => ({
       ...preState,
       status: isTransitioning ? 'pending' : 'idle',
       location: isTransitioning ? latestLocationRef.current : preState.location,
+      pendingMatches: pendingMatchesRef.current,
     }),
     [preState, isTransitioning],
   )
@@ -268,6 +273,8 @@ export function RouterProvider<
         toLocation: state.location,
         pathChanged: state.location!.href !== state.resolvedLocation?.href,
       })
+      pendingMatchesRef.current = []
+
       setState((s) => ({
         ...s,
         resolvedLocation: s.location,
@@ -464,7 +471,7 @@ export function RouterProvider<
 
         // Create a fresh route match
         const hasLoaders = !!(
-          route.options.load ||
+          route.options.loader ||
           componentTypes.some((d) => (route.options[d] as any)?.preload)
         )
 
@@ -938,10 +945,6 @@ export function RouterProvider<
             const parentMatchPromise = matchPromises[index - 1]
             const route = looseRoutesById[match.routeId]!
 
-            if (match.isFetching) {
-              return getRouteMatch(state, match.id)?.loadPromise
-            }
-
             const handleIfRedirect = (err: any) => {
               if (isRedirect(err)) {
                 if (!preload) {
@@ -952,8 +955,50 @@ export function RouterProvider<
               return false
             }
 
-            const load = async () => {
-              try {
+            let loadPromise: Promise<void> | undefined
+
+            matches[index] = match = {
+              ...match,
+              fetchedAt: Date.now(),
+              invalid: false,
+            }
+
+            if (match.isFetching) {
+              loadPromise = getRouteMatch(state, match.id)?.loadPromise
+            } else {
+              const cause = state.matches.find((d) => d.id === match.id)
+                ? 'stay'
+                : 'enter'
+
+              const loaderContext: LoaderFnContext = {
+                params: match.params,
+                search: match.search,
+                preload: !!preload,
+                parentMatchPromise,
+                abortController: match.abortController,
+                context: match.context,
+                location: state.location,
+                navigate: (opts) =>
+                  navigate({ ...opts, from: match.pathname } as any),
+                cause,
+              }
+
+              // Default to reloading the route all the time
+              const shouldReload =
+                route.options.shouldReload?.(loaderContext) ?? true
+
+              // If the user doesn't want the route to reload, just
+              // resolve with the existing loader data
+
+              if (!shouldReload) {
+                loadPromise = Promise.resolve(match.loaderData)
+              } else {
+                // Otherwise, load the route
+                matches[index] = match = {
+                  ...match,
+                  isFetching: true,
+                }
+
                 const componentsPromise = Promise.all(
                   componentTypes.map(async (type) => {
                     const component = route.options[type]
@@ -964,78 +1009,66 @@ export function RouterProvider<
                   }),
                 )
 
-                const loaderPromise = route.options.load?.({
-                  params: match.params,
-                  search: match.search,
-                  preload: !!preload,
-                  parentMatchPromise,
-                  abortController: match.abortController,
-                  context: match.context,
-                  location: state.location,
-                  navigate: (opts) =>
-                    navigate({ ...opts, from: match.pathname }),
-                })
-
-                const [_, loaderContext] = await Promise.all([
+                const loaderPromise = route.options.loader?.(loaderContext)
+
+                loadPromise = Promise.all([
                   componentsPromise,
                   loaderPromise,
-                ])
-                if ((latestPromise = checkLatest())) return await latestPromise
-
-                matches[index] = match = {
-                  ...match,
-                  error: undefined,
-                  status: 'success',
-                  isFetching: false,
-                  updatedAt: Date.now(),
-                }
-              } catch (error) {
-                if ((latestPromise = checkLatest())) return await latestPromise
-                if (handleIfRedirect(error)) return
-
-                try {
-                  route.options.onError?.(error)
-                } catch (onErrorError) {
-                  error = onErrorError
-                  if (handleIfRedirect(onErrorError)) return
-                }
-
-                matches[index] = match = {
-                  ...match,
-                  error,
-                  status: 'error',
-                  isFetching: false,
-                  updatedAt: Date.now(),
-                }
-              }
-
-              if (!preload) {
-                setState((s) => ({
-                  ...s,
-                  matches: s.matches.map((d) =>
-                    d.id === match.id ? match : d,
-                  ),
-                }))
+                ]).then((d) => d[1])
               }
             }
 
-            let loadPromise: Promise<void> | undefined
-
             matches[index] = match = {
               ...match,
-              isFetching: true,
-              fetchedAt: Date.now(),
-              invalid: false,
+              loadPromise,
             }
 
-            loadPromise = load()
+            if (!preload) {
+              setState((s) => ({
+                ...s,
+                matches: s.matches.map((d) => (d.id === match.id ? match : d)),
+              }))
+            }
 
-            matches[index] = match = {
-              ...match,
-              loadPromise,
+            try {
+              const loaderData = await loadPromise
+              if ((latestPromise = checkLatest())) return await latestPromise
+
+              matches[index] = match = {
+                ...match,
+                error: undefined,
+                status: 'success',
+                isFetching: false,
+                updatedAt: Date.now(),
+                loaderData,
+                loadPromise: undefined,
+              }
+            } catch (error) {
+              if ((latestPromise = checkLatest())) return await latestPromise
+              if (handleIfRedirect(error)) return
+
+              try {
+                route.options.onError?.(error)
+              } catch (onErrorError) {
+                error = onErrorError
+                if (handleIfRedirect(onErrorError)) return
+              }
+
+              matches[index] = match = {
+                ...match,
+                error,
+                status: 'error',
+                isFetching: false,
+                updatedAt: Date.now(),
+              }
             }
 
-            await loadPromise
+            if (!preload) {
+              setState((s) => ({
+                ...s,
+                matches: s.matches.map((d) => (d.id === match.id ? match : d)),
+              }))
+            }
           })(),
         )
       })
@@ -1071,6 +1104,8 @@ export function RouterProvider<
         },
       )
 
+      pendingMatchesRef.current = matches
+
       const previousMatches = state.matches
 
       // Ingest the new matches
@@ -1099,13 +1134,13 @@ export function RouterProvider<
         }
 
         const exitingMatchIds = previousMatches.filter(
-          (id) => !state.pendingMatches.includes(id),
+          (id) => !pendingMatchesRef.current.includes(id),
         )
-        const enteringMatchIds = state.pendingMatches.filter(
+        const enteringMatchIds = pendingMatchesRef.current.filter(
           (id) => !previousMatches.includes(id),
         )
         const stayingMatchIds = previousMatches.filter((id) =>
-          state.pendingMatches.includes(id),
+          pendingMatchesRef.current.includes(id),
         )
 
         // setState((s) => ({
@@ -1326,10 +1361,7 @@ export function RouterProvider<
     }
   }, [history])
 
-  const initialLoad = React.useRef(true)
-
-  if (initialLoad.current) {
-    initialLoad.current = false
+  React.useLayoutEffect(() => {
     startReactTransition(() => {
       try {
         load()
@@ -1337,7 +1369,7 @@ export function RouterProvider<
         console.error(err)
       }
     })
-  }
+  }, [])
 
   const matchRoute = useStableCallback<MatchRouteFn<TRouteTree>>(
     (location, opts) => {
@@ -1454,6 +1486,7 @@ export interface RouteMatch<
   searchError: unknown
   updatedAt: number
   loadPromise?: Promise<void>
+  loaderData?: RouteById<TRouteTree, TRouteId>['types']['loaderData']
   __resolveLoadPromise?: () => void
   context: RouteById<TRouteTree, TRouteId>['types']['allContext']
   routeSearch: RouteById<TRouteTree, TRouteId>['types']['searchSchema']

package/src/fileRoute.ts

@@ -104,6 +104,7 @@ export class FileRoute<
       Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
     >,
     TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
+    TLoaderData extends any = unknown,
     TChildren extends RouteConstraints['TChildren'] = unknown,
     TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
   >(
@@ -117,11 +118,17 @@ export class FileRoute<
         TParams,
         TAllParams,
         TRouteContext,
-        TContext
+        TContext,
+        TLoaderData
       >,
       'getParentRoute' | 'path' | 'id'
     > &
-      UpdatableRouteOptions<TFullSearchSchema, TAllParams, TContext>,
+      UpdatableRouteOptions<
+        TFullSearchSchema,
+        TAllParams,
+        TContext,
+        TLoaderData
+      >,
   ): Route<
     TParentRoute,
     TPath,
@@ -135,6 +142,7 @@ export class FileRoute<
     TRouteContext,
     TContext,
     TRouterContext,
+    TLoaderData,
     TChildren,
     TRouteTree
   > => {