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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.166",
+  "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.166",
-    "@tanstack/react-store": "0.0.1-beta.166"
+    "@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

@@ -36,21 +36,23 @@ import {
   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>
   }
 
@@ -129,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) => {
@@ -472,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>
   )
 }