@tanstack/react-router 0.0.1-beta.207 → 0.0.1-beta.209

package/package.json

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

package/src/RouteMatch.ts

@@ -18,7 +18,7 @@ export interface RouteMatch<
   updatedAt: number
   loadPromise?: Promise<void>
   __resolveLoadPromise?: () => void
-  meta: RouteById<TRouteTree, TRouteId>['types']['allMeta']
+  context: RouteById<TRouteTree, TRouteId>['types']['allContext']
   routeSearch: RouteById<TRouteTree, TRouteId>['types']['searchSchema']
   search: FullSearchSchema<TRouteTree> &
     RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema']

package/src/RouterProvider.tsx

@@ -159,13 +159,13 @@ export function RouterProvider<
   const options = {
     ...router.options,
     ...rest,
-    meta: {
-      ...router.options.meta,
-      ...rest?.meta,
+    context: {
+      ...router.options.context,
+      ...rest?.context,
     },
   } as PickAsRequired<
     RouterOptions<TRouteTree, TDehydrated>,
-    'stringifySearch' | 'parseSearch' | 'meta'
+    'stringifySearch' | 'parseSearch' | 'context'
   >
 
   const history = React.useState(
@@ -451,7 +451,7 @@ export function RouterProvider<
           paramsError: parseErrors[index],
           searchError: undefined,
           loadPromise: Promise.resolve(),
-          meta: undefined!,
+          context: undefined!,
           abortController: new AbortController(),
           fetchedAt: 0,
         }
@@ -459,9 +459,9 @@ export function RouterProvider<
         return routeMatch
       })
 
-      // Take each match and resolve its search params and meta
+      // Take each match and resolve its search params and context
       // This has to happen after the matches are created or found
-      // so that we can use the parent match's search params and meta
+      // so that we can use the parent match's search params and context
       matches.forEach((match, i): any => {
         const parentMatch = matches[i - 1]
         const route = looseRoutesById[match.routeId]!
@@ -848,26 +848,27 @@ export function RouterProvider<
               handleError(match.searchError, 'VALIDATE_SEARCH')
             }
 
-            const parentMeta = parentMatch?.meta ?? options.meta ?? {}
+            const parentContext = parentMatch?.context ?? options.context ?? {}
 
-            const beforeLoadMeta =
+            const beforeLoadContext =
               (await route.options.beforeLoad?.({
                 search: match.search,
                 abortController: match.abortController,
                 params: match.params,
                 preload: !!preload,
-                meta: parentMeta,
+                context: parentContext,
                 location: state.location, // TODO: This might need to be latestLocationRef.current...?
+                navigate: (opts) => navigate({ ...opts, from: match.pathname }),
               })) ?? ({} as any)
 
-            const meta = {
-              ...parentMeta,
-              ...beforeLoadMeta,
+            const context = {
+              ...parentContext,
+              ...beforeLoadContext,
             }
 
             matches[index] = match = {
               ...match,
-              meta: replaceEqualDeep(match.meta, meta),
+              context: replaceEqualDeep(match.context, context),
             }
           } catch (err) {
             handleError(err, 'BEFORE_LOAD')
@@ -924,7 +925,10 @@ export function RouterProvider<
                   preload: !!preload,
                   parentMatchPromise,
                   abortController: match.abortController,
-                  meta: match.meta,
+                  context: match.context,
+                  location: state.location,
+                  navigate: (opts) =>
+                    navigate({ ...opts, from: match.pathname }),
                 })
 
                 await Promise.all([componentsPromise, loaderPromise])

package/src/fileRoute.ts

@@ -4,7 +4,7 @@ import {
   ResolveFullPath,
   ResolveFullSearchSchema,
   MergeFromFromParent,
-  RouteMeta,
+  RouteContext,
   AnyContext,
   RouteOptions,
   UpdatableRouteOptions,
@@ -97,11 +97,13 @@ export class FileRoute<
       TParentRoute['types']['allParams'],
       TParams
     >,
-    TRouteMeta extends RouteConstraints['TRouteMeta'] = RouteMeta,
+    TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
     TContext extends Expand<
-      Assign<IsAny<TParentRoute['types']['allMeta'], {}>, TRouteMeta>
-    > = Expand<Assign<IsAny<TParentRoute['types']['allMeta'], {}>, TRouteMeta>>,
-    TRouterMeta extends RouteConstraints['TRouterMeta'] = AnyContext,
+      Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
+    > = Expand<
+      Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
+    >,
+    TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
     TChildren extends RouteConstraints['TChildren'] = unknown,
     TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
   >(
@@ -114,7 +116,7 @@ export class FileRoute<
         TFullSearchSchema,
         TParams,
         TAllParams,
-        TRouteMeta,
+        TRouteContext,
         TContext
       >,
       'getParentRoute' | 'path' | 'id'
@@ -130,9 +132,9 @@ export class FileRoute<
     TFullSearchSchema,
     TParams,
     TAllParams,
-    TRouteMeta,
+    TRouteContext,
     TContext,
-    TRouterMeta,
+    TRouterContext,
     TChildren,
     TRouteTree
   > => {

package/src/react.tsx

@@ -40,7 +40,7 @@ export type RouteProps<
   useMatch: <TSelected = TAllContext>(opts?: {
     select?: (search: TAllContext) => TSelected
   }) => TSelected
-  useRouteMeta: <TSelected = TAllContext>(opts?: {
+  useRouteContext: <TSelected = TAllContext>(opts?: {
     select?: (search: TAllContext) => TSelected
   }) => TSelected
   useSearch: <TSelected = TFullSearchSchema>(opts?: {
@@ -398,7 +398,7 @@ export type RouterProps<
   TDehydrated extends Record<string, any> = Record<string, any>,
 > = Omit<RouterOptions<TRouteTree, TDehydrated>, 'context'> & {
   router: Router<TRouteTree>
-  context?: Partial<RouterOptions<TRouteTree, TDehydrated>['meta']>
+  context?: Partial<RouterOptions<TRouteTree, TDehydrated>['context']>
 }
 
 export function useRouter<
@@ -515,21 +515,23 @@ export type RouteFromIdOrRoute<
   ? RouteIds<TRouteTree>
   : never
 
-export function useRouteMeta<
+export function useRouteContext<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
   TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
   TStrict extends boolean = true,
-  TRouteMeta = RouteById<TRouteTree, TFrom>['types']['allMeta'],
-  TSelected = TRouteMeta,
+  TRouteContext = RouteById<TRouteTree, TFrom>['types']['allContext'],
+  TSelected = TRouteContext,
 >(
   opts: StrictOrFrom<TFrom> & {
-    select?: (search: TRouteMeta) => TSelected
+    select?: (search: TRouteContext) => TSelected
   },
 ): TStrict extends true ? TSelected : TSelected | undefined {
   return useMatch({
     ...(opts as any),
     select: (match: RouteMatch) =>
-      opts?.select ? opts.select(match.meta as TRouteMeta) : match.meta,
+      opts?.select
+        ? opts.select(match.context as TRouteContext)
+        : match.context,
   })
 }
 
@@ -598,6 +600,20 @@ export function useNavigate<
   )
 }
 
+export function typedNavigate<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TDefaultFrom extends RoutePaths<TRouteTree> = '/',
+>(navigate: (opts: NavigateOptions<any>) => Promise<void>) {
+  return navigate as <
+    TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,
+    TTo extends string = '',
+    TMaskFrom extends RoutePaths<TRouteTree> = '/',
+    TMaskTo extends string = '',
+  >(
+    opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+  ) => Promise<void>
+}
+
 export function useMatchRoute<
   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
 >() {
@@ -652,7 +668,7 @@ export function Matches() {
       return React.createElement(ErrorComponent, {
         ...props,
         useMatch: route.useMatch,
-        useRouteMeta: route.useRouteMeta,
+        useRouteContext: route.useRouteContext,
         useSearch: route.useSearch,
         useParams: route.useParams,
       })
@@ -741,7 +757,7 @@ function Match({ matches }: { matches: RouteMatch[] }) {
       return React.createElement(routeErrorComponent, {
         ...props,
         useMatch: route.useMatch,
-        useRouteMeta: route.useRouteMeta,
+        useRouteContext: route.useRouteContext,
         useSearch: route.useSearch,
         useParams: route.useParams,
       })
@@ -754,7 +770,7 @@ function Match({ matches }: { matches: RouteMatch[] }) {
       <ResolvedSuspenseBoundary
         fallback={React.createElement(PendingComponent, {
           useMatch: route.useMatch,
-          useRouteMeta: route.useRouteMeta,
+          useRouteContext: route.useRouteContext,
           useSearch: route.useSearch,
           useParams: route.useParams,
         })}
@@ -791,7 +807,7 @@ function MatchInner({ match }: { match: RouteMatch }): any {
     if (comp) {
       return React.createElement(comp, {
         useMatch: route.useMatch,
-        useRouteMeta: route.useRouteMeta as any,
+        useRouteContext: route.useRouteContext as any,
         useSearch: route.useSearch,
         useParams: route.useParams as any,
       } as any)