@tanstack/react-router 0.0.1-beta.213 → 0.0.1-beta.215

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.213",
+  "version": "0.0.1-beta.215",
   "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.213"
+    "@tanstack/history": "0.0.1-beta.215"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/CatchBoundary.tsx

@@ -47,6 +47,7 @@ export class CatchBoundaryImpl extends React.Component<{
     }
   }
   componentDidCatch(error: any) {
+    console.error(error)
     this.props.onCatch?.(error)
   }
   render() {

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

@@ -83,16 +83,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 +247,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 +267,8 @@ export function RouterProvider<
         toLocation: state.location,
         pathChanged: state.location!.href !== state.resolvedLocation?.href,
       })
+      pendingMatchesRef.current = []
+
       setState((s) => ({
         ...s,
         resolvedLocation: s.location,
@@ -464,7 +465,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 +939,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,90 +949,101 @@ export function RouterProvider<
               return false
             }
 
-            const load = async () => {
-              try {
-                const componentsPromise = Promise.all(
-                  componentTypes.map(async (type) => {
-                    const component = route.options[type]
-
-                    if ((component as any)?.preload) {
-                      await (component as any).preload()
-                    }
-                  }),
-                )
-
-                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([
-                  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,
-                  ),
-                }))
-              }
-            }
-
             let loadPromise: Promise<void> | undefined
 
             matches[index] = match = {
               ...match,
-              isFetching: true,
               fetchedAt: Date.now(),
               invalid: false,
             }
 
-            loadPromise = load()
+            if (match.isFetching) {
+              loadPromise = getRouteMatch(state, match.id)?.loadPromise
+            } else {
+              matches[index] = match = {
+                ...match,
+                isFetching: true,
+              }
+
+              const componentsPromise = Promise.all(
+                componentTypes.map(async (type) => {
+                  const component = route.options[type]
+
+                  if ((component as any)?.preload) {
+                    await (component as any).preload()
+                  }
+                }),
+              )
+
+              const loaderPromise = route.options.loader?.({
+                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),
+              })
+
+              loadPromise = Promise.all([
+                componentsPromise,
+                loaderPromise,
+              ]).then((d) => d[1])
+            }
 
             matches[index] = match = {
               ...match,
               loadPromise,
             }
 
-            await loadPromise
+            if (!preload) {
+              setState((s) => ({
+                ...s,
+                matches: s.matches.map((d) => (d.id === match.id ? match : d)),
+              }))
+            }
+
+            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(),
+              }
+            }
+
+            if (!preload) {
+              setState((s) => ({
+                ...s,
+                matches: s.matches.map((d) => (d.id === match.id ? match : d)),
+              }))
+            }
           })(),
         )
       })
@@ -1071,6 +1079,8 @@ export function RouterProvider<
         },
       )
 
+      pendingMatchesRef.current = matches
+
       const previousMatches = state.matches
 
       // Ingest the new matches
@@ -1099,13 +1109,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 +1336,7 @@ export function RouterProvider<
     }
   }, [history])
 
