fix(solid-router-v2): use TSR_DEFERRED_PROMISE (#7532)

Author: birkskyum

.changeset/tall-horses-repair.md

@@ -0,0 +1,10 @@
+---
+'@tanstack/solid-router-ssr-query': patch
+'@tanstack/solid-router-devtools': patch
+'@tanstack/solid-start-client': patch
+'@tanstack/solid-start-server': patch
+'@tanstack/solid-router': patch
+'@tanstack/solid-start': patch
+---
+
+fix: use TSR_DEFERRED_PROMISE

e2e/solid-start/deferred-hydration/src/routes/components.tsx

@@ -40,14 +40,12 @@ function InteractiveBox(props: { id: string; label: string }) {
 
 function DelayedFallbackBox() {
   if (typeof window !== 'undefined') {
-    const [ready, setReady] = Solid.createSignal(false)
-    window.setTimeout(() => setReady(true), 1000)
+    const child = Solid.createMemo(async () => {
+      await new Promise((resolve) => window.setTimeout(resolve, 1000))
+      return 'fallback child'
+    })
 
-    return (
-      <Solid.Show when={ready()}>
-        <div data-testid="component-fallback-child">fallback child</div>
-      </Solid.Show>
-    )
+    return <div data-testid="component-fallback-child">{child()}</div>
   }
 
   return <div data-testid="component-fallback-child">fallback child</div>

packages/router-core/src/ssr/tsrScript.ts

@@ -9,17 +9,8 @@ self.$_TSR = {
   },
   c() {
     if (this.hydrated && this.streamEnded) {
-      const cleanup = () => {
-        if (self.$_TSR?.hydrated && self.$_TSR?.streamEnded) {
-          delete self.$_TSR
-          delete self.$R['tsr']
-        }
-      }
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', cleanup, { once: true })
-      } else {
-        cleanup()
-      }
+      delete self.$_TSR
+      delete self.$R['tsr']
     }
   },
   p(script) {

packages/solid-router/src/awaited.tsx

@@ -1,6 +1,6 @@
 import * as Solid from 'solid-js'
 
-import { defer } from '@tanstack/router-core'
+import { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'
 import type { DeferredPromise } from '@tanstack/router-core'
 import type { SolidNode } from './route'
 
@@ -18,10 +18,16 @@ export function useAwaited<T>({
 }
 
 function InnerAwait<T>(props: {
-  data: Solid.Accessor<T>
+  deferred: DeferredPromise<T>
+  ready: Solid.Accessor<unknown>
   children: (res: T) => SolidNode
 }) {
-  return props.children(props.data()) as any
+  props.ready()
+  const state = props.deferred[TSR_DEFERRED_PROMISE]
+  if (state.status === 'error') {
+    throw state.error
+  }
+  return props.children(state.data as T) as any
 }
 
 export function Await<T>(
@@ -30,11 +36,17 @@ export function Await<T>(
     children: (result: T) => SolidNode
   },
 ) {
-  const data = Solid.createMemo(async () => await defer(props.promise))
+  const deferred = defer(props.promise)
+  const ready = Solid.createMemo(async () => {
+    await deferred
+    return true
+  })
 
   return (
     <Solid.Loading fallback={props.fallback as any}>
-      <InnerAwait data={data}>{props.children}</InnerAwait>
+      <InnerAwait deferred={deferred} ready={ready}>
+        {props.children}
+      </InnerAwait>
     </Solid.Loading>
   )
 }