@tanstack/router-core 0.0.1-beta.165 → 0.0.1-beta.167

package/package.json

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

package/src/defer.ts

@@ -0,0 +1,55 @@
+export type DeferredPromiseState<T> = { uid: string } & (
+  | {
+      status: 'pending'
+      data?: T
+      error?: unknown
+    }
+  | {
+      status: 'success'
+      data: T
+    }
+  | {
+      status: 'error'
+      data?: T
+      error: unknown
+    }
+)
+
+export type DeferredPromise<T> = Promise<T> & {
+  __deferredState: DeferredPromiseState<T>
+}
+
+export function defer<T>(_promise: Promise<T>) {
+  const promise = _promise as DeferredPromise<T>
+
+  if (!promise.__deferredState) {
+    promise.__deferredState = {
+      uid: Math.random().toString(36).slice(2),
+      status: 'pending',
+    }
+
+    const state = promise.__deferredState
+
+    promise
+      .then((data) => {
+        state.status = 'success' as any
+        state.data = data
+      })
+      .catch((error) => {
+        state.status = 'error' as any
+        state.error = error
+      })
+  }
+
+  return promise
+}
+
+export function isDehydratedDeferred(obj: any): boolean {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    !(obj instanceof Promise) &&
+    !obj.then &&
+    '__deferredState' in obj
+  )
+}

package/src/index.ts

@@ -11,3 +11,4 @@ export * from './router'
 export * from './searchParams'
 export * from './utils'
 export * from './scroll-restoration'
+export * from './defer'

package/src/route.ts

