@tanstack/router-core 1.125.4 → 1.127.0

package/src/ssr/ssr-server.ts

@@ -1,37 +1,50 @@
-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 { crossSerializeStream, getCrossReferenceHeader } from 'seroval'
+import { ReadableStreamPlugin } from 'seroval-plugins/web'
+import invariant from 'tiny-invariant'
+import { createControlledPromise } from '../utils'
 import minifiedTsrBootStrapScript from './tsrScript?script-string'
-import type { DeferredPromise } from '../defer'
-import type {
-  ClientExtractedBaseEntry,
-  DehydratedRouter,
-  ResolvePromiseState,
-  SsrMatch,
-} from './ssr-client'
+import { ShallowErrorPlugin } from './seroval-plugins'
 import type { AnyRouter } from '../router'
-import type { Manifest } from '../manifest'
+import type { DehydratedMatch } from './ssr-client'
+import type { DehydratedRouter } from './client'
 import type { AnyRouteMatch } from '../Matches'
+import type { Manifest } from '../manifest'
 
-export type ServerExtractedEntry =
-  | ServerExtractedStream
-  | ServerExtractedPromise
-
-export interface ServerExtractedBaseEntry extends ClientExtractedBaseEntry {
-  id: number
-  matchIndex: number
+declare module '../router' {
+  interface ServerSsr {
+    setRenderFinished: () => void
+  }
+  interface RouterEvents {
+    onInjectedHtml: {
+      type: 'onInjectedHtml'
+      promise: Promise<string>
+    }
+  }
 }
 
-export interface ServerExtractedStream extends ServerExtractedBaseEntry {
-  type: 'stream'
-  stream: ReadableStream
-}
+export const GLOBAL_TSR = '$_TSR'
+const SCOPE_ID = 'tsr'
+
+export function dehydrateMatch(match: AnyRouteMatch): DehydratedMatch {
+  const dehydratedMatch: DehydratedMatch = {
+    i: match.id,
+    u: match.updatedAt,
+    s: match.status,
+  }
+
+  const properties = [
+    ['__beforeLoadContext', 'b'],
+    ['loaderData', 'l'],
+    ['error', 'e'],
+    ['ssr', 'ssr'],
+  ] as const
 
-export interface ServerExtractedPromise extends ServerExtractedBaseEntry {
-  type: 'promise'
-  promise: DeferredPromise<any>
+  for (const [key, shorthand] of properties) {
+    if (match[key] !== undefined) {
+      dehydratedMatch[shorthand] = match[key]
+    }
+  }
+  return dehydratedMatch
 }
 
 export function attachRouterServerSsrUtils(
@@ -40,12 +53,22 @@ export function attachRouterServerSsrUtils(
 ) {
   router.ssr = {
     manifest,
-    serializer: tsrSerializer,
   }
+  const serializationRefs = new Map<unknown, number>()
+
+  let initialScriptSent = false
+  const getInitialScript = () => {
+    if (initialScriptSent) {
+      return ''
+    }
+    initialScriptSent = true
+    return `${getCrossReferenceHeader(SCOPE_ID)};${minifiedTsrBootStrapScript};`
+  }
+  let _dehydrated = false
+  const listeners: Array<() => void> = []
 
   router.serverSsr = {
     injectedHtml: [],
-    streamedKeys: new Set(),
     injectHtml: (getHtml) => {
       const promise = Promise.resolve().then(getHtml)
       router.serverSsr!.injectedHtml.push(promise)
@@ -56,291 +79,50 @@ export function attachRouterServerSsrUtils(
 
       return promise.then(() => {})
     },
-    injectScript: (getScript, opts) => {
+    injectScript: (getScript) => {
       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>`
+        return `<script class='$tsr'>${getInitialScript()}${script};if (typeof $_TSR !== 'undefined') $_TSR.c()</script>`
       })
     },
-    streamValue: (key, value) => {
-      warning(
-        !router.serverSsr!.streamedKeys.has(key),
-        'Key has already been streamed: ' + key,
-      )
+    dehydrate: async () => {
+      invariant(!_dehydrated, 'router is already dehydrated!')
+      const matches = router.state.matches.map(dehydrateMatch)
 
-      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,
+      const dehydratedRouter: DehydratedRouter = {
+        manifest: router.ssr!.manifest,
+        matches,
       }
-
-      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,
+      const lastMatchId =
+        router.state.matches[router.state.matches.length - 1]?.id
+      if (lastMatchId) {
+        dehydratedRouter.lastMatchId = lastMatchId
       }
-      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,
-      ssr: match.ssr,
-    } 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,
+      dehydratedRouter.dehydratedData = await router.options.dehydrate?.()
+      _dehydrated = true
+
+      const p = createControlledPromise<string>()
+      crossSerializeStream(dehydratedRouter, {
+        refs: serializationRefs,
+        // TODO make plugins configurable
+        plugins: [ReadableStreamPlugin, ShallowErrorPlugin],
+        onSerialize: (data, initial) => {
+          const serialized = initial ? `${GLOBAL_TSR}["router"]=` + data : data
+          router.serverSsr!.injectScript(() => serialized)
         },
-      )})`
-    })
-  }
-
-  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
+        scopeId: SCOPE_ID,
+        onDone: () => p.resolve(''),
+        onError: (err) => p.reject(err),
+      })
+      // make sure the stream is kept open until the promise is resolved
+      router.serverSsr!.injectHtml(() => p)
+    },
+    isDehydrated() {
+      return _dehydrated
+    },
+    onRenderFinished: (listener) => listeners.push(listener),
+    setRenderFinished: () => {
+      listeners.forEach((l) => l())
+    },
   }
-
-  return obj
 }

