@tanstack/router-core 1.121.33 → 1.121.39

package/src/ssr/ssr-client.ts

@@ -0,0 +1,244 @@
+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 { Manifest } from '../manifest'
+import type { RouteContextOptions } from '../route'
+
+declare global {
+  interface Window {
+    __TSR_SSR__?: 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']
+}
+
+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>
+}
+
+export interface ResolvePromiseState {
+  matchId: string
+  id: number
+  promiseState: DeferredPromiseState<any>
+}
+
+export interface DehydratedRouter {
+  manifest: Manifest | undefined
+  dehydratedData: any
+  lastMatchId: string
+}
+
+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!',
+  )
+
+  const { manifest, dehydratedData, lastMatchId } = tsrSerializer.parse(
+    window.__TSR_SSR__.dehydrated,
+  ) as DehydratedRouter
+
+  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
+  const matches = router.matchRoutes(router.state.location)
+
+  // kick off loading the route chunks
+  const routeChunkPromise = Promise.all(
+    matches.map((match) => {
+      const route = router.looseRoutesById[match.routeId]!
+      return router.loadRouteChunk(route)
+    }),
+  )
+
+  // Right after hydration and before the first render, we need to rehydrate each match
+  // First step is to reyhdrate loaderData and __beforeLoadContext
+  matches.forEach((match) => {
+    const dehydratedMatch = window.__TSR_SSR__!.matches.find(
+      (d) => d.id === match.id,
+    )
+
+    if (!dehydratedMatch) {
+      return
+    }
+
+    Object.assign(match, dehydratedMatch)
+
+    // 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)
+    })
+
+    return match
+  })
+
+  router.__store.setState((s) => {
+    return {
+      ...s,
+      matches,
+    }
+  })
+
+  // Allow the user to handle custom hydration data
+  await router.options.hydrate?.(dehydratedData)
+
+  // now that all necessary data is hydrated:
+  // 1) fully reconstruct the route context
+  // 2) execute `head()` and `scripts()` for each match
+  await Promise.all(
+    router.state.matches.map(async (match) => {
+      const route = router.looseRoutesById[match.routeId]!
+
+      const parentMatch = router.state.matches[match.index - 1]
+      const parentContext = parentMatch?.context ?? router.options.context ?? {}
+
+      // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed
+      // so run it again and merge route context
+      const contextFnContext: RouteContextOptions<any, any, any, any> = {
+        deps: match.loaderDeps,
+        params: match.params,
+        context: parentContext,
+        location: router.state.location,
+        navigate: (opts: any) =>
+          router.navigate({ ...opts, _fromLocation: router.state.location }),
+        buildLocation: router.buildLocation,
+        cause: match.cause,
+        abortController: match.abortController,
+        preload: false,
+        matches,
+      }
+      match.__routeContext = route.options.context?.(contextFnContext) ?? {}
+
+      match.context = {
+        ...parentContext,
+        ...match.__routeContext,
+        ...match.__beforeLoadContext,
+      }
+
+      const assetContext = {
+        matches: router.state.matches,
+        match,
+        params: match.params,
+        loaderData: match.loaderData,
+      }
+      const headFnContent = await route.options.head?.(assetContext)
+
+      const scripts = await route.options.scripts?.(assetContext)
+
+      match.meta = headFnContent?.meta
+      match.links = headFnContent?.links
+      match.headScripts = headFnContent?.scripts
+      match.scripts = scripts
+    }),
+  )
+
+  if (matches[matches.length - 1]!.id !== lastMatchId) {
+    return await Promise.all([routeChunkPromise, router.load()])
+  }
+
+  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)
+  }
+}

package/src/ssr/ssr-server.ts

