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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "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,8 +43,8 @@
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
     "@gisatcz/cross-package-react-context": "^0.2.0",
-    "@tanstack/router-core": "0.0.1-beta.165",
-    "@tanstack/react-store": "0.0.1-beta.165"
+    "@tanstack/router-core": "0.0.1-beta.167",
+    "@tanstack/react-store": "0.0.1-beta.167"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/deferred.tsx

@@ -0,0 +1,40 @@
+import { DeferredPromise, isDehydratedDeferred } from '@tanstack/router-core'
+import { useRouter } from '.'
+
+export type DeferredOptions<T> = {
+  promise: DeferredPromise<T>
+}
+
+export function useDeferred<T>({ promise }: DeferredOptions<T>): [T] {
+  const router = useRouter()
+
+  let state = promise.__deferredState
+  const key = `__TSR__DEFERRED__${state.uid}`
+
+  if (isDehydratedDeferred(promise)) {
+    state = router.hydrateData(key)!
+    promise = Promise.resolve(state.data) as DeferredPromise<any>
+    promise.__deferredState = state
+  }
+
+  if (state.status === 'pending') {
+    throw promise
+  }
+
+  if (state.status === 'error') {
+    throw state.error
+  }
+
+  router.dehydrateData(key, state)
+
+  return [state.data]
+}
+
+export function Deferred<T>(
+  props: DeferredOptions<T> & {
+    children: (result: T) => JSX.Element
+  },
+) {
+  const awaited = useDeferred(props)
+  return props.children(...awaited)
+}

package/src/index.tsx

@@ -35,21 +35,24 @@ import {
   RouteById,
   ParseRoute,
   AllParams,
+  rootRouteId,
+  AnyPathParams,
 } from '@tanstack/router-core'
 
 //
 
 export * from '@tanstack/router-core'
 export * from './scroll-restoration'
+export * from './deferred'
 
 export { useStore }
 
 declare module '@tanstack/router-core' {
-  interface RegisterRouteComponent<TProps extends Record<string, any>> {
+  interface RegisterRouteComponent<TProps> {
     RouteComponent: RouteComponent<TProps>
   }
 
-  interface RegisterRouteErrorComponent<TProps extends Record<string, any>> {
+  interface RegisterRouteErrorComponent<TProps> {
     RouteErrorComponent: RouteComponent<TProps>
   }
 
@@ -128,6 +131,102 @@ declare module '@tanstack/router-core' {
       select?: (search: TAllParams) => TSelected
     }) => TStrict extends true ? TSelected : TSelected | undefined
   }
+
+  interface RegisterRouteProps<
+    TLoader = unknown,
+    TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+    TAllParams extends AnyPathParams = AnyPathParams,
+    TRouteContext extends AnyContext = AnyContext,
+    TAllContext extends AnyContext = AnyContext,
+  > {
+    RouteProps: RouteProps<
+      TLoader,
+      TFullSearchSchema,
+      TAllParams,
+      TRouteContext,
+      TAllContext
+    >
+  }
+
+  interface RegisterPendingRouteProps<
+    TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+    TAllParams extends AnyPathParams = AnyPathParams,
+    TRouteContext extends AnyContext = AnyContext,
+    TAllContext extends AnyContext = AnyContext,
+  > {
+    PendingRouteProps: Omit<
+      RouteProps<
+        unknown,
+        TFullSearchSchema,
+        TAllParams,
+        TRouteContext,
+        TAllContext
+      >,
+      'useLoader'
+    >
+  }
+
+  interface RegisterErrorRouteProps<
+    TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+    TAllParams extends AnyPathParams = AnyPathParams,
+    TRouteContext extends AnyContext = AnyContext,
+    TAllContext extends AnyContext = AnyContext,
+  > {
+    ErrorRouteProps: {
+      error: unknown
+      info: { componentStack: string }
+    } & Omit<
+      RouteProps<
+        unknown,
+        TFullSearchSchema,
+        TAllParams,
+        TRouteContext,
+        TAllContext
+      >,
+      'useLoader'
+    >
+  }
+}
+
+export type RouteProps<
+  TLoader = unknown,
+  TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
+  TAllParams extends AnyPathParams = AnyPathParams,
+  TRouteContext extends AnyContext = AnyContext,
+  TAllContext extends AnyContext = AnyContext,
+> = {
+  useLoader: <TStrict extends boolean = true, TSelected = TLoader>(opts?: {
+    strict?: TStrict
+    select?: (search: TLoader) => TSelected
+  }) => TStrict extends true
+    ? UseLoaderResult<TSelected>
+    : UseLoaderResult<TSelected> | undefined
+  useMatch: <TStrict extends boolean = true, TSelected = TAllContext>(opts?: {
+    strict?: TStrict
+    select?: (search: TAllContext) => TSelected
+  }) => TStrict extends true ? TSelected : TSelected | undefined
+  useContext: <TStrict extends boolean = true, TSelected = TAllContext>(opts?: {
+    strict?: TStrict
+    select?: (search: TAllContext) => TSelected
+  }) => TStrict extends true ? TSelected : TSelected | undefined
+  useRouteContext: <
+    TStrict extends boolean = true,
+    TSelected = TRouteContext,
+  >(opts?: {
+    strict?: TStrict
+    select?: (search: TRouteContext) => TSelected
+  }) => TStrict extends true ? TSelected : TSelected | undefined
+  useSearch: <
+    TStrict extends boolean = true,
+    TSelected = TFullSearchSchema,
+  >(opts?: {
+    strict?: TStrict
+    select?: (search: TFullSearchSchema) => TSelected
+  }) => TStrict extends true ? TSelected : TSelected | undefined
+  useParams: <TStrict extends boolean = true, TSelected = TAllParams>(opts?: {
+    strict?: TStrict
+    select?: (search: TAllParams) => TSelected
+  }) => TStrict extends true ? TSelected : TSelected | undefined
 }
 
 Route.__onInit = (route) => {
@@ -471,13 +570,11 @@ export function RouterProvider<
   const Wrap = router.options.Wrap || React.Fragment
 
   return (
-    <React.Suspense fallback={null}>
-      <Wrap>
-        <routerContext.Provider value={router as any}>
-          <Matches />
-        </routerContext.Provider>
-      </Wrap>
-    </React.Suspense>
+    <Wrap>
+      <routerContext.Provider value={router as any}>
+        <Matches />
+      </routerContext.Provider>
+    </Wrap>
   )
 }
 
