@tanstack/react-router 1.87.1 → 1.87.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.87.1",
+  "version": "1.87.2",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/awaited.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import warning from 'tiny-warning'
 import { useRouter } from './useRouter'
 import { defaultSerializeError } from './router'
-import { defer } from './defer'
+import { TSR_DEFERRED_PROMISE, defer } from './defer'
 import { defaultDeserializeError, isServerSideError } from './isServerSideError'
 import type { DeferredPromise } from './defer'
 
@@ -14,38 +14,36 @@ export function useAwaited<T>({
   promise: _promise,
 }: AwaitOptions<T>): [T, DeferredPromise<T>] {
   const router = useRouter()
-  const promise = _promise as DeferredPromise<T>
+  const promise = defer(_promise)
 
-  defer(promise)
-
-  if (promise.status === 'pending') {
+  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {
     throw promise
   }
 
-  if (promise.status === 'error') {
+  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {
     if (typeof document !== 'undefined') {
-      if (isServerSideError(promise.error)) {
+      if (isServerSideError(promise[TSR_DEFERRED_PROMISE].error)) {
         throw (
           router.options.errorSerializer?.deserialize ?? defaultDeserializeError
-        )(promise.error.data as any)
+        )(promise[TSR_DEFERRED_PROMISE].error.data as any)
       } else {
         warning(
           false,
           "Encountered a server-side error that doesn't fit the expected shape",
         )
-        throw promise.error
+        throw promise[TSR_DEFERRED_PROMISE].error
       }
     } else {
       throw {
         data: (
           router.options.errorSerializer?.serialize ?? defaultSerializeError
-        )(promise.error),
+        )(promise[TSR_DEFERRED_PROMISE].error),
         __isServerError: true,
       }
     }
   }
-
-  return [promise.data as any, promise]
+  console.log('useAwaited', promise[TSR_DEFERRED_PROMISE])
+  return [promise[TSR_DEFERRED_PROMISE].data, promise]
 }
 
 export function Await<T>(
@@ -68,5 +66,7 @@ function AwaitInner<T>(
   },
 ): React.JSX.Element {
   const [data] = useAwaited(props)
+  console.log('AwaitInner', data)
+
   return props.children(data) as React.JSX.Element
 }

package/src/defer.ts

@@ -1,25 +1,24 @@
 import { defaultSerializeError } from './router'
 
+export const TSR_DEFERRED_PROMISE = Symbol.for('TSR_DEFERRED_PROMISE')
+
 export type DeferredPromiseState<T> = {
-  uid: string
-  resolve?: () => void
-  reject?: () => void
-} & (
-  | {
-      status: 'pending'
-      data?: T
-      error?: unknown
-    }
-  | {
-      status: 'success'
-      data: T
-    }
-  | {
-      status: 'error'
-      data?: T
-      error: unknown
-    }
-)
+  [TSR_DEFERRED_PROMISE]:
+    | {
+        status: 'pending'
+        data?: T
+        error?: unknown
+      }
+    | {
+        status: 'success'
+        data: T
+      }
+    | {
+        status: 'error'
+        data?: T
+        error: unknown
+      }
+}
 
 export type DeferredPromise<T> = Promise<T> & DeferredPromiseState<T>
 
@@ -30,25 +29,25 @@ export function defer<T>(
   },
 ) {
   const promise = _promise as DeferredPromise<T>
+  // this is already deferred promise
+  if ((promise as any)[TSR_DEFERRED_PROMISE]) {
+    return promise
+  }
+  promise[TSR_DEFERRED_PROMISE] = { status: 'pending' }
 
-  if (!(promise as any).status) {
-    Object.assign(promise, {
-      status: 'pending',
+  promise
+    .then((data) => {
+      promise[TSR_DEFERRED_PROMISE].status = 'success'
+      promise[TSR_DEFERRED_PROMISE].data = data
+      console.log('defer then', promise[TSR_DEFERRED_PROMISE])
+    })
+    .catch((error) => {
+      promise[TSR_DEFERRED_PROMISE].status = 'error'
+      ;(promise[TSR_DEFERRED_PROMISE] as any).error = {
+        data: (options?.serializeError ?? defaultSerializeError)(error),
+        __isServerError: true,
+      }
     })
-
-    promise
-      .then((data) => {
-        promise.status = 'success' as any
-        promise.data = data
-      })
-      .catch((error) => {
-        promise.status = 'error' as any
-        ;(promise as any).error = {
-          data: (options?.serializeError ?? defaultSerializeError)(error),
-          __isServerError: true,
-        }
-      })
-  }
 
   return promise
 }

package/src/index.tsx

@@ -19,7 +19,7 @@ export type { AwaitOptions } from './awaited'
 
 export { ScriptOnce } from './ScriptOnce'
 
-export { defer } from './defer'
+export { defer, TSR_DEFERRED_PROMISE } from './defer'
 export type { DeferredPromiseState, DeferredPromise } from './defer'
 
 export { CatchBoundary, ErrorComponent } from './CatchBoundary'
@@ -262,6 +262,8 @@ export type {
   RouterListener,
   AnyRouterWithContext,
   ExtractedEntry,
+  ExtractedStream,
+  ExtractedPromise,
   StreamState,
 } from './router'
 

package/src/router.ts

@@ -30,6 +30,7 @@ import {
 import { isRedirect, isResolvedRedirect } from './redirects'
 import { isNotFound } from './not-found'
 import { defaultTransformer } from './transformer'
+import type { DeferredPromiseState } from './defer'
 import type * as React from 'react'
 import type {
   HistoryLocation,
@@ -145,16 +146,26 @@ export type InferRouterContext<TRouteTree extends AnyRoute> =
     ? TRouterContext
     : AnyContext
 
-export type ExtractedEntry = {
+export interface ExtractedBaseEntry {
   dataType: '__beforeLoadContext' | 'loaderData'
-  type: 'promise' | 'stream'
+  type: string
   path: Array<string>
-  value: any
   id: number
-  streamState?: StreamState
   matchIndex: number
 }
 
+export interface ExtractedStream extends ExtractedBaseEntry {
+  type: 'stream'
+  streamState: StreamState
+}
+
+export interface ExtractedPromise extends ExtractedBaseEntry {
+  type: 'promise'
+  promiseState: DeferredPromiseState<any>
+}
+
+export type ExtractedEntry = ExtractedStream | ExtractedPromise
+
 export type StreamState = {
   promises: Array<ControlledPromise<string | null>>
 }