@tanstack/router-core 1.121.34 → 1.121.39

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
+}

package/src/ssr/transformStreamWithRouter.ts

@@ -0,0 +1,258 @@
+import { ReadableStream } from 'node:stream/web'
+import { Readable } from 'node:stream'
+import { createControlledPromise } from '../utils'
+import type { AnyRouter } from '../router'
+
+export function transformReadableStreamWithRouter(
+  router: AnyRouter,
+  routerStream: ReadableStream,
+) {
+  return transformStreamWithRouter(router, routerStream)
+}
+
+export function transformPipeableStreamWithRouter(
+  router: AnyRouter,
+  routerStream: Readable,
+) {
+  return Readable.fromWeb(
+    transformStreamWithRouter(router, Readable.toWeb(routerStream)),
+  )
+}
+
+// regex pattern for matching closing body and html tags
+const patternBodyStart = /(<body)/
+const patternBodyEnd = /(<\/body>)/
+const patternHtmlEnd = /(<\/html>)/
+const patternHeadStart = /(<head.*?>)/
+// regex pattern for matching closing tags
+const patternClosingTag = /(<\/[a-zA-Z][\w:.-]*?>)/g
+
+const textDecoder = new TextDecoder()
+
+type ReadablePassthrough = {
+  stream: ReadableStream
+  write: (chunk: string) => void
+  end: (chunk?: string) => void
+  destroy: (error: unknown) => void
+  destroyed: boolean
+}
+
+function createPassthrough() {
+  let controller: ReadableStreamDefaultController<any>
+  const encoder = new TextEncoder()
+  const stream = new ReadableStream({
+    start(c) {
+      controller = c
+    },
+  })
+
+  const res: ReadablePassthrough = {
+    stream,
+    write: (chunk) => {
+      controller.enqueue(encoder.encode(chunk))
+    },
+    end: (chunk) => {
+      if (chunk) {
+        controller.enqueue(encoder.encode(chunk))
+      }
+      controller.close()
+      res.destroyed = true
+    },
+    destroy: (error) => {
+      controller.error(error)
+    },
+    destroyed: false,
+  }
+
+  return res
+}
+
+async function readStream(
+  stream: ReadableStream,
+  opts: {
+    onData?: (chunk: ReadableStreamReadValueResult<any>) => void
+    onEnd?: () => void
+    onError?: (error: unknown) => void
+  },
+) {
+  try {
+    const reader = stream.getReader()
+    let chunk
+    while (!(chunk = await reader.read()).done) {
+      opts.onData?.(chunk)
+    }
+    opts.onEnd?.()
+  } catch (error) {
+    opts.onError?.(error)
+  }
+}
+
+export function transformStreamWithRouter(
+  router: AnyRouter,
+  appStream: ReadableStream,
+) {
+  const finalPassThrough = createPassthrough()
+
+  let isAppRendering = true as boolean
+  let routerStreamBuffer = ''
+  let pendingClosingTags = ''
+  let bodyStarted = false as boolean
+  let headStarted = false as boolean
+  let leftover = ''
+  let leftoverHtml = ''
+
+  function getBufferedRouterStream() {
+    const html = routerStreamBuffer
+    routerStreamBuffer = ''
+    return html
+  }
+
+  function decodeChunk(chunk: unknown): string {
+    if (chunk instanceof Uint8Array) {
+      return textDecoder.decode(chunk)
+    }
+    return String(chunk)
+  }
+
+  const injectedHtmlDonePromise = createControlledPromise<void>()
+
+  let processingCount = 0
+
+  // Process any already-injected HTML
+  router.serverSsr!.injectedHtml.forEach((promise) => {
+    handleInjectedHtml(promise)
+  })
+
+  // Listen for any new injected HTML
+  const stopListeningToInjectedHtml = router.subscribe(
+    'onInjectedHtml',
+    (e) => {
+      handleInjectedHtml(e.promise)
+    },
+  )
+
+  function handleInjectedHtml(promise: Promise<string>) {
+    processingCount++
+
+    promise
+      .then((html) => {
+        if (!bodyStarted) {
+          routerStreamBuffer += html
+        } else {
+          finalPassThrough.write(html)
+        }
+      })
+      .catch(injectedHtmlDonePromise.reject)
+      .finally(() => {
+        processingCount--
+
+        if (!isAppRendering && processingCount === 0) {
+          stopListeningToInjectedHtml()
+          injectedHtmlDonePromise.resolve()
+        }
+      })
+  }
+
+  injectedHtmlDonePromise
+    .then(() => {
+      const finalHtml =
+        leftoverHtml + getBufferedRouterStream() + pendingClosingTags
+
+      finalPassThrough.end(finalHtml)
+    })
+    .catch((err) => {
+      console.error('Error reading routerStream:', err)
+      finalPassThrough.destroy(err)
+    })
+
+  // Transform the appStream
+  readStream(appStream, {
+    onData: (chunk) => {
+      const text = decodeChunk(chunk.value)
+
+      let chunkString = leftover + text
+      const bodyEndMatch = chunkString.match(patternBodyEnd)
+      const htmlEndMatch = chunkString.match(patternHtmlEnd)
+
+      if (!bodyStarted) {
+        const bodyStartMatch = chunkString.match(patternBodyStart)
+        if (bodyStartMatch) {
+          bodyStarted = true
+        }
+      }
+
+      if (!headStarted) {
+        const headStartMatch = chunkString.match(patternHeadStart)
+        if (headStartMatch) {
+          headStarted = true
+          const index = headStartMatch.index!
+          const headTag = headStartMatch[0]
+          const remaining = chunkString.slice(index + headTag.length)
+          finalPassThrough.write(
+            chunkString.slice(0, index) + headTag + getBufferedRouterStream(),
+          )
+          // make sure to only write `remaining` until the next closing tag
+          chunkString = remaining
+        }
+      }
+
+      if (!bodyStarted) {
+        finalPassThrough.write(chunkString)
+        leftover = ''
+        return
+      }
+
+      // If either the body end or html end is in the chunk,
+      // We need to get all of our data in asap
+      if (
+        bodyEndMatch &&
+        htmlEndMatch &&
+        bodyEndMatch.index! < htmlEndMatch.index!
+      ) {
+        const bodyEndIndex = bodyEndMatch.index!
+        pendingClosingTags = chunkString.slice(bodyEndIndex)
+
+        finalPassThrough.write(
+          chunkString.slice(0, bodyEndIndex) + getBufferedRouterStream(),
+        )
+
+        leftover = ''
+        return
+      }
+
+      let result: RegExpExecArray | null
+      let lastIndex = 0
+      while ((result = patternClosingTag.exec(chunkString)) !== null) {
+        lastIndex = result.index + result[0].length
+      }
+
+      if (lastIndex > 0) {
+        const processed =
+          chunkString.slice(0, lastIndex) +
+          getBufferedRouterStream() +
+          leftoverHtml
+
+        finalPassThrough.write(processed)
+        leftover = chunkString.slice(lastIndex)
+      } else {
+        leftover = chunkString
+        leftoverHtml += getBufferedRouterStream()
+      }
+    },
+    onEnd: () => {
+      // Mark the app as done rendering
+      isAppRendering = false
+
+      // If there are no pending promises, resolve the injectedHtmlDonePromise
+      if (processingCount === 0) {
+        injectedHtmlDonePromise.resolve()
+      }
+    },
+    onError: (error) => {
+      console.error('Error reading appStream:', error)
+      finalPassThrough.destroy(error)
+    },
+  })
+
+  return finalPassThrough.stream
+}

