feat(rsc): support browser mode build (#801)

Author: hi-ogawa

packages/plugin-rsc/e2e/browser-mode.test.ts

@@ -2,14 +2,23 @@ import { expect, test, type Page } from '@playwright/test'
 import { useFixture } from './fixture'
 import { defineStarterTest } from './starter'
 
-test.describe('dev-browser-mode', () => {
-  // Webkit fails by
-  // > TypeError: ReadableByteStreamController is not implemented
-  test.skip(({ browserName }) => browserName === 'webkit')
+// Webkit fails by
+// > TypeError: ReadableByteStreamController is not implemented
+test.skip(({ browserName }) => browserName === 'webkit')
 
+test.describe('dev-browser-mode', () => {
   const f = useFixture({ root: 'examples/browser-mode', mode: 'dev' })
   defineStarterTest(f, 'browser-mode')
+  defineBrowserModeTest(f)
+})
 
+test.describe('build-browser-mode', () => {
+  const f = useFixture({ root: 'examples/browser-mode', mode: 'build' })
+  defineStarterTest(f, 'browser-mode')
+  defineBrowserModeTest(f)
+})
+
+function defineBrowserModeTest(f: ReturnType<typeof useFixture>) {
   // action-bind tests copied from basic.test.ts
 
   test('action bind simple', async ({ page }) => {
@@ -71,4 +80,4 @@ test.describe('dev-browser-mode', () => {
       .getByRole('button', { name: 'test-server-action-bind-reset' })
       .click()
   }
-})
+}

packages/plugin-rsc/examples/browser-mode/package.json

@@ -6,8 +6,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "false && vite build",
-    "preview": "false && vite preview"
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "react": "^19.1.1",

packages/plugin-rsc/examples/browser-mode/src/framework/entry.browser.tsx

@@ -8,13 +8,24 @@ import {
   encodeReply,
 } from '@vitejs/plugin-rsc/react/browser'
 import type { RscPayload } from './entry.rsc'
+import buildClientReferences from 'virtual:vite-rsc-browser-mode/build-client-references'
 
 let fetchServer: typeof import('./entry.rsc').fetchServer
 
 export function initialize(options: { fetchServer: typeof fetchServer }) {
   fetchServer = options.fetchServer
   setRequireModule({
-    load: (id) => import(/* @vite-ignore */ id),
+    load: (id) => {
+      if (import.meta.env.__vite_rsc_build__) {
+        const import_ = buildClientReferences[id]
+        if (!import_) {
+          throw new Error(`invalid client reference: ${id}`)
+        }
+        return import_()
+      } else {
+        return import(/* @vite-ignore */ id)
+      }
+    },
   })
 }
 

packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx

@@ -10,6 +10,7 @@ import {
 import type React from 'react'
 import { Root } from '../root'
 import type { ReactFormState } from 'react-dom/client'
+import buildServerReferences from 'virtual:vite-rsc-browser-mode/build-server-references'
 
 export type RscPayload = {
   root: React.ReactNode
@@ -20,7 +21,19 @@ export type RscPayload = {
 declare let __vite_rsc_raw_import__: (id: string) => Promise<unknown>
 
 export function initialize() {
-  setRequireModule({ load: (id) => __vite_rsc_raw_import__(id) })
+  setRequireModule({
+    load: (id) => {
+      if (import.meta.env.__vite_rsc_build__) {
+        const import_ = buildServerReferences[id]
+        if (!import_) {
+          throw new Error(`invalid server reference: ${id}`)
+        }
+        return import_()
+      } else {
+        return __vite_rsc_raw_import__(/* @vite-ignore */ id)
+      }
+    },
+  })
 }
 
 export async function fetchServer(request: Request): Promise<Response> {

packages/plugin-rsc/examples/browser-mode/src/framework/load-client-dev.tsx

@@ -0,0 +1,25 @@
+import { ESModulesEvaluator, ModuleRunner } from 'vite/module-runner'
+
+export default async function loadClient() {
+  const runner = new ModuleRunner(
+    {
+      sourcemapInterceptor: false,
+      transport: {
+        invoke: async (payload) => {
+          const response = await fetch(
+            '/@vite/invoke-react-client?' +
+              new URLSearchParams({
+                data: JSON.stringify(payload),
+              }),
+          )
+          return response.json()
+        },
+      },
+      hmr: false,
+    },
+    new ESModulesEvaluator(),
+  )
+  return await runner.import<typeof import('./entry.browser')>(
+    '/src/framework/entry.browser.tsx',
+  )
+}

packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx

@@ -1,35 +1,11 @@
-import { ESModulesEvaluator, ModuleRunner } from 'vite/module-runner'
 import * as server from './entry.rsc'
+import loadClient from 'virtual:vite-rsc-browser-mode/load-client'
 
 async function main() {
-  const client = await importClient()
+  const client = await loadClient()
   server.initialize()
   client.initialize({ fetchServer: server.fetchServer })
   await client.main()
 }
 
-async function importClient() {
-  const runner = new ModuleRunner(
-    {
-      sourcemapInterceptor: false,
-      transport: {
-        invoke: async (payload) => {
-          const response = await fetch(
-            '/@vite/invoke-react-client?' +
-              new URLSearchParams({
-                data: JSON.stringify(payload),
-              }),
-          )
-          return response.json()
-        },
-      },
-      hmr: false,
-    },
-    new ESModulesEvaluator(),
-  )
-  return await runner.import<typeof import('./entry.browser')>(
-    '/src/framework/entry.browser.tsx',
-  )
-}
-
 main()

packages/plugin-rsc/examples/browser-mode/src/framework/virtual.d.ts

@@ -0,0 +1,14 @@
+declare module 'virtual:vite-rsc-browser-mode/build-client-references' {
+  const default_: Record<string, () => Promise<any>>
+  export default default_
+}
+
+declare module 'virtual:vite-rsc-browser-mode/build-server-references' {
+  const default_: Record<string, () => Promise<any>>
+  export default default_
+}
+
+declare module 'virtual:vite-rsc-browser-mode/load-client' {
+  const default_: () => Promise<typeof import('./entry.browser')>
+  export default default_
+}