@tanstack/router-core 1.132.0-alpha.4 → 1.132.0

package/src/scroll-restoration.ts

@@ -358,7 +358,7 @@ export function setupScrollRestoration(router: AnyRouter, force?: boolean) {
 }
 
 /**
- * @internal
+ * @private
  * Handles hash-based scrolling after navigation completes.
  * To be used in framework-specific <Transitioner> components during the onResolved event.
  *

package/src/ssr/createRequestHandler.ts

@@ -21,7 +21,10 @@ export function createRequestHandler<TRouter extends AnyRouter>({
   return async (cb) => {
     const router = createRouter()
 
-    attachRouterServerSsrUtils(router, await getRouterManifest?.())
+    attachRouterServerSsrUtils({
+      router,
+      manifest: await getRouterManifest?.(),
+    })
 
     const url = new URL(request.url, 'http://localhost')
 

package/src/ssr/serializer/transformer.ts

@@ -1,39 +1,111 @@
 import { createPlugin } from 'seroval'
 import { GLOBAL_TSR } from '../constants'
-import type { SerovalNode } from 'seroval'
+import type { Plugin, SerovalNode } from 'seroval'
+import type { RegisteredConfigType, SSROption } from '../../router'
+import type { LooseReturnType } from '../../utils'
+import type { AnyRoute, ResolveAllSSR } from '../../route'
 
-export type Transformer<TInput, TTransformed> = {
+export type Serializable =
+  | number
+  | string
+  | boolean
+  | null
+  | undefined
+  | bigint
+  | Date
+
+export function createSerializationAdapter<
+  TInput = unknown,
+  TOutput = unknown /* we need to check that this type is actually serializable taking into account all seroval native types and any custom plugin WE=router/start add!!! */,
+>(
+  opts: CreateSerializationAdapterOptions<TInput, TOutput>,
+): SerializationAdapter<TInput, TOutput> {
+  return opts as unknown as SerializationAdapter<TInput, TOutput>
+}
+
+export interface CreateSerializationAdapterOptions<TInput, TOutput> {
   key: string
-  test: (value: any) => value is TInput
-  toSerializable: (value: TInput) => TTransformed
-  fromSerializable: (value: TTransformed) => TInput
+  test: (value: unknown) => value is TInput
+  toSerializable: (value: TInput) => ValidateSerializable<TOutput, Serializable>
+  fromSerializable: (value: TOutput) => TInput
 }
 
-export type AnyTransformer = Transformer<any, any>
+export type ValidateSerializable<T, TSerializable> = T extends TSerializable
+  ? T
+  : T extends (...args: Array<any>) => any
+    ? 'Function is not serializable'
+    : T extends Promise<any>
+      ? ValidateSerializablePromise<T, TSerializable>
+      : T extends ReadableStream<any>
+        ? ValidateReadableStream<T, TSerializable>
+        : T extends Set<any>
+          ? ValidateSerializableSet<T, TSerializable>
+          : T extends Map<any, any>
+            ? ValidateSerializableMap<T, TSerializable>
+            : {
+                [K in keyof T]: ValidateSerializable<T[K], TSerializable>
+              }
 
