@tanstack/react-router 0.0.1-beta.263 → 0.0.1-beta.265

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.263",
+  "version": "0.0.1-beta.265",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -44,7 +44,7 @@
     "@tanstack/store": "^0.1.3",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.263"
+    "@tanstack/history": "0.0.1-beta.265"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -37,6 +37,7 @@ export interface RouteMatch<
   loadPromise?: Promise<void>
   loaderData?: RouteById<TRouteTree, TRouteId>['types']['loaderData']
   __resolveLoadPromise?: () => void
+  routeContext: RouteById<TRouteTree, TRouteId>['types']['routeContext']
   context: RouteById<TRouteTree, TRouteId>['types']['allContext']
   search: FullSearchSchema<TRouteTree> &
     RouteById<TRouteTree, TRouteId>['types']['fullSearchSchema']
@@ -411,7 +412,7 @@ export function useLoaderData<
     TRouteTree,
     TFrom
   >,
-  TSelected = TRouteMatch['loaderData'],
+  TSelected = Required<TRouteMatch>['loaderData'],
 >(
   opts: StrictOrFrom<TFrom> & {
     select?: (match: TRouteMatch) => TSelected

package/src/route.ts

@@ -6,8 +6,8 @@ import { AnyRouteMatch } from './Matches'
 import { NavigateOptions, ParsePathParams, ToSubOptions } from './link'
 import { ParsedLocation } from './location'
 import { joinPaths, trimPath } from './path'
-import { RoutePaths } from './routeInfo'
-import { AnyRouter } from './router'
+import { RouteById, RouteIds, RoutePaths } from './routeInfo'
+import { AnyRouter, RegisteredRouter } from './router'
 import { useParams } from './useParams'
 import { useSearch } from './useSearch'
 import {
@@ -371,6 +371,58 @@ export type RouteConstraints = {
   TRouteTree: AnyRoute
 }
 
+export class RouteApi<
+  TId extends RouteIds<RegisteredRouter['routeTree']>,
+  TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>,
+  TFullSearchSchema extends Record<
+    string,
+    any
+  > = TRoute['types']['fullSearchSchema'],
+  TAllParams extends AnyPathParams = TRoute['types']['allParams'],
+  TAllContext extends Record<string, any> = TRoute['types']['allContext'],
+  TLoaderData extends any = TRoute['types']['loaderData'],
+> {
+  id: TId
+
+  constructor({ id }: { id: TId }) {
+    this.id = id as any
+  }
+
+  useMatch = <TSelected = TAllContext>(opts?: {
+    select?: (search: TAllContext) => TSelected
+  }): TSelected => {
+    return useMatch({ ...opts, from: this.id }) as any
+  }
+
+  useRouteContext = <TSelected = TAllContext>(opts?: {
+    select?: (search: TAllContext) => TSelected
+  }): TSelected => {
+    return useMatch({
+      ...opts,
+      from: this.id,
+      select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
+    } as any)
+  }
+
+  useSearch = <TSelected = TFullSearchSchema>(opts?: {
+    select?: (search: TFullSearchSchema) => TSelected
+  }): TSelected => {
+    return useSearch({ ...opts, from: this.id } as any)
+  }
+
+  useParams = <TSelected = TAllParams>(opts?: {
+    select?: (search: TAllParams) => TSelected
+  }): 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 class Route<
   TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,
   TPath extends RouteConstraints['TPath'] = '/',
@@ -590,6 +642,7 @@ export class Route<
   }): TSelected => {
     return useMatch({ ...opts, from: this.id }) as any
   }
+
   useRouteContext = <TSelected = TAllContext>(opts?: {
     select?: (search: TAllContext) => TSelected
   }): TSelected => {
@@ -599,16 +652,19 @@ export class Route<
       select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
     } as any)
   }
+
   useSearch = <TSelected = TFullSearchSchema>(opts?: {
     select?: (search: TFullSearchSchema) => TSelected
   }): TSelected => {
     return useSearch({ ...opts, from: this.id } as any)
   }
+
   useParams = <TSelected = TAllParams>(opts?: {
     select?: (search: TAllParams) => TSelected
   }): TSelected => {
     return useParams({ ...opts, from: this.id } as any)
   }
+
   useLoaderData = <TSelected = TLoaderData>(opts?: {
     select?: (search: TLoaderData) => TSelected
   }): TSelected => {

package/src/router.ts

@@ -667,6 +667,7 @@ export class Router<
             error: undefined,
             paramsError: parseErrors[index],
             loadPromise: Promise.resolve(),
+            routeContext: undefined!,
             context: undefined!,
             abortController: new AbortController(),
             shouldReloadDeps: undefined,
@@ -997,8 +998,6 @@ export class Router<
       }))
     }
 
-    
-
     // Check each match middleware to see if the route can be accessed
     try {
       for (let [index, match] of matches.entries()) {
@@ -1071,6 +1070,10 @@ export class Router<
 
           matches[index] = match = {
             ...match,
+            routeContext: replaceEqualDeep(
+              match.routeContext,
+              beforeLoadContext,
+            ),
             context: replaceEqualDeep(match.context, context),
             abortController,
           }