@tanstack/react-router 1.34.0 → 1.34.1

package/src/awaited.tsx

@@ -10,7 +10,9 @@ export type AwaitOptions<T> = {
   promise: DeferredPromise<T>
 }
 
-export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
+export function useAwaited<T>({
+  promise,
+}: AwaitOptions<T>): [T, DeferredPromise<T>] {
   const router = useRouter()
   // const rerender = React.useReducer((x) => x + 1, 0)[1]
 
@@ -56,20 +58,6 @@ export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
     throw isDehydratedDeferred(promise) ? state.promise : promise
   }
 
-  // If we are the originator of the promise,
-  // inject the state into the HTML stream
-  if (!isDehydratedDeferred(promise)) {
-    router.injectHtml(
-      `<script class='tsr_deferred_data'>window.__TSR__DEFERRED__${state.uid} = ${JSON.stringify(router.options.transformer.stringify(state))}
-  if (window.__TSR__ROUTER__) {
-    let deferred = window.__TSR__ROUTER__.getDeferred('${state.uid}');
-    if (deferred) deferred.resolve(window.__TSR__DEFERRED__${state.uid});
-  }
-  document.querySelectorAll('.tsr_deferred_data').forEach((el) => el.parentElement.removeChild(el));
-</script>`,
-    )
-  }
-
   if (state.status === 'error') {
     if (typeof document !== 'undefined') {
       if (isServerSideError(state.error)) {
@@ -93,7 +81,7 @@ export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
     }
   }
 
-  return [promise.__deferredState.data as any]
+  return [promise.__deferredState.data as any, promise]
 }
 
 export function Await<T>(
@@ -115,6 +103,40 @@ function AwaitInner<T>(
     children: (result: T) => React.ReactNode
   },
 ) {
-  const awaited = useAwaited(props)
-  return props.children(...awaited) as React.JSX.Element
+  const router = useRouter()
+  const [data, promise] = useAwaited(props)
+  const state = promise.__deferredState
+  // If we are the originator of the promise,
+  // inject the state into the HTML stream
+  return (
+    <>
+      {!isDehydratedDeferred(promise) ? (
+        <ScriptOnce
+          children={`window.__TSR__DEFERRED__${state.uid} = ${JSON.stringify(router.options.transformer.stringify(state))}
+  if (window.__TSR__ROUTER__) {
+    let deferred = window.__TSR__ROUTER__.getDeferred('${state.uid}');
+    if (deferred) deferred.resolve(window.__TSR__DEFERRED__${state.uid});
+  }
+  document.querySelectorAll('.tsr-script-once').forEach((el) => el.parentElement.removeChild(el));`}
+        />
+      ) : null}
+      {props.children(data)}
+    </>
+  )
+}
+
+function ScriptOnce({
+  className,
+  children,
+  ...rest
+}: { children: string } & React.HTMLProps<HTMLScriptElement>) {
+  return (
+    <script
+      {...rest}
+      className={`tsr-script-once ${className || ''}`}
+      dangerouslySetInnerHTML={{
+        __html: children,
+      }}
+    />
+  )
 }

package/src/router.ts

@@ -483,7 +483,6 @@ export class Router<
   shouldViewTransition?: boolean = undefined
   latestLoadPromise: Promise<void> = Promise.resolve()
   subscribers = new Set<RouterListener<RouterEvent>>()
-  injectedHtml: Array<InjectedHtmlEntry> = []
   dehydratedData?: TDehydrated
   viewTransitionPromise?: ControlledPromise<true>
   manifest?: Manifest
@@ -2231,9 +2230,10 @@ export class Router<
     return match
   }
 
-  injectHtml = async (html: string | (() => Promise<string> | string)) => {
-    this.injectedHtml.push(html)
-  }
+  /**
+   * @deprecated Injecting HTML directly is no longer supported. Use the new <ScriptOnce /> component instead.
+   */
+  injectHtml = async (html: string | (() => Promise<string> | string)) => {}
 
   // We use a token -> weak map to keep track of deferred promises
   // that are registered on the server and need to be resolved
@@ -2250,55 +2250,6 @@ export class Router<
     return this.registeredDeferreds.get(token)
   }
 
-  /**
-   * @deprecated Please inject your own html using the `injectHtml` method
-   */
-  dehydrateData = <T>(key: any, getData: T | (() => Promise<T> | T)) => {
-    warning(
-      false,
-      `The dehydrateData method is deprecated. Please use the injectHtml method to inject your own data.`,
-    )
-
-    if (typeof document === 'undefined') {
-      const strKey = typeof key === 'string' ? key : JSON.stringify(key)
-
-      this.injectHtml(async () => {
-        const id = `__TSR_DEHYDRATED__${strKey}`
-        const data =
-          typeof getData === 'function' ? await (getData as any)() : getData
-        return `<script id='${id}' suppressHydrationWarning>
-  window["__TSR_DEHYDRATED__${escapeJSON(
-    strKey,
-  )}"] = ${JSON.stringify(this.options.transformer.stringify(data))}
-</script>`
-      })
-
-      return () => this.hydrateData<T>(key)
-    }
-
-    return () => undefined
-  }
-
-  /**
-   * @deprecated Please extract your own data from scripts injected using the `injectHtml` method
-   */
-  hydrateData = <T = unknown>(key: any) => {
-    warning(
-      false,
-      `The hydrateData method is deprecated. Please use the extractHtml method to extract your own data.`,
-    )
-
-    if (typeof document !== 'undefined') {
-      const strKey = typeof key === 'string' ? key : JSON.stringify(key)
-
-      return this.options.transformer.parse(
-        window[`__TSR_DEHYDRATED__${strKey}` as any] as unknown as string,
-      ) as T
-    }
-
-    return undefined
-  }
-
   dehydrate = (): DehydratedRouter => {
     const pickError =
       this.options.errorSerializer?.serialize ?? defaultSerializeError