-  const initialLoad = React.useRef(true)
-
-  if (initialLoad.current) {
-    initialLoad.current = false
+  React.useLayoutEffect(() => {
     startReactTransition(() => {
       try {
         load()
@@ -1337,7 +1344,7 @@ export function RouterProvider<
         console.error(err)
       }
     })
-  }
+  }, [])
 
   const matchRoute = useStableCallback<MatchRouteFn<TRouteTree>>(
     (location, opts) => {
@@ -1454,6 +1461,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
   > => {

package/src/route.ts

@@ -1,7 +1,7 @@
 import { HistoryLocation } from '@tanstack/history'
 import * as React from 'react'
 import invariant from 'tiny-invariant'
-import { useMatch } from './Matches'
+import { useLoaderData, useMatch } from './Matches'
 import { AnyRouteMatch } from './RouterProvider'
 import { NavigateOptions, ParsePathParams, ToSubOptions } from './link'
 import { ParsedLocation } from './location'
@@ -63,6 +63,7 @@ export type RouteOptions<
   TAllParams extends AnyPathParams = TParams,
   TRouteContext extends RouteContext = RouteContext,
   TAllContext extends Record<string, any> = AnyContext,
+  TLoaderData extends any = unknown,
 > = BaseRouteOptions<
   TParentRoute,
   TCustomId,
@@ -72,9 +73,17 @@ export type RouteOptions<
   TParams,
   TAllParams,
   TRouteContext,
-  TAllContext
+  TAllContext,
+  TLoaderData
 > &
-  NoInfer<UpdatableRouteOptions<TFullSearchSchema, TAllParams, TAllContext>>
+  NoInfer<
+    UpdatableRouteOptions<
+      TFullSearchSchema,
+      TAllParams,
+      TAllContext,
+      TLoaderData
+    >
+  >
 
 export type ParamsFallback<
   TPath extends string,
@@ -95,6 +104,7 @@ export type BaseRouteOptions<
   TAllParams = ParamsFallback<TPath, TParams>,
   TRouteContext extends RouteContext = RouteContext,
   TAllContext extends Record<string, any> = AnyContext,
+  TLoaderData extends any = unknown,
 > = RoutePathOptions<TCustomId, TPath> & {
   getParentRoute: () => TParentRoute
   validateSearch?: SearchSchemaValidator<TSearchSchema>
@@ -119,11 +129,12 @@ export type BaseRouteOptions<
           TRouteContext
         >
       }) & {
-    load?: RouteLoadFn<
+    loader?: RouteLoadFn<
       TAllParams,
       TFullSearchSchema,
       NoInfer<TAllContext>,
-      NoInfer<TRouteContext>
+      NoInfer<TRouteContext>,
+      TLoaderData
     >
   } & (
     | {
@@ -163,6 +174,7 @@ export type UpdatableRouteOptions<
   TFullSearchSchema extends Record<string, any>,
   TAllParams extends AnyPathParams,
   TAllContext extends AnyContext,
+  TLoaderData extends any = unknown,
 > = MetaOptions & {
   // test?: (args: TAllContext) => void
   // If true, this route will be matched as case-sensitive
@@ -170,7 +182,12 @@ export type UpdatableRouteOptions<
   // If true, this route will be forcefully wrapped in a suspense boundary
   wrapInSuspense?: boolean
   // The content to be rendered when the route is matched. If no component is provided, defaults to `<Outlet />`
-  component?: RouteComponent<TFullSearchSchema, TAllParams, TAllContext>
+  component?: RouteComponent<
+    TFullSearchSchema,
+    TAllParams,
+    TAllContext,
+    TLoaderData
+  >
   // The content to be rendered when the route encounters an error
   errorComponent?: ErrorRouteComponent<
     TFullSearchSchema,
@@ -244,8 +261,9 @@ export type RouteLoadFn<
   TFullSearchSchema extends Record<string, any> = {},
   TAllContext extends Record<string, any> = AnyContext,
   TRouteContext extends Record<string, any> = AnyContext,
+  TLoaderData extends any = unknown,
 > = (
-  match: LoadFnContext<
+  match: LoaderFnContext<
     TAllParams,
     TFullSearchSchema,
     TAllContext,
@@ -253,9 +271,9 @@ export type RouteLoadFn<
   > & {
     parentMatchPromise?: Promise<void>
   },
-) => any
+) => Promise<TLoaderData> | TLoaderData
 
-export interface LoadFnContext<
+export interface LoaderFnContext<
   TAllParams = {},
   TFullSearchSchema extends Record<string, any> = {},
   TAllContext extends Record<string, any> = AnyContext,
@@ -378,6 +396,7 @@ export class Route<
     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,
 > {
@@ -391,7 +410,8 @@ export class Route<
     TParams,
     TAllParams,
     TRouteContext,
-    TAllContext
+    TAllContext,
+    TLoaderData
   >
 
   test!: Expand<
@@ -422,7 +442,8 @@ export class Route<
       TParams,
       TAllParams,
       TRouteContext,
-      TAllContext
+      TAllContext,
+      TLoaderData
     >,
   ) {
     this.options = (options as any) || {}
@@ -446,6 +467,7 @@ export class Route<
     children: TChildren
     routeTree: TRouteTree
     routerContext: TRouterContext
+    loaderData: TLoaderData
   }
 
   init = (opts: { originalIndex: number }) => {
@@ -460,7 +482,8 @@ export class Route<
       TParams,
       TAllParams,
       TRouteContext,
-      TAllContext
+      TAllContext,
+      TLoaderData
     > &
       RoutePathOptionsIntersection<TCustomId, TPath>
 
@@ -542,7 +565,8 @@ export class Route<
       TAllParams,
       Expand<
         Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
-      >
+      >,
+      TLoaderData
     >,
   ) => {
     Object.assign(this.options, options)
@@ -578,6 +602,11 @@ export class Route<
   }): TSelected => {
     return useParams({ ...opts, from: this.id } as any)
   }
+  useLoaderData = <TSelected = TLoaderData>(opts?: {
+    select?: (search: TLoaderData) => TSelected
+  }): TSelected => {
+    return useLoaderData({ ...opts, from: this.id } as any) as any
+  }
 }
 
 export type AnyRootRoute = RootRoute<any, any, any>
@@ -586,6 +615,7 @@ export function rootRouteWithContext<TRouterContext extends {}>() {
   return <
     TSearchSchema extends Record<string, any> = {},
     TRouteContext extends RouteContext = RouteContext,
+    TLoaderData extends any = unknown,
   >(
     options?: Omit<
       RouteOptions<
@@ -597,7 +627,8 @@ export function rootRouteWithContext<TRouterContext extends {}>() {
         {}, // TParams
         {}, // TAllParams
         TRouteContext, // TRouteContext
-        Assign<TRouterContext, TRouteContext> // TAllContext
+        Assign<TRouterContext, TRouteContext>, // TAllContext
+        TLoaderData // TLoaderData
       >,
       | 'path'
       | 'id'
@@ -615,6 +646,7 @@ export class RootRoute<
   TSearchSchema extends Record<string, any> = {},
   TRouteContext extends RouteContext = RouteContext,
   TRouterContext extends {} = {},
+  TLoaderData extends any = unknown,
 > extends Route<
   any, // TParentRoute
   '/', // TPath
@@ -628,6 +660,7 @@ export class RootRoute<
   TRouteContext, // TRouteContext
   Expand<Assign<TRouterContext, TRouteContext>>, // TAllContext
   TRouterContext, // TRouterContext
+  TLoaderData,
   any, // TChildren
   any // TRouteTree
 > {
@@ -642,7 +675,8 @@ export class RootRoute<
         {}, // TParams
         {}, // TAllParams
         TRouteContext, // TRouteContext
-        Assign<TRouterContext, TRouteContext> // TAllContext
+        Assign<TRouterContext, TRouteContext>, // TAllContext
+        TLoaderData
       >,
       | 'path'
       | 'id'
@@ -720,6 +754,7 @@ export type RouteProps<
   TFullSearchSchema extends Record<string, any> = AnySearchSchema,
   TAllParams extends AnyPathParams = AnyPathParams,
   TAllContext extends Record<string, any> = AnyContext,
+  TLoaderData extends any = unknown,
 > = {
   useMatch: <TSelected = TAllContext>(opts?: {
     select?: (search: TAllContext) => TSelected
@@ -733,6 +768,9 @@ export type RouteProps<
   useParams: <TSelected = TAllParams>(opts?: {
     select?: (search: TAllParams) => TSelected
   }) => TSelected
+  useLoaderData: <TSelected = TLoaderData>(opts?: {
+    select?: (search: TLoaderData) => TSelected
+  }) => TSelected
 }
 
 export type ErrorRouteProps<
@@ -765,7 +803,10 @@ export type RouteComponent<
   TFullSearchSchema extends Record<string, any>,
   TAllParams extends AnyPathParams,
   TAllContext extends Record<string, any>,
-> = AsyncRouteComponent<RouteProps<TFullSearchSchema, TAllParams, TAllContext>>
+  TLoaderData extends any = unknown,
+> = AsyncRouteComponent<
+  RouteProps<TFullSearchSchema, TAllParams, TAllContext, TLoaderData>
+>
 
 export type ErrorRouteComponent<
   TFullSearchSchema extends Record<string, any>,
@@ -783,4 +824,4 @@ export type PendingRouteComponent<
   PendingRouteProps<TFullSearchSchema, TAllParams, TAllContext>
 >
 
-export type AnyRouteComponent = RouteComponent<any, any, any>
+export type AnyRouteComponent = RouteComponent<any, any, any, any>

package/src/router.ts

@@ -36,7 +36,7 @@ export interface Register {
   // router: Router
 }
 
-export type AnyRouter = Router<any, any>
+export type AnyRouter = Router<AnyRoute, any>
 
 export type RegisteredRouter = Register extends {
   router: infer TRouter extends AnyRouter