-export function createSerializationAdapter<
-  TKey extends string,
-  TInput,
-  TTransformed /* we need to check that this type is actually serializable taking into account all seroval native types and any custom plugin WE=router/start add!!! */,
->(opts: {
-  key: TKey
-  test: (value: any) => value is TInput
-  toSerializable: (value: TInput) => TTransformed
-  fromSerializable: (value: TTransformed) => TInput
-}): Transformer<TInput, TTransformed> {
-  return opts
+export type ValidateSerializablePromise<T, TSerializable> =
+  T extends Promise<infer TAwaited>
+    ? Promise<ValidateSerializable<TAwaited, TSerializable>>
+    : never
+
+export type ValidateReadableStream<T, TSerializable> =
+  T extends ReadableStream<infer TStreamed>
+    ? ReadableStream<ValidateSerializable<TStreamed, TSerializable>>
+    : never
+
+export type ValidateSerializableSet<T, TSerializable> =
+  T extends Set<infer TItem>
+    ? Set<ValidateSerializable<TItem, TSerializable>>
+    : never
+
+export type ValidateSerializableMap<T, TSerializable> =
+  T extends Map<infer TKey, infer TValue>
+    ? Map<
+        ValidateSerializable<TKey, TSerializable>,
+        ValidateSerializable<TValue, TSerializable>
+      >
+    : never
+
+export type RegisteredReadableStream =
+  unknown extends SerializerExtensions['ReadableStream']
+    ? never
+    : SerializerExtensions['ReadableStream']
+
+export interface DefaultSerializerExtensions {
+  ReadableStream: unknown
+}
+
+export interface SerializerExtensions extends DefaultSerializerExtensions {}
+
+export interface SerializationAdapter<TInput, TOutput> {
+  '~types': SerializationAdapterTypes<TInput, TOutput>
+  key: string
+  test: (value: unknown) => value is TInput
+  toSerializable: (value: TInput) => TOutput
+  fromSerializable: (value: TOutput) => TInput
+  makePlugin: (options: { didRun: boolean }) => Plugin<TInput, SerovalNode>
+}
+
+export interface SerializationAdapterTypes<TInput, TOutput> {
+  input: TInput
+  output: TOutput
 }
 
-export function makeSsrSerovalPlugin<TInput, TTransformed>(
-  transformer: Transformer<TInput, TTransformed>,
+export type AnySerializationAdapter = SerializationAdapter<any, any>
+
+export function makeSsrSerovalPlugin<TInput, TOutput>(
+  serializationAdapter: SerializationAdapter<TInput, TOutput>,
   options: { didRun: boolean },
 ) {
   return createPlugin<TInput, SerovalNode>({
-    tag: '$TSR/t/' + transformer.key,
-    test: transformer.test,
+    tag: '$TSR/t/' + serializationAdapter.key,
+    test: serializationAdapter.test,
     parse: {
       stream(value, ctx) {
-        return ctx.parse(transformer.toSerializable(value))
+        return ctx.parse(serializationAdapter.toSerializable(value))
       },
     },
     serialize(node, ctx) {
@@ -41,7 +113,7 @@ export function makeSsrSerovalPlugin<TInput, TTransformed>(
       return (
         GLOBAL_TSR +
         '.t.get("' +
-        transformer.key +
+        serializationAdapter.key +
         '")(' +
         ctx.serialize(node) +
         ')'
@@ -52,27 +124,92 @@ export function makeSsrSerovalPlugin<TInput, TTransformed>(
   })
 }
 
-export function makeSerovalPlugin<TInput, TTransformed>(
-  transformer: Transformer<TInput, TTransformed>,
+export function makeSerovalPlugin<TInput, TOutput>(
+  serializationAdapter: SerializationAdapter<TInput, TOutput>,
 ) {
   return createPlugin<TInput, SerovalNode>({
-    tag: '$TSR/t/' + transformer.key,
-    test: transformer.test,
+    tag: '$TSR/t/' + serializationAdapter.key,
+    test: serializationAdapter.test,
     parse: {
       sync(value, ctx) {
-        return ctx.parse(transformer.toSerializable(value))
+        return ctx.parse(serializationAdapter.toSerializable(value))
       },
       async async(value, ctx) {
-        return await ctx.parse(transformer.toSerializable(value))
+        return await ctx.parse(serializationAdapter.toSerializable(value))
       },
       stream(value, ctx) {
-        return ctx.parse(transformer.toSerializable(value))
+        return ctx.parse(serializationAdapter.toSerializable(value))
       },
     },
     // we don't generate JS code outside of SSR (for now)
     serialize: undefined as never,
     deserialize(node, ctx) {
-      return transformer.fromSerializable(ctx.deserialize(node) as TTransformed)
+      return serializationAdapter.fromSerializable(
+        ctx.deserialize(node) as TOutput,
+      )
     },
   })
 }
+
+export type ValidateSerializableInput<TRegister, T> = ValidateSerializable<
+  T,
+  RegisteredSerializableInput<TRegister>
+>
+
+export type RegisteredSerializableInput<TRegister> =
+  | (unknown extends RegisteredSerializationAdapters<TRegister>
+      ? never
+      : RegisteredSerializationAdapters<TRegister> extends ReadonlyArray<AnySerializationAdapter>
+        ? RegisteredSerializationAdapters<TRegister>[number]['~types']['input']
+        : never)
+  | Serializable
+
+export type RegisteredSerializationAdapters<TRegister> = RegisteredConfigType<
+  TRegister,
+  'serializationAdapters'
+>
+
+export type ValidateSerializableInputResult<TRegister, T> =
+  ValidateSerializableResult<T, RegisteredSerializableInput<TRegister>>
+
+export type ValidateSerializableResult<T, TSerializable> =
+  T extends TSerializable
+    ? T
+    : unknown extends SerializerExtensions['ReadableStream']
+      ? { [K in keyof T]: ValidateSerializableResult<T[K], TSerializable> }
+      : T extends SerializerExtensions['ReadableStream']
+        ? ReadableStream
+        : { [K in keyof T]: ValidateSerializableResult<T[K], TSerializable> }
+
+export type RegisteredSSROption<TRegister> =
+  unknown extends RegisteredConfigType<TRegister, 'defaultSsr'>
+    ? SSROption
+    : RegisteredConfigType<TRegister, 'defaultSsr'>
+
+export type ValidateSerializableLifecycleResult<
+  TRegister,
+  TParentRoute extends AnyRoute,
+  TSSR,
+  TFn,
+> = false extends (TRegister extends { ssr: infer TSSR } ? TSSR : never)
+  ? any
+  : ValidateSerializableLifecycleResultSSR<
+        TRegister,
+        TParentRoute,
+        TSSR,
+        TFn
+      > extends infer TInput
+    ? TInput
+    : never
+
+export type ValidateSerializableLifecycleResultSSR<
+  TRegister,
+  TParentRoute extends AnyRoute,
+  TSSR,
+  TFn,
+> =
+  ResolveAllSSR<TParentRoute, TSSR> extends false
+    ? any
+    : RegisteredSSROption<TRegister> extends false
+      ? any
+      : ValidateSerializableInput<TRegister, LooseReturnType<TFn>>

package/src/ssr/server.ts

@@ -8,3 +8,9 @@ export {
   transformReadableStreamWithRouter,
 } from './transformStreamWithRouter'
 export { attachRouterServerSsrUtils } from './ssr-server'
+
+// declare module '../router' {
+//   export interface RegisterSsr {
+//     ssr: true
+//   }
+// }

package/src/ssr/ssr-client.ts

@@ -5,7 +5,7 @@ import type { AnyRouteMatch, MakeRouteMatch } from '../Matches'
 import type { AnyRouter } from '../router'
 import type { Manifest } from '../manifest'
 import type { RouteContextOptions } from '../route'
-import type { AnyTransformer } from './serializer/transformer'
+import type { AnySerializationAdapter } from './serializer/transformer'
 import type { GLOBAL_TSR } from './constants'
 
 declare global {
@@ -63,7 +63,7 @@ export async function hydrate(router: AnyRouter): Promise<any> {
   )
 
   const serializationAdapters = router.options.serializationAdapters as
-    | Array<AnyTransformer>
+    | Array<AnySerializationAdapter>
     | undefined
 
   if (serializationAdapters?.length) {

package/src/ssr/ssr-server.ts

@@ -10,7 +10,7 @@ import type { DehydratedMatch } from './ssr-client'
 import type { DehydratedRouter } from './client'
 import type { AnyRouteMatch } from '../Matches'
 import type { Manifest } from '../manifest'
-import type { AnyTransformer } from './serializer/transformer'
+import type { AnySerializationAdapter } from './serializer/transformer'
 
 declare module '../router' {
   interface ServerSsr {
@@ -48,10 +48,13 @@ export function dehydrateMatch(match: AnyRouteMatch): DehydratedMatch {
   return dehydratedMatch
 }
 
-export function attachRouterServerSsrUtils(
-  router: AnyRouter,
-  manifest: Manifest | undefined,
-) {
+export function attachRouterServerSsrUtils({
+  router,
+  manifest,
+}: {
+  router: AnyRouter
+  manifest: Manifest | undefined
+}) {
   router.ssr = {
     manifest,
   }
@@ -81,7 +84,7 @@ export function attachRouterServerSsrUtils(
     injectScript: (getScript) => {
       return router.serverSsr!.injectHtml(async () => {
         const script = await getScript()
-        return `<script class='$tsr'>${getInitialScript()}${script};$_TSR.c()</script>`
+        return `<script ${router.options.ssr?.nonce ? `nonce='${router.options.ssr.nonce}'` : ''} class='$tsr'>${getInitialScript()}${script};$_TSR.c()</script>`
       })
     },
     dehydrate: async () => {
@@ -109,7 +112,7 @@ export function attachRouterServerSsrUtils(
       const plugins =
         (
           router.options.serializationAdapters as
-            | Array<AnyTransformer>
+            | Array<AnySerializationAdapter>
             | undefined
         )?.map((t) => makeSsrSerovalPlugin(t, trackPlugins)) ?? []
       crossSerializeStream(dehydratedRouter, {

package/src/utils.ts

@@ -203,6 +203,8 @@ export function functionalUpdate<TPrevious, TResult = TPrevious>(
   return updater
 }
 
+const hasOwn = Object.prototype.hasOwnProperty
+
 /**
  * This function returns `prev` if `_next` is deeply equal.
  * If not, it will replace any deeply equal children of `b` with those of `a`.
@@ -218,57 +220,64 @@ export function replaceEqualDeep<T>(prev: any, _next: T): T {
 
   const array = isPlainArray(prev) && isPlainArray(next)
 
-  if (array || (isSimplePlainObject(prev) && isSimplePlainObject(next))) {
-    const prevItems = array
-      ? prev
-      : (Object.keys(prev) as Array<unknown>).concat(
-          Object.getOwnPropertySymbols(prev),
-        )
-    const prevSize = prevItems.length
-    const nextItems = array
-      ? next
-      : (Object.keys(next) as Array<unknown>).concat(
-          Object.getOwnPropertySymbols(next),
-        )
-    const nextSize = nextItems.length
-    const copy: any = array ? [] : {}
-
-    let equalItems = 0
-
-    for (let i = 0; i < nextSize; i++) {
-      const key = array ? i : (nextItems[i] as any)
-      if (
-        ((!array && prevItems.includes(key)) || array) &&
-        prev[key] === undefined &&
-        next[key] === undefined
-      ) {
-        copy[key] = undefined
-        equalItems++
-      } else {
-        copy[key] = replaceEqualDeep(prev[key], next[key])
-        if (copy[key] === prev[key] && prev[key] !== undefined) {
-          equalItems++
-        }
-      }
+  if (!array && !(isPlainObject(prev) && isPlainObject(next))) return next
+
+  const prevItems = array ? prev : getEnumerableOwnKeys(prev)
+  if (!prevItems) return next
+  const nextItems = array ? next : getEnumerableOwnKeys(next)
+  if (!nextItems) return next
+  const prevSize = prevItems.length
+  const nextSize = nextItems.length
+  const copy: any = array ? new Array(nextSize) : {}
+
+  let equalItems = 0
+
+  for (let i = 0; i < nextSize; i++) {
+    const key = array ? i : (nextItems[i] as any)
+    const p = prev[key]
+    const n = next[key]
+
+    if (p === n) {
+      copy[key] = p
+      if (array ? i < prevSize : hasOwn.call(prev, key)) equalItems++
+      continue
+    }
+
+    if (
+      p === null ||
+      n === null ||
+      typeof p !== 'object' ||
+      typeof n !== 'object'
+    ) {
+      copy[key] = n
+      continue
     }
 
-    return prevSize === nextSize && equalItems === prevSize ? prev : copy
+    const v = replaceEqualDeep(p, n)
+    copy[key] = v
+    if (v === p) equalItems++
   }
 
-  return next
+  return prevSize === nextSize && equalItems === prevSize ? prev : copy
 }
 
 /**
- * A wrapper around `isPlainObject` with additional checks to ensure that it is not
- * only a plain object, but also one that is "clone-friendly" (doesn't have any
- * non-enumerable properties).
+ * Equivalent to `Reflect.ownKeys`, but ensures that objects are "clone-friendly":
+ * will return false if object has any non-enumerable properties.
  */
-function isSimplePlainObject(o: any) {
-  return (
-    // all the checks from isPlainObject are more likely to hit so we perform them first
-    isPlainObject(o) &&
-    Object.getOwnPropertyNames(o).length === Object.keys(o).length
-  )
+function getEnumerableOwnKeys(o: object) {
+  const keys = []
+  const names = Object.getOwnPropertyNames(o)
+  for (const name of names) {
+    if (!Object.prototype.propertyIsEnumerable.call(o, name)) return false
+    keys.push(name)
+  }
+  const symbols = Object.getOwnPropertySymbols(o)
+  for (const symbol of symbols) {
+    if (!Object.prototype.propertyIsEnumerable.call(o, symbol)) return false
+    keys.push(symbol)
+  }
+  return keys
 }
 
 // Copied from: https://github.com/jonschlinkert/is-plain-object
@@ -306,14 +315,6 @@ export function isPlainArray(value: unknown): value is Array<unknown> {
   return Array.isArray(value) && value.length === Object.keys(value).length
 }
 
-function getObjectKeys(obj: any, ignoreUndefined: boolean) {
-  let keys = Object.keys(obj)
-  if (ignoreUndefined) {
-    keys = keys.filter((key) => obj[key] !== undefined)
-  }
-  return keys
-}
-
 export function deepEqual(
   a: any,
   b: any,
@@ -327,23 +328,44 @@ export function deepEqual(
     return false
   }
 
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false
+    for (let i = 0, l = a.length; i < l; i++) {
+      if (!deepEqual(a[i], b[i], opts)) return false
+    }
+    return true
+  }
+
   if (isPlainObject(a) && isPlainObject(b)) {
     const ignoreUndefined = opts?.ignoreUndefined ?? true
-    const aKeys = getObjectKeys(a, ignoreUndefined)
-    const bKeys = getObjectKeys(b, ignoreUndefined)
 
-    if (!opts?.partial && aKeys.length !== bKeys.length) {
-      return false
+    if (opts?.partial) {
+      for (const k in b) {
+        if (!ignoreUndefined || b[k] !== undefined) {
+          if (!deepEqual(a[k], b[k], opts)) return false
+        }
+      }
+      return true
     }
 
-    return bKeys.every((key) => deepEqual(a[key], b[key], opts))
-  }
+    let aCount = 0
+    if (!ignoreUndefined) {
+      aCount = Object.keys(a).length
+    } else {
+      for (const k in a) {
+        if (a[k] !== undefined) aCount++
+      }
+    }
 
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) {
-      return false
+    let bCount = 0
+    for (const k in b) {
+      if (!ignoreUndefined || b[k] !== undefined) {
+        bCount++
+        if (bCount > aCount || !deepEqual(a[k], b[k], opts)) return false
+      }
     }
-    return !a.some((item, index) => !deepEqual(item, b[index], opts))
+
+    return aCount === bCount
   }
 
   return false