@@ -503,6 +600,7 @@ function Matches() {
     <matchIdsContext.Provider value={[undefined!, ...matchIds]}>
       <CatchBoundary
         errorComponent={ErrorComponent}
+        route={router.getRoute(rootRouteId)}
         onCatch={() => {
           warning(
             false,
@@ -795,7 +893,6 @@ function Match({ matchIds }: { matchIds: string[] }) {
     <matchIdsContext.Provider value={matchIds}>
       <ResolvedSuspenseBoundary
         fallback={React.createElement(PendingComponent, {
-          useLoader: route.useLoader,
           useMatch: route.useMatch,
           useContext: route.useContext,
           useRouteContext: route.useRouteContext,
@@ -806,6 +903,7 @@ function Match({ matchIds }: { matchIds: string[] }) {
         <ResolvedCatchBoundary
           key={route.id}
           errorComponent={errorComponent}
+          route={route}
           onCatch={() => {
             warning(false, `Error in route match: ${matchId}`)
           }}
@@ -915,6 +1013,7 @@ export function useHydrate() {
 class CatchBoundary extends React.Component<{
   children: any
   errorComponent: any
+  route: AnyRoute
   onCatch: (error: any, info: any) => void
 }> {
   state = {
@@ -942,6 +1041,7 @@ class CatchBoundary extends React.Component<{
 function CatchBoundaryInner(props: {
   children: any
   errorComponent: any
+  route: AnyRoute
   errorState: { error: unknown; info: any }
   reset: () => void
 }) {
@@ -973,7 +1073,14 @@ function CatchBoundaryInner(props: {
   }, [props.errorState.error])
 
   if (props.errorState.error && activeErrorState.error) {
-    return React.createElement(errorComponent, activeErrorState)
+    return React.createElement(errorComponent, {
+      ...activeErrorState,
+      useMatch: props.route.useMatch,
+      useContext: props.route.useContext,
+      useRouteContext: props.route.useRouteContext,
+      useSearch: props.route.useSearch,
+      useParams: props.route.useParams,
+    })
   }
 
   return props.children