feat(rsc): support serialization of Request and Response with loadModuleDevProxy (#1004)

Co-authored-by: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>

Author: jacob-ebey

packages/plugin-rsc/README.md

@@ -228,7 +228,7 @@ The plugin provides an additional helper for multi environment interaction.
 
 This allows importing `ssr` environment module specified by `environments.ssr.build.rollupOptions.input[entryName]` inside `rsc` environment and vice versa.
 
-During development, by default, this API assumes both `rsc` and `ssr` environments execute under the main Vite process. When enabling `rsc({ loadModuleDevProxy: true })` plugin option, the loaded module is implemented as a proxy with `fetch`-based RPC to call in node environment on the main Vite process, which for example, allows `rsc` environment inside cloudflare workers to access `ssr` environment on the main Vite process.
+During development, by default, this API assumes both `rsc` and `ssr` environments execute under the main Vite process. When enabling `rsc({ loadModuleDevProxy: true })` plugin option, the loaded module is implemented as a proxy with `fetch`-based RPC to call in node environment on the main Vite process, which for example, allows `rsc` environment inside cloudflare workers to access `ssr` environment on the main Vite process. This proxy mechanism uses [turbo-stream](https://github.com/jacob-ebey/turbo-stream) for serializing data types beyond JSON, with custom encoders/decoders to additionally support `Request` and `Response` instances.
 
 During production build, this API will be rewritten into a static import of the specified entry of other environment build and the modules are executed inside the same runtime.
 

packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.rsc.tsx

@@ -19,6 +19,7 @@ export type RscPayload = {
 async function handler(request: Request): Promise<Response> {
   // differentiate RSC, SSR, action, etc.
   const renderRequest = parseRenderRequest(request)
+  request = renderRequest.request
 
   // handle server function request
   let returnValue: RscPayload['returnValue'] | undefined
@@ -82,19 +83,12 @@ async function handler(request: Request): Promise<Response> {
   const { renderHTML } = await import.meta.viteRsc.loadModule<
     typeof import('./entry.ssr.tsx')
   >('ssr', 'index')
-  const ssrResult = await renderHTML(rscStream, {
+  return await renderHTML(rscStream, {
+    request,
     formState,
     // allow quick simulation of javascript disabled browser
     debugNojs: renderRequest.url.searchParams.has('__nojs'),
   })
-
-  // respond html
-  return new Response(ssrResult.stream, {
-    status: ssrResult.status,
-    headers: {
-      'Content-type': 'text/html',
-    },
-  })
 }
 
 export default {

packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.ssr.tsx

@@ -10,11 +10,12 @@ export type RenderHTML = typeof renderHTML
 export async function renderHTML(
   rscStream: ReadableStream<Uint8Array>,
   options?: {
+    request: Request
     formState?: ReactFormState
     nonce?: string
     debugNojs?: boolean
   },
-): Promise<{ stream: ReadableStream<Uint8Array>; status?: number }> {
+): Promise<Response> {
   // duplicate one RSC stream into two.
   // - one for SSR (ReactClient.createFromReadableStream below)
   // - another for browser hydration payload by injecting <script>...FLIGHT_DATA...</script>.
@@ -71,5 +72,5 @@ export async function renderHTML(
     )
   }
 
-  return { stream: responseStream, status }
+  return new Response(responseStream, { status })
 }

packages/plugin-rsc/src/utils/rpc.ts

@@ -1,4 +1,9 @@
-import { decode, encode } from 'turbo-stream'
+import {
+  decode,
+  encode,
+  type DecodePlugin,
+  type EncodePlugin,
+} from 'turbo-stream'
 
 type RequestPayload = {
   method: string
@@ -10,13 +15,74 @@ type ResponsePayload = {
   data: any
 }
 
+const decodePlugins: DecodePlugin[] = [
+  (type, ...rest) => {
+    switch (type) {
+      case 'Request': {
+        const [method, url, headers, body] = rest as [
+          string,
+          string,
+          [string, string][],
+          null | ReadableStream<Uint8Array>,
+        ]
+        return {
+          value: new Request(url, {
+            body,
+            headers,
+            method,
+            // @ts-ignore undici compat
+            duplex: body ? 'half' : undefined,
+          }),
+        }
+      }
+      case 'Response': {
+        const [status, statusText, headers, body] = rest as [
+          number,
+          string,
+          [string, string][],
+          null | ReadableStream<Uint8Array>,
+        ]
+        return {
+          value: new Response(body, {
+            headers,
+            status,
+            statusText,
+          }),
+        }
+      }
+    }
+    return false
+  },
+]
+
+const encodePlugins: EncodePlugin[] = [
+  (obj) => {
+    if (obj instanceof Request) {
+      return ['Request', obj.method, obj.url, Array.from(obj.headers), obj.body]
+    }
+    if (obj instanceof Response) {
+      return [
+        'Response',
+        obj.status,
+        obj.statusText,
+        Array.from(obj.headers),
+        obj.body,
+      ]
+    }
+    return false
+  },
+]
+
 export function createRpcServer<T extends object>(handlers: T) {
   return async (request: Request): Promise<Response> => {
     if (!request.body) {
       throw new Error(`loadModuleDevProxy error: missing request body`)
     }
     const reqPayload = await decode<RequestPayload>(
       request.body.pipeThrough(new TextDecoderStream()),
+      {
+        plugins: decodePlugins,
+      },
     )
     const handler = (handlers as any)[reqPayload.method]
     if (!handler) {
@@ -31,7 +97,12 @@ export function createRpcServer<T extends object>(handlers: T) {
       resPayload.ok = false
       resPayload.data = e
     }
-    return new Response(encode(resPayload))
+    return new Response(
+      encode(resPayload, {
+        plugins: encodePlugins,
+        redactErrors: false,
+      }),
+    )
   }
 }
 
@@ -41,7 +112,10 @@ export function createRpcClient<T>(options: { endpoint: string }): T {
       method,
       args,
     }
-    const body = encode(reqPayload).pipeThrough(new TextEncoderStream())
+    const body = encode(reqPayload, {
+      plugins: encodePlugins,
+      redactErrors: false,
+    }).pipeThrough(new TextEncoderStream())
     const res = await fetch(options.endpoint, {
       method: 'POST',
       body,
@@ -55,6 +129,9 @@ export function createRpcClient<T>(options: { endpoint: string }): T {
     }
     const resPayload = await decode<ResponsePayload>(
       res.body.pipeThrough(new TextDecoderStream()),
+      {
+        plugins: decodePlugins,
+      },
     )
     if (!resPayload.ok) {
       throw resPayload.data