chore(rsc): use websocket for browser module runner transport (#946)

Author: hi-ogawa

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

@@ -18,6 +18,7 @@
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "latest",
     "@vitejs/plugin-rsc": "latest",
-    "vite": "^7.1.10"
+    "vite": "^7.1.10",
+    "vite-dev-rpc": "^1.1.0"
   }
 }

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

@@ -1,19 +1,17 @@
 import { ESModulesEvaluator, ModuleRunner } from 'vite/module-runner'
+import { createRPCClient } from 'vite-dev-rpc'
+
+const rpcClient = createRPCClient<{ invoke: Function }, {}>(
+  'transport-proxy',
+  import.meta.hot!,
+)
 
 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()
-        },
+        invoke: (payload) => rpcClient.invoke(payload),
       },
       hmr: false,
     },

packages/plugin-rsc/examples/browser-mode/vite.config.ts

@@ -4,6 +4,7 @@ import {
   getPluginApi,
   type PluginApi,
 } from '@vitejs/plugin-rsc/plugin'
+import { createRPCServer } from 'vite-dev-rpc'
 
 export default defineConfig({
   plugins: [
@@ -129,19 +130,9 @@ function rscBrowserModePlugin(): Plugin[] {
         manager = getPluginApi(config)!.manager
       },
       configureServer(server) {
-        server.middlewares.use(async (req, res, next) => {
-          const url = new URL(req.url ?? '/', 'https://any.local')
-          if (url.pathname === '/@vite/invoke-react-client') {
-            const payload = JSON.parse(url.searchParams.get('data')!)
-            const result =
-              await server.environments['react_client']!.hot.handleInvoke(
-                payload,
-              )
-            res.setHeader('Content-Type', 'application/json')
-            res.end(JSON.stringify(result))
-            return
-          }
-          next()
+        createRPCServer('transport-proxy', server.ws, {
+          invoke: (payload: any) =>
+            server.environments.react_client.hot.handleInvoke(payload),
         })
       },
       hotUpdate(ctx) {

packages/plugin-rsc/examples/browser/lib/dev-proxy.ts

@@ -1,18 +1,16 @@
 import { ESModulesEvaluator, ModuleRunner } from 'vite/module-runner'
+import { createRPCClient } from 'vite-dev-rpc'
+
+const rpcClient = createRPCClient<{ invoke: Function }, {}>(
+  'rsc:transport-proxy',
+  import.meta.hot!,
+)
 
 const runner = new ModuleRunner(
   {
     sourcemapInterceptor: false,
     transport: {
-      invoke: async (payload) => {
-        const response = await fetch(
-          '/@vite/invoke-rsc?' +
-            new URLSearchParams({
-              data: JSON.stringify(payload),
-            }),
-        )
-        return response.json()
-      },
+      invoke: (payload) => rpcClient.invoke(payload),
     },
     hmr: false,
   },

packages/plugin-rsc/examples/browser/lib/plugin.ts

@@ -1,6 +1,7 @@
 import { rmSync } from 'node:fs'
 import path from 'node:path'
 import { normalizePath, type Plugin } from 'vite'
+import { createRPCServer } from 'vite-dev-rpc'
 
 export default function vitePluginRscBrowser(): Plugin[] {
   return [
@@ -51,17 +52,9 @@ export default function vitePluginRscBrowser(): Plugin[] {
         },
       },
       configureServer(server) {
-        server.middlewares.use(async (req, res, next) => {
-          const url = new URL(req.url ?? '/', 'https://any.local')
-          if (url.pathname === '/@vite/invoke-rsc') {
-            const payload = JSON.parse(url.searchParams.get('data')!)
-            const result =
-              await server.environments['rsc']!.hot.handleInvoke(payload)
-            res.setHeader('Content-Type', 'application/json')
-            res.end(JSON.stringify(result))
-            return
-          }
-          next()
+        createRPCServer('rsc:transport-proxy', server.ws, {
+          invoke: (payload: any) =>
+            server.environments.rsc.hot.handleInvoke(payload),
         })
       },
     },

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

@@ -18,6 +18,7 @@
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "latest",
     "@vitejs/plugin-rsc": "latest",
-    "vite": "^7.1.10"
+    "vite": "^7.1.10",
+    "vite-dev-rpc": "^1.1.0"
   }
 }