@tanstack/router-core 1.132.0-alpha.1 → 1.132.0-alpha.15

package/src/ssr/ssr-client.ts

@@ -5,7 +5,8 @@ import type { AnyRouteMatch, MakeRouteMatch } from '../Matches'
 import type { AnyRouter } from '../router'
 import type { Manifest } from '../manifest'
 import type { RouteContextOptions } from '../route'
-import type { GLOBAL_TSR } from './ssr-server'
+import type { AnySerializationAdapter } from './serializer/transformer'
+import type { GLOBAL_TSR } from './constants'
 
 declare global {
   interface Window {
@@ -15,22 +16,28 @@ declare global {
 
 export interface TsrSsrGlobal {
   router?: DehydratedRouter
-  // clean scripts, shortened since this is sent for each streamed script
+  // clean scripts; shortened since this is sent for each streamed script
   c: () => void
+  // push script into buffer; shortened since this is sent for each streamed script as soon as the first custom transformer was invoked
+  p: (script: () => void) => void
+  buffer: Array<() => void>
+  // custom transformers, shortened since this is sent for each streamed value that needs a custom transformer
+  t?: Map<string, (value: any) => any>
+  // this flag indicates whether the transformers were initialized
+  initialized?: boolean
 }
 
 function hydrateMatch(
+  match: AnyRouteMatch,
   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,
-  }
+): void {
+  match.id = deyhydratedMatch.i
+  match.__beforeLoadContext = deyhydratedMatch.b
+  match.loaderData = deyhydratedMatch.l
+  match.status = deyhydratedMatch.s
+  match.ssr = deyhydratedMatch.ssr
+  match.updatedAt = deyhydratedMatch.u
+  match.error = deyhydratedMatch.e
 }
 export interface DehydratedMatch {
   i: MakeRouteMatch['id']
@@ -51,7 +58,26 @@ export interface DehydratedRouter {
 
 export async function hydrate(router: AnyRouter): Promise<any> {
   invariant(
-    window.$_TSR?.router,
+    window.$_TSR,
+    'Expected to find bootstrap data on window.$_TSR, but we did not. Please file an issue!',
+  )
+
+  const serializationAdapters = router.options.serializationAdapters as
+    | Array<AnySerializationAdapter>
+    | undefined
+
+  if (serializationAdapters?.length) {
+    const fromSerializableMap = new Map()
+    serializationAdapters.forEach((adapter) => {
+      fromSerializableMap.set(adapter.key, adapter.fromSerializable)
+    })
+    window.$_TSR.t = fromSerializableMap
+    window.$_TSR.buffer.forEach((script) => script())
+  }
+  window.$_TSR.initialized = true
+
+  invariant(
+    window.$_TSR.router,
     'Expected to find a dehydrated data on window.$_TSR.router, but we did not. Please file an issue!',
   )
 
@@ -80,17 +106,19 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       route.options.pendingMinMs ?? router.options.defaultPendingMinMs
     if (pendingMinMs) {
       const minPendingPromise = createControlledPromise<void>()
-      match.minPendingPromise = minPendingPromise
+      match._nonReactive.minPendingPromise = minPendingPromise
       match._forcePending = true
 
       setTimeout(() => {
         minPendingPromise.resolve()
         // We've handled the minPendingPromise, so we can delete it
-        router.updateMatch(match.id, (prev) => ({
-          ...prev,
-          minPendingPromise: undefined,
-          _forcePending: undefined,
-        }))
+        router.updateMatch(match.id, (prev) => {
+          prev._nonReactive.minPendingPromise = undefined
+          return {
+            ...prev,
+            _forcePending: undefined,
+          }
+        })
       }, pendingMinMs)
     }
   }
@@ -103,17 +131,14 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       (d) => d.i === match.id,
     )
     if (!dehydratedMatch) {
-      Object.assign(match, { dehydrated: false, ssr: false })
+      match._nonReactive.dehydrated = false
+      match.ssr = false
       return
     }
 
-    Object.assign(match, hydrateMatch(dehydratedMatch))
+    hydrateMatch(match, dehydratedMatch)
 
-    if (match.ssr === false) {
-      match._dehydrated = false
-    } else {
-      match._dehydrated = true
-    }
+    match._nonReactive.dehydrated = match.ssr !== false
 
     if (match.ssr === 'data-only' || match.ssr === false) {
       if (firstNonSsrMatchIndex === undefined) {
@@ -141,24 +166,27 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       const route = router.looseRoutesById[match.routeId]!
 
       const parentMatch = router.state.matches[match.index - 1]
-      const parentContext = parentMatch?.context ?? router.options.context ?? {}
+      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,
+      if (route.options.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) ?? undefined
       }
-      match.__routeContext = route.options.context?.(contextFnContext) ?? {}
 
       match.context = {
         ...parentContext,
@@ -186,11 +214,11 @@ export async function hydrate(router: AnyRouter): Promise<any> {
 
   const isSpaMode = matches[matches.length - 1]!.id !== lastMatchId
   const hasSsrFalseMatches = matches.some((m) => m.ssr === false)
-  // all matches have data from the server   and we are not in SPA mode so we don't need to kick of router.load()
+  // all matches have data from the server and we are not in SPA mode so we don't need to kick of router.load()
   if (!hasSsrFalseMatches && !isSpaMode) {
     matches.forEach((match) => {
-      // remove the _dehydrate flag since we won't run router.load() which would remove it
-      match._dehydrated = undefined
+      // remove the dehydrated flag since we won't run router.load() which would remove it
+      match._nonReactive.dehydrated = undefined
     })
     return routeChunkPromise
   }
@@ -213,7 +241,7 @@ export async function hydrate(router: AnyRouter): Promise<any> {
     setMatchForcePending(match)
 
     match._displayPending = true
-    match.displayPendingPromise = loadPromise
+    match._nonReactive.displayPendingPromise = loadPromise
 
     loadPromise.then(() => {
       batch(() => {

package/src/ssr/ssr-server.ts

@@ -1,14 +1,16 @@
 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 { ShallowErrorPlugin } from './seroval-plugins'
+import { GLOBAL_TSR } from './constants'
+import { defaultSerovalPlugins } from './serializer/seroval-plugins'
+import { makeSsrSerovalPlugin } from './serializer/transformer'
 import type { AnyRouter } from '../router'
 import type { DehydratedMatch } from './ssr-client'
 import type { DehydratedRouter } from './client'
 import type { AnyRouteMatch } from '../Matches'
 import type { Manifest } from '../manifest'
+import type { AnySerializationAdapter } from './serializer/transformer'
 
 declare module '../router' {
   interface ServerSsr {
@@ -22,7 +24,6 @@ declare module '../router' {
   }
 }
 
-export const GLOBAL_TSR = '$_TSR'
 const SCOPE_ID = 'tsr'
 
 export function dehydrateMatch(match: AnyRouteMatch): DehydratedMatch {
@@ -54,8 +55,6 @@ export function attachRouterServerSsrUtils(
   router.ssr = {
     manifest,
   }
-  const serializationRefs = new Map<unknown, number>()
-
   let initialScriptSent = false
   const getInitialScript = () => {
     if (initialScriptSent) {
@@ -82,7 +81,7 @@ export function attachRouterServerSsrUtils(
     injectScript: (getScript) => {
       return router.serverSsr!.injectHtml(async () => {
         const script = await getScript()
-        return `<script class='$tsr'>${getInitialScript()}${script};if (typeof $_TSR !== 'undefined') $_TSR.c()</script>`
+        return `<script class='$tsr'>${getInitialScript()}${script};$_TSR.c()</script>`
       })
     },
     dehydrate: async () => {
@@ -106,12 +105,21 @@ export function attachRouterServerSsrUtils(
       _dehydrated = true
 
       const p = createControlledPromise<string>()
+      const trackPlugins = { didRun: false }
+      const plugins =
+        (
+          router.options.serializationAdapters as
+            | Array<AnySerializationAdapter>
+            | undefined
+        )?.map((t) => makeSsrSerovalPlugin(t, trackPlugins)) ?? []
       crossSerializeStream(dehydratedRouter, {
-        refs: serializationRefs,
-        // TODO make plugins configurable
-        plugins: [ReadableStreamPlugin, ShallowErrorPlugin],
+        refs: new Map(),
+        plugins: [...plugins, ...defaultSerovalPlugins],
         onSerialize: (data, initial) => {
-          const serialized = initial ? `${GLOBAL_TSR}["router"]=` + data : data
+          let serialized = initial ? GLOBAL_TSR + '.router=' + data : data
+          if (trackPlugins.didRun) {
+            serialized = GLOBAL_TSR + '.p(()=>' + serialized + ')'
+          }
           router.serverSsr!.injectScript(() => serialized)
         },
         scopeId: SCOPE_ID,

package/src/ssr/tsrScript.ts

@@ -1,7 +1,11 @@
 self.$_TSR = {
-  c: () => {
+  c() {
     document.querySelectorAll('.\\$tsr').forEach((o) => {
       o.remove()
     })
   },
+  p(script) {
+    !this.initialized ? this.buffer.push(script) : script()
+  },
+  buffer: [],
 }

package/src/typePrimitives.ts

@@ -36,7 +36,7 @@ export type ValidateParams<
 > = PathParamOptions<TRouter, TFrom, TTo>
 
 /**
- * @internal
+ * @private
  */
 export type InferFrom<
   TOptions,
@@ -48,7 +48,7 @@ export type InferFrom<
   : TDefaultFrom
 
 /**
- * @internal
+ * @private
  */
 export type InferTo<TOptions> = TOptions extends {
   to: infer TTo extends string
@@ -57,7 +57,7 @@ export type InferTo<TOptions> = TOptions extends {
   : undefined
 
 /**
- * @internal
+ * @private
  */
 export type InferMaskTo<TOptions> = TOptions extends {
   mask: { to: infer TTo extends string }
@@ -131,7 +131,7 @@ export type ValidateId<
 > = ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>
 
 /**
- * @internal
+ * @private
  */
 export type InferStrict<TOptions> = TOptions extends {
   strict: infer TStrict extends boolean
@@ -140,7 +140,7 @@ export type InferStrict<TOptions> = TOptions extends {
   : true
 
 /**
- * @internal
+ * @private
  */
 export type InferShouldThrow<TOptions> = TOptions extends {
   shouldThrow: infer TShouldThrow extends boolean
@@ -149,7 +149,7 @@ export type InferShouldThrow<TOptions> = TOptions extends {
   : true
 
 /**
- * @internal
+ * @private
  */
 export type InferSelected<TOptions> = TOptions extends {
   select: (...args: Array<any>) => infer TSelected

package/src/utils.ts

@@ -203,16 +203,6 @@ export function functionalUpdate<TPrevious, TResult = TPrevious>(
   return updater
 }
 
-export function pick<TValue, TKey extends keyof TValue>(
-  parent: TValue,
-  keys: Array<TKey>,
-): Pick<TValue, TKey> {
-  return keys.reduce((obj: any, key: TKey) => {
-    obj[key] = parent[key]
-    return obj
-  }, {} as any)
-}
-
 /**
  * This function returns `prev` if `_next` is deeply equal.
  * If not, it will replace any deeply equal children of `b` with those of `a`.
@@ -432,3 +422,24 @@ export function isModuleNotFoundError(error: any): boolean {
     error.message.startsWith('Importing a module script failed')
   )
 }
+
+export function isPromise<T>(
+  value: Promise<Awaited<T>> | T,
+): value is Promise<Awaited<T>> {
+  return Boolean(
+    value &&
+      typeof value === 'object' &&
+      typeof (value as Promise<T>).then === 'function',
+  )
+}
+
+export function findLast<T>(
+  array: ReadonlyArray<T>,
+  predicate: (item: T) => boolean,
+): T | undefined {
+  for (let i = array.length - 1; i >= 0; i--) {
+    const item = array[i]!
+    if (predicate(item)) return item
+  }
+  return undefined
+}

package/dist/cjs/ssr/seroval-plugins.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"seroval-plugins.cjs","sources":["../../../src/ssr/seroval-plugins.ts"],"sourcesContent":["import { createPlugin } from 'seroval'\nimport type { SerovalNode } from 'seroval'\n\ninterface ErrorNode {\n  message: SerovalNode\n}\n\n/**\n * this plugin serializes only the `message` part of an Error\n * this helps with serializing e.g. a ZodError which has functions attached that cannot be serialized\n */\nexport const ShallowErrorPlugin = /* @__PURE__ */ createPlugin<\n  Error,\n  ErrorNode\n>({\n  tag: 'tanstack-start:seroval-plugins/Error',\n  test(value) {\n    return value instanceof Error\n  },\n  parse: {\n    sync(value, ctx) {\n      return {\n        message: ctx.parse(value.message),\n      }\n    },\n    async async(value, ctx) {\n      return {\n        message: await ctx.parse(value.message),\n      }\n    },\n    stream(value, ctx) {\n      return {\n        message: ctx.parse(value.message),\n      }\n    },\n  },\n  serialize(node, ctx) {\n    return 'new Error(' + ctx.serialize(node.message) + ')'\n  },\n  deserialize(node, ctx) {\n    return new Error(ctx.deserialize(node.message) as string)\n  },\n})\n"],"names":["createPlugin"],"mappings":";;;AAWO,MAAM,qBAAqCA,wBAAAA,aAGhD;AAAA,EACA,KAAK;AAAA,EACL,KAAK,OAAO;AACV,WAAO,iBAAiB;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,IACL,KAAK,OAAO,KAAK;AACf,aAAO;AAAA,QACL,SAAS,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAEpC;AAAA,IACA,MAAM,MAAM,OAAO,KAAK;AACtB,aAAO;AAAA,QACL,SAAS,MAAM,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAE1C;AAAA,IACA,OAAO,OAAO,KAAK;AACjB,aAAO;AAAA,QACL,SAAS,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAEpC;AAAA,EAAA;AAAA,EAEF,UAAU,MAAM,KAAK;AACnB,WAAO,eAAe,IAAI,UAAU,KAAK,OAAO,IAAI;AAAA,EACtD;AAAA,EACA,YAAY,MAAM,KAAK;AACrB,WAAO,IAAI,MAAM,IAAI,YAAY,KAAK,OAAO,CAAW;AAAA,EAC1D;AACF,CAAC;;"}

package/dist/esm/ssr/seroval-plugins.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"seroval-plugins.js","sources":["../../../src/ssr/seroval-plugins.ts"],"sourcesContent":["import { createPlugin } from 'seroval'\nimport type { SerovalNode } from 'seroval'\n\ninterface ErrorNode {\n  message: SerovalNode\n}\n\n/**\n * this plugin serializes only the `message` part of an Error\n * this helps with serializing e.g. a ZodError which has functions attached that cannot be serialized\n */\nexport const ShallowErrorPlugin = /* @__PURE__ */ createPlugin<\n  Error,\n  ErrorNode\n>({\n  tag: 'tanstack-start:seroval-plugins/Error',\n  test(value) {\n    return value instanceof Error\n  },\n  parse: {\n    sync(value, ctx) {\n      return {\n        message: ctx.parse(value.message),\n      }\n    },\n    async async(value, ctx) {\n      return {\n        message: await ctx.parse(value.message),\n      }\n    },\n    stream(value, ctx) {\n      return {\n        message: ctx.parse(value.message),\n      }\n    },\n  },\n  serialize(node, ctx) {\n    return 'new Error(' + ctx.serialize(node.message) + ')'\n  },\n  deserialize(node, ctx) {\n    return new Error(ctx.deserialize(node.message) as string)\n  },\n})\n"],"names":[],"mappings":";AAWO,MAAM,qBAAqC,6BAGhD;AAAA,EACA,KAAK;AAAA,EACL,KAAK,OAAO;AACV,WAAO,iBAAiB;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,IACL,KAAK,OAAO,KAAK;AACf,aAAO;AAAA,QACL,SAAS,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAEpC;AAAA,IACA,MAAM,MAAM,OAAO,KAAK;AACtB,aAAO;AAAA,QACL,SAAS,MAAM,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAE1C;AAAA,IACA,OAAO,OAAO,KAAK;AACjB,aAAO;AAAA,QACL,SAAS,IAAI,MAAM,MAAM,OAAO;AAAA,MAAA;AAAA,IAEpC;AAAA,EAAA;AAAA,EAEF,UAAU,MAAM,KAAK;AACnB,WAAO,eAAe,IAAI,UAAU,KAAK,OAAO,IAAI;AAAA,EACtD;AAAA,EACA,YAAY,MAAM,KAAK;AACrB,WAAO,IAAI,MAAM,IAAI,YAAY,KAAK,OAAO,CAAW;AAAA,EAC1D;AACF,CAAC;"}