wip: client component

hi-ogawa · hi-ogawa · commit d3b411a754eb · 2025-07-31T14:14:00.000+09:00
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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>
   )
 }
