From 95eaa8b13dfa3d15e774692228b19d72b4ea4d55 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 10:07:07 +0900
Subject: [PATCH 01/43] feat(rsc): support customizing `react-server`
 conditioned environment

---
 packages/plugin-rsc/src/plugin.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index a8b946ea2..cfed1d9f7 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -131,6 +131,15 @@ export type RscPluginOptions = {
    * @default false
    */
   useBuildAppHook?: boolean
+
+  /**
+   * This configuration allows configuring `react-server` conditioned environment.
+   * @experimental
+   * @default { server: ['rsc'] }
+   */
+  environment?: {
+    server?: string[]
+  }
 }
 
 export default function vitePluginRsc(

From 21183ba2d0b199698cac48deac4c7a811bdfb9d3 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 10:08:53 +0900
Subject: [PATCH 02/43] chore: comment

---
 packages/plugin-rsc/src/plugin.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index cfed1d9f7..f9d74b17d 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -133,7 +133,7 @@ export type RscPluginOptions = {
   useBuildAppHook?: boolean
 
   /**
-   * This configuration allows configuring `react-server` conditioned environment.
+   * This allows configuring `react-server` condition environment.
    * @experimental
    * @default { server: ['rsc'] }
    */

From 32d4756fc07080e3cabf4f46272e6712c6df6616 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 10:52:02 +0900
Subject: [PATCH 03/43] wip: vitePluginUseClient

---
 packages/plugin-rsc/src/plugin.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index f9d74b17d..b030f9044 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -945,10 +945,10 @@ function normalizeReferenceId(id: string, name: 'client' | 'rsc') {
   return normalizeViteImportAnalysisUrl(environment, id)
 }
 
-function vitePluginUseClient(
+export function vitePluginUseClient(
   useClientPluginOptions: Pick<
     RscPluginOptions,
-    'ignoredPackageWarnings' | 'keepUseCientProxy'
+    'ignoredPackageWarnings' | 'keepUseCientProxy' | 'environment'
   >,
 ): Plugin[] {
   const packageSources = new Map<string, string>()
@@ -956,11 +956,16 @@ function vitePluginUseClient(
   // https://github.com/vitejs/vite/blob/4bcf45863b5f46aa2b41f261283d08f12d3e8675/packages/vite/src/node/utils.ts#L175
   const bareImportRE = /^(?![a-zA-Z]:)[\w@](?!.*:\/\/)/
 
+  const serverEnvironments = useClientPluginOptions.environment?.server ?? [
+    'rsc',
+  ]
+  const isServer = (name: string) => serverEnvironments.includes(name)
+
   return [
     {
       name: 'rsc:use-client',
       async transform(code, id) {
-        if (this.environment.name !== 'rsc') return
+        if (!isServer(this.environment.name)) return
         if (!code.includes('use client')) return
 
         const ast = await parseAstAsync(code)
@@ -1082,7 +1087,7 @@ function vitePluginUseClient(
           id.startsWith('\0virtual:vite-rsc/client-in-server-package-proxy/')
         ) {
           assert.equal(this.environment.mode, 'dev')
-          assert.notEqual(this.environment.name, 'rsc')
+          assert(!isServer(this.environment.name))
           id = decodeURIComponent(
             id.slice(
               '\0virtual:vite-rsc/client-in-server-package-proxy/'.length,
@@ -1102,7 +1107,7 @@ function vitePluginUseClient(
       resolveId: {
         order: 'pre',
         async handler(source, importer, options) {
-          if (this.environment.name === 'rsc' && bareImportRE.test(source)) {
+          if (isServer(this.environment.name) && bareImportRE.test(source)) {
             const resolved = await this.resolve(source, importer, options)
             if (resolved && resolved.id.includes('/node_modules/')) {
               packageSources.set(resolved.id, source)
@@ -1127,7 +1132,7 @@ function vitePluginUseClient(
         }
       },
       generateBundle(_options, bundle) {
-        if (this.environment.name !== 'rsc') return
+        if (!isServer(this.environment.name)) return
 
         // track used exports of client references in rsc build
         // to tree shake unused exports in browser and ssr build

From 2e36de8064a368a054a2bfbfe241238eec914c4e Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 11:06:51 +0900
Subject: [PATCH 04/43] wip vitePluginUseServer

---
 packages/plugin-rsc/src/plugin.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index b030f9044..59c9b5643 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -1210,12 +1210,17 @@ function vitePluginDefineEncryptionKey(
   ]
 }
 
-function vitePluginUseServer(
+export function vitePluginUseServer(
   useServerPluginOptions: Pick<
     RscPluginOptions,
-    'ignoredPackageWarnings' | 'enableActionEncryption'
+    'ignoredPackageWarnings' | 'enableActionEncryption' | 'environment'
   >,
 ): Plugin[] {
+  const serverEnvironments = useServerPluginOptions.environment?.server ?? [
+    'rsc',
+  ]
+  const isServer = (name: string) => serverEnvironments.includes(name)
+
   return [
     {
       name: 'rsc:use-server',
@@ -1249,7 +1254,7 @@ function vitePluginUseServer(
           return normalizedId_
         }
 
-        if (this.environment.name === 'rsc') {
+        if (isServer(this.environment.name)) {
           const transformServerActionServer_ = withRollupError(
             this,
             transformServerActionServer,

From f480f3f738fad2660998ffc96395c727d36a5d4a Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 11:22:11 +0900
Subject: [PATCH 05/43] feat: expose more

---
 packages/plugin-rsc/src/plugin.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 59c9b5643..32aeb77bd 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -945,6 +945,7 @@ function normalizeReferenceId(id: string, name: 'client' | 'rsc') {
   return normalizeViteImportAnalysisUrl(environment, id)
 }
 
+/** @experimental */
 export function vitePluginUseClient(
   useClientPluginOptions: Pick<
     RscPluginOptions,
@@ -1151,7 +1152,8 @@ export function vitePluginUseClient(
   ]
 }
 
-function vitePluginDefineEncryptionKey(
+/** @experimental */
+export function vitePluginDefineEncryptionKey(
   useServerPluginOptions: Pick<RscPluginOptions, 'defineEncryptionKey'>,
 ): Plugin[] {
   let defineEncryptionKey: string
@@ -1210,6 +1212,7 @@ function vitePluginDefineEncryptionKey(
   ]
 }
 
+/** @experimental */
 export function vitePluginUseServer(
   useServerPluginOptions: Pick<
     RscPluginOptions,

From fa6353dd4107b0b482e0a8a5b82133716acb5910 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 11:25:30 +0900
Subject: [PATCH 06/43] feat: expose more

---
 packages/plugin-rsc/src/core/plugin.ts | 1 +
 packages/plugin-rsc/src/plugin.ts      | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/plugin-rsc/src/core/plugin.ts b/packages/plugin-rsc/src/core/plugin.ts
index d22d2ab0a..a13002379 100644
--- a/packages/plugin-rsc/src/core/plugin.ts
+++ b/packages/plugin-rsc/src/core/plugin.ts
@@ -1,5 +1,6 @@
 import type { Plugin } from 'vite'
 
+/** @experimental */
 export default function vitePluginRscCore(): Plugin[] {
   return [
     {
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 32aeb77bd..2868d363a 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -70,6 +70,8 @@ function resolvePackage(name: string) {
   return pathToFileURL(require.resolve(name)).href
 }
 
+export { vitePluginRscCore }
+
 export type RscPluginOptions = {
   /**
    * shorthand for configuring `environments.(name).build.rollupOptions.input.index`

From 795f9fd7257310c5c234e9b46527f3c179ec09f8 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 11:27:14 +0900
Subject: [PATCH 07/43] chore: tweak

---
 packages/plugin-rsc/src/plugin.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 2868d363a..141d0045f 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -1156,7 +1156,7 @@ export function vitePluginUseClient(
 
 /** @experimental */
 export function vitePluginDefineEncryptionKey(
-  useServerPluginOptions: Pick<RscPluginOptions, 'defineEncryptionKey'>,
+  useServerPluginOptions?: Pick<RscPluginOptions, 'defineEncryptionKey'>,
 ): Plugin[] {
   let defineEncryptionKey: string
   let emitEncryptionKey = false
@@ -1169,7 +1169,7 @@ export function vitePluginDefineEncryptionKey(
       async configEnvironment(name, _config, env) {
         if (name === 'rsc' && !env.isPreview) {
           defineEncryptionKey =
-            useServerPluginOptions.defineEncryptionKey ??
+            useServerPluginOptions?.defineEncryptionKey ??
             JSON.stringify(toBase64(await generateEncryptionKey()))
         }
       },

From 21c8cd663d23cf656abb8b20f021c34bef7b92ee Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 11:45:01 +0900
Subject: [PATCH 08/43] feat: add vitePluginRscMinimal

---
 packages/plugin-rsc/src/core/plugin.ts |  1 -
 packages/plugin-rsc/src/plugin.ts      | 31 +++++++++++++++++---------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/plugin-rsc/src/core/plugin.ts b/packages/plugin-rsc/src/core/plugin.ts
index a13002379..d22d2ab0a 100644
--- a/packages/plugin-rsc/src/core/plugin.ts
+++ b/packages/plugin-rsc/src/core/plugin.ts
@@ -1,6 +1,5 @@
 import type { Plugin } from 'vite'
 
-/** @experimental */
 export default function vitePluginRscCore(): Plugin[] {
   return [
     {
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 141d0045f..f31d9aae2 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -70,8 +70,6 @@ function resolvePackage(name: string) {
   return pathToFileURL(require.resolve(name)).href
 }
 
-export { vitePluginRscCore }
-
 export type RscPluginOptions = {
   /**
    * shorthand for configuring `environments.(name).build.rollupOptions.input.index`
@@ -144,6 +142,25 @@ export type RscPluginOptions = {
   }
 }
 
+/** @experimental */
+export function vitePluginRscMinimal(): Plugin[] {
+  return [
+    {
+      name: 'rsc:minimal',
+      async config() {
+        await esModuleLexer.init
+      },
+      configResolved(config_) {
+        config = config_
+      },
+      configureServer(server_) {
+        server = server_
+      },
+    },
+    ...vitePluginRscCore(),
+  ]
+}
+
 export default function vitePluginRsc(
   rscPluginOptions: RscPluginOptions = {},
 ): Plugin[] {
@@ -194,11 +211,10 @@ export default function vitePluginRsc(
   }
 
   return [
+    ...vitePluginRscMinimal(),
     {
       name: 'rsc',
       async config(config, env) {
-        await esModuleLexer.init
-
         // crawl packages with "react" in "peerDependencies" to bundle react deps on server
         // see https://github.com/svitejs/vitefu/blob/d8d82fa121e3b2215ba437107093c77bde51b63b/src/index.js#L95-L101
         const result = await crawlFrameworkPkgs({
@@ -306,11 +322,7 @@ export default function vitePluginRsc(
         }
       },
       buildApp: rscPluginOptions.useBuildAppHook ? buildApp : undefined,
-      configResolved(config_) {
-        config = config_
-      },
-      configureServer(server_) {
-        server = server_
+      configureServer() {
         ;(globalThis as any).__viteRscDevServer = server
 
         if (rscPluginOptions.disableServerHandler) return
@@ -849,7 +861,6 @@ globalThis.AsyncLocalStorage = __viteRscAyncHooks.AsyncLocalStorage;
         return ''
       },
     },
-    ...vitePluginRscCore(),
     ...vitePluginUseClient(rscPluginOptions),
     ...vitePluginUseServer(rscPluginOptions),
     ...vitePluginDefineEncryptionKey(rscPluginOptions),

From bb392646ef13a4a33a1111960579492a7e9068e6 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 11:52:31 +0900
Subject: [PATCH 09/43] fix: replace more

---
 packages/plugin-rsc/src/plugin.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index f31d9aae2..fef3f220f 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -947,7 +947,10 @@ function hashString(v: string) {
   return createHash('sha256').update(v).digest().toString('hex').slice(0, 12)
 }
 
-function normalizeReferenceId(id: string, name: 'client' | 'rsc') {
+function normalizeReferenceId(
+  id: string,
+  name: 'client' | 'rsc' | (string & {}),
+) {
   if (!server) {
     return hashString(path.relative(config.root, id))
   }
@@ -1022,6 +1025,7 @@ export function vitePluginUseClient(
         } else {
           if (this.environment.mode === 'dev') {
             importId = normalizeViteImportAnalysisUrl(
+              // TODO
               server.environments.client,
               id,
             )
@@ -1265,7 +1269,8 @@ export function vitePluginUseServer(
               // module identity of `import(id)` like browser, so we simply strip it off.
               id = id.split('?v=')[0]!
             }
-            normalizedId_ = normalizeReferenceId(id, 'rsc')
+            // TODO
+            normalizedId_ = normalizeReferenceId(id, serverEnvironments[0]!)
           }
           return normalizedId_
         }

From ea048d2ffac783f1b2bf7727e82ecdf92dacfefd Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 14:00:05 +0900
Subject: [PATCH 10/43] chore: add examples/browser-mode

---
 .../examples/browser-mode/README.md           |   2 +
 .../examples/browser-mode/index.html          |  12 ++
 .../examples/browser-mode/package.json        |  23 ++++
 .../examples/browser-mode/public/vite.svg     |   1 +
 .../examples/browser-mode/src/action.tsx      |  11 ++
 .../browser-mode/src/assets/react.svg         |   1 +
 .../examples/browser-mode/src/client.tsx      |  13 ++
 .../browser-mode/src/framework/client.tsx     |  21 ++++
 .../browser-mode/src/framework/main.tsx       |   1 +
 .../browser-mode/src/framework/server.tsx     |  48 ++++++++
 .../examples/browser-mode/src/index.css       | 112 ++++++++++++++++++
 .../examples/browser-mode/src/root.tsx        |  44 +++++++
 .../examples/browser-mode/tsconfig.json       |  18 +++
 .../examples/browser-mode/vite.config.ts      | 100 ++++++++++++++++
 pnpm-lock.yaml                                |  25 ++++
 15 files changed, 432 insertions(+)
 create mode 100644 packages/plugin-rsc/examples/browser-mode/README.md
 create mode 100644 packages/plugin-rsc/examples/browser-mode/index.html
 create mode 100644 packages/plugin-rsc/examples/browser-mode/package.json
 create mode 100644 packages/plugin-rsc/examples/browser-mode/public/vite.svg
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/action.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/assets/react.svg
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/client.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/index.css
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/root.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/tsconfig.json
 create mode 100644 packages/plugin-rsc/examples/browser-mode/vite.config.ts

diff --git a/packages/plugin-rsc/examples/browser-mode/README.md b/packages/plugin-rsc/examples/browser-mode/README.md
new file mode 100644
index 000000000..2dd43bc70
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/README.md
@@ -0,0 +1,2 @@
+- https://github.com/kasperpeulen/vitest-plugin-rsc/
+- https://github.com/kasperpeulen/rsc-browser-vite-demo
diff --git a/packages/plugin-rsc/examples/browser-mode/index.html b/packages/plugin-rsc/examples/browser-mode/index.html
new file mode 100644
index 000000000..bb7507e37
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <script async type="module" src="/src/framework/main.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/plugin-rsc/examples/browser-mode/package.json b/packages/plugin-rsc/examples/browser-mode/package.json
new file mode 100644
index 000000000..f314b7333
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@vitejs/plugin-rsc-examples-browser-mode",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-rsc": "latest",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "latest",
+    "vite": "^7.0.6"
+  }
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/public/vite.svg b/packages/plugin-rsc/examples/browser-mode/public/vite.svg
new file mode 100644
index 000000000..e7b8dfb1b
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/packages/plugin-rsc/examples/browser-mode/src/action.tsx b/packages/plugin-rsc/examples/browser-mode/src/action.tsx
new file mode 100644
index 000000000..4fc55d65b
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/action.tsx
@@ -0,0 +1,11 @@
+'use server'
+
+let serverCounter = 0
+
+export async function getServerCounter() {
+  return serverCounter
+}
+
+export async function updateServerCounter(change: number) {
+  serverCounter += change
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/assets/react.svg b/packages/plugin-rsc/examples/browser-mode/src/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/packages/plugin-rsc/examples/browser-mode/src/client.tsx b/packages/plugin-rsc/examples/browser-mode/src/client.tsx
new file mode 100644
index 000000000..29bb5d367
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/client.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import React from 'react'
+
+export function ClientCounter() {
+  const [count, setCount] = React.useState(0)
+
+  return (
+    <button onClick={() => setCount((count) => count + 1)}>
+      Client Counter: {count}
+    </button>
+  )
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
new file mode 100644
index 000000000..e89322289
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import * as ReactDOMClient from 'react-dom/client'
+import * as ReactClient from '@vitejs/plugin-rsc/react/browser'
+import type { RscPayload } from './server'
+
+export function render(rscStream: ReadableStream<Uint8Array>) {
+  let rscPaylod: Promise<RscPayload>
+
+  function ClientRoot() {
+    rscPaylod ??= ReactClient.createFromReadableStream<RscPayload>(rscStream)
+    return React.use(rscPaylod).root
+  }
+
+  const domRoot = document.getElementById('root')!
+  const reactRoot = ReactDOMClient.createRoot(domRoot)
+  reactRoot.render(
+    <React.StrictMode>
+      <ClientRoot />
+    </React.StrictMode>,
+  )
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx
new file mode 100644
index 000000000..6c46e9b17
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx
@@ -0,0 +1 @@
+import './server'
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
new file mode 100644
index 000000000..2e1b1237e
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
@@ -0,0 +1,48 @@
+import { renderToReadableStream } from '@vitejs/plugin-rsc/react/rsc'
+import type React from 'react'
+import { ESModulesEvaluator, ModuleRunner } from 'vite/module-runner'
+
+export type RscPayload = {
+  root: React.ReactNode
+}
+
+async function main() {
+  const rscRoot = (
+    <div>
+      <h1>RSC Browser Mode</h1>
+    </div>
+  )
+  const rscStream = renderToReadableStream<RscPayload>({
+    root: rscRoot,
+  })
+
+  const clientRunner = createClientRunner()
+  const clientEntry = await clientRunner.import<typeof import('./client')>(
+    '/src/framework/client.tsx',
+  )
+  clientEntry.render(rscStream)
+}
+
+function createClientRunner() {
+  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 runner
+}
+
+main()
diff --git a/packages/plugin-rsc/examples/browser-mode/src/index.css b/packages/plugin-rsc/examples/browser-mode/src/index.css
new file mode 100644
index 000000000..f4d2128c0
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/index.css
@@ -0,0 +1,112 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 1rem;
+}
+
+.read-the-docs {
+  color: #888;
+  text-align: left;
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/root.tsx b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
new file mode 100644
index 000000000..9baa7b9c2
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
@@ -0,0 +1,44 @@
+import './index.css' // css import is automatically injected in exported server components
+import viteLogo from '/vite.svg'
+import { getServerCounter, updateServerCounter } from './action.tsx'
+import reactLogo from './assets/react.svg'
+import { ClientCounter } from './client.tsx'
+
+export function Root() {
+  return <App />
+}
+
+function App() {
+  return (
+    <div id="root">
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a
+          href="https://react.dev/reference/rsc/server-components"
+          target="_blank"
+        >
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + RSC</h1>
+      <div className="card">
+        <ClientCounter />
+      </div>
+      <div className="card">
+        <form action={updateServerCounter.bind(null, 1)}>
+          <button>Server Counter: {getServerCounter()}</button>
+        </form>
+      </div>
+      <ul className="read-the-docs">
+        <li>
+          Edit <code>src/client.tsx</code> to test client HMR.
+        </li>
+        <li>
+          Edit <code>src/root.tsx</code> to test server HMR.
+        </li>
+      </ul>
+    </div>
+  )
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/tsconfig.json b/packages/plugin-rsc/examples/browser-mode/tsconfig.json
new file mode 100644
index 000000000..4c355ed3c
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "erasableSyntaxOnly": true,
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "@vitejs/plugin-rsc/types"],
+    "jsx": "react-jsx"
+  }
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
new file mode 100644
index 000000000..77297f545
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -0,0 +1,100 @@
+import { defaultClientConditions, defineConfig } from 'vite'
+import {
+  vitePluginRscMinimal,
+  vitePluginUseClient,
+  vitePluginUseServer,
+  vitePluginDefineEncryptionKey,
+} from '@vitejs/plugin-rsc/plugin'
+
+export default defineConfig({
+  plugins: [
+    vitePluginRscMinimal(),
+    vitePluginUseClient({
+      environment: {
+        server: ['client'],
+      },
+    }),
+    vitePluginUseServer({
+      environment: {
+        server: ['client'],
+      },
+    }),
+    vitePluginDefineEncryptionKey(),
+    {
+      name: 'rsc:run-in-browser',
+      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.end(JSON.stringify(result))
+            return
+          }
+          next()
+        })
+      },
+      // hotUpdate(ctx) {
+      //   // TODO find out how to do HMR
+      //   ctx.server.ws.send({ type: "full-reload", path: ctx.file });
+      // },
+      config() {
+        return {
+          environments: {
+            client: {
+              keepProcessEnv: false,
+              resolve: {
+                conditions: ['react-server', ...defaultClientConditions],
+              },
+              optimizeDeps: {
+                include: [
+                  'react',
+                  'react-dom',
+                  'react-dom/client',
+                  'react/jsx-runtime',
+                  'react/jsx-dev-runtime',
+                  '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
+                  '@vitejs/plugin-rsc/vendor/react-server-dom/server.edge',
+                  '@vitejs/plugin-rsc/vendor/react-server-dom/client.edge',
+                  '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
+                ],
+              },
+            },
+            react_client: {
+              keepProcessEnv: false,
+              resolve: {
+                conditions: [...defaultClientConditions],
+                noExternal: true,
+              },
+              optimizeDeps: {
+                include: [
+                  'react',
+                  'react-dom',
+                  'react-dom/client',
+                  'react/jsx-runtime',
+                  'react/jsx-dev-runtime',
+                  '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
+                ],
+                exclude: ['fsevents'],
+                esbuildOptions: {
+                  platform: 'browser',
+                },
+              },
+            },
+          },
+          resolve: {
+            alias: {
+              '@vitejs/plugin-rsc/vendor/react-server-dom/server.edge':
+                '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
+              '@vitejs/plugin-rsc/vendor/react-server-dom/client.edge':
+                '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
+            },
+          },
+        }
+      },
+    },
+  ],
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0406d1e0d..2f83a1ff8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -561,6 +561,31 @@ importers:
         specifier: ^4.26.0
         version: 4.26.0
 
+  packages/plugin-rsc/examples/browser-mode:
+    dependencies:
+      '@vitejs/plugin-rsc':
+        specifier: latest
+        version: link:../..
+      react:
+        specifier: ^19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: ^19.1.0
+        version: 19.1.0(react@19.1.0)
+    devDependencies:
+      '@types/react':
+        specifier: ^19.1.8
+        version: 19.1.8
+      '@types/react-dom':
+        specifier: ^19.1.6
+        version: 19.1.6(@types/react@19.1.8)
+      '@vitejs/plugin-react':
+        specifier: latest
+        version: link:../../../plugin-react
+      vite:
+        specifier: ^7.0.6
+        version: 7.0.6(@types/node@22.16.5)(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.7.1)
+
   packages/plugin-rsc/examples/e2e:
     devDependencies:
       '@vitejs/plugin-react':

From 743eaedda6f9cf3c0852aefaeb375f14fa1fcd31 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 14:07:27 +0900
Subject: [PATCH 11/43] chore: cleanup

---
 .../examples/browser-mode/vite.config.ts         | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 77297f545..96b440b6c 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -21,7 +21,7 @@ export default defineConfig({
     }),
     vitePluginDefineEncryptionKey(),
     {
-      name: 'rsc:run-in-browser',
+      name: 'rsc:browser-mode',
       configureServer(server) {
         server.middlewares.use(async (req, res, next) => {
           const url = new URL(req.url ?? '/', 'https://any.local')
@@ -37,10 +37,16 @@ export default defineConfig({
           next()
         })
       },
-      // hotUpdate(ctx) {
-      //   // TODO find out how to do HMR
-      //   ctx.server.ws.send({ type: "full-reload", path: ctx.file });
-      // },
+      hotUpdate(ctx) {
+        if (this.environment.name === 'react_client') {
+          if (ctx.modules.length > 0) {
+            ctx.server.environments.client.hot.send({
+              type: 'full-reload',
+              path: ctx.file,
+            })
+          }
+        }
+      },
       config() {
         return {
           environments: {

From d3b411a754eb3fe16c7ee4924d913da1baa6ae7d Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 14:14:00 +0900
Subject: [PATCH 12/43] wip: client component

---
 .../plugin-rsc/examples/browser-mode/index.html  |  2 +-
 .../examples/browser-mode/package.json           |  4 ++--
 .../browser-mode/src/framework/client.tsx        |  6 ++++++
 .../examples/browser-mode/src/framework/main.tsx |  1 -
 .../browser-mode/src/framework/server.tsx        | 16 +++++++++-------
 .../examples/browser-mode/src/root.tsx           | 14 +++-----------
 6 files changed, 21 insertions(+), 22 deletions(-)
 delete mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx

diff --git a/packages/plugin-rsc/examples/browser-mode/index.html b/packages/plugin-rsc/examples/browser-mode/index.html
index bb7507e37..c7db4de43 100644
--- a/packages/plugin-rsc/examples/browser-mode/index.html
+++ b/packages/plugin-rsc/examples/browser-mode/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <script async type="module" src="/src/framework/main.tsx"></script>
+    <script async type="module" src="/src/framework/server.tsx"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/packages/plugin-rsc/examples/browser-mode/package.json b/packages/plugin-rsc/examples/browser-mode/package.json
index f314b7333..a4f517d27 100644
--- a/packages/plugin-rsc/examples/browser-mode/package.json
+++ b/packages/plugin-rsc/examples/browser-mode/package.json
@@ -6,8 +6,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "build": "false && vite build",
+    "preview": "false && vite preview"
   },
   "dependencies": {
     "@vitejs/plugin-rsc": "latest",
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
index e89322289..1b5305505 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
@@ -3,6 +3,12 @@ import * as ReactDOMClient from 'react-dom/client'
 import * as ReactClient from '@vitejs/plugin-rsc/react/browser'
 import type { RscPayload } from './server'
 
+export function initialize() {
+  ReactClient.setRequireModule({
+    load: (id) => import(/* @vite-ignore */ id),
+  })
+}
+
 export function render(rscStream: ReadableStream<Uint8Array>) {
   let rscPaylod: Promise<RscPayload>
 
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx
deleted file mode 100644
index 6c46e9b17..000000000
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx
+++ /dev/null
@@ -1 +0,0 @@
-import './server'
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
index 2e1b1237e..78afb1807 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
@@ -1,25 +1,27 @@
-import { renderToReadableStream } from '@vitejs/plugin-rsc/react/rsc'
+import {
+  renderToReadableStream,
+  setRequireModule,
+} from '@vitejs/plugin-rsc/react/rsc'
 import type React from 'react'
 import { ESModulesEvaluator, ModuleRunner } from 'vite/module-runner'
+import { Root } from '../root'
 
 export type RscPayload = {
   root: React.ReactNode
 }
 
 async function main() {
-  const rscRoot = (
-    <div>
-      <h1>RSC Browser Mode</h1>
-    </div>
-  )
+  setRequireModule({ load: (id) => import(/* @vite-ignore */ id) })
+
   const rscStream = renderToReadableStream<RscPayload>({
-    root: rscRoot,
+    root: <Root />,
   })
 
   const clientRunner = createClientRunner()
   const clientEntry = await clientRunner.import<typeof import('./client')>(
     '/src/framework/client.tsx',
   )
+  clientEntry.initialize()
   clientEntry.render(rscStream)
 }
 
diff --git a/packages/plugin-rsc/examples/browser-mode/src/root.tsx b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
index 9baa7b9c2..78ce9d516 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/root.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
@@ -1,6 +1,6 @@
 import './index.css' // css import is automatically injected in exported server components
 import viteLogo from '/vite.svg'
-import { getServerCounter, updateServerCounter } from './action.tsx'
+// import { getServerCounter, updateServerCounter } from './action.tsx'
 import reactLogo from './assets/react.svg'
 import { ClientCounter } from './client.tsx'
 
@@ -26,19 +26,11 @@ function App() {
       <div className="card">
         <ClientCounter />
       </div>
-      <div className="card">
+      {/* <div className="card">
         <form action={updateServerCounter.bind(null, 1)}>
           <button>Server Counter: {getServerCounter()}</button>
         </form>
-      </div>
-      <ul className="read-the-docs">
-        <li>
-          Edit <code>src/client.tsx</code> to test client HMR.
-        </li>
-        <li>
-          Edit <code>src/root.tsx</code> to test server HMR.
-        </li>
-      </ul>
+      </div> */}
     </div>
   )
 }

From 3e2f652ec8046061dfc47f4a593bd53201d906aa Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 14:15:15 +0900
Subject: [PATCH 13/43] chore: cleanup

---
 packages/plugin-rsc/examples/browser-mode/index.html        | 1 +
 .../examples/browser-mode/src/framework/client-runner.tsx   | 0
 .../examples/browser-mode/src/framework/client.tsx          | 6 ++++++
 .../plugin-rsc/examples/browser-mode/src/framework/main.tsx | 0
 .../examples/browser-mode/src/framework/server.tsx          | 6 +++++-
 5 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/client-runner.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx

diff --git a/packages/plugin-rsc/examples/browser-mode/index.html b/packages/plugin-rsc/examples/browser-mode/index.html
index c7db4de43..5b2a0fe0f 100644
--- a/packages/plugin-rsc/examples/browser-mode/index.html
+++ b/packages/plugin-rsc/examples/browser-mode/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <title>RSC Browser Mode</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <script async type="module" src="/src/framework/server.tsx"></script>
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/client-runner.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/client-runner.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
index 1b5305505..ebae92f9e 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
@@ -7,6 +7,12 @@ export function initialize() {
   ReactClient.setRequireModule({
     load: (id) => import(/* @vite-ignore */ id),
   })
+
+  // TODO:
+  ReactClient.setServerCallback(async (id, args) => {
+    id
+    args
+  })
 }
 
 export function render(rscStream: ReadableStream<Uint8Array>) {
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
index 78afb1807..1b2399b0c 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
@@ -10,8 +10,12 @@ export type RscPayload = {
   root: React.ReactNode
 }
 
-async function main() {
+function initialize() {
   setRequireModule({ load: (id) => import(/* @vite-ignore */ id) })
+}
+
+async function main() {
+  initialize()
 
   const rscStream = renderToReadableStream<RscPayload>({
     root: <Root />,

From 162f50160322dbf7d31051bb863713361e508877 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:18:48 +0900
Subject: [PATCH 14/43] refactor: align entry.{rsc,browser} pattern

---
 .../examples/browser-mode/index.html          |  2 +-
 .../src/framework/client-runner.tsx           |  0
 .../browser-mode/src/framework/client.tsx     | 33 -----------
 .../src/framework/entry.browser.tsx           | 57 ++++++++++++++++++
 .../browser-mode/src/framework/entry.rsc.tsx  | 59 +++++++++++++++++++
 .../browser-mode/src/framework/main.tsx       | 35 +++++++++++
 .../browser-mode/src/framework/server.tsx     | 54 -----------------
 7 files changed, 152 insertions(+), 88 deletions(-)
 delete mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/client-runner.tsx
 delete mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/entry.browser.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx
 delete mode 100644 packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx

diff --git a/packages/plugin-rsc/examples/browser-mode/index.html b/packages/plugin-rsc/examples/browser-mode/index.html
index 5b2a0fe0f..6323c94f5 100644
--- a/packages/plugin-rsc/examples/browser-mode/index.html
+++ b/packages/plugin-rsc/examples/browser-mode/index.html
@@ -5,7 +5,7 @@
     <title>RSC Browser Mode</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <script async type="module" src="/src/framework/server.tsx"></script>
+    <script async type="module" src="/src/framework/main.tsx"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/client-runner.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/client-runner.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
deleted file mode 100644
index ebae92f9e..000000000
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/client.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-import * as ReactDOMClient from 'react-dom/client'
-import * as ReactClient from '@vitejs/plugin-rsc/react/browser'
-import type { RscPayload } from './server'
-
-export function initialize() {
-  ReactClient.setRequireModule({
-    load: (id) => import(/* @vite-ignore */ id),
-  })
-
-  // TODO:
-  ReactClient.setServerCallback(async (id, args) => {
-    id
-    args
-  })
-}
-
-export function render(rscStream: ReadableStream<Uint8Array>) {
-  let rscPaylod: Promise<RscPayload>
-
-  function ClientRoot() {
-    rscPaylod ??= ReactClient.createFromReadableStream<RscPayload>(rscStream)
-    return React.use(rscPaylod).root
-  }
-
-  const domRoot = document.getElementById('root')!
-  const reactRoot = ReactDOMClient.createRoot(domRoot)
-  reactRoot.render(
-    <React.StrictMode>
-      <ClientRoot />
-    </React.StrictMode>,
-  )
-}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/entry.browser.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/entry.browser.tsx
new file mode 100644
index 000000000..bb36e3626
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/entry.browser.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react'
+import * as ReactDOMClient from 'react-dom/client'
+import * as ReactClient from '@vitejs/plugin-rsc/react/browser'
+import type { RscPayload } from './entry.rsc'
+
+let fetchServer: typeof import('./entry.rsc').fetchServer
+
+export function initialize(options: { fetchServer: typeof fetchServer }) {
+  fetchServer = options.fetchServer
+  ReactClient.setRequireModule({
+    load: (id) => import(/* @vite-ignore */ id),
+  })
+}
+
+export async function main() {
+  let setPayload: (v: RscPayload) => void
+
+  const initialPayload = await ReactClient.createFromFetch<RscPayload>(
+    fetchServer(new Request(window.location.href)),
+  )
+
+  function BrowserRoot() {
+    const [payload, setPayload_] = React.useState(initialPayload)
+
+    React.useEffect(() => {
+      setPayload = (v) => React.startTransition(() => setPayload_(v))
+    }, [setPayload_])
+
+    return payload.root
+  }
+
+  ReactClient.setServerCallback(async (id, args) => {
+    const url = new URL(window.location.href)
+    const temporaryReferences = ReactClient.createTemporaryReferenceSet()
+    const payload = await ReactClient.createFromFetch<RscPayload>(
+      fetchServer(
+        new Request(url, {
+          method: 'POST',
+          body: await ReactClient.encodeReply(args, { temporaryReferences }),
+          headers: {
+            'x-rsc-action': id,
+          },
+        }),
+      ),
+      { temporaryReferences },
+    )
+    setPayload(payload)
+    return payload.returnValue
+  })
+
+  const browserRoot = (
+    <React.StrictMode>
+      <BrowserRoot />
+    </React.StrictMode>
+  )
+  ReactDOMClient.createRoot(document.body).render(browserRoot)
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx
new file mode 100644
index 000000000..5f6b2e997
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx
@@ -0,0 +1,59 @@
+import * as ReactServer from '@vitejs/plugin-rsc/react/rsc'
+import type React from 'react'
+import { Root } from '../root'
+import type { ReactFormState } from 'react-dom/client'
+
+export type RscPayload = {
+  root: React.ReactNode
+  returnValue?: unknown
+  formState?: ReactFormState
+}
+
+export function initialize() {
+  ReactServer.setRequireModule({ load: (id) => import(/* @vite-ignore */ id) })
+}
+
+let root: React.ReactNode
+
+export function setRoot(root_: React.ReactNode) {
+  root = root_
+}
+
+export async function fetchServer(request: Request): Promise<Response> {
+  const isAction = request.method === 'POST'
+  let returnValue: unknown | undefined
+  let formState: ReactFormState | undefined
+  let temporaryReferences: unknown | undefined
+  if (isAction) {
+    const actionId = request.headers.get('x-rsc-action')
+    if (actionId) {
+      const contentType = request.headers.get('content-type')
+      const body = contentType?.startsWith('multipart/form-data')
+        ? await request.formData()
+        : await request.text()
+      temporaryReferences = ReactServer.createTemporaryReferenceSet()
+      const args = await ReactServer.decodeReply(body, { temporaryReferences })
+      const action = await ReactServer.loadServerAction(actionId)
+      returnValue = await action.apply(null, args)
+    } else {
+      const formData = await request.formData()
+      const decodedAction = await ReactServer.decodeAction(formData)
+      const result = await decodedAction()
+      formState = await ReactServer.decodeFormState(result, formData)
+    }
+  }
+
+  const rscPayload: RscPayload = { root: <Root />, formState, returnValue }
+  const rscOptions = { temporaryReferences }
+  const rscStream = ReactServer.renderToReadableStream<RscPayload>(
+    rscPayload,
+    rscOptions,
+  )
+
+  return new Response(rscStream, {
+    headers: {
+      'content-type': 'text/x-component;charset=utf-8',
+      vary: 'accept',
+    },
+  })
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx
index e69de29bb..12d5c7546 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/main.tsx
@@ -0,0 +1,35 @@
+import { ESModulesEvaluator, ModuleRunner } from 'vite/module-runner'
+import * as server from './entry.rsc'
+
+async function main() {
+  const client = await importClient()
+  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()
diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
deleted file mode 100644
index 1b2399b0c..000000000
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/server.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-  renderToReadableStream,
-  setRequireModule,
-} from '@vitejs/plugin-rsc/react/rsc'
-import type React from 'react'
-import { ESModulesEvaluator, ModuleRunner } from 'vite/module-runner'
-import { Root } from '../root'
-
-export type RscPayload = {
-  root: React.ReactNode
-}
-
-function initialize() {
-  setRequireModule({ load: (id) => import(/* @vite-ignore */ id) })
-}
-
-async function main() {
-  initialize()
-
-  const rscStream = renderToReadableStream<RscPayload>({
-    root: <Root />,
-  })
-
-  const clientRunner = createClientRunner()
-  const clientEntry = await clientRunner.import<typeof import('./client')>(
-    '/src/framework/client.tsx',
-  )
-  clientEntry.initialize()
-  clientEntry.render(rscStream)
-}
-
-function createClientRunner() {
-  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 runner
-}
-
-main()

From 976afb614c948a9da6caf70ae0488843080c3fb1 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:20:11 +0900
Subject: [PATCH 15/43] chore: cleanup

---
 .../examples/browser-mode/src/framework/entry.rsc.tsx       | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx
index 5f6b2e997..089c1981d 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx
@@ -13,12 +13,6 @@ export function initialize() {
   ReactServer.setRequireModule({ load: (id) => import(/* @vite-ignore */ id) })
 }
 
-let root: React.ReactNode
-
-export function setRoot(root_: React.ReactNode) {
-  root = root_
-}
-
 export async function fetchServer(request: Request): Promise<Response> {
   const isAction = request.method === 'POST'
   let returnValue: unknown | undefined

From 357e219224e240af9166f026ee5dd254b588fd7a Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:26:23 +0900
Subject: [PATCH 16/43] fix(rsc): use `/react/rsc` for use server transform
 runtime import

---
 packages/plugin-rsc/src/plugin.ts    | 15 ++++++++++++---
 packages/plugin-rsc/tsdown.config.ts |  1 +
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index fef3f220f..a709dbf80 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -1289,17 +1289,26 @@ export function vitePluginUseServer(
               )}, ${JSON.stringify(name)})`,
             rejectNonAsyncFunction: true,
             encode: enableEncryption
-              ? (value) => `$$ReactServer.encryptActionBoundArgs(${value})`
+              ? (value) =>
+                  `__vite_rsc_encryption_runtime.encryptActionBoundArgs(${value})`
               : undefined,
             decode: enableEncryption
               ? (value) =>
-                  `await $$ReactServer.decryptActionBoundArgs(${value})`
+                  `await __vite_rsc_encryption_runtime.decryptActionBoundArgs(${value})`
               : undefined,
           })
           if (!output.hasChanged()) return
           serverReferences[getNormalizedId()] = id
-          const importSource = resolvePackage(`${PKG_NAME}/rsc`)
+          const importSource = resolvePackage(`${PKG_NAME}/react/rsc`)
           output.prepend(`import * as $$ReactServer from "${importSource}";\n`)
+          if (enableEncryption) {
+            const importSource = resolvePackage(
+              `${PKG_NAME}/utils/encryption-runtime`,
+            )
+            output.prepend(
+              `import * as __vite_rsc_encryption_runtime from ${JSON.stringify(importSource)};\n`,
+            )
+          }
           return {
             code: output.toString(),
             map: output.generateMap({ hires: 'boundary' }),
diff --git a/packages/plugin-rsc/tsdown.config.ts b/packages/plugin-rsc/tsdown.config.ts
index 0c39520ab..e5a8c06d7 100644
--- a/packages/plugin-rsc/tsdown.config.ts
+++ b/packages/plugin-rsc/tsdown.config.ts
@@ -22,6 +22,7 @@ export default defineConfig({
     'src/rsc-html-stream/ssr.ts',
     'src/rsc-html-stream/browser.ts',
     'src/utils/rpc.ts',
+    'src/utils/encryption-runtime.ts',
   ],
   format: ['esm'],
   external: [/^virtual:/, /^@vitejs\/plugin-rsc\/vendor\//],

From 2fa3a35cfe6320ea6bd27a5c829f47e664395cfd Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:30:48 +0900
Subject: [PATCH 17/43] wip: server action

---
 packages/plugin-rsc/examples/browser-mode/src/root.tsx   | 8 ++++----
 packages/plugin-rsc/examples/browser-mode/vite.config.ts | 4 ++++
 packages/plugin-rsc/package.json                         | 3 ++-
 pnpm-lock.yaml                                           | 5 ++++-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/src/root.tsx b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
index 78ce9d516..fb9d49061 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/root.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
@@ -1,6 +1,6 @@
-import './index.css' // css import is automatically injected in exported server components
+import './index.css'
 import viteLogo from '/vite.svg'
-// import { getServerCounter, updateServerCounter } from './action.tsx'
+import { getServerCounter, updateServerCounter } from './action.tsx'
 import reactLogo from './assets/react.svg'
 import { ClientCounter } from './client.tsx'
 
@@ -26,11 +26,11 @@ function App() {
       <div className="card">
         <ClientCounter />
       </div>
-      {/* <div className="card">
+      <div className="card">
         <form action={updateServerCounter.bind(null, 1)}>
           <button>Server Counter: {getServerCounter()}</button>
         </form>
-      </div> */}
+      </div>
     </div>
   )
 }
diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 96b440b6c..3beae8ea5 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -5,9 +5,11 @@ import {
   vitePluginUseServer,
   vitePluginDefineEncryptionKey,
 } from '@vitejs/plugin-rsc/plugin'
+import inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
   plugins: [
+    inspect(),
     vitePluginRscMinimal(),
     vitePluginUseClient({
       environment: {
@@ -93,6 +95,8 @@ export default defineConfig({
           },
           resolve: {
             alias: {
+              '@vitejs/plugin-rsc/rsc':
+                '@vitejs/plugin-rsc/react/rsc',
               '@vitejs/plugin-rsc/vendor/react-server-dom/server.edge':
                 '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
               '@vitejs/plugin-rsc/vendor/react-server-dom/client.edge':
diff --git a/packages/plugin-rsc/package.json b/packages/plugin-rsc/package.json
index 01e4e08be..41a8f18a0 100644
--- a/packages/plugin-rsc/package.json
+++ b/packages/plugin-rsc/package.json
@@ -60,7 +60,8 @@
     "react-server-dom-webpack": "^19.1.0",
     "rsc-html-stream": "^0.0.7",
     "tinyexec": "^1.0.1",
-    "tsdown": "^0.13.0"
+    "tsdown": "^0.13.0",
+    "vite-plugin-inspect": "^11.3.2"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f83a1ff8..889b162a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -502,6 +502,9 @@ importers:
       tsdown:
         specifier: ^0.13.0
         version: 0.13.0(publint@0.3.12)(typescript@5.8.3)
+      vite-plugin-inspect:
+        specifier: ^11.3.2
+        version: 11.3.2(vite@7.0.6(@types/node@22.16.5)(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.7.1))
 
   packages/plugin-rsc/examples/basic:
     dependencies:
@@ -8640,7 +8643,7 @@ snapshots:
   unplugin-utils@0.2.4:
     dependencies:
       pathe: 2.0.3
-      picomatch: 4.0.2
+      picomatch: 4.0.3
 
   unrs-resolver@1.9.2:
     dependencies:

From f3f493273b25e5cc6f7fe7058b020ae726abcd36 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:31:13 +0900
Subject: [PATCH 18/43] chore: cleanup

---
 packages/plugin-rsc/examples/browser-mode/vite.config.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 3beae8ea5..eed6c8ae9 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -95,8 +95,6 @@ export default defineConfig({
           },
           resolve: {
             alias: {
-              '@vitejs/plugin-rsc/rsc':
-                '@vitejs/plugin-rsc/react/rsc',
               '@vitejs/plugin-rsc/vendor/react-server-dom/server.edge':
                 '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
               '@vitejs/plugin-rsc/vendor/react-server-dom/client.edge':

From d84bd2a529b9bdbc58ba624a93f447cbeb6a53fd Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:36:45 +0900
Subject: [PATCH 19/43] fix: __vite_rsc_raw_import__ for server action

---
 .../browser-mode/src/framework/entry.rsc.tsx  |  4 +++-
 packages/plugin-rsc/src/plugin.ts             | 24 +++++++++----------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx b/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx
index 089c1981d..343e6751c 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx
@@ -9,8 +9,10 @@ export type RscPayload = {
   formState?: ReactFormState
 }
 
+declare let __vite_rsc_raw_import__: (id: string) => Promise<unknown>
+
 export function initialize() {
-  ReactServer.setRequireModule({ load: (id) => import(/* @vite-ignore */ id) })
+  ReactServer.setRequireModule({ load: (id) => __vite_rsc_raw_import__(id) })
 }
 
 export async function fetchServer(request: Request): Promise<Response> {
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index a709dbf80..32fe2b897 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -157,6 +157,18 @@ export function vitePluginRscMinimal(): Plugin[] {
         server = server_
       },
     },
+    {
+      name: 'rsc:patch-browser-raw-import',
+      transform: {
+        order: 'post',
+        handler(code) {
+          if (code.includes('__vite_rsc_raw_import__')) {
+            // inject dynamic import last to avoid Vite adding `?import` query to client references
+            return code.replace('__vite_rsc_raw_import__', 'import')
+          }
+        },
+      },
+    },
     ...vitePluginRscCore(),
   ]
 }
@@ -465,18 +477,6 @@ export default function vitePluginRsc(
         }
       },
     },
-    {
-      name: 'rsc:patch-browser-raw-import',
-      transform: {
-        order: 'post',
-        handler(code) {
-          if (code.includes('__vite_rsc_raw_import__')) {
-            // inject dynamic import last to avoid Vite adding `?import` query to client references
-            return code.replace('__vite_rsc_raw_import__', 'import')
-          }
-        },
-      },
-    },
     {
       // backward compat: `loadSsrModule(name)` implemented as `loadModule("ssr", name)`
       name: 'rsc:load-ssr-module',

From f54f591b281e670947aa468f539726a2b6043c97 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:38:43 +0900
Subject: [PATCH 20/43] chore: tweak

---
 packages/plugin-rsc/src/plugin.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 32fe2b897..c53b657a8 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -158,12 +158,13 @@ export function vitePluginRscMinimal(): Plugin[] {
       },
     },
     {
-      name: 'rsc:patch-browser-raw-import',
+      name: 'rsc:vite-client-raw-import',
       transform: {
         order: 'post',
         handler(code) {
           if (code.includes('__vite_rsc_raw_import__')) {
-            // inject dynamic import last to avoid Vite adding `?import` query to client references
+            // inject dynamic import last to avoid Vite adding `?import` query
+            // to client references (and browser mode server references)
             return code.replace('__vite_rsc_raw_import__', 'import')
           }
         },

From c9270c25e9f5922ce40a44f6bf73e97ed274bbf3 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:44:11 +0900
Subject: [PATCH 21/43] chore: readme

---
 packages/plugin-rsc/examples/browser-mode/README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/README.md b/packages/plugin-rsc/examples/browser-mode/README.md
index 2dd43bc70..2e9ed6455 100644
--- a/packages/plugin-rsc/examples/browser-mode/README.md
+++ b/packages/plugin-rsc/examples/browser-mode/README.md
@@ -1,2 +1 @@
-- https://github.com/kasperpeulen/vitest-plugin-rsc/
-- https://github.com/kasperpeulen/rsc-browser-vite-demo
+[examples/starter](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc/examples/starter) but entirely on Browser. Inspired by https://github.com/kasperpeulen/vitest-plugin-rsc/

From 9e4ced6bba00f26138cdf07182a6c50a3a5f69a4 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:46:49 +0900
Subject: [PATCH 22/43] chore: cleanup

---
 packages/plugin-rsc/examples/browser-mode/vite.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index eed6c8ae9..c3aeb1190 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -5,11 +5,11 @@ import {
   vitePluginUseServer,
   vitePluginDefineEncryptionKey,
 } from '@vitejs/plugin-rsc/plugin'
-import inspect from 'vite-plugin-inspect'
+// import inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
   plugins: [
-    inspect(),
+    // inspect(),
     vitePluginRscMinimal(),
     vitePluginUseClient({
       environment: {

From 30e8dc58cbba7384b079ff81a464469cea1936b9 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 15:56:27 +0900
Subject: [PATCH 23/43] test: add e2e

---
 packages/plugin-rsc/e2e/browser-mode.test.ts |  8 ++++++
 packages/plugin-rsc/e2e/starter.ts           | 30 +++++++++++---------
 2 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 packages/plugin-rsc/e2e/browser-mode.test.ts

diff --git a/packages/plugin-rsc/e2e/browser-mode.test.ts b/packages/plugin-rsc/e2e/browser-mode.test.ts
new file mode 100644
index 000000000..0c248eede
--- /dev/null
+++ b/packages/plugin-rsc/e2e/browser-mode.test.ts
@@ -0,0 +1,8 @@
+import { test } from '@playwright/test'
+import { useFixture } from './fixture'
+import { defineStarterTest } from './starter'
+
+test.describe('dev-browser-mode', () => {
+  const f = useFixture({ root: 'examples/browser-mode', mode: 'dev' })
+  defineStarterTest(f, 'browser-mode')
+})
diff --git a/packages/plugin-rsc/e2e/starter.ts b/packages/plugin-rsc/e2e/starter.ts
index 68b05706f..3f2e02378 100644
--- a/packages/plugin-rsc/e2e/starter.ts
+++ b/packages/plugin-rsc/e2e/starter.ts
@@ -9,10 +9,13 @@ import {
 
 export function defineStarterTest(
   f: Fixture,
-  variant?: 'no-ssr' | 'dev-production',
+  variant?: 'no-ssr' | 'dev-production' | 'browser-mode',
 ) {
   const waitForHydration: typeof waitForHydration_ = (page) =>
-    waitForHydration_(page, variant === 'no-ssr' ? '#root' : 'body')
+    waitForHydration_(
+      page,
+      variant === 'no-ssr' || variant === 'browser-mode' ? '#root' : 'body',
+    )
 
   test('basic', async ({ page }) => {
     using _ = expectNoPageError(page)
@@ -40,7 +43,7 @@ export function defineStarterTest(
   })
 
   testNoJs('server action @nojs', async ({ page }) => {
-    test.skip(variant === 'no-ssr')
+    test.skip(variant === 'no-ssr' || variant === 'browser-mode')
 
     await page.goto(f.url())
     await page.getByRole('button', { name: 'Server Counter: 1' }).click()
@@ -50,7 +53,11 @@ export function defineStarterTest(
   })
 
   test('client hmr', async ({ page }) => {
-    test.skip(f.mode === 'build' || variant === 'dev-production')
+    test.skip(
+      f.mode === 'build' ||
+        variant === 'dev-production' ||
+        variant === 'browser-mode',
+    )
 
     await page.goto(f.url())
     await waitForHydration(page)
@@ -80,7 +87,7 @@ export function defineStarterTest(
   })
 
   test.describe(() => {
-    test.skip(f.mode === 'build')
+    test.skip(f.mode === 'build' || variant === 'browser-mode')
 
     test('server hmr', async ({ page }) => {
       await page.goto(f.url())
@@ -113,20 +120,17 @@ export function defineStarterTest(
   test('css @js', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)
-    await expect(page.locator('.read-the-docs')).toHaveCSS(
-      'color',
-      'rgb(136, 136, 136)',
-    )
+    await expect(page.locator('.card').nth(0)).toHaveCSS('padding-left', '16px')
   })
 
   test.describe(() => {
-    test.skip(variant === 'no-ssr')
+    test.skip(variant === 'no-ssr' || variant === 'browser-mode')
 
     testNoJs('css @nojs', async ({ page }) => {
       await page.goto(f.url())
-      await expect(page.locator('.read-the-docs')).toHaveCSS(
-        'color',
-        'rgb(136, 136, 136)',
+      await expect(page.locator('.card').nth(0)).toHaveCSS(
+        'padding-left',
+        '16px',
       )
     })
   })

From a66299f8afc8b368927f21224d435e366ac77b86 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 16:04:00 +0900
Subject: [PATCH 24/43] test: tweak timeout

---
 packages/plugin-rsc/e2e/helper.ts        | 2 +-
 packages/plugin-rsc/playwright.config.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/e2e/helper.ts b/packages/plugin-rsc/e2e/helper.ts
index 702c5b7ec..60c3aa4f2 100644
--- a/packages/plugin-rsc/e2e/helper.ts
+++ b/packages/plugin-rsc/e2e/helper.ts
@@ -15,7 +15,7 @@ export async function waitForHydration(page: Page, locator: string = 'body') {
               el &&
               Object.keys(el).some((key) => key.startsWith('__reactFiber')),
           ),
-      { timeout: 3000 },
+      { timeout: 10000 },
     )
     .toBeTruthy()
 }
diff --git a/packages/plugin-rsc/playwright.config.ts b/packages/plugin-rsc/playwright.config.ts
index 13549cb7e..5c390e9de 100644
--- a/packages/plugin-rsc/playwright.config.ts
+++ b/packages/plugin-rsc/playwright.config.ts
@@ -6,7 +6,7 @@ export default defineConfig({
     trace: 'on-first-retry',
   },
   expect: {
-    toPass: { timeout: 5000 },
+    toPass: { timeout: 10000 },
   },
   projects: [
     {

From 2f809135076cb79746a413bfabe91016f6548a49 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 16:18:08 +0900
Subject: [PATCH 25/43] test: bye webkit

---
 packages/plugin-rsc/e2e/browser-mode.test.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/plugin-rsc/e2e/browser-mode.test.ts b/packages/plugin-rsc/e2e/browser-mode.test.ts
index 0c248eede..155b0543e 100644
--- a/packages/plugin-rsc/e2e/browser-mode.test.ts
+++ b/packages/plugin-rsc/e2e/browser-mode.test.ts
@@ -3,6 +3,10 @@ import { useFixture } from './fixture'
 import { defineStarterTest } from './starter'
 
 test.describe('dev-browser-mode', () => {
+  // Webkit fails by
+  // > TypeError: ReadableByteStreamController is not implemented
+  test.skip((ctx) => ctx.browserName === 'webkit')
+
   const f = useFixture({ root: 'examples/browser-mode', mode: 'dev' })
   defineStarterTest(f, 'browser-mode')
 })

From 801c349c0a1eafe0a5dad775e7857d7db294451e Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 16:26:53 +0900
Subject: [PATCH 26/43] fix: correct webkit test skip syntax in browser-mode
 tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix the test.skip syntax to properly destructure browserName from the test context parameter. The previous syntax was causing webkit tests to still run despite the skip condition.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/plugin-rsc/e2e/browser-mode.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/e2e/browser-mode.test.ts b/packages/plugin-rsc/e2e/browser-mode.test.ts
index 155b0543e..c4c55e1de 100644
--- a/packages/plugin-rsc/e2e/browser-mode.test.ts
+++ b/packages/plugin-rsc/e2e/browser-mode.test.ts
@@ -5,7 +5,7 @@ import { defineStarterTest } from './starter'
 test.describe('dev-browser-mode', () => {
   // Webkit fails by
   // > TypeError: ReadableByteStreamController is not implemented
-  test.skip((ctx) => ctx.browserName === 'webkit')
+  test.skip(({ browserName }) => browserName === 'webkit')
 
   const f = useFixture({ root: 'examples/browser-mode', mode: 'dev' })
   defineStarterTest(f, 'browser-mode')

From 0ba59e38c60cace5ac6f3a1d1615dd027d4c26cc Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 16:52:34 +0900
Subject: [PATCH 27/43] fix: fix action from client

---
 .../browser-mode/src/action-from-client/action.tsx |  5 +++++
 .../browser-mode/src/action-from-client/client.tsx | 14 ++++++++++++++
 .../plugin-rsc/examples/browser-mode/src/root.tsx  |  4 ++++
 packages/plugin-rsc/src/plugin.ts                  |  3 ++-
 4 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/action-from-client/action.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/action-from-client/client.tsx

diff --git a/packages/plugin-rsc/examples/browser-mode/src/action-from-client/action.tsx b/packages/plugin-rsc/examples/browser-mode/src/action-from-client/action.tsx
new file mode 100644
index 000000000..a72eb0bda
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/action-from-client/action.tsx
@@ -0,0 +1,5 @@
+'use server'
+
+export async function testActionState(prev: number) {
+  return prev + 1
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/action-from-client/client.tsx b/packages/plugin-rsc/examples/browser-mode/src/action-from-client/client.tsx
new file mode 100644
index 000000000..aca850f2f
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/action-from-client/client.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import React from 'react'
+import { testActionState } from './action'
+
+export function TestUseActionState() {
+  const [state, formAction] = React.useActionState(testActionState, 0)
+
+  return (
+    <form action={formAction}>
+      <button data-testid="use-action-state">useActionState: {state}</button>
+    </form>
+  )
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/root.tsx b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
index fb9d49061..6436e5869 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/root.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
@@ -3,6 +3,7 @@ import viteLogo from '/vite.svg'
 import { getServerCounter, updateServerCounter } from './action.tsx'
 import reactLogo from './assets/react.svg'
 import { ClientCounter } from './client.tsx'
+import { TestUseActionState } from './action-from-client/client.tsx'
 
 export function Root() {
   return <App />
@@ -31,6 +32,9 @@ function App() {
           <button>Server Counter: {getServerCounter()}</button>
         </form>
       </div>
+      <div className="card">
+        <TestUseActionState />
+      </div>
     </div>
   )
 }
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index c53b657a8..fdeb788d0 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -1337,7 +1337,8 @@ export function vitePluginUseServer(
           const output = result?.output
           if (!output?.hasChanged()) return
           serverReferences[getNormalizedId()] = id
-          const name = this.environment.name === 'client' ? 'browser' : 'ssr'
+          // TODO
+          const name = this.environment.name === 'ssr' ? 'ssr' : 'browser'
           const importSource = resolvePackage(`${PKG_NAME}/react/${name}`)
           output.prepend(`import * as $$ReactClient from "${importSource}";\n`)
           return {

From 24c57695a78358a806448e86c838f1339e66d5f6 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 17:03:30 +0900
Subject: [PATCH 28/43] chore: cleanup

---
 packages/plugin-rsc/src/plugin.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index fdeb788d0..5c5a05238 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -1172,7 +1172,7 @@ export function vitePluginUseClient(
 
 /** @experimental */
 export function vitePluginDefineEncryptionKey(
-  useServerPluginOptions?: Pick<RscPluginOptions, 'defineEncryptionKey'>,
+  useServerPluginOptions: Pick<RscPluginOptions, 'defineEncryptionKey'>,
 ): Plugin[] {
   let defineEncryptionKey: string
   let emitEncryptionKey = false
@@ -1185,7 +1185,7 @@ export function vitePluginDefineEncryptionKey(
       async configEnvironment(name, _config, env) {
         if (name === 'rsc' && !env.isPreview) {
           defineEncryptionKey =
-            useServerPluginOptions?.defineEncryptionKey ??
+            useServerPluginOptions.defineEncryptionKey ??
             JSON.stringify(toBase64(await generateEncryptionKey()))
         }
       },

From adbeee0009769c5a46fdb2700f56c7abed7815d6 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 17:04:27 +0900
Subject: [PATCH 29/43] chore: cleanup

---
 packages/plugin-rsc/examples/browser-mode/vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index c3aeb1190..599801eb8 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -21,7 +21,7 @@ export default defineConfig({
         server: ['client'],
       },
     }),
-    vitePluginDefineEncryptionKey(),
+    vitePluginDefineEncryptionKey({}),
     {
       name: 'rsc:browser-mode',
       configureServer(server) {

From b17dcd857e9a45ac9fe7f64031235c47a36ae2bf Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 18:37:13 +0900
Subject: [PATCH 30/43] chore: cleanup

---
 packages/plugin-rsc/examples/browser-mode/vite.config.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 599801eb8..888b65406 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -65,8 +65,6 @@ export default defineConfig({
                   'react/jsx-runtime',
                   'react/jsx-dev-runtime',
                   '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
-                  '@vitejs/plugin-rsc/vendor/react-server-dom/server.edge',
-                  '@vitejs/plugin-rsc/vendor/react-server-dom/client.edge',
                   '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
                 ],
               },

From edbdfca4836050b77dbbe9b4e37716a52fb6b6f0 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 18:52:18 +0900
Subject: [PATCH 31/43] fix: fix vitePluginDefineEncryptionKey

---
 .../browser-mode/src/action-bind/client.tsx   |  12 ++
 .../browser-mode/src/action-bind/form.tsx     |  16 +++
 .../browser-mode/src/action-bind/server.tsx   | 107 ++++++++++++++++++
 .../examples/browser-mode/src/root.tsx        |   4 +
 .../examples/browser-mode/vite.config.ts      |  13 ++-
 packages/plugin-rsc/src/plugin.ts             |  12 +-
 6 files changed, 158 insertions(+), 6 deletions(-)
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/action-bind/client.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/action-bind/form.tsx
 create mode 100644 packages/plugin-rsc/examples/browser-mode/src/action-bind/server.tsx

diff --git a/packages/plugin-rsc/examples/browser-mode/src/action-bind/client.tsx b/packages/plugin-rsc/examples/browser-mode/src/action-bind/client.tsx
new file mode 100644
index 000000000..2fe0c81c6
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/action-bind/client.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import React from 'react'
+
+export function ActionBindClient() {
+  const hydrated = React.useSyncExternalStore(
+    React.useCallback(() => () => {}, []),
+    () => true,
+    () => false,
+  )
+  return <>{String(hydrated)}</>
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/action-bind/form.tsx b/packages/plugin-rsc/examples/browser-mode/src/action-bind/form.tsx
new file mode 100644
index 000000000..1b1675c3a
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/action-bind/form.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import React from 'react'
+
+export function TestServerActionBindClientForm(props: {
+  action: () => Promise<React.ReactNode>
+}) {
+  const [result, formAction] = React.useActionState(props.action, '[?]')
+
+  return (
+    <form action={formAction}>
+      <button>test-server-action-bind-client</button>
+      <span data-testid="test-server-action-bind-client">{result}</span>
+    </form>
+  )
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/action-bind/server.tsx b/packages/plugin-rsc/examples/browser-mode/src/action-bind/server.tsx
new file mode 100644
index 000000000..dda9ee2ed
--- /dev/null
+++ b/packages/plugin-rsc/examples/browser-mode/src/action-bind/server.tsx
@@ -0,0 +1,107 @@
+// based on test cases in
+// https://github.com/vercel/next.js/blob/ad898de735c393d98960a68c8d9eaeee32206c57/test/e2e/app-dir/actions/app/encryption/page.js
+
+import { ActionBindClient } from './client'
+import { TestServerActionBindClientForm } from './form'
+
+export function TestActionBind() {
+  return (
+    <>
+      <TestServerActionBindReset />
+      <TestServerActionBindSimple />
+      <TestServerActionBindClient />
+      <TestServerActionBindAction />
+    </>
+  )
+}
+
+export function TestServerActionBindReset() {
+  return (
+    <form
+      action={async () => {
+        'use server'
+        testServerActionBindSimpleState = '[?]'
+        testServerActionBindActionState = '[?]'
+        testServerActionBindClientState++
+      }}
+    >
+      <button>test-server-action-bind-reset</button>
+    </form>
+  )
+}
+
+let testServerActionBindSimpleState = '[?]'
+
+export function TestServerActionBindSimple() {
+  const outerValue = 'outerValue'
+
+  return (
+    <form
+      action={async (formData: FormData) => {
+        'use server'
+        const result = String(formData.get('value')) === outerValue
+        testServerActionBindSimpleState = JSON.stringify(result)
+      }}
+    >
+      <input type="hidden" name="value" value={outerValue} />
+      <button type="submit">test-server-action-bind-simple</button>
+      <span data-testid="test-server-action-bind-simple">
+        {testServerActionBindSimpleState}
+      </span>
+    </form>
+  )
+}
+
+let testServerActionBindClientState = 0
+
+export function TestServerActionBindClient() {
+  // client element as server action bound argument
+  const client = <ActionBindClient />
+
+  const action = async () => {
+    'use server'
+    return client
+  }
+
+  return (
+    <TestServerActionBindClientForm
+      key={testServerActionBindClientState}
+      action={action}
+    />
+  )
+}
+
+let testServerActionBindActionState = '[?]'
+
+export function TestServerActionBindAction() {
+  async function otherAction() {
+    'use server'
+    return 'otherActionValue'
+  }
+
+  function wrapAction(value: string, action: () => Promise<string>) {
+    return async function (formValue: string) {
+      'use server'
+      const actionValue = await action()
+      return [actionValue === 'otherActionValue', formValue === value]
+    }
+  }
+
+  const action = wrapAction('ok', otherAction)
+
+  return (
+    <form
+      action={async (formData: FormData) => {
+        'use server'
+        const result = await action(String(formData.get('value')))
+        testServerActionBindActionState = JSON.stringify(result)
+      }}
+    >
+      <input type="hidden" name="value" value="ok" />
+      <button type="submit">test-server-action-bind-action</button>
+      <span data-testid="test-server-action-bind-action">
+        {testServerActionBindActionState}
+      </span>
+    </form>
+  )
+}
diff --git a/packages/plugin-rsc/examples/browser-mode/src/root.tsx b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
index 6436e5869..e8d912527 100644
--- a/packages/plugin-rsc/examples/browser-mode/src/root.tsx
+++ b/packages/plugin-rsc/examples/browser-mode/src/root.tsx
@@ -4,6 +4,7 @@ import { getServerCounter, updateServerCounter } from './action.tsx'
 import reactLogo from './assets/react.svg'
 import { ClientCounter } from './client.tsx'
 import { TestUseActionState } from './action-from-client/client.tsx'
+import { TestActionBind } from './action-bind/server.tsx'
 
 export function Root() {
   return <App />
@@ -35,6 +36,9 @@ function App() {
       <div className="card">
         <TestUseActionState />
       </div>
+      <div className="card">
+        <TestActionBind />
+      </div>
     </div>
   )
 }
diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 888b65406..88785d1be 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -5,11 +5,11 @@ import {
   vitePluginUseServer,
   vitePluginDefineEncryptionKey,
 } from '@vitejs/plugin-rsc/plugin'
-// import inspect from 'vite-plugin-inspect'
+import inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
   plugins: [
-    // inspect(),
+    inspect(),
     vitePluginRscMinimal(),
     vitePluginUseClient({
       environment: {
@@ -21,7 +21,11 @@ export default defineConfig({
         server: ['client'],
       },
     }),
-    vitePluginDefineEncryptionKey({}),
+    vitePluginDefineEncryptionKey({
+      environment: {
+        server: ['client'],
+      },
+    }),
     {
       name: 'rsc:browser-mode',
       configureServer(server) {
@@ -67,6 +71,7 @@ export default defineConfig({
                   '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
                   '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
                 ],
+                exclude: ['vite', '@vitejs/plugin-rsc'],
               },
             },
             react_client: {
@@ -84,7 +89,7 @@ export default defineConfig({
                   'react/jsx-dev-runtime',
                   '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
                 ],
-                exclude: ['fsevents'],
+                exclude: ['@vitejs/plugin-rsc', 'fsevents'],
                 esbuildOptions: {
                   platform: 'browser',
                 },
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 5c5a05238..0026526fc 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -1172,18 +1172,26 @@ export function vitePluginUseClient(
 
 /** @experimental */
 export function vitePluginDefineEncryptionKey(
-  useServerPluginOptions: Pick<RscPluginOptions, 'defineEncryptionKey'>,
+  useServerPluginOptions: Pick<
+    RscPluginOptions,
+    'defineEncryptionKey' | 'environment'
+  >,
 ): Plugin[] {
   let defineEncryptionKey: string
   let emitEncryptionKey = false
   const KEY_PLACEHOLDER = '__vite_rsc_define_encryption_key'
   const KEY_FILE = '__vite_rsc_encryption_key.js'
 
+  const serverEnvironments = useServerPluginOptions.environment?.server ?? [
+    'rsc',
+  ]
+  const isServer = (name: string) => serverEnvironments.includes(name)
+
   return [
     {
       name: 'rsc:encryption-key',
       async configEnvironment(name, _config, env) {
-        if (name === 'rsc' && !env.isPreview) {
+        if (isServer(name) && !env.isPreview) {
           defineEncryptionKey =
             useServerPluginOptions.defineEncryptionKey ??
             JSON.stringify(toBase64(await generateEncryptionKey()))

From 07cc571dd586427dd2bca46baa5469ab47bdf465 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 18:53:57 +0900
Subject: [PATCH 32/43] chore: cleanup

---
 packages/plugin-rsc/examples/browser-mode/vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 88785d1be..a79aaaf60 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -89,7 +89,7 @@ export default defineConfig({
                   'react/jsx-dev-runtime',
                   '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
                 ],
-                exclude: ['@vitejs/plugin-rsc', 'fsevents'],
+                exclude: ['@vitejs/plugin-rsc'],
                 esbuildOptions: {
                   platform: 'browser',
                 },

From 8acadc47f0732858a357a301847ddf2fac502f0c Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 19:02:40 +0900
Subject: [PATCH 33/43] chore: tweak

---
 packages/plugin-rsc/examples/browser-mode/vite.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index a79aaaf60..03474f33e 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -37,6 +37,7 @@ export default defineConfig({
               await server.environments['react_client']!.hot.handleInvoke(
                 payload,
               )
+            res.setHeader('Content-Type', 'application/json')
             res.end(JSON.stringify(result))
             return
           }

From 2799acb06347aa4fcf1aa4674cc790c7b6283151 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Thu, 31 Jul 2025 19:21:50 +0900
Subject: [PATCH 34/43] fix: use edge build

---
 .../examples/browser-mode/vite.config.ts      | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 03474f33e..23fb7a9ac 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -69,8 +69,11 @@ export default defineConfig({
                   'react-dom/client',
                   'react/jsx-runtime',
                   'react/jsx-dev-runtime',
-                  '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
-                  '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
+                  '@vitejs/plugin-rsc/vendor/react-server-dom/server.edge',
+                  '@vitejs/plugin-rsc/vendor/react-server-dom/client.edge',
+                  // TODO: browser build breaks `src/actin-bind` examples
+                  // '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
+                  // '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
                 ],
                 exclude: ['vite', '@vitejs/plugin-rsc'],
               },
@@ -98,12 +101,12 @@ export default defineConfig({
             },
           },
           resolve: {
-            alias: {
-              '@vitejs/plugin-rsc/vendor/react-server-dom/server.edge':
-                '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
-              '@vitejs/plugin-rsc/vendor/react-server-dom/client.edge':
-                '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
-            },
+            // alias: {
+            //   '@vitejs/plugin-rsc/vendor/react-server-dom/server.edge':
+            //     '@vitejs/plugin-rsc/vendor/react-server-dom/server.browser',
+            //   '@vitejs/plugin-rsc/vendor/react-server-dom/client.edge':
+            //     '@vitejs/plugin-rsc/vendor/react-server-dom/client.browser',
+            // },
           },
         }
       },

From 07b3fbeb3556641e8eeb5e6f35530433b873e1a5 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 1 Aug 2025 09:42:02 +0900
Subject: [PATCH 35/43] chore: comment

---
 packages/plugin-rsc/examples/browser-mode/vite.config.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 23fb7a9ac..654d2c7b2 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -5,11 +5,11 @@ import {
   vitePluginUseServer,
   vitePluginDefineEncryptionKey,
 } from '@vitejs/plugin-rsc/plugin'
-import inspect from 'vite-plugin-inspect'
+// import inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
   plugins: [
-    inspect(),
+    // inspect(),
     vitePluginRscMinimal(),
     vitePluginUseClient({
       environment: {
@@ -44,6 +44,10 @@ export default defineConfig({
           next()
         })
       },
+      // for "react_client" hmr, it requires:
+      // - enable fast-refresh transform on `react_client` environment
+      //   - currently `@vitejs/plugin-react` doesn't support it
+      // - implement and enable module runner hmr
       hotUpdate(ctx) {
         if (this.environment.name === 'react_client') {
           if (ctx.modules.length > 0) {

From 8e28d1884fc02e5255f8dcd2bff066216da3d67c Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 1 Aug 2025 11:29:19 +0900
Subject: [PATCH 36/43] test: tweak flaky

---
 packages/plugin-rsc/e2e/syntax-error.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/e2e/syntax-error.test.ts b/packages/plugin-rsc/e2e/syntax-error.test.ts
index 75425713c..a44980d95 100644
--- a/packages/plugin-rsc/e2e/syntax-error.test.ts
+++ b/packages/plugin-rsc/e2e/syntax-error.test.ts
@@ -164,11 +164,11 @@ test.describe(() => {
       )
       await expect(async () => {
         await page.goto(f.url())
-        await waitForHydration(page)
         await expect(page.getByTestId('client-content')).toHaveText(
           'client:fixed',
         )
       }).toPass()
+      await waitForHydration(page)
     })
   })
 
@@ -197,11 +197,11 @@ test.describe(() => {
       )
       await expect(async () => {
         await page.goto(f.url())
-        await waitForHydration(page)
         await expect(page.getByTestId('server-content')).toHaveText(
           'server:fixed',
         )
       }).toPass()
+      await waitForHydration(page)
     })
   })
 })

From 7975e6dd4492d87f753ccea9a364f06135a06323 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 1 Aug 2025 11:50:49 +0900
Subject: [PATCH 37/43] refactor: rename option to `serverEnvironmentName`

---
 .../examples/browser-mode/vite.config.ts      |  6 +--
 packages/plugin-rsc/src/plugin.ts             | 42 +++++++++----------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 654d2c7b2..8d384c007 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -13,17 +13,17 @@ export default defineConfig({
     vitePluginRscMinimal(),
     vitePluginUseClient({
       environment: {
-        server: ['client'],
+        serverEnvironmentName: 'client',
       },
     }),
     vitePluginUseServer({
       environment: {
-        server: ['client'],
+        serverEnvironmentName: 'client',
       },
     }),
     vitePluginDefineEncryptionKey({
       environment: {
-        server: ['client'],
+        serverEnvironmentName: 'client',
       },
     }),
     {
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 0026526fc..1646bec39 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -133,12 +133,12 @@ export type RscPluginOptions = {
   useBuildAppHook?: boolean
 
   /**
-   * This allows configuring `react-server` condition environment.
+   * Custom environment configuration
    * @experimental
-   * @default { server: ['rsc'] }
+   * @default { serverEnvironmentName: 'rsc' }
    */
   environment?: {
-    server?: string[]
+    serverEnvironmentName?: string
   }
 }
 
@@ -974,16 +974,14 @@ export function vitePluginUseClient(
   // https://github.com/vitejs/vite/blob/4bcf45863b5f46aa2b41f261283d08f12d3e8675/packages/vite/src/node/utils.ts#L175
   const bareImportRE = /^(?![a-zA-Z]:)[\w@](?!.*:\/\/)/
 
-  const serverEnvironments = useClientPluginOptions.environment?.server ?? [
-    'rsc',
-  ]
-  const isServer = (name: string) => serverEnvironments.includes(name)
+  const serverEnvironmentName =
+    useClientPluginOptions.environment?.serverEnvironmentName ?? 'rsc'
 
   return [
     {
       name: 'rsc:use-client',
       async transform(code, id) {
-        if (!isServer(this.environment.name)) return
+        if (this.environment.name !== serverEnvironmentName) return
         if (!code.includes('use client')) return
 
         const ast = await parseAstAsync(code)
@@ -1106,7 +1104,7 @@ export function vitePluginUseClient(
           id.startsWith('\0virtual:vite-rsc/client-in-server-package-proxy/')
         ) {
           assert.equal(this.environment.mode, 'dev')
-          assert(!isServer(this.environment.name))
+          assert(this.environment.name !== serverEnvironmentName)
           id = decodeURIComponent(
             id.slice(
               '\0virtual:vite-rsc/client-in-server-package-proxy/'.length,
@@ -1126,7 +1124,10 @@ export function vitePluginUseClient(
       resolveId: {
         order: 'pre',
         async handler(source, importer, options) {
-          if (isServer(this.environment.name) && bareImportRE.test(source)) {
+          if (
+            this.environment.name === serverEnvironmentName &&
+            bareImportRE.test(source)
+          ) {
             const resolved = await this.resolve(source, importer, options)
             if (resolved && resolved.id.includes('/node_modules/')) {
               packageSources.set(resolved.id, source)
@@ -1151,7 +1152,7 @@ export function vitePluginUseClient(
         }
       },
       generateBundle(_options, bundle) {
-        if (!isServer(this.environment.name)) return
+        if (this.environment.name !== serverEnvironmentName) return
 
         // track used exports of client references in rsc build
         // to tree shake unused exports in browser and ssr build
@@ -1182,16 +1183,14 @@ export function vitePluginDefineEncryptionKey(
   const KEY_PLACEHOLDER = '__vite_rsc_define_encryption_key'
   const KEY_FILE = '__vite_rsc_encryption_key.js'
 
-  const serverEnvironments = useServerPluginOptions.environment?.server ?? [
-    'rsc',
-  ]
-  const isServer = (name: string) => serverEnvironments.includes(name)
+  const serverEnvironmentName =
+    useServerPluginOptions.environment?.serverEnvironmentName ?? 'rsc'
 
   return [
     {
       name: 'rsc:encryption-key',
       async configEnvironment(name, _config, env) {
-        if (isServer(name) && !env.isPreview) {
+        if (name === serverEnvironmentName && !env.isPreview) {
           defineEncryptionKey =
             useServerPluginOptions.defineEncryptionKey ??
             JSON.stringify(toBase64(await generateEncryptionKey()))
@@ -1245,10 +1244,8 @@ export function vitePluginUseServer(
     'ignoredPackageWarnings' | 'enableActionEncryption' | 'environment'
   >,
 ): Plugin[] {
-  const serverEnvironments = useServerPluginOptions.environment?.server ?? [
-    'rsc',
-  ]
-  const isServer = (name: string) => serverEnvironments.includes(name)
+  const serverEnvironmentName =
+    useServerPluginOptions.environment?.serverEnvironmentName ?? 'rsc'
 
   return [
     {
@@ -1278,13 +1275,12 @@ export function vitePluginUseServer(
               // module identity of `import(id)` like browser, so we simply strip it off.
               id = id.split('?v=')[0]!
             }
-            // TODO
-            normalizedId_ = normalizeReferenceId(id, serverEnvironments[0]!)
+            normalizedId_ = normalizeReferenceId(id, serverEnvironmentName)
           }
           return normalizedId_
         }
 
-        if (isServer(this.environment.name)) {
+        if (this.environment.name === serverEnvironmentName) {
           const transformServerActionServer_ = withRollupError(
             this,
             transformServerActionServer,

From 3798dc96b7c7afbd97fd3ffc7c330f2307bd6dac Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 1 Aug 2025 12:07:58 +0900
Subject: [PATCH 38/43] refactor: expose `environment.browser` option

---
 .../examples/browser-mode/vite.config.ts      |  9 +++++---
 packages/plugin-rsc/src/plugin.ts             | 21 ++++++++++---------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index 8d384c007..ee78a5f7e 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -13,17 +13,20 @@ export default defineConfig({
     vitePluginRscMinimal(),
     vitePluginUseClient({
       environment: {
-        serverEnvironmentName: 'client',
+        rsc: 'client',
+        browser: 'react_client',
       },
     }),
     vitePluginUseServer({
       environment: {
-        serverEnvironmentName: 'client',
+        rsc: 'client',
+        browser: 'react_client',
       },
     }),
     vitePluginDefineEncryptionKey({
       environment: {
-        serverEnvironmentName: 'client',
+        rsc: 'client',
+        browser: 'react_client',
       },
     }),
     {
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 1646bec39..cc739aa77 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -135,10 +135,12 @@ export type RscPluginOptions = {
   /**
    * Custom environment configuration
    * @experimental
-   * @default { serverEnvironmentName: 'rsc' }
+   * @default { browser: 'client', ssr: 'ssr', rsc: 'rsc' }
    */
   environment?: {
-    serverEnvironmentName?: string
+    browser?: string
+    ssr?: string
+    rsc?: string
   }
 }
 
@@ -974,8 +976,7 @@ export function vitePluginUseClient(
   // https://github.com/vitejs/vite/blob/4bcf45863b5f46aa2b41f261283d08f12d3e8675/packages/vite/src/node/utils.ts#L175
   const bareImportRE = /^(?![a-zA-Z]:)[\w@](?!.*:\/\/)/
 
-  const serverEnvironmentName =
-    useClientPluginOptions.environment?.serverEnvironmentName ?? 'rsc'
+  const serverEnvironmentName = useClientPluginOptions.environment?.rsc ?? 'rsc'
 
   return [
     {
@@ -1183,8 +1184,7 @@ export function vitePluginDefineEncryptionKey(
   const KEY_PLACEHOLDER = '__vite_rsc_define_encryption_key'
   const KEY_FILE = '__vite_rsc_encryption_key.js'
 
-  const serverEnvironmentName =
-    useServerPluginOptions.environment?.serverEnvironmentName ?? 'rsc'
+  const serverEnvironmentName = useServerPluginOptions.environment?.rsc ?? 'rsc'
 
   return [
     {
@@ -1244,8 +1244,9 @@ export function vitePluginUseServer(
     'ignoredPackageWarnings' | 'enableActionEncryption' | 'environment'
   >,
 ): Plugin[] {
-  const serverEnvironmentName =
-    useServerPluginOptions.environment?.serverEnvironmentName ?? 'rsc'
+  const serverEnvironmentName = useServerPluginOptions.environment?.rsc ?? 'rsc'
+  const browserEnvironmentName =
+    useServerPluginOptions.environment?.browser ?? 'browser'
 
   return [
     {
@@ -1341,8 +1342,8 @@ export function vitePluginUseServer(
           const output = result?.output
           if (!output?.hasChanged()) return
           serverReferences[getNormalizedId()] = id
-          // TODO
-          const name = this.environment.name === 'ssr' ? 'ssr' : 'browser'
+          const name =
+            this.environment.name === browserEnvironmentName ? 'browser' : 'ssr'
           const importSource = resolvePackage(`${PKG_NAME}/react/${name}`)
           output.prepend(`import * as $$ReactClient from "${importSource}";\n`)
           return {

From d35cf81ebb6e93d0ac20299237d095b56eba692d Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 1 Aug 2025 12:32:28 +0900
Subject: [PATCH 39/43] refactor: expose only vitePluginRscMinimal

---
 .../examples/browser-mode/vite.config.ts      | 22 ++-----------------
 packages/plugin-rsc/src/plugin.ts             | 21 +++++++++---------
 2 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/packages/plugin-rsc/examples/browser-mode/vite.config.ts b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
index ee78a5f7e..c8bf161f4 100644
--- a/packages/plugin-rsc/examples/browser-mode/vite.config.ts
+++ b/packages/plugin-rsc/examples/browser-mode/vite.config.ts
@@ -1,29 +1,11 @@
 import { defaultClientConditions, defineConfig } from 'vite'
-import {
-  vitePluginRscMinimal,
-  vitePluginUseClient,
-  vitePluginUseServer,
-  vitePluginDefineEncryptionKey,
-} from '@vitejs/plugin-rsc/plugin'
+import { vitePluginRscMinimal } from '@vitejs/plugin-rsc/plugin'
 // import inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
   plugins: [
     // inspect(),
-    vitePluginRscMinimal(),
-    vitePluginUseClient({
-      environment: {
-        rsc: 'client',
-        browser: 'react_client',
-      },
-    }),
-    vitePluginUseServer({
-      environment: {
-        rsc: 'client',
-        browser: 'react_client',
-      },
-    }),
-    vitePluginDefineEncryptionKey({
+    vitePluginRscMinimal({
       environment: {
         rsc: 'client',
         browser: 'react_client',
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 538e42ef2..c82ba6cb0 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -145,10 +145,13 @@ export type RscPluginOptions = {
 }
 
 /** @experimental */
-export function vitePluginRscMinimal(): Plugin[] {
+export function vitePluginRscMinimal(
+  rscPluginOptions: RscPluginOptions = {},
+): Plugin[] {
   return [
     {
       name: 'rsc:minimal',
+      enforce: 'pre',
       async config() {
         await esModuleLexer.init
       },
@@ -173,6 +176,9 @@ export function vitePluginRscMinimal(): Plugin[] {
       },
     },
     ...vitePluginRscCore(),
+    ...vitePluginUseClient(rscPluginOptions),
+    ...vitePluginUseServer(rscPluginOptions),
+    ...vitePluginDefineEncryptionKey(rscPluginOptions),
   ]
 }
 
@@ -877,9 +883,7 @@ globalThis.AsyncLocalStorage = __viteRscAyncHooks.AsyncLocalStorage;
         return ''
       },
     },
-    ...vitePluginUseClient(rscPluginOptions),
-    ...vitePluginUseServer(rscPluginOptions),
-    ...vitePluginDefineEncryptionKey(rscPluginOptions),
+    ...vitePluginRscMinimal(rscPluginOptions),
     ...vitePluginFindSourceMapURL(),
     ...vitePluginRscCss({ rscCssTransform: rscPluginOptions.rscCssTransform }),
     ...(rscPluginOptions.validateImports !== false
@@ -963,8 +967,7 @@ function hashString(v: string) {
   return createHash('sha256').update(v).digest().toString('hex').slice(0, 12)
 }
 
-/** @experimental */
-export function vitePluginUseClient(
+function vitePluginUseClient(
   useClientPluginOptions: Pick<
     RscPluginOptions,
     'ignoredPackageWarnings' | 'keepUseCientProxy' | 'environment'
@@ -1171,8 +1174,7 @@ export function vitePluginUseClient(
   ]
 }
 
-/** @experimental */
-export function vitePluginDefineEncryptionKey(
+function vitePluginDefineEncryptionKey(
   useServerPluginOptions: Pick<
     RscPluginOptions,
     'defineEncryptionKey' | 'environment'
@@ -1236,8 +1238,7 @@ export function vitePluginDefineEncryptionKey(
   ]
 }
 
-/** @experimental */
-export function vitePluginUseServer(
+function vitePluginUseServer(
   useServerPluginOptions: Pick<
     RscPluginOptions,
     'ignoredPackageWarnings' | 'enableActionEncryption' | 'environment'

From 0b556030cd1772cabf0b07d41ac7afc2f637771b Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 1 Aug 2025 12:33:14 +0900
Subject: [PATCH 40/43] fix: fix double

---
 packages/plugin-rsc/src/plugin.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index c82ba6cb0..03d68f496 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -232,7 +232,6 @@ export default function vitePluginRsc(
   }
 
   return [
-    ...vitePluginRscMinimal(),
     {
       name: 'rsc',
       async config(config, env) {

From 7e6b57a63d033f5bb8d6d27226466e36f0d2be17 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 1 Aug 2025 12:36:23 +0900
Subject: [PATCH 41/43] test: add e2e

---
 packages/plugin-rsc/e2e/browser-mode.test.ts | 64 +++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/e2e/browser-mode.test.ts b/packages/plugin-rsc/e2e/browser-mode.test.ts
index c4c55e1de..42e2e6d6a 100644
--- a/packages/plugin-rsc/e2e/browser-mode.test.ts
+++ b/packages/plugin-rsc/e2e/browser-mode.test.ts
@@ -1,4 +1,4 @@
-import { test } from '@playwright/test'
+import { expect, test, type Page } from '@playwright/test'
 import { useFixture } from './fixture'
 import { defineStarterTest } from './starter'
 
@@ -9,4 +9,66 @@ test.describe('dev-browser-mode', () => {
 
   const f = useFixture({ root: 'examples/browser-mode', mode: 'dev' })
   defineStarterTest(f, 'browser-mode')
+
+  // action-bind tests copied from basic.test.ts
+
+  test('action bind simple', async ({ page }) => {
+    await page.goto(f.url())
+    await testActionBindSimple(page)
+  })
+
+  async function testActionBindSimple(page: Page) {
+    await expect(page.getByTestId('test-server-action-bind-simple')).toHaveText(
+      '[?]',
+    )
+    await page
+      .getByRole('button', { name: 'test-server-action-bind-simple' })
+      .click()
+    await expect(page.getByTestId('test-server-action-bind-simple')).toHaveText(
+      'true',
+    )
+    await page
+      .getByRole('button', { name: 'test-server-action-bind-reset' })
+      .click()
+  }
+
+  test('action bind client', async ({ page }) => {
+    await page.goto(f.url())
+    await testActionBindClient(page)
+  })
+
+  async function testActionBindClient(page: Page) {
+    await expect(page.getByTestId('test-server-action-bind-client')).toHaveText(
+      '[?]',
+    )
+    await page
+      .getByRole('button', { name: 'test-server-action-bind-client' })
+      .click()
+    await expect(page.getByTestId('test-server-action-bind-client')).toHaveText(
+      'true',
+    )
+    await page
+      .getByRole('button', { name: 'test-server-action-bind-reset' })
+      .click()
+  }
+
+  test('action bind action', async ({ page }) => {
+    await page.goto(f.url())
+    await testActionBindAction(page)
+  })
+
+  async function testActionBindAction(page: Page) {
+    await expect(page.getByTestId('test-server-action-bind-action')).toHaveText(
+      '[?]',
+    )
+    await page
+      .getByRole('button', { name: 'test-server-action-bind-action' })
+      .click()
+    await expect(page.getByTestId('test-server-action-bind-action')).toHaveText(
+      '[true,true]',
+    )
+    await page
+      .getByRole('button', { name: 'test-server-action-bind-reset' })
+      .click()
+  }
 })

From 86fc3de5ae18d5147cabbb90185ed3fa58361211 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 1 Aug 2025 12:39:13 +0900
Subject: [PATCH 42/43] refactor: fix todo

---
 packages/plugin-rsc/src/plugin.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index 03d68f496..ffb1d8f50 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -978,6 +978,8 @@ function vitePluginUseClient(
   const bareImportRE = /^(?![a-zA-Z]:)[\w@](?!.*:\/\/)/
 
   const serverEnvironmentName = useClientPluginOptions.environment?.rsc ?? 'rsc'
+  const browserEnvironmentName =
+    useClientPluginOptions.environment?.browser ?? 'client'
 
   return [
     {
@@ -1026,8 +1028,7 @@ function vitePluginUseClient(
         } else {
           if (this.environment.mode === 'dev') {
             importId = normalizeViteImportAnalysisUrl(
-              // TODO
-              server.environments.client,
+              server.environments[browserEnvironmentName]!,
               id,
             )
             referenceKey = importId

From bf73261e761149c5e0b5061c575e150f752a9525 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Fri, 1 Aug 2025 12:47:01 +0900
Subject: [PATCH 43/43] fix: wrong browserEnvironmentName

---
 packages/plugin-rsc/src/plugin.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
index ffb1d8f50..b9b28de71 100644
--- a/packages/plugin-rsc/src/plugin.ts
+++ b/packages/plugin-rsc/src/plugin.ts
@@ -1246,7 +1246,7 @@ function vitePluginUseServer(
 ): Plugin[] {
   const serverEnvironmentName = useServerPluginOptions.environment?.rsc ?? 'rsc'
   const browserEnvironmentName =
-    useServerPluginOptions.environment?.browser ?? 'browser'
+    useServerPluginOptions.environment?.browser ?? 'client'
 
   return [
     {