use seroval for serverfunctions

Author: schiller-manuel

e2e/react-start/server-functions/tests/server-functions.spec.ts

@@ -14,15 +14,11 @@ test('invoking a server function with custom response status code', async ({
   await page.waitForLoadState('networkidle')
 
   const requestPromise = new Promise<void>((resolve) => {
-    page.on('response', async (response) => {
+    page.on('response', (response) => {
       expect(response.status()).toBe(225)
       expect(response.statusText()).toBe('hello')
-      expect(response.headers()['content-type']).toBe('application/json')
-      expect(await response.json()).toEqual(
-        expect.objectContaining({
-          result: { hello: 'world' },
-          context: {},
-        }),
+      expect(response.headers()['content-type']).toContain(
+        'application/x-ndjson',
       )
       resolve()
     })

e2e/solid-start/server-functions/tests/server-functions.spec.ts

@@ -12,15 +12,11 @@ test('invoking a server function with custom response status code', async ({
   await page.waitForLoadState('networkidle')
 
   const requestPromise = new Promise<void>((resolve) => {
-    page.on('response', async (response) => {
+    page.on('response', (response) => {
       expect(response.status()).toBe(225)
       expect(response.statusText()).toBe('hello')
-      expect(response.headers()['content-type']).toBe('application/json')
-      expect(await response.json()).toEqual(
-        expect.objectContaining({
-          result: { hello: 'world' },
-          context: {},
-        }),
+      expect(response.headers()['content-type']).toContain(
+        'application/x-ndjson',
       )
       resolve()
     })

packages/react-start-client/src/index.tsx

@@ -1,6 +1,5 @@
 export {
   mergeHeaders,
-  startSerializer,
   createIsomorphicFn,
   createServerFn,
   createMiddleware,

packages/router-core/src/index.ts

@@ -412,6 +412,12 @@ export type {
   ValidateUseParamsResult,
 } from './typePrimitives'
 
-export type { AnyTransformer, Transformer } from './ssr/transformer'
+export type { AnyTransformer, Transformer } from './ssr/serializer/transformer'
 
-export { createSerializationAdapter } from './ssr/transformer'
+export {
+  createSerializationAdapter,
+  makeSerovalPlugin,
+  makeSsrSerovalPlugin,
+} from './ssr/serializer/transformer'
+
+export { defaultSerovalPlugins } from './ssr/serializer/seroval-plugins'

packages/router-core/src/ssr/seroval-plugins.ts renamed to packages/router-core/src/ssr/serializer/ShallowErrorPlugin.ts

@@ -1,7 +1,7 @@
 import { createPlugin } from 'seroval'
 import type { SerovalNode } from 'seroval'
 
-interface ErrorNode {
+export interface ErrorNode {
   message: SerovalNode
 }
 
@@ -13,7 +13,7 @@ export const ShallowErrorPlugin = /* @__PURE__ */ createPlugin<
   Error,
   ErrorNode
 >({
-  tag: 'tanstack-router:seroval-plugins/Error',
+  tag: '$TSR/Error',
   test(value) {
     return value instanceof Error
   },

packages/router-core/src/ssr/serializer/seroval-plugins.ts

@@ -0,0 +1,9 @@
+import { ReadableStreamPlugin } from 'seroval-plugins/web'
+import { ShallowErrorPlugin } from './ShallowErrorPlugin'
+import type { Plugin } from 'seroval'
+
+export const defaultSerovalPlugins = [
+  ShallowErrorPlugin as Plugin<Error, any>,
+  // ReadableStreamNode is not exported by seroval
+  ReadableStreamPlugin as Plugin<ReadableStream, any>,
+]

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

@@ -0,0 +1,78 @@
+import { createPlugin } from 'seroval'
+import { GLOBAL_TSR } from '../constants'
+import type { SerovalNode } from 'seroval'
+
+export type Transformer<TInput, TTransformed> = {
+  key: string
+  test: (value: any) => value is TInput
+  toSerializable: (value: TInput) => TTransformed
+  fromSerializable: (value: TTransformed) => TInput
+}
+
+export type AnyTransformer = Transformer<any, any>
+
+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 function makeSsrSerovalPlugin<TInput, TTransformed>(
+  transformer: Transformer<TInput, TTransformed>,
+  options: { didRun: boolean },
+) {
+  return createPlugin<TInput, SerovalNode>({
+    tag: '$TSR/t/' + transformer.key,
+    test: transformer.test,
+    parse: {
+      stream(value, ctx) {
+        return ctx.parse(transformer.toSerializable(value))
+      },
+    },
+    serialize(node, ctx) {
+      options.didRun = true
+      return (
+        GLOBAL_TSR +
+        '.t.get("' +
+        transformer.key +
+        '")(' +
+        ctx.serialize(node) +
+        ')'
+      )
+    },
+    // we never deserialize on the server during SSR
+    deserialize: undefined as never,
+  })
+}
+
+export function makeSerovalPlugin<TInput, TTransformed>(
+  transformer: Transformer<TInput, TTransformed>,
+) {
+  return createPlugin<TInput, SerovalNode>({
+    tag: '$TSR/t/' + transformer.key,
+    test: transformer.test,
+    parse: {
+      sync(value, ctx) {
+        return ctx.parse(transformer.toSerializable(value))
+      },
+      async async(value, ctx) {
+        return await ctx.parse(transformer.toSerializable(value))
+      },
+      stream(value, ctx) {
+        return ctx.parse(transformer.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)
+    },
+  })
+}

packages/router-core/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 './transformer'
+import type { AnyTransformer } from './serializer/transformer'
 import type { GLOBAL_TSR } from './constants'
 
 declare global {

packages/router-core/src/ssr/ssr-server.ts

@@ -1,16 +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 { AnyTransformer } from './transformer'
+import type { AnyTransformer } from './serializer/transformer'
 
 declare module '../router' {
   interface ServerSsr {
@@ -55,8 +55,6 @@ export function attachRouterServerSsrUtils(
   router.ssr = {
     manifest,
   }
-  const serializationRefs = new Map<unknown, number>()
-
   let initialScriptSent = false
   const getInitialScript = () => {
     if (initialScriptSent) {
@@ -113,10 +111,10 @@ export function attachRouterServerSsrUtils(
           router.options.serializationAdapters as
             | Array<AnyTransformer>
             | undefined
-        )?.map((t) => t.makePlugin(trackPlugins)) ?? []
+        )?.map((t) => makeSsrSerovalPlugin(t, trackPlugins)) ?? []
       crossSerializeStream(dehydratedRouter, {
-        refs: serializationRefs,
-        plugins: [...plugins, ReadableStreamPlugin, ShallowErrorPlugin],
+        refs: new Map(),
+        plugins: [...plugins, ...defaultSerovalPlugins],
         onSerialize: (data, initial) => {
           let serialized = initial ? GLOBAL_TSR + '.router=' + data : data
           if (trackPlugins.didRun) {