@tanstack/router-core 1.126.2 → 1.127.2

package/src/router.ts

@@ -46,7 +46,6 @@ import type {
   Updater,
 } from './utils'
 import type { ParsedLocation } from './location'
-import type { DeferredPromiseState } from './defer'
 import type {
   AnyContext,
   AnyRoute,
@@ -78,7 +77,6 @@ import type {
   NavigateFn,
 } from './RouterProvider'
 import type { Manifest } from './manifest'
-import type { TsrSerializer } from './serializer'
 import type { AnySchema, AnyValidator } from './validators'
 import type { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
 import type { NotFoundError } from './not-found'
@@ -288,7 +286,7 @@ export interface RouterOptions<
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#dehydrate-method)
    * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/guide/external-data-loading#critical-dehydrationhydration)
    */
-  dehydrate?: () => TDehydrated
+  dehydrate?: () => Awaitable<TDehydrated>
   /**
    * A function that will be called when the router is hydrated.
    *
@@ -452,7 +450,7 @@ type NavigationEventInfo = {
   hashChanged: boolean
 }
 
-export type RouterEvents = {
+export interface RouterEvents {
   onBeforeNavigate: {
     type: 'onBeforeNavigate'
   } & NavigationEventInfo
@@ -468,10 +466,6 @@ export type RouterEvents = {
   onBeforeRouteMount: {
     type: 'onBeforeRouteMount'
   } & NavigationEventInfo
-  onInjectedHtml: {
-    type: 'onInjectedHtml'
-    promise: Promise<string>
-  }
   onRendered: {
     type: 'onRendered'
   } & NavigationEventInfo
@@ -486,6 +480,11 @@ export type RouterListener<TRouterEvent extends RouterEvent> = {
   fn: ListenerFn<TRouterEvent>
 }
 
+export type SubscribeFn = <TType extends keyof RouterEvents>(
+  eventType: TType,
+  fn: ListenerFn<RouterEvents[TType]>,
+) => () => void
+
 export interface MatchRoutesOpts {
   preload?: boolean
   throwOnError?: boolean
@@ -523,11 +522,6 @@ export type RouterConstructorOptions<
 > &
   RouterContextOptions<TRouteTree>
 
-export interface RouterErrorSerializer<TSerializedError> {
-  serialize: (err: unknown) => TSerializedError
-  deserialize: (err: TSerializedError) => unknown
-}
-
 export type PreloadRouteFn<
   TRouteTree extends AnyRoute,
   TTrailingSlashOption extends TrailingSlashOption,
@@ -624,11 +618,6 @@ export type CommitLocationFn = ({
 
 export type StartTransitionFn = (fn: () => void) => void
 
-export type SubscribeFn = <TType extends keyof RouterEvents>(
-  eventType: TType,
-  fn: ListenerFn<RouterEvents[TType]>,
-) => () => void
-
 export interface MatchRoutesFn {
   (
     pathname: string,
@@ -658,16 +647,16 @@ export type ClearCacheFn<TRouter extends AnyRouter> = (opts?: {
   filter?: (d: MakeRouteMatchUnion<TRouter>) => boolean
 }) => void
 
-export interface ServerSrr {
+export interface ServerSsr {
   injectedHtml: Array<InjectedHtmlEntry>
   injectHtml: (getHtml: () => string | Promise<string>) => Promise<void>
   injectScript: (
     getScript: () => string | Promise<string>,
     opts?: { logScript?: boolean },
   ) => Promise<void>
-  streamValue: (key: string, value: any) => void
-  streamedKeys: Set<string>
-  onMatchSettled: (opts: { router: AnyRouter; match: AnyRouteMatch }) => any
+  isDehydrated: () => boolean
+  onRenderFinished: (listener: () => void) => void
+  dehydrate: () => Promise<void>
 }
 
 export type AnyRouterWithContext<TContext> = RouterCore<
@@ -710,29 +699,6 @@ export function defaultSerializeError(err: unknown) {
     data: err,
   }
 }
-export interface ExtractedBaseEntry {
-  dataType: '__beforeLoadContext' | 'loaderData'
-  type: string
-  path: Array<string>
-  id: number
-  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>>
-}
 
 export type TrailingSlashOption = 'always' | 'never' | 'preserve'
 
@@ -838,7 +804,7 @@ export class RouterCore<
     })
 
     if (typeof document !== 'undefined') {
-      ;(window as any).__TSR_ROUTER__ = this
+      self.__TSR_ROUTER__ = this
     }
   }
 
@@ -1293,7 +1259,7 @@ export class RouterCore<
           error: undefined,
           paramsError: parseErrors[index],
           __routeContext: {},
-          __beforeLoadContext: {},
+          __beforeLoadContext: undefined,
           context: {},
           abortController: new AbortController(),
           fetchCount: 0,
@@ -2188,10 +2154,6 @@ export class RouterCore<
           this._handleNotFound(matches, err, {
             updateMatch,
           })
-          this.serverSsr?.onMatchSettled({
-            router: this,
-            match: this.getMatch(match.id)!,
-          })
           throw err
         }
       }
@@ -2449,8 +2411,7 @@ export class RouterCore<
                   }
 
                   const beforeLoadContext =
-                    (await route.options.beforeLoad?.(beforeLoadFnContext)) ??
-                    {}
+                    await route.options.beforeLoad?.(beforeLoadFnContext)
 
                   if (
                     isRedirect(beforeLoadContext) ||
@@ -2543,10 +2504,6 @@ export class RouterCore<
                         ...prev,
                         ...head,
                       }))
-                      this.serverSsr?.onMatchSettled({
-                        router: this,
-                        match: this.getMatch(matchId)!,
-                      })
                       return this.getMatch(matchId)!
                     } else {
                       await potentialPendingMinPromise()
@@ -2708,11 +2665,6 @@ export class RouterCore<
                             ...head,
                           }))
                         }
-
-                        this.serverSsr?.onMatchSettled({
-                          router: this,
-                          match: this.getMatch(matchId)!,
-                        })
                       } catch (err) {
                         const head = await executeHead()
 
@@ -2773,10 +2725,6 @@ export class RouterCore<
                         ...prev,
                         ...head,
                       }))
-                      this.serverSsr?.onMatchSettled({
-                        router: this,
-                        match: this.getMatch(matchId)!,
-                      })
                     }
                   }
                   if (!loaderIsRunningAsync) {
@@ -3076,24 +3024,9 @@ export class RouterCore<
 
   ssr?: {
     manifest: Manifest | undefined
-    serializer: TsrSerializer
   }
 
-  serverSsr?: {
-    injectedHtml: Array<InjectedHtmlEntry>
-    injectHtml: (getHtml: () => string | Promise<string>) => Promise<void>
-    injectScript: (
-      getScript: () => string | Promise<string>,
-      opts?: { logScript?: boolean },
-    ) => Promise<void>
-    streamValue: (key: string, value: any) => void
-    streamedKeys: Set<string>
-    onMatchSettled: (opts: { router: AnyRouter; match: AnyRouteMatch }) => any
-  }
-
-  clientSsr?: {
-    getStreamedValue: <T>(key: string) => T | undefined
-  }
+  serverSsr?: ServerSsr
 
   _handleNotFound = (
     matches: Array<AnyRouteMatch>,

package/src/ssr/client.ts

@@ -2,14 +2,4 @@ export { mergeHeaders, headersInitToObject } from './headers'
 export { json } from './json'
 export type { JsonResponse } from './json'
 export { hydrate } from './ssr-client'
-export type {
-  DehydratedRouter,
-  ClientExtractedBaseEntry,
-  TsrSsrGlobal,
-  ClientExtractedEntry,
-  SsrMatch,
-  ClientExtractedPromise,
-  ClientExtractedStream,
-  ResolvePromiseState,
-} from './ssr-client'
-export { tsrSerializer } from '../serializer'
+export * from './ssr-client'

package/src/ssr/createRequestHandler.ts

@@ -1,6 +1,6 @@
 import { createMemoryHistory } from '@tanstack/history'
 import { mergeHeaders } from './headers'
-import { attachRouterServerSsrUtils, dehydrateRouter } from './ssr-server'
+import { attachRouterServerSsrUtils } from './ssr-server'
 import type { HandlerCallback } from './handlerCallback'
 import type { AnyRouter } from '../router'
 import type { Manifest } from '../manifest'
@@ -39,7 +39,7 @@ export function createRequestHandler<TRouter extends AnyRouter>({
 
     await router.load()
 
-    dehydrateRouter(router)
+    await router.serverSsr?.dehydrate()
 
     const responseHeaders = getRequestHeaders({
       router,

package/src/ssr/seroval-plugins.ts

@@ -0,0 +1,43 @@
+import { createPlugin } from 'seroval'
+import type { SerovalNode } from 'seroval'
+
+interface ErrorNode {
+  message: SerovalNode
+}
+
+/**
+ * this plugin serializes only the `message` part of an Error
+ * this helps with serializing e.g. a ZodError which has functions attached that cannot be serialized
+ */
+export const ShallowErrorPlugin = /* @__PURE__ */ createPlugin<
+  Error,
+  ErrorNode
+>({
+  tag: 'tanstack-start:seroval-plugins/Error',
+  test(value) {
+    return value instanceof Error
+  },
+  parse: {
+    sync(value, ctx) {
+      return {
+        message: ctx.parse(value.message),
+      }
+    },
+    async async(value, ctx) {
+      return {
+        message: await ctx.parse(value.message),
+      }
+    },
+    stream(value, ctx) {
+      return {
+        message: ctx.parse(value.message),
+      }
+    },
+  },
+  serialize(node, ctx) {
+    return 'new Error(' + ctx.serialize(node.message) + ')'
+  },
+  deserialize(node, ctx) {
+    return new Error(ctx.deserialize(node.message) as string)
+  },
+})

package/src/ssr/server.ts

@@ -7,17 +7,4 @@ export {
   transformStreamWithRouter,
   transformReadableStreamWithRouter,
 } from './transformStreamWithRouter'
-export {
-  attachRouterServerSsrUtils,
-  dehydrateRouter,
-  extractAsyncLoaderData,
-  onMatchSettled,
-  replaceBy,
-} from './ssr-server'
-export type {
-  ServerExtractedBaseEntry,
-  ServerExtractedEntry,
-  ServerExtractedPromise,
-  ServerExtractedStream,
-} from './ssr-server'
-export * from './tsrScript'
+export { attachRouterServerSsrUtils } from './ssr-server'

package/src/ssr/ssr-client.ts

@@ -1,114 +1,62 @@
 import invariant from 'tiny-invariant'
-import { isPlainObject } from '../utils'
-import { tsrSerializer } from '../serializer'
-import type { DeferredPromiseState } from '../defer'
 import type { MakeRouteMatch } from '../Matches'
-import type { AnyRouter, ControllablePromise } from '../router'
+import type { AnyRouter } from '../router'
 import type { Manifest } from '../manifest'
 import type { RouteContextOptions } from '../route'
+import type { GLOBAL_TSR } from './ssr-server'
 
 declare global {
   interface Window {
-    __TSR_SSR__?: TsrSsrGlobal
+    [GLOBAL_TSR]?: TsrSsrGlobal
   }
 }
 
 export interface TsrSsrGlobal {
-  matches: Array<SsrMatch>
-  streamedValues: Record<
-    string,
-    {
-      value: any
-      parsed: any
-    }
-  >
-  cleanScripts: () => void
-  dehydrated?: any
-  initMatch: (match: SsrMatch) => void
-  resolvePromise: (opts: {
-    matchId: string
-    id: number
-    promiseState: DeferredPromiseState<any>
-  }) => void
-  injectChunk: (opts: { matchId: string; id: number; chunk: string }) => void
-  closeStream: (opts: { matchId: string; id: number }) => void
-}
-
-export interface SsrMatch {
-  id: string
-  __beforeLoadContext: string
-  loaderData?: string
-  error?: string
-  extracted?: Array<ClientExtractedEntry>
-  updatedAt: MakeRouteMatch['updatedAt']
-  status: MakeRouteMatch['status']
-  ssr?: boolean | 'data-only'
+  router?: DehydratedRouter
+  // clean scripts, shortened since this is sent for each streamed script
+  c: () => void
 }
 
-export type ClientExtractedEntry =
-  | ClientExtractedStream
-  | ClientExtractedPromise
-
-export interface ClientExtractedPromise extends ClientExtractedBaseEntry {
-  type: 'promise'
-  value?: ControllablePromise<any>
-}
-
-export interface ClientExtractedStream extends ClientExtractedBaseEntry {
-  type: 'stream'
-  value?: ReadableStream & { controller?: ReadableStreamDefaultController }
-}
-
-export interface ClientExtractedBaseEntry {
-  type: string
-  path: Array<string>
+function hydrateMatch(
+  deyhydratedMatch: DehydratedMatch,
+): Partial<MakeRouteMatch> {
+  return {
+    id: deyhydratedMatch.i,
+    __beforeLoadContext: deyhydratedMatch.b,
+    loaderData: deyhydratedMatch.l,
+    status: deyhydratedMatch.s,
+    ssr: deyhydratedMatch.ssr,
+    updatedAt: deyhydratedMatch.u,
+    error: deyhydratedMatch.e,
+  }
 }
-
-export interface ResolvePromiseState {
-  matchId: string
-  id: number
-  promiseState: DeferredPromiseState<any>
+export interface DehydratedMatch {
+  i: MakeRouteMatch['id']
+  b?: MakeRouteMatch['__beforeLoadContext']
+  l?: MakeRouteMatch['loaderData']
+  e?: MakeRouteMatch['error']
+  u: MakeRouteMatch['updatedAt']
+  s: MakeRouteMatch['status']
+  ssr?: MakeRouteMatch['ssr']
 }
 
 export interface DehydratedRouter {
   manifest: Manifest | undefined
-  dehydratedData: any
-  lastMatchId: string
+  dehydratedData?: any
+  lastMatchId?: string
+  matches: Array<DehydratedMatch>
 }
 
 export async function hydrate(router: AnyRouter): Promise<any> {
   invariant(
-    window.__TSR_SSR__?.dehydrated,
-    'Expected to find a dehydrated data on window.__TSR_SSR__.dehydrated... but we did not. Please file an issue!',
+    window.$_TSR?.router,
+    'Expected to find a dehydrated data on window.$_TSR.router, but we did not. Please file an issue!',
   )
 
-  const { manifest, dehydratedData, lastMatchId } = tsrSerializer.parse(
-    window.__TSR_SSR__.dehydrated,
-  ) as DehydratedRouter
+  const { manifest, dehydratedData, lastMatchId } = window.$_TSR.router
 
   router.ssr = {
     manifest,
-    serializer: tsrSerializer,
-  }
-
-  router.clientSsr = {
-    getStreamedValue: <T>(key: string): T | undefined => {
-      if (router.isServer) {
-        return undefined
-      }
-
-      const streamedValue = window.__TSR_SSR__?.streamedValues[key]
-
-      if (!streamedValue) {
-        return
-      }
-
-      if (!streamedValue.parsed) {
-        streamedValue.parsed = router.ssr!.serializer.parse(streamedValue.value)
-      }
-
-      return streamedValue.parsed
-    },
   }
 
   // Hydrate the router state
@@ -126,16 +74,15 @@ export async function hydrate(router: AnyRouter): Promise<any> {
   // First step is to reyhdrate loaderData and __beforeLoadContext
   let firstNonSsrMatchIndex: number | undefined = undefined
   matches.forEach((match) => {
-    const dehydratedMatch = window.__TSR_SSR__!.matches.find(
-      (d) => d.id === match.id,
+    const dehydratedMatch = window.$_TSR!.router!.matches.find(
+      (d) => d.i === match.id,
     )
-
     if (!dehydratedMatch) {
       Object.assign(match, { dehydrated: false, ssr: false })
       return
     }
 
-    Object.assign(match, dehydratedMatch)
+    Object.assign(match, hydrateMatch(dehydratedMatch))
 
     if (match.ssr === false) {
       match._dehydrated = false
@@ -153,30 +100,6 @@ export async function hydrate(router: AnyRouter): Promise<any> {
     if (match.ssr === false) {
       return
     }
-
-    // Handle beforeLoadContext
-    if (dehydratedMatch.__beforeLoadContext) {
-      match.__beforeLoadContext = router.ssr!.serializer.parse(
-        dehydratedMatch.__beforeLoadContext,
-      ) as any
-    }
-
-    // Handle loaderData
-    if (dehydratedMatch.loaderData) {
-      match.loaderData = router.ssr!.serializer.parse(
-        dehydratedMatch.loaderData,
-      )
-    }
-
-    // Handle error
-    if (dehydratedMatch.error) {
-      match.error = router.ssr!.serializer.parse(dehydratedMatch.error)
-    }
-
-    // Handle extracted
-    ;(match as unknown as SsrMatch).extracted?.forEach((ex) => {
-      deepMutableSetByPath(match, ['loaderData', ...ex.path], ex.value)
-    })
   })
 
   router.__store.setState((s) => {
@@ -271,21 +194,5 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       })
     })
   }
-
   return routeChunkPromise
 }
-
-function deepMutableSetByPath<T>(obj: T, path: Array<string>, value: any) {
-  // mutable set by path retaining array and object references
-  if (path.length === 1) {
-    ;(obj as any)[path[0]!] = value
-  }
-
-  const [key, ...rest] = path
-
-  if (Array.isArray(obj)) {
-    deepMutableSetByPath(obj[Number(key)], rest, value)
-  } else if (isPlainObject(obj)) {
-    deepMutableSetByPath((obj as any)[key!], rest, value)
-  }
-}