package/src/ssr/tsrScript.ts

@@ -0,0 +1,91 @@
+import type { ControllablePromise } from '../router'
+import type { TsrSsrGlobal } from './ssr-client'
+
+const __TSR_SSR__: TsrSsrGlobal = {
+  matches: [],
+  streamedValues: {},
+  initMatch: (match) => {
+    __TSR_SSR__.matches.push(match)
+
+    match.extracted?.forEach((ex) => {
+      if (ex.type === 'stream') {
+        let controller
+        ex.value = new ReadableStream({
+          start(c) {
+            controller = {
+              enqueue: (chunk: unknown) => {
+                try {
+                  c.enqueue(chunk)
+                } catch {}
+              },
+              close: () => {
+                try {
+                  c.close()
+                } catch {}
+              },
+            }
+          },
+        })
+        ex.value.controller = controller
+      } else {
+        let resolve: ControllablePromise['reject'] | undefined
+        let reject: ControllablePromise['reject'] | undefined
+
+        ex.value = new Promise((_resolve, _reject) => {
+          reject = _reject
+          resolve = _resolve
+        }) as ControllablePromise
+        ex.value.reject = reject!
+        ex.value.resolve = resolve!
+      }
+    })
+
+    return true
+  },
+  resolvePromise: ({ matchId, id, promiseState }) => {
+    const match = __TSR_SSR__.matches.find((m) => m.id === matchId)
+    if (match) {
+      const ex = match.extracted?.[id]
+      if (
+        ex &&
+        ex.type === 'promise' &&
+        ex.value &&
+        promiseState.status === 'success'
+      ) {
+        ex.value.resolve(promiseState.data)
+        return true
+      }
+    }
+    return false
+  },
+  injectChunk: ({ matchId, id, chunk }) => {
+    const match = __TSR_SSR__.matches.find((m) => m.id === matchId)
+
+    if (match) {
+      const ex = match.extracted?.[id]
+      if (ex && ex.type === 'stream' && ex.value?.controller) {
+        ex.value.controller.enqueue(new TextEncoder().encode(chunk.toString()))
+        return true
+      }
+    }
+    return false
+  },
+  closeStream: ({ matchId, id }) => {
+    const match = __TSR_SSR__.matches.find((m) => m.id === matchId)
+    if (match) {
+      const ex = match.extracted?.[id]
+      if (ex && ex.type === 'stream' && ex.value?.controller) {
+        ex.value.controller.close()
+        return true
+      }
+    }
+    return false
+  },
+  cleanScripts: () => {
+    document.querySelectorAll('.tsr-once').forEach((el) => {
+      el.remove()
+    })
+  },
+}
+
+window.__TSR_SSR__ = __TSR_SSR__

package/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+declare module '*?script-string' {
+  const content: string
+  export default content
+}