package/src/ssr/transformStreamWithRouter.ts

@@ -242,6 +242,7 @@ export function transformStreamWithRouter(
     onEnd: () => {
       // Mark the app as done rendering
       isAppRendering = false
+      router.serverSsr!.setRenderFinished()
 
       // If there are no pending promises, resolve the injectedHtmlDonePromise
       if (processingCount === 0) {

package/src/ssr/tsrScript.ts

@@ -1,91 +1,7 @@
-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()
+self.$_TSR = {
+  c: () => {
+    document.querySelectorAll('.\\$tsr').forEach((o) => {
+      o.remove()
     })
   },
 }
-
-window.__TSR_SSR__ = __TSR_SSR__

package/dist/cjs/serializer.cjs

@@ -1,146 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils = require("./utils.cjs");
-const tsrSerializer = {
-  stringify: (value) => JSON.stringify(value, function replacer(key, val) {
-    const ogVal = this[key];
-    const serializer = serializers.find((t) => t.stringifyCondition(ogVal));
-    if (serializer) {
-      return serializer.stringify(ogVal);
-    }
-    return val;
-  }),
-  parse: (value) => JSON.parse(value, function parser(key, val) {
-    const ogVal = this[key];
-    if (utils.isPlainObject(ogVal)) {
-      const serializer = serializers.find((t) => t.parseCondition(ogVal));
-      if (serializer) {
-        return serializer.parse(ogVal);
-      }
-    }
-    return val;
-  }),
-  encode: (value) => {
-    if (Array.isArray(value)) {
-      return value.map((v) => tsrSerializer.encode(v));
-    }
-    if (utils.isPlainObject(value)) {
-      return Object.fromEntries(
-        Object.entries(value).map(([key, v]) => [key, tsrSerializer.encode(v)])
-      );
-    }
-    const serializer = serializers.find((t) => t.stringifyCondition(value));
-    if (serializer) {
-      return serializer.stringify(value);
-    }
-    return value;
-  },
-  decode: (value) => {
-    if (utils.isPlainObject(value)) {
-      const serializer = serializers.find((t) => t.parseCondition(value));
-      if (serializer) {
-        return serializer.parse(value);
-      }
-    }
-    if (Array.isArray(value)) {
-      return value.map((v) => tsrSerializer.decode(v));
-    }
-    if (utils.isPlainObject(value)) {
-      return Object.fromEntries(
-        Object.entries(value).map(([key, v]) => [key, tsrSerializer.decode(v)])
-      );
-    }
-    return value;
-  }
-};
-const createSerializer = (key, check, toValue, fromValue) => ({
-  key,
-  stringifyCondition: check,
-  stringify: (value) => ({ [`$${key}`]: toValue(value) }),
-  parseCondition: (value) => Object.hasOwn(value, `$${key}`),
-  parse: (value) => fromValue(value[`$${key}`])
-});
-const serializers = [
-  createSerializer(
-    // Key
-    "undefined",
-    // Check
-    (v) => v === void 0,
-    // To
-    () => 0,
-    // From
-    () => void 0
-  ),
-  createSerializer(
-    // Key
-    "date",
-    // Check
-    (v) => v instanceof Date,
-    // To
-    (v) => v.toISOString(),
-    // From
-    (v) => new Date(v)
-  ),
-  createSerializer(
-    // Key
-    "error",
-    // Check
-    (v) => v instanceof Error,
-    // To
-    (v) => ({
-      ...v,
-      message: v.message,
-      stack: process.env.NODE_ENV === "development" ? v.stack : void 0,
-      cause: v.cause
-    }),
-    // From
-    (v) => Object.assign(new Error(v.message), v)
-  ),
-  createSerializer(
-    // Key
-    "formData",
-    // Check
-    (v) => v instanceof FormData,
-    // To
-    (v) => {
-      const entries = {};
-      v.forEach((value, key) => {
-        const entry = entries[key];
-        if (entry !== void 0) {
-          if (Array.isArray(entry)) {
-            entry.push(value);
-          } else {
-            entries[key] = [entry, value];
-          }
-        } else {
-          entries[key] = value;
-        }
-      });
-      return entries;
-    },
-    // From
-    (v) => {
-      const formData = new FormData();
-      Object.entries(v).forEach(([key, value]) => {
-        if (Array.isArray(value)) {
-          value.forEach((val) => formData.append(key, val));
-        } else {
-          formData.append(key, value);
-        }
-      });
-      return formData;
-    }
-  ),
-  createSerializer(
-    // Key
-    "bigint",
-    // Check
-    (v) => typeof v === "bigint",
-    // To
-    (v) => v.toString(),
-    // From
-    (v) => BigInt(v)
-  )
-];
-exports.tsrSerializer = tsrSerializer;
-//# sourceMappingURL=serializer.cjs.map