fix: register createServerFn fetcher as serializable (#5268)

* fix: createServerFn fetcher has TSS_SERVER_FUNCTION symbol prop

* add serializer extension, register server functions to be serializable

* remove cast

Author: schiller-manuel

e2e/react-start/server-functions/src/routes/middleware/send-serverFn.tsx

@@ -6,7 +6,7 @@ const middleware = createMiddleware({ type: 'function' }).client(
   async ({ next }) => {
     return next({
       sendContext: {
-        serverFn: barFn as any,
+        serverFn: barFn,
       },
     })
   },

packages/router-core/src/index.ts

@@ -420,6 +420,9 @@ export type {
   SerializerExtensions,
   ValidateSerializable,
   RegisteredSerializableInput,
+  SerializableExtensions,
+  DefaultSerializable,
+  Serializable,
 } from './ssr/serializer/transformer'
 
 export {

packages/router-core/src/ssr/serializer/transformer.ts

@@ -9,14 +9,19 @@ import type {
 import type { LooseReturnType } from '../../utils'
 import type { AnyRoute, ResolveAllSSR } from '../../route'
 
-export type Serializable =
-  | number
-  | string
-  | boolean
-  | null
-  | undefined
-  | bigint
-  | Date
+export interface DefaultSerializable {
+  number: number
+  string: string
+  boolean: boolean
+  null: null
+  undefined: undefined
+  bigint: bigint
+  Date: Date
+}
+
+export interface SerializableExtensions extends DefaultSerializable {}
+
+export type Serializable = SerializableExtensions[keyof SerializableExtensions]
 
 export function createSerializationAdapter<
   TInput = unknown,

packages/start-client-core/src/createServerFn.ts

@@ -4,6 +4,7 @@ import { mergeHeaders } from '@tanstack/router-core/ssr/client'
 import { TSS_SERVER_FUNCTION_FACTORY } from './constants'
 import { getServerContextAfterGlobalMiddlewares } from './getServerContextAfterGlobalMiddlewares'
 import { getStartOptions } from './getStartOptions'
+import type { TSS_SERVER_FUNCTION } from './constants'
 import type {
   AnyValidator,
   Constrain,
@@ -248,6 +249,7 @@ export type Fetcher<TRegister, TMiddlewares, TInputValidator, TResponse> =
     : RequiredFetcher<TRegister, TMiddlewares, TInputValidator, TResponse>
 
 export interface FetcherBase {
+  [TSS_SERVER_FUNCTION]: true
   url: string
   __executeServer: (opts: {
     method: Method

packages/start-client-core/src/createStart.ts

@@ -1,4 +1,5 @@
 import { createMiddleware } from './createMiddleware'
+import type { TSS_SERVER_FUNCTION } from './constants'
 import type {
   AnyFunctionMiddleware,
   AnyRequestMiddleware,
@@ -116,7 +117,7 @@ export type AnyStartInstance = StartInstance<any, any, any, any>
 export type AnyStartInstanceOptions = StartInstanceOptions<any, any, any, any>
 
 declare module '@tanstack/router-core' {
-  interface Register {
-    ssr: true
+  interface SerializableExtensions {
+    serverFn: { [TSS_SERVER_FUNCTION]: true }
   }
 }

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

@@ -1,6 +1,7 @@
 import { describe, expectTypeOf, test } from 'vitest'
 import { createMiddleware } from '../createMiddleware'
 import { createServerFn } from '../createServerFn'
+import { TSS_SERVER_FUNCTION } from '../constants'
 import type { Constrain, Register, Validator } from '@tanstack/router-core'
 import type { ConstrainValidator } from '../createServerFn'
 
@@ -586,3 +587,14 @@ test('createServerFn with inputValidator and request middleware', () => {
     Promise<string>
   >()
 })
+
+test('createServerFn has TSS_SERVER_FUNCTION symbol set', () => {
+  const fn = createServerFn().handler(() => ({}))
+  expectTypeOf(fn).toHaveProperty(TSS_SERVER_FUNCTION)
+  expectTypeOf(fn[TSS_SERVER_FUNCTION]).toEqualTypeOf<true>()
+})
+
+test('createServerFn fetcher itself is serializable', () => {
+  const fn1 = createServerFn().handler(() => ({}))
+  const fn2 = createServerFn().handler(() => fn1)
+})