feat(rsc): support client environment as react-server (#657)

Co-authored-by: Claude <[email protected]>

Author: hi-ogawa

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

@@ -0,0 +1,74 @@
+import { expect, test, type Page } from '@playwright/test'
+import { useFixture } from './fixture'
+import { defineStarterTest } from './starter'
+
+test.describe('dev-browser-mode', () => {
+  // Webkit fails by
+  // > TypeError: ReadableByteStreamController is not implemented
+  test.skip(({ browserName }) => browserName === 'webkit')
+
+  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()
+  }
+})

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()
 }

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',
       )
     })
   })

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)
     })
   })
 })

packages/plugin-rsc/examples/browser-mode/README.md

@@ -0,0 +1 @@
+[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/

packages/plugin-rsc/examples/browser-mode/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<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/main.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

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": "false && vite build",
+    "preview": "false && 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"
+  }
+}

packages/plugin-rsc/examples/browser-mode/public/vite.svg

@@ -0,0 +1,12 @@
+'use client'
+
+import React from 'react'
+
+export function ActionBindClient() {
+  const hydrated = React.useSyncExternalStore(
+    React.useCallback(() => () => {}, []),
+    () => true,
+    () => false,
+  )
+  return <>{String(hydrated)}</>
+}

packages/plugin-rsc/examples/browser-mode/src/action-bind/client.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>
+  )
+}