@@ -17,6 +17,32 @@ export interface RegisterRouteComponent<TProps> {
 export interface RegisterRouteErrorComponent<TProps> {
   // RouteErrorComponent: unknown // This is registered by the framework
 }
+export interface RegisterRouteProps<
+  TLoader = unknown,
+  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TRouteContext extends AnyContext = AnyContext,
+  TAllContext extends AnyContext = AnyContext,
+> {
+  // RouteProps: unknown // This is registered by the framework
+}
+export interface RegisterErrorRouteProps<
+  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TRouteContext extends AnyContext = AnyContext,
+  TAllContext extends AnyContext = AnyContext,
+> {
+  // ErrorRouteProps: unknown // This is registered by the framework
+}
+
+export interface RegisterPendingRouteProps<
+  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TRouteContext extends AnyContext = AnyContext,
+  TAllContext extends AnyContext = AnyContext,
+> {
+  // PendingRouteProps: unknown // This is registered by the framework
+}
 
 export type RegisteredRouteComponent<TProps> =
   RegisterRouteComponent<TProps> extends {
@@ -32,6 +58,56 @@ export type RegisteredRouteErrorComponent<TProps> =
     ? T
     : (props: TProps) => unknown
 
+export type RegisteredRouteProps<
+  TLoader = unknown,
+  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TRouteContext extends AnyContext = AnyContext,
+  TAllContext extends AnyContext = AnyContext,
+> = RegisterRouteProps<
+  TLoader,
+  TFullSearchSchema,
+  TAllParams,
+  TRouteContext,
+  TAllContext
+> extends {
+  RouteProps: infer T
+}
+  ? T
+  : (props: {}) => unknown
+
+export type RegisteredErrorRouteProps<
+  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TRouteContext extends AnyContext = AnyContext,
+  TAllContext extends AnyContext = AnyContext,
+> = RegisterRouteProps<
+  TFullSearchSchema,
+  TAllParams,
+  TRouteContext,
+  TAllContext
+> extends {
+  ErrorRouteProps: infer T
+}
+  ? T
+  : (props: {}) => unknown
+
+export type RegisteredPendingRouteProps<
+  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TRouteContext extends AnyContext = AnyContext,
+  TAllContext extends AnyContext = AnyContext,
+> = RegisterRouteProps<
+  TFullSearchSchema,
+  TAllParams,
+  TRouteContext,
+  TAllContext
+> extends {
+  PendingRouteProps: infer T
+}
+  ? T
+  : (props: {}) => unknown
+
 export type PreloadableObj = { preload?: () => Promise<void> }
 
 export type RoutePathOptions<TCustomId, TPath> =
@@ -53,7 +129,7 @@ export type MetaOptions = keyof PickRequired<RouteMeta> extends never
       meta: RouteMeta
     }
 
-export type AnyRouteProps = RouteProps<any, any, any, any, any>
+export type AnyRouteProps = RegisteredRouteProps<any, any, any, any, any>
 export type ComponentPropsFromRoute<TRoute> = TRoute extends Route<
   infer TParentRoute,
   infer TPath,
@@ -73,7 +149,13 @@ export type ComponentPropsFromRoute<TRoute> = TRoute extends Route<
   infer TChildren,
   infer TRouteTree
 >
-  ? RouteProps<TLoader, TFullSearchSchema, TAllParams, TRouteContext, TContext>
+  ? RegisteredRouteProps<
+      TLoader,
+      TFullSearchSchema,
+      TAllParams,
+      TRouteContext,
+      TContext
+    >
   : never
 
 export type ComponentFromRoute<TRoute> = RegisteredRouteComponent<
@@ -89,43 +171,6 @@ export type RouteLoaderFromRoute<TRoute extends AnyRoute> = LoaderFn<
   TRoute['types']['context']
 >
 
-export type RouteProps<
-  TLoader extends any = unknown,
-  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
-  TAllParams extends AnyPathParams = AnyPathParams,
-  TRouteContext extends AnyContext = AnyContext,
-  TContext extends AnyContext = AnyContext,
-> = {
-  useMatch: () => RouteMatch<any, any>
-  useLoader: () => UseLoaderResult<TLoader>
-  useSearch: <
-    TStrict extends boolean = true,
-    TSearch = TFullSearchSchema,
-    TSelected = TSearch,
-  >(opts?: {
-    strict?: TStrict
-    select?: (search: TSearch) => TSelected
-  }) => TStrict extends true ? TSelected : TSelected | undefined
-  useParams: <
-    TDefaultSelected = TAllParams,
-    TSelected = TDefaultSelected,
-  >(opts?: {
-    select?: (params: TDefaultSelected) => TSelected
-  }) => TSelected
-  useContext: <
-    TDefaultSelected = TContext,
-    TSelected = TDefaultSelected,
-  >(opts?: {
-    select?: (context: TDefaultSelected) => TSelected
-  }) => TSelected
-  useRouteContext: <
-    TDefaultSelected = TRouteContext,
-    TSelected = TDefaultSelected,
-  >(opts?: {
-    select?: (context: TDefaultSelected) => TSelected
-  }) => TSelected
-}
-
 export type RouteOptions<
   TParentRoute extends AnyRoute = AnyRoute,
   TCustomId extends string = string,
@@ -271,7 +316,7 @@ export type UpdatableRouteOptions<
   TFullSearchSchema extends AnySearchSchema,
   TAllParams extends AnyPathParams,
   TRouteContext extends AnyContext,
-  TContext extends AnyContext,
+  TAllContext extends AnyContext,
 > = MetaOptions & {
   key?: null | false | GetKeyFn<TFullSearchSchema, TAllParams>
   // If true, this route will be matched as case-sensitive
@@ -280,23 +325,31 @@ export type UpdatableRouteOptions<
   wrapInSuspense?: boolean
   // The content to be rendered when the route is matched. If no component is provided, defaults to `<Outlet />`
   component?: RegisteredRouteComponent<
-    RouteProps<TLoader, TFullSearchSchema, TAllParams, TRouteContext, TContext>
+    RegisteredRouteProps<
+      TLoader,
+      TFullSearchSchema,
+      TAllParams,
+      TRouteContext,
+      TAllContext
+    >
   >
   // The content to be rendered when the route encounters an error
   errorComponent?: RegisteredRouteErrorComponent<
-    { error: unknown } & Partial<
-      RouteProps<
-        TLoader,
-        TFullSearchSchema,
-        TAllParams,
-        TRouteContext,
-        TContext
-      >
+    RegisteredErrorRouteProps<
+      TFullSearchSchema,
+      TAllParams,
+      TRouteContext,
+      TAllContext
     >
   > //
   // If supported by your framework, the content to be rendered as the fallback content until the route is ready to render
   pendingComponent?: RegisteredRouteComponent<
-    RouteProps<TLoader, TFullSearchSchema, TAllParams, TRouteContext, TContext>
+    RegisteredPendingRouteProps<
+      TFullSearchSchema,
+      TAllParams,
+      TRouteContext,
+      TAllContext
+    >
   >
   // Filter functions that can manipulate search params *before* they are passed to links and navigate
   // calls that match this route.
@@ -320,7 +373,7 @@ export type UpdatableRouteOptions<
       TFullSearchSchema,
       TAllParams,
       NoInfer<TRouteContext>,
-      TContext
+      TAllContext
     >,
   ) => Promise<void> | void
   onError?: (err: any) => void
@@ -473,15 +526,16 @@ export interface AnyRoute
 
 export type MergeParamsFromParent<T, U> = IsAny<T, U, T & U>
 
-export type UseLoaderResult<T> = T extends Record<PropertyKey, infer U>
-  ? {
-      [K in keyof T]: UseLoaderResultPromise<T[K]>
-    }
-  : UseLoaderResultPromise<T>
+export type UseLoaderResult<T> = T
+// T extends Record<PropertyKey, infer U>
+//   ? {
+//       [K in keyof T]: UseLoaderResultPromise<T[K]>
+//     }
+//   : UseLoaderResultPromise<T>
 
-export type UseLoaderResultPromise<T> = T extends Promise<infer U>
-  ? StreamedPromise<U>
-  : T
+// export type UseLoaderResultPromise<T> = T extends Promise<infer U>
+//   ? StreamedPromise<U>
+//   : T
 
 export type StreamedPromise<T> = {
   promise: Promise<T>

package/src/router.ts

@@ -26,9 +26,10 @@ import {
   AnyRoute,
   AnyContext,
   AnyPathParams,
-  RouteProps,
   RegisteredRouteComponent,
   RegisteredRouteErrorComponent,
+  RegisteredRouteProps,
+  RegisteredErrorRouteProps,
 } from './route'
 import {
   RoutesById,
@@ -156,13 +157,30 @@ export interface RouterOptions<
   defaultPreload?: false | 'intent'
   defaultPreloadDelay?: number
   defaultComponent?: RegisteredRouteComponent<
-    RouteProps<unknown, AnySearchSchema, AnyPathParams, AnyContext, AnyContext>
+    RegisteredRouteProps<
+      unknown,
+      AnySearchSchema,
+      AnyPathParams,
+      AnyContext,
+      AnyContext
+    >
   >
   defaultErrorComponent?: RegisteredRouteErrorComponent<
-    RouteProps<unknown, AnySearchSchema, AnyPathParams, AnyContext, AnyContext>
+    RegisteredErrorRouteProps<
+      AnySearchSchema,
+      AnyPathParams,
+      AnyContext,
+      AnyContext
+    >
   >
   defaultPendingComponent?: RegisteredRouteComponent<
-    RouteProps<unknown, AnySearchSchema, AnyPathParams, AnyContext, AnyContext>
+    RegisteredRouteProps<
+      unknown,
+      AnySearchSchema,
+      AnyPathParams,
+      AnyContext,
+      AnyContext
+    >
   >
   defaultMaxAge?: number
   defaultGcMaxAge?: number
@@ -229,8 +247,20 @@ type LinkCurrentTargetElement = {
   preloadTimeout?: null | ReturnType<typeof setTimeout>
 }
 
-export interface DehydratedRouterState
-  extends Pick<RouterState, 'status' | 'location' | 'lastUpdated'> {}
+export interface DehydratedRouterState {
+  dehydratedMatches: DehydratedRouteMatch[]
+}
+
+export type DehydratedRouteMatch = Pick<
+  RouteMatch,
+  | 'fetchedAt'
+  | 'invalid'
+  | 'invalidAt'
+  | 'id'
+  | 'loaderData'
+  | 'status'
+  | 'updatedAt'
+>
 
 export interface DehydratedRouter {
   state: DehydratedRouterState
@@ -443,7 +473,7 @@ export class Router<
     this.basepath = `/${trimPath(basepath ?? '') ?? ''}`
 
     if (routeTree && routeTree !== this.routeTree) {
-      this.#buildRouteTree(routeTree)
+      this.#processRoutes(routeTree)
     }
 
     return this
@@ -480,7 +510,11 @@ export class Router<
 
   latestLoadPromise: Promise<void> = Promise.resolve()
 
-  load = async (opts?: { next?: ParsedLocation; throwOnError?: boolean }) => {
+  load = async (opts?: {
+    next?: ParsedLocation
+    throwOnError?: boolean
+    __dehydratedMatches?: DehydratedRouteMatch[]
+  }) => {
     const promise = new Promise<void>(async (resolve, reject) => {
       const prevLocation = this.state.resolvedLocation
       const pathDidChange = !!(
@@ -769,8 +803,8 @@ export class Router<
         params: routeParams,
         pathname: joinPaths([this.basepath, interpolatedPath]),
         updatedAt: Date.now(),
-        invalidAt: Infinity,
-        preloadInvalidAt: Infinity,
+        invalidAt: 9999999999999,
+        preloadInvalidAt: 9999999999999,
         routeSearch: {},
         search: {} as any,
         status: hasLoaders ? 'pending' : 'success',
@@ -1312,7 +1346,19 @@ export class Router<
 
   dehydrate = (): DehydratedRouter => {
     return {
-      state: pick(this.state, ['location', 'status', 'lastUpdated']),
+      state: {
+        dehydratedMatches: this.state.matches.map((d) =>
+          pick(d, [
+            'fetchedAt',
+            'invalid',
+            'invalidAt',
+            'id',
+            'loaderData',
+            'status',
+            'updatedAt',
+          ]),
+        ),
+      },
     }
   }
 
@@ -1331,19 +1377,35 @@ export class Router<
     const ctx = _ctx
     this.dehydratedData = ctx.payload as any
     this.options.hydrate?.(ctx.payload as any)
-    const routerState = ctx.router.state as RouterState<TRouteTree>
+    const { dehydratedMatches } = ctx.router.state
+
+    let matches = this.matchRoutes(
+      this.state.location.pathname,
+      this.state.location.search,
+    ).map((match) => {
+      const dehydratedMatch = dehydratedMatches.find((d) => d.id === match.id)
+
+      invariant(
+        dehydratedMatch,
+        `Could not find a client-side match for dehydrated match with id: ${match.id}!`,
+      )
+
+      if (dehydratedMatch) {
+        return {
+          ...match,
+          ...dehydratedMatch,
+        }
+      }
+      return match
+    })
 
     this.__store.setState((s) => {
       return {
         ...s,
-        ...routerState,
-        resolvedLocation: routerState.location,
+        matches,
+        matchesById: this.#mergeMatches(s.matchesById, matches),
       }
     })
-
-    await this.load()
-
-    return
   }
 
   injectedHtml: (string | (() => Promise<string> | string))[] = []
@@ -1363,10 +1425,10 @@ export class Router<
         return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(
           strKey,
         )}"] = ${JSON.stringify(data)}
-        ;(() => {
-          var el = document.getElementById('${id}')
-          el.parentElement.removeChild(el)
-        })()
+        // ;(() => {
+        //   var el = document.getElementById('${id}')
+        //   el.parentElement.removeChild(el)
+        // })()
         </script>`
       })
 
@@ -1392,7 +1454,7 @@ export class Router<
   //     ?.__promisesByKey[key]?.resolve(value)
   // }
 
-  #buildRouteTree = (routeTree: TRouteTree) => {
+  #processRoutes = (routeTree: TRouteTree) => {
     this.routeTree = routeTree as any
     this.routesById = {} as any
     this.routesByPath = {} as any
@@ -1704,7 +1766,7 @@ export class Router<
       (opts?.maxAge ??
         route.options.maxAge ??
         this.options.defaultMaxAge ??
-        Infinity)
+        9999999999999)
 
     this.setRouteMatch(id, (s) => ({
       ...s,