@@ -0,0 +1,345 @@
+import { default as warning } from 'tiny-warning'
+import jsesc from 'jsesc'
+import { TSR_DEFERRED_PROMISE, defer } from '../defer'
+import { isPlainArray, isPlainObject, pick } from '../utils'
+import { tsrSerializer } from '../serializer'
+import minifiedTsrBootStrapScript from './tsrScript?script-string'
+import type { DeferredPromise } from '../defer'
+import type {
+  ClientExtractedBaseEntry,
+  DehydratedRouter,
+  ResolvePromiseState,
+  SsrMatch,
+} from './ssr-client'
+import type { AnyRouter } from '../router'
+import type { Manifest } from '../manifest'
+import type { AnyRouteMatch } from '../Matches'
+
+export type ServerExtractedEntry =
+  | ServerExtractedStream
+  | ServerExtractedPromise
+
+export interface ServerExtractedBaseEntry extends ClientExtractedBaseEntry {
+  id: number
+  matchIndex: number
+}
+
+export interface ServerExtractedStream extends ServerExtractedBaseEntry {
+  type: 'stream'
+  stream: ReadableStream
+}
+
+export interface ServerExtractedPromise extends ServerExtractedBaseEntry {
+  type: 'promise'
+  promise: DeferredPromise<any>
+}
+
+export function attachRouterServerSsrUtils(
+  router: AnyRouter,
+  manifest: Manifest | undefined,
+) {
+  router.ssr = {
+    manifest,
+    serializer: tsrSerializer,
+  }
+
+  router.serverSsr = {
+    injectedHtml: [],
+    streamedKeys: new Set(),
+    injectHtml: (getHtml) => {
+      const promise = Promise.resolve().then(getHtml)
+      router.serverSsr!.injectedHtml.push(promise)
+      router.emit({
+        type: 'onInjectedHtml',
+        promise,
+      })
+
+      return promise.then(() => {})
+    },
+    injectScript: (getScript, opts) => {
+      return router.serverSsr!.injectHtml(async () => {
+        const script = await getScript()
+        return `<script class='tsr-once'>${script}${
+          process.env.NODE_ENV === 'development' && (opts?.logScript ?? true)
+            ? `; console.info(\`Injected From Server:
+${jsesc(script, { quotes: 'backtick' })}\`)`
+            : ''
+        }; if (typeof __TSR_SSR__ !== 'undefined') __TSR_SSR__.cleanScripts()</script>`
+      })
+    },
+    streamValue: (key, value) => {
+      warning(
+        !router.serverSsr!.streamedKeys.has(key),
+        'Key has already been streamed: ' + key,
+      )
+
+      router.serverSsr!.streamedKeys.add(key)
+      router.serverSsr!.injectScript(
+        () =>
+          `__TSR_SSR__.streamedValues['${key}'] = { value: ${jsesc(
+            router.ssr!.serializer.stringify(value),
+            {
+              isScriptContext: true,
+              wrap: true,
+              json: true,
+            },
+          )}}`,
+      )
+    },
+    onMatchSettled,
+  }
+
+  router.serverSsr.injectScript(() => minifiedTsrBootStrapScript, {
+    logScript: false,
+  })
+}
+
+export function dehydrateRouter(router: AnyRouter) {
+  const dehydratedRouter: DehydratedRouter = {
+    manifest: router.ssr!.manifest,
+    dehydratedData: router.options.dehydrate?.(),
+    lastMatchId:
+      router.state.matches[router.state.matches.length - 1]?.id || '',
+  }
+
+  router.serverSsr!.injectScript(
+    () =>
+      `__TSR_SSR__.dehydrated = ${jsesc(
+        router.ssr!.serializer.stringify(dehydratedRouter),
+        {
+          isScriptContext: true,
+          wrap: true,
+          json: true,
+        },
+      )}`,
+  )
+}
+
+export function extractAsyncLoaderData(
+  loaderData: any,
+  ctx: {
+    match: AnyRouteMatch
+    router: AnyRouter
+  },
+) {
+  const extracted: Array<ServerExtractedEntry> = []
+
+  const replaced = replaceBy(loaderData, (value, path) => {
+    // If it's a stream, we need to tee it so we can read it multiple times
+    if (value instanceof ReadableStream) {
+      const [copy1, copy2] = value.tee()
+      const entry: ServerExtractedStream = {
+        type: 'stream',
+        path,
+        id: extracted.length,
+        matchIndex: ctx.match.index,
+        stream: copy2,
+      }
+
+      extracted.push(entry)
+      return copy1
+    } else if (value instanceof Promise) {
+      const deferredPromise = defer(value)
+      const entry: ServerExtractedPromise = {
+        type: 'promise',
+        path,
+        id: extracted.length,
+        matchIndex: ctx.match.index,
+        promise: deferredPromise,
+      }
+      extracted.push(entry)
+    }
+
+    return value
+  })
+
+  return { replaced, extracted }
+}
+
+export function onMatchSettled(opts: {
+  router: AnyRouter
+  match: AnyRouteMatch
+}) {
+  const { router, match } = opts
+
+  let extracted: Array<ServerExtractedEntry> | undefined = undefined
+  let serializedLoaderData: any = undefined
+  if (match.loaderData !== undefined) {
+    const result = extractAsyncLoaderData(match.loaderData, {
+      router,
+      match,
+    })
+    match.loaderData = result.replaced
+    extracted = result.extracted
+    serializedLoaderData = extracted.reduce(
+      (acc: any, entry: ServerExtractedEntry) => {
+        return deepImmutableSetByPath(acc, ['temp', ...entry.path], undefined)
+      },
+      { temp: result.replaced },
+    ).temp
+  }
+
+  const initCode = `__TSR_SSR__.initMatch(${jsesc(
+    {
+      id: match.id,
+      __beforeLoadContext: router.ssr!.serializer.stringify(
+        match.__beforeLoadContext,
+      ),
+      loaderData: router.ssr!.serializer.stringify(serializedLoaderData),
+      error: router.ssr!.serializer.stringify(match.error),
+      extracted: extracted?.map((entry) => pick(entry, ['type', 'path'])),
+      updatedAt: match.updatedAt,
+      status: match.status,
+    } satisfies SsrMatch,
+    {
+      isScriptContext: true,
+      wrap: true,
+      json: true,
+    },
+  )})`
+
+  router.serverSsr!.injectScript(() => initCode)
+
+  if (extracted) {
+    extracted.forEach((entry) => {
+      if (entry.type === 'promise') return injectPromise(entry)
+      return injectStream(entry)
+    })
+  }
+
+  function injectPromise(entry: ServerExtractedPromise) {
+    router.serverSsr!.injectScript(async () => {
+      await entry.promise
+
+      return `__TSR_SSR__.resolvePromise(${jsesc(
+        {
+          matchId: match.id,
+          id: entry.id,
+          promiseState: entry.promise[TSR_DEFERRED_PROMISE],
+        } satisfies ResolvePromiseState,
+        {
+          isScriptContext: true,
+          wrap: true,
+          json: true,
+        },
+      )})`
+    })
+  }
+
+  function injectStream(entry: ServerExtractedStream) {
+    // Inject a promise that resolves when the stream is done
+    // We do this to keep the stream open until we're done
+    router.serverSsr!.injectHtml(async () => {
+      //
+      try {
+        const reader = entry.stream.getReader()
+        let chunk: ReadableStreamReadResult<any> | null = null
+        while (!(chunk = await reader.read()).done) {
+          if (chunk.value) {
+            const code = `__TSR_SSR__.injectChunk(${jsesc(
+              {
+                matchId: match.id,
+                id: entry.id,
+                chunk: chunk.value,
+              },
+              {
+                isScriptContext: true,
+                wrap: true,
+                json: true,
+              },
+            )})`
+
+            router.serverSsr!.injectScript(() => code)
+          }
+        }
+
+        router.serverSsr!.injectScript(
+          () =>
+            `__TSR_SSR__.closeStream(${jsesc(
+              {
+                matchId: match.id,
+                id: entry.id,
+              },
+              {
+                isScriptContext: true,
+                wrap: true,
+                json: true,
+              },
+            )})`,
+        )
+      } catch (err) {
+        console.error('stream read error', err)
+      }
+
+      return ''
+    })
+  }
+}
+
+function deepImmutableSetByPath<T>(obj: T, path: Array<string>, value: any): T {
+  // immutable set by path retaining array and object references
+  if (path.length === 0) {
+    return value
+  }
+
+  const [key, ...rest] = path
+
+  if (Array.isArray(obj)) {
+    return obj.map((item, i) => {
+      if (i === Number(key)) {
+        return deepImmutableSetByPath(item, rest, value)
+      }
+      return item
+    }) as T
+  }
+
+  if (isPlainObject(obj)) {
+    return {
+      ...obj,
+      [key!]: deepImmutableSetByPath((obj as any)[key!], rest, value),
+    }
+  }
+
+  return obj
+}
+
+export function replaceBy<T>(
+  obj: T,
+  cb: (value: any, path: Array<string>) => any,
+  path: Array<string> = [],
+): T {
+  if (isPlainArray(obj)) {
+    return obj.map((value, i) => replaceBy(value, cb, [...path, `${i}`])) as any
+  }
+
+  if (isPlainObject(obj)) {
+    // Do not allow objects with illegal
+    const newObj: any = {}
+
+    for (const key in obj) {
+      newObj[key] = replaceBy(obj[key], cb, [...path, key])
+    }
+
+    return newObj
+  }
+
+  // // Detect classes, functions, and other non-serializable objects
+  // // and return undefined. Exclude some known types that are serializable
+  // if (
+  //   typeof obj === 'function' ||
+  //   (typeof obj === 'object' &&
+  //     ![Object, Promise, ReadableStream].includes((obj as any)?.constructor))
+  // ) {
+  //   console.info(obj)
+  //   warning(false, `Non-serializable value ☝️ found at ${path.join('.')}`)
+  //   return undefined as any
+  // }
+
+  const newObj = cb(obj, path)
+
+  if (newObj !== obj) {
+    return newObj
+  }
+
+  return obj
+}