fix(start): sync start serialization on the type level

packages/react-router/src/index.tsx

@@ -290,7 +290,13 @@ export {
 export type { SearchSerializer, SearchParser } from './searchParams'
 
 export { defaultTransformer } from './transformer'
-export type { RouterTransformer } from './transformer'
+export type {
+ RouterTransformer,
+ TransformerParse,
+ TransformerStringify,
+ DefaultTransformerParse,
+ DefaultTransformerStringify,
+} from './transformer'
 
 export { useBlocker, Block } from './useBlocker'
 

packages/react-router/src/transformer.ts

@@ -47,3 +47,22 @@ const transformers = [
  parse: () => undefined,
  },
 ] as const
+
+export type TransformerStringify<T, TSerializable> = T extends TSerializable
+ ? T
+ : T extends (...args: Array<any>) => any
+ ? 'Function is not serializable'
+ : { [K in keyof T]: TransformerStringify<T[K], TSerializable> }
+
+export type TransformerParse<T, TSerializable> = T extends TSerializable
+ ? T
+ : T extends JSX.Element
+ ? ReadableStream
+ : { [K in keyof T]: TransformerParse<T[K], TSerializable> }
+
+export type DefaultTransformerStringify<T> = TransformerStringify<
+ T,
+ Date | undefined
+>
+
+export type DefaultTransformerParse<T> = TransformerParse<T, Date | undefined>

packages/start/src/client/createMiddleware.ts

@@ -1,7 +1,7 @@
-import type { Method } from './createServerFn'
+import type { ConstrainValidator, Method } from './createServerFn'
 import type {
- AnyValidator,
  Constrain,
+ DefaultTransformerStringify,
  Expand,
  MergeAll,
  ResolveValidatorInput,
@@ -129,7 +129,7 @@ export interface MiddlewareOptions<
 > {
  validateClient?: boolean
  middleware?: TMiddlewares
- validator?: Constrain<TValidator, AnyValidator>
+ validator?: ConstrainValidator<TValidator>
  client?: MiddlewareClientFn<
  TMiddlewares,
  TValidator,
@@ -166,7 +166,7 @@ export type MiddlewareServerFn<
  TNewClientAfterContext = undefined,
  >(ctx?: {
  context?: TNewServerContext
- sendContext?: TNewClientAfterContext
+ sendContext?: DefaultTransformerStringify<TNewClientAfterContext>
  }) => Promise<
  ServerResultWithContext<TNewServerContext, TNewClientAfterContext>
  >
@@ -186,7 +186,7 @@ export type MiddlewareClientFn<
  method: Method
  next: <TNewServerContext = undefined, TNewClientContext = undefined>(ctx?: {
  context?: TNewClientContext
- sendContext?: TNewServerContext
+ sendContext?: DefaultTransformerStringify<TNewServerContext>
  headers?: HeadersInit
  }) => Promise<ClientResultWithContext<TNewServerContext, TNewClientContext>>
 }) =>
@@ -272,7 +272,7 @@ export interface MiddlewareValidator<
  TClientAfterContext,
 > {
  validator: <TNewValidator>(
- input: TNewValidator,
+ input: ConstrainValidator<TNewValidator>,
  ) => MiddlewareAfterMiddleware<
  TId,
  TMiddlewares,

packages/start/src/client/createServerFn.ts

@@ -1,7 +1,14 @@
 import invariant from 'tiny-invariant'
 import { defaultTransformer } from '@tanstack/react-router'
 import { mergeHeaders } from './headers'
-import type { AnyValidator, Constrain } from '@tanstack/react-router'
+import type {
+ AnyValidator,
+ Constrain,
+ DefaultTransformerParse,
+ DefaultTransformerStringify,
+ ResolveValidatorInput,
+ Validator,
+} from '@tanstack/react-router'
 import type {
  AnyMiddleware,
  MergeAllServerContext,
@@ -61,20 +68,10 @@ export interface OptionalFetcherDataOptions<TInput> extends FetcherBaseOptions {
  data?: TInput
 }
 
-export type FetcherData<TResponse> = WrapRSCs<
+export type FetcherData<TResponse> = DefaultTransformerParse<
  TResponse extends JsonResponse<infer TData> ? TData : TResponse
 >
 
-export type WrapRSCs<T> = T extends JSX.Element
- ? ReadableStream
- : T extends Record<string, any>
- ? {
- [K in keyof T]: WrapRSCs<T[K]>
- }
- : T extends Array<infer U>
- ? Array<WrapRSCs<U>>
- : T
-
 export type RscStream<T> = {
  __cacheState: T
 }
@@ -83,7 +80,9 @@ export type Method = 'GET' | 'POST'
 
 export type ServerFn<TMethod, TMiddlewares, TValidator, TResponse> = (
  ctx: ServerFnCtx<TMethod, TMiddlewares, TValidator>,
-) => Promise<TResponse> | TResponse
+) =>
+ | Promise<DefaultTransformerStringify<TResponse>>
+ | DefaultTransformerStringify<TResponse>
 
 export type ServerFnCtx<TMethod, TMiddlewares, TValidator> = {
  method: TMethod
@@ -105,13 +104,23 @@ type ServerFnBaseOptions<
  method: TMethod
  validateClient?: boolean
  middleware?: Constrain<TMiddlewares, ReadonlyArray<AnyMiddleware>>
- validator?: Constrain<TInput, AnyValidator>
+ validator?: ConstrainValidator<TInput>
  extractedFn?: CompiledFetcherFn<TResponse>
  serverFn?: ServerFn<TMethod, TMiddlewares, TInput, TResponse>
  filename: string
  functionId: string
 }
 
+export type ConstrainValidator<TValidator> = unknown extends TValidator
+ ? TValidator
+ : Constrain<
+ TValidator,
+ Validator<
+ DefaultTransformerStringify<ResolveValidatorInput<TValidator>>,
+ any
+ >
+ >
+
 type ServerFnBase<
  TMethod extends Method = 'GET',
  TResponse = unknown,
@@ -126,7 +135,7 @@ type ServerFnBase<
  'validator' | 'handler'
  >
  validator: <TValidator>(
- validator: Constrain<TValidator, AnyValidator>,
+ validator: ConstrainValidator<TValidator>,
  ) => Pick<
  ServerFnBase<TMethod, TResponse, TMiddlewares, TValidator>,
  'handler' | 'middleware'

packages/start/src/client/index.tsx

@@ -9,7 +9,6 @@ export {
  type CompiledFetcherFn,
  type Fetcher,
  type RscStream,
- type WrapRSCs,
  type FetcherImpl,
  type FetcherData,
  type FetcherBaseOptions,

packages/start/src/client/tests/createServerFn.test-d.ts → packages/start/src/client/tests/createServerFn.test-d.tsx

@@ -1,6 +1,7 @@
 import { expectTypeOf, test } from 'vitest'
 import { createServerFn } from '../createServerFn'
 import { createMiddleware } from '../createMiddleware'
+import type { Constrain, Validator } from '@tanstack/react-router'
 
 test('createServerFn without middleware', () => {
  createServerFn({ method: 'GET' }).handler((options) => {
@@ -178,3 +179,56 @@ test('createServerFn where data is optional if there is no validator', () => {
  | undefined
  >()
 })
+
+test('createServerFn returns Date', () => {
+ const fn = createServerFn().handler(() => ({
+ dates: [new Date(), new Date()] as const,
+ }))
+
+ expectTypeOf(fn()).toEqualTypeOf<Promise<{ dates: readonly [Date, Date] }>>()
+})
+
+test('createServerFn returns RSC', () => {
+ const fn = createServerFn().handler(() => ({
+ rscs: [
+ <div key="0">I'm an RSC</div>,
+ <div key="1">I'm an RSC</div>,
+ ] as const,
+ }))
+
+ expectTypeOf(fn()).toEqualTypeOf<
+ Promise<{ rscs: readonly [ReadableStream, ReadableStream] }>
+ >()
+})
+
+test('createServerFn returns undefined', () => {
+ const fn = createServerFn().handler(() => ({
+ nothing: undefined,
+ }))
+
+ expectTypeOf(fn()).toEqualTypeOf<Promise<{ nothing: undefined }>>()
+})
+
+test('createServerFn cannot return function', () => {
+ expectTypeOf(createServerFn().handler<{ func: () => 'func' }>)
+ .parameter(0)
+ .returns.toEqualTypeOf<
+ | { func: 'Function is not serializable' }
+ | Promise<{ func: 'Function is not serializable' }>
+ >()
+})
+
+test('createServerFn cannot validate function', () => {
+ const validator = createServerFn().validator<
+ (input: { func: () => 'string' }) => { output: 'string' }
+ >
+
+ expectTypeOf(validator)
+ .parameter(0)
+ .toEqualTypeOf<
+ Constrain<
+ (input: { func: () => 'string' }) => { output: 'string' },
+ Validator<{ func: 'Function is not serializable' }, any>
+ >
+ >()
+})

packages/start/src/client/tests/createServerMiddleware.test-d.ts

@@ -1,5 +1,6 @@
 import { expectTypeOf, test } from 'vitest'
 import { createMiddleware } from '../createMiddleware'
+import type { Constrain, Validator } from '@tanstack/react-router'
 
 test('createServeMiddleware removes middleware after middleware,', () => {
  const middleware = createMiddleware()
@@ -228,7 +229,7 @@ test('createMiddleware merges server context and client context, sends server co
  fromServer1: string
  fromServer2: string
  fromServer3: string
- toServer1: string
+ toServer1: 'toServer1'
  }>()
  return next({
  context: { fromServer4: 'fromServer4' },
@@ -244,8 +245,45 @@ test('createMiddleware merges server context and client context, sends server co
  fromClient3: string
  clientAfter3: string
  fromClient4: string
- toClient1: string
+ toClient1: 'toClient1'
  }>
  return next({ context: { clientAfter4: 'clientAfter4' } })
  })
 })
+
+test('createMiddleware sendContext cannot send a function', () => {
+ createMiddleware()
+ .client(({ next }) => {
+ expectTypeOf(next<{ func: () => 'func' }>)
+ .parameter(0)
+ .exclude<undefined>()
+ .toHaveProperty('sendContext')
+ .toEqualTypeOf<{ func: 'Function is not serializable' } | undefined>()
+
+ return next()
+ })
+ .server(({ next }) => {
+ expectTypeOf(next<undefined, { func: () => 'func' }>)
+ .parameter(0)
+ .exclude<undefined>()
+ .toHaveProperty('sendContext')
+ .toEqualTypeOf<{ func: 'Function is not serializable' } | undefined>()
+
+ return next()
+ })
+})
+
+test('createMiddleware cannot validate function', () => {
+ const validator = createMiddleware().validator<
+ (input: { func: () => 'string' }) => { output: 'string' }
+ >
+
+ expectTypeOf(validator)
+ .parameter(0)
+ .toEqualTypeOf<
+ Constrain<
+ (input: { func: () => 'string' }) => { output: 'string' },
+ Validator<{ func: 'Function is not serializable' }, any>
+ >
+ >()
+})