@tanstack/react-router 0.0.1-beta.192 → 0.0.1-beta.194

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.192",
+  "version": "0.0.1-beta.194",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -44,7 +44,7 @@
     "tiny-warning": "^1.0.3",
     "@tanstack/react-store": "^0.0.1",
     "@gisatcz/cross-package-react-context": "^0.2.0",
-    "@tanstack/router-core": "0.0.1-beta.192"
+    "@tanstack/router-core": "0.0.1-beta.194"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/react.tsx

@@ -39,6 +39,8 @@ import {
   AnyPathParams,
   Expand,
   ResolveAllParams,
+  DeepMergeAll,
+  IsAny,
 } from '@tanstack/router-core'
 
 declare module '@tanstack/router-core' {
@@ -54,10 +56,10 @@ declare module '@tanstack/router-core' {
 
   interface RegisterRouteComponent<
     TLoader = unknown,
-    TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
     TAllParams extends AnyPathParams = AnyPathParams,
-    TRouteContext extends AnyContext = AnyContext,
-    TAllContext extends AnyContext = AnyContext,
+    TRouteContext extends Record<string, any> = AnyContext,
+    TAllContext extends Record<string, any> = AnyContext,
   > {
     RouteComponent: RouteComponent<
       RouteProps<
@@ -71,10 +73,10 @@ declare module '@tanstack/router-core' {
   }
 
   interface RegisterErrorRouteComponent<
-    TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
     TAllParams extends AnyPathParams = AnyPathParams,
-    TRouteContext extends AnyContext = AnyContext,
-    TAllContext extends AnyContext = AnyContext,
+    TRouteContext extends Record<string, any> = AnyContext,
+    TAllContext extends Record<string, any> = AnyContext,
   > {
     ErrorRouteComponent: RouteComponent<
       ErrorRouteProps<TFullSearchSchema, TAllParams, TRouteContext, TAllContext>
@@ -82,10 +84,10 @@ declare module '@tanstack/router-core' {
   }
 
   interface RegisterPendingRouteComponent<
-    TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
     TAllParams extends AnyPathParams = AnyPathParams,
-    TRouteContext extends AnyContext = AnyContext,
-    TAllContext extends AnyContext = AnyContext,
+    TRouteContext extends Record<string, any> = AnyContext,
+    TAllContext extends Record<string, any> = AnyContext,
   > {
     PendingRouteComponent: RouteComponent<
       PendingRouteProps<
@@ -110,6 +112,7 @@ declare module '@tanstack/router-core' {
       TCustomId,
       TPath
     >,
+    TLoaderContext extends RouteConstraints['TLoaderContext'] = AnyContext,
     TLoader = unknown,
     TSearchSchema extends RouteConstraints['TSearchSchema'] = {},
     TFullSearchSchema extends RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<
@@ -123,12 +126,15 @@ declare module '@tanstack/router-core' {
       TParentRoute,
       TParams
     >,
-    TParentContext extends RouteConstraints['TParentContext'] = TParentRoute['types']['routeContext'],
-    TAllParentContext extends RouteConstraints['TAllParentContext'] = TParentRoute['types']['context'],
     TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
-    TAllContext extends RouteConstraints['TAllContext'] = MergeFromFromParent<
-      TParentRoute['types']['context'],
-      TRouteContext
+    TAllContext extends RouteConstraints['TAllContext'] = Expand<
+      DeepMergeAll<
+        [
+          IsAny<TParentRoute['types']['context'], {}>,
+          TLoaderContext,
+          TRouteContext,
+        ]
+      >
     >,
     TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
     TChildren extends RouteConstraints['TChildren'] = unknown,
@@ -140,12 +146,9 @@ declare module '@tanstack/router-core' {
     useLoader: <TSelected = TLoader>(opts?: {
       select?: (search: TLoader) => TSelected
     }) => UseLoaderResult<TSelected>
-    useContext: <TSelected = TAllContext>(opts?: {
+    useRouteContext: <TSelected = TAllContext>(opts?: {
       select?: (search: TAllContext) => TSelected
     }) => TSelected
-    useRouteContext: <TSelected = TRouteContext>(opts?: {
-      select?: (search: TRouteContext) => TSelected
-    }) => TSelected
     useSearch: <TSelected = TFullSearchSchema>(opts?: {
       select?: (search: TFullSearchSchema) => TSelected
     }) => TSelected
@@ -156,10 +159,10 @@ declare module '@tanstack/router-core' {
 
   interface RegisterRouteProps<
     TLoader = unknown,
-    TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
     TAllParams extends AnyPathParams = AnyPathParams,
-    TRouteContext extends AnyContext = AnyContext,
-    TAllContext extends AnyContext = AnyContext,
+    TRouteContext extends Record<string, any> = AnyContext,
+    TAllContext extends Record<string, any> = AnyContext,
   > {
     RouteProps: RouteProps<
       TLoader,
@@ -171,10 +174,10 @@ declare module '@tanstack/router-core' {
   }
 
   interface RegisterPendingRouteProps<
-    TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
     TAllParams extends AnyPathParams = AnyPathParams,
-    TRouteContext extends AnyContext = AnyContext,
-    TAllContext extends AnyContext = AnyContext,
+    TRouteContext extends Record<string, any> = AnyContext,
+    TAllContext extends Record<string, any> = AnyContext,
   > {
     PendingRouteProps: PendingRouteProps<
       TFullSearchSchema,
@@ -185,10 +188,10 @@ declare module '@tanstack/router-core' {
   }
 
   interface RegisterErrorRouteProps<
-    TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+    TFullSearchSchema extends Record<string, any> = AnySearchSchema,
     TAllParams extends AnyPathParams = AnyPathParams,
-    TRouteContext extends AnyContext = AnyContext,
-    TAllContext extends AnyContext = AnyContext,
+    TRouteContext extends Record<string, any> = AnyContext,
+    TAllContext extends Record<string, any> = AnyContext,
   > {
     ErrorRouteProps: ErrorRouteProps
   }
@@ -196,10 +199,10 @@ declare module '@tanstack/router-core' {
 
 export type RouteProps<
   TLoader = unknown,
-  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TFullSearchSchema extends Record<string, any> = AnySearchSchema,
   TAllParams extends AnyPathParams = AnyPathParams,
-  TRouteContext extends AnyContext = AnyContext,
-  TAllContext extends AnyContext = AnyContext,
+  TRouteContext extends Record<string, any> = AnyContext,
+  TAllContext extends Record<string, any> = AnyContext,
 > = {
   useLoader: <TSelected = TLoader>(opts?: {
     select?: (search: TLoader) => TSelected
@@ -207,12 +210,9 @@ export type RouteProps<
   useMatch: <TSelected = TAllContext>(opts?: {
     select?: (search: TAllContext) => TSelected
   }) => TSelected
-  useContext: <TSelected = TAllContext>(opts?: {
+  useRouteContext: <TSelected = TAllContext>(opts?: {
     select?: (search: TAllContext) => TSelected
   }) => TSelected
-  useRouteContext: <TSelected = TRouteContext>(opts?: {
-    select?: (search: TRouteContext) => TSelected
-  }) => TSelected
   useSearch: <TSelected = TFullSearchSchema>(opts?: {
     select?: (search: TFullSearchSchema) => TSelected
   }) => TSelected
@@ -222,10 +222,10 @@ export type RouteProps<
 }
 
 export type ErrorRouteProps<
-  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TFullSearchSchema extends Record<string, any> = AnySearchSchema,
   TAllParams extends AnyPathParams = AnyPathParams,
-  TRouteContext extends AnyContext = AnyContext,
-  TAllContext extends AnyContext = AnyContext,
+  TRouteContext extends Record<string, any> = AnyContext,
+  TAllContext extends Record<string, any> = AnyContext,
 > = {
   error: unknown
   info: { componentStack: string }
@@ -241,10 +241,10 @@ export type ErrorRouteProps<
 >
 
 export type PendingRouteProps<
-  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TFullSearchSchema extends Record<string, any> = AnySearchSchema,
   TAllParams extends AnyPathParams = AnyPathParams,
-  TRouteContext extends AnyContext = AnyContext,
-  TAllContext extends AnyContext = AnyContext,
+  TRouteContext extends Record<string, any> = AnyContext,
+  TAllContext extends Record<string, any> = AnyContext,
 > = Omit<
   RouteProps<
     unknown,
@@ -264,19 +264,11 @@ Route.__onInit = (route) => {
     useLoader: (opts = {}) => {
       return useLoader({ ...opts, from: route.id }) as any
     },
-    useContext: (opts: any = {}) => {
-      return useMatch({
-        ...opts,
-        from: route.id,
-        select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
-      } as any)
-    },
     useRouteContext: (opts: any = {}) => {
       return useMatch({
         ...opts,
         from: route.id,
-        select: (d: any) =>
-          opts?.select ? opts.select(d.routeContext) : d.routeContext,
+        select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
       } as any)
     },
     useSearch: (opts = {}) => {
@@ -349,13 +341,7 @@ export type LinkPropsOptions<
   TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> = '/',
   TMaskTo extends string = '',
-> = LinkOptions<
-  RegisteredRouter['routeTree'],
-  TFrom,
-  TTo,
-  TMaskFrom,
-  TMaskTo
-> & {
+> = LinkOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & {
   // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
   activeProps?:
     | React.AnchorHTMLAttributes<HTMLAnchorElement>
@@ -383,13 +369,13 @@ export type MakeMatchRouteOptions<
   TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> = '/',
   TMaskTo extends string = '',
-> = ToOptions<RegisteredRouter['routeTree'], TFrom, TTo, TMaskFrom, TMaskTo> &
+> = ToOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
   MatchRouteOptions & {
     // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
     children?:
       | ((
           params?: RouteByPath<
-            RegisteredRouter['routeTree'],
+            TRouteTree,
             ResolveRelativePath<TFrom, NoInfer<TTo>>
           >['types']['allParams'],
         ) => ReactNode)
@@ -589,15 +575,7 @@ export function Navigate<
   TTo extends string = '',
   TMaskFrom extends RoutePaths<TRouteTree> = '/',
   TMaskTo extends string = '',
->(
-  props: NavigateOptions<
-    RegisteredRouter['routeTree'],
-    TFrom,
-    TTo,
-    TMaskFrom,
-    TMaskTo
-  >,
-): null {
+>(props: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>): null {
   const router = useRouter()
 
   React.useLayoutEffect(() => {
@@ -672,7 +650,6 @@ function Matches() {
       return React.createElement(ErrorComponent, {
         ...props,
         useMatch: route.useMatch,
-        useContext: route.useContext,
         useRouteContext: route.useRouteContext,
         useSearch: route.useSearch,
         useParams: route.useParams,
@@ -731,12 +708,10 @@ type StrictOrFrom<TFrom> =
     }
 
 export function useMatch<
-  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
   TStrict extends boolean = true,
-  TRouteMatchState = RouteMatch<
-    RegisteredRouter['routeTree'],
-    RouteById<RegisteredRouter['routeTree'], TFrom>
-  >,
+  TRouteMatchState = RouteMatch<TRouteTree, TFrom>,
   TSelected = TRouteMatchState,
 >(
   opts: StrictOrFrom<TFrom> & {
@@ -792,20 +767,22 @@ export function useMatch<
   return matchSelection as any
 }
 
-export type RouteFromIdOrRoute<T> = T extends ParseRoute<
-  RegisteredRouter['routeTree']
->
+export type RouteFromIdOrRoute<
+  T,
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+> = T extends ParseRoute<TRouteTree>
   ? T
-  : T extends RouteIds<RegisteredRouter['routeTree']>
-  ? RoutesById<RegisteredRouter['routeTree']>[T]
+  : T extends RouteIds<TRouteTree>
+  ? RoutesById<TRouteTree>[T]
   : T extends string
-  ? RouteIds<RegisteredRouter['routeTree']>
+  ? RouteIds<TRouteTree>
   : never
 
 export function useLoader<
-  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
   TStrict extends boolean = true,
-  TLoader = RouteById<RegisteredRouter['routeTree'], TFrom>['types']['loader'],
+  TLoader = RouteById<TRouteTree, TFrom>['types']['loader'],
   TSelected = TLoader,
 >(
   opts: StrictOrFrom<TFrom> & {
@@ -822,12 +799,10 @@ export function useLoader<
 }
 
 export function useRouterContext<
-  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
   TStrict extends boolean = true,
-  TContext = RouteById<
-    RegisteredRouter['routeTree'],
-    TFrom
-  >['types']['context'],
+  TContext = RouteById<TRouteTree, TFrom>['types']['context'],
   TSelected = TContext,
 >(
   opts: StrictOrFrom<TFrom> & {
@@ -842,12 +817,10 @@ export function useRouterContext<
 }
 
 export function useRouteContext<
-  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
   TStrict extends boolean = true,
-  TRouteContext = RouteById<
-    RegisteredRouter['routeTree'],
-    TFrom
-  >['types']['routeContext'],
+  TRouteContext = RouteById<TRouteTree, TFrom>['types']['context'],
   TSelected = TRouteContext,
 >(
   opts: StrictOrFrom<TFrom> & {
@@ -858,18 +831,16 @@ export function useRouteContext<
     ...(opts as any),
     select: (match: RouteMatch) =>
       opts?.select
-        ? opts.select(match.routeContext as TRouteContext)
-        : match.routeContext,
+        ? opts.select(match.context as TRouteContext)
+        : match.context,
   })
 }
 
 export function useSearch<
-  TFrom extends RouteIds<RegisteredRouter['routeTree']>,
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
   TStrict extends boolean = true,
-  TSearch = RouteById<
-    RegisteredRouter['routeTree'],
-    TFrom
-  >['types']['fullSearchSchema'],
+  TSearch = RouteById<TRouteTree, TFrom>['types']['fullSearchSchema'],
   TSelected = TSearch,
 >(
   opts: StrictOrFrom<TFrom> & {
@@ -885,9 +856,10 @@ export function useSearch<
 }
 
 export function useParams<
-  TFrom extends RouteIds<RegisteredRouter['routeTree']> = '/',
-  TDefaultSelected = AllParams<RegisteredRouter['routeTree']> &
-    RouteById<RegisteredRouter['routeTree'], TFrom>['types']['allParams'],
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
+  TDefaultSelected = AllParams<TRouteTree> &
+    RouteById<TRouteTree, TFrom>['types']['allParams'],
   TSelected = TDefaultSelected,
 >(
   opts: StrictOrFrom<TFrom> & {
@@ -1017,7 +989,6 @@ function Match({ matchIds }: { matchIds: string[] }) {
       return React.createElement(routeErrorComponent, {
         ...props,
         useMatch: route.useMatch,
-        useContext: route.useContext,
         useRouteContext: route.useRouteContext,
         useSearch: route.useSearch,
         useParams: route.useParams,
@@ -1031,7 +1002,6 @@ function Match({ matchIds }: { matchIds: string[] }) {
       <ResolvedSuspenseBoundary
         fallback={React.createElement(PendingComponent, {
           useMatch: route.useMatch,
-          useContext: route.useContext,
           useRouteContext: route.useRouteContext,
           useSearch: route.useSearch,
           useParams: route.useParams,
@@ -1077,7 +1047,6 @@ function MatchInner({
     return React.createElement(PendingComponent, {
       useLoader: route.useLoader,
       useMatch: route.useMatch,
-      useContext: route.useContext,
       useRouteContext: route.useRouteContext,
       useSearch: route.useSearch,
       useParams: route.useParams,
@@ -1091,7 +1060,6 @@ function MatchInner({
       return React.createElement(comp, {
         useLoader: route.useLoader,
         useMatch: route.useMatch,
-        useContext: route.useContext as any,
         useRouteContext: route.useRouteContext as any,
         useSearch: route.useSearch,
         useParams: route.useParams as any,