vitejs · grahammendick · Jul 13, 2025 · Jul 14, 2025 · Jul 14, 2025 · Jul 14, 2025
diff --git a/packages/plugin-rsc/examples/hmr/README.md b/packages/plugin-rsc/examples/hmr/README.md
@@ -0,0 +1,7 @@
+The `App` just renders a client `Item` component passing in a key which It gets from 'lookup.ts'. The `Item` passes this key into 'lookup.ts' to get the value which it then displays. If you edit the key in 'lookup.ts' from 'a' to 'b', for example, then the hmr update throws.
+
+```ts
+export const key = 'b'
+```
+
+The reason for the error is that the server response uses the latest 'lookup.ts' but the client uses the old 'lookup.ts'. So the rsc response has the key 'b' but the client still has the key 'a'.
diff --git a/packages/plugin-rsc/examples/hmr/package.json b/packages/plugin-rsc/examples/hmr/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@vitejs/plugin-rsc-examples-hmr",
+  "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",
+    "rsc-html-stream": "^0.0.7",
+    "vite": "^7.0.4",
+    "vite-plugin-inspect": "^11.3.0"
+  }
+}
diff --git a/packages/plugin-rsc/examples/hmr/public/favicon.ico b/packages/plugin-rsc/examples/hmr/public/favicon.ico
diff --git a/packages/plugin-rsc/examples/hmr/src/App.tsx b/packages/plugin-rsc/examples/hmr/src/App.tsx
@@ -0,0 +1,17 @@
+import { key } from './lookup'
+import Item from './Item'
+
+const App = async () => {
+  return (
+    <html>
+      <head>
+        <title>Hmr</title>
+      </head>
+      <body>
+        <Item k={key} />
+      </body>
+    </html>
+  )
+}
+
+export default App
diff --git a/packages/plugin-rsc/examples/hmr/src/Item.tsx b/packages/plugin-rsc/examples/hmr/src/Item.tsx
@@ -0,0 +1,8 @@
+'use client'
+import lookup from './lookup'
+
+const Item = ({ k }: { k: string }) => {
+  return lookup(k).hello
+}
+
+export default Item
diff --git a/packages/plugin-rsc/examples/hmr/src/client.tsx b/packages/plugin-rsc/examples/hmr/src/client.tsx
@@ -0,0 +1,30 @@
+import * as ReactClient from '@vitejs/plugin-rsc/browser'
+import { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom/client'
+import { rscStream } from 'rsc-html-stream/client'
+import { createFromFetch } from '@vitejs/plugin-rsc/browser'
+
+async function fetchRSC(url: string, options: any) {
+  const payload = (await createFromFetch(fetch(url, options))) as any
+  return payload.root
+}
+
+const initialPayload = await ReactClient.createFromReadableStream<{
+  root: React.ReactNode
+}>(rscStream)
+function Shell() {
+  const [root, setRoot] = useState(initialPayload.root)
+  useEffect(() => {
+    const onHmrReload = () => {
+      const root = fetchRSC('/', {
+        method: 'post',
+        headers: { 'Content-Type': 'application/json' },
+      })
+      setRoot(root)
+    }
+    import.meta.hot?.on('rsc:update', onHmrReload)
+    return () => import.meta.hot?.off('rsc:update', onHmrReload)
+  })
+  return root
+}
+ReactDOM.hydrateRoot(document, <Shell />)
diff --git a/packages/plugin-rsc/examples/hmr/src/lookup.ts b/packages/plugin-rsc/examples/hmr/src/lookup.ts
@@ -0,0 +1,11 @@
+export const key = 'a'
+
+const data = {
+  [key]: { hello: 'world ' },
+} as Record<string, { hello: string }>
+
+const lookup = (k: string) => {
+  return data[k]
+}
+
+export default lookup
diff --git a/packages/plugin-rsc/examples/hmr/src/server.ssr.tsx b/packages/plugin-rsc/examples/hmr/src/server.ssr.tsx
@@ -0,0 +1,24 @@
+import * as ReactClient from '@vitejs/plugin-rsc/ssr'
+import React from 'react'
+import * as ReactDOMServer from 'react-dom/server.edge'
+import { injectRSCPayload } from 'rsc-html-stream/server'
+
+type RscPayload = {
+  root: React.ReactNode
+}
+export async function renderHTML(rscStream: ReadableStream<Uint8Array>) {
+  const [rscStream1, rscStream2] = rscStream.tee()
+  let payload: Promise<RscPayload>
+  function SsrRoot() {
+    payload ??= ReactClient.createFromReadableStream<RscPayload>(rscStream1)
+    return React.use(payload).root
+  }
+  const bootstrapScriptContent =
+    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  const htmlStream = await ReactDOMServer.renderToReadableStream(<SsrRoot />, {
+    bootstrapScriptContent,
+  })
+  let responseStream: ReadableStream<Uint8Array> = htmlStream
+  responseStream = responseStream.pipeThrough(injectRSCPayload(rscStream2))
+  return responseStream
+}
diff --git a/packages/plugin-rsc/examples/hmr/src/server.tsx b/packages/plugin-rsc/examples/hmr/src/server.tsx
@@ -0,0 +1,21 @@
+import * as ReactServer from '@vitejs/plugin-rsc/rsc'
+import App from './App.tsx'
+
+export default async function handler(request: Request): Promise<Response> {
+  const root = <App />
+  const rscStream = ReactServer.renderToReadableStream({ root })
+  if (request.method !== 'GET') {
+    return new Response(rscStream, {
+      headers: { 'Content-type': 'text/x-component' },
+    })
+  }
+  const ssrEntryModule = await import.meta.viteRsc.loadModule<
+    typeof import('./server.ssr.tsx')
+  >('ssr', 'index')
+  const htmlStream = await ssrEntryModule.renderHTML(rscStream)
+  return new Response(htmlStream, { headers: { 'Content-type': 'text/html' } })
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}
diff --git a/packages/plugin-rsc/examples/hmr/tsconfig.json b/packages/plugin-rsc/examples/hmr/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "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/hmr/vite.config.ts b/packages/plugin-rsc/examples/hmr/vite.config.ts
@@ -0,0 +1,22 @@
+import rsc from '@vitejs/plugin-rsc'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  clearScreen: false,
+  plugins: [
+    react(),
+    rsc({
+      entries: {
+        client: './src/client.tsx',
+        ssr: './src/server.ssr.tsx',
+        rsc: './src/server.tsx',
+      },
+      ignoredPackageWarnings: ['navigation-react'],
+    }),
+  ],
+  optimizeDeps: {
+    include: ['navigation'],
+    exclude: ['navigation-react'],
+  },
+})
diff --git a/packages/plugin-rsc/examples/navigation/package.json b/packages/plugin-rsc/examples/navigation/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@vitejs/plugin-rsc-examples-navigation",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-rsc": "latest",
+    "navigation": "^6.3.0",
+    "navigation-react": "^4.13.0",
+    "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",
+    "rsc-html-stream": "^0.0.7",
+    "vite": "^7.0.4",
+    "vite-plugin-inspect": "^11.3.0"
+  }
+}
diff --git a/packages/plugin-rsc/examples/navigation/public/favicon.ico b/packages/plugin-rsc/examples/navigation/public/favicon.ico
diff --git a/packages/plugin-rsc/examples/navigation/src/App.tsx b/packages/plugin-rsc/examples/navigation/src/App.tsx
@@ -0,0 +1,29 @@
+import { SceneView } from 'navigation-react'
+import NavigationProvider from './NavigationProvider'
+import HmrProvider from './HmrProvider'
+import People from './People'
+import Person from './Person'
+
+const App = async ({ url }: any) => {
+  return (
+    <html>
+      <head>
+        <title>Navigation React</title>
+      </head>
+      <body>
+        <NavigationProvider url={url}>
+          <HmrProvider>
+            <SceneView active="people">
+              <People />
+            </SceneView>
+            <SceneView active="person" refetch={['id']}>
+              <Person />
+            </SceneView>
+          </HmrProvider>
+        </NavigationProvider>
+      </body>
+    </html>
+  )
+}
+
+export default App;
diff --git a/packages/plugin-rsc/examples/navigation/src/Filter.tsx b/packages/plugin-rsc/examples/navigation/src/Filter.tsx
@@ -0,0 +1,38 @@
+'use client'
+import { startTransition, useOptimistic } from 'react'
+import { RefreshLink, useNavigationEvent } from 'navigation-react'
+
+const Filter = () => {
+  const { data, stateNavigator } = useNavigationEvent()
+  const { name } = data
+  const [optimisticName, setOptimisticName] = useOptimistic(
+    name || '',
+    (_, newName) => newName,
+  )
+  return (
+    <div>
+      <div>
+        <label htmlFor="name">Name</label>
+        <input
+          id="name"
+          value={optimisticName}
+          onChange={({ target: { value } }) => {
+            startTransition(() => {
+              setOptimisticName(value)
+              stateNavigator.refresh({ ...data, name: value, page: null })
+            })
+          }}
+        />
+      </div>
+      Page size
+      <RefreshLink navigationData={{ size: 5, page: null }} includeCurrentData>
+        5
+      </RefreshLink>
+      <RefreshLink navigationData={{ size: 10, page: null }} includeCurrentData>
+        10
+      </RefreshLink>
+    </div>
+  )
+}
+
+export default Filter
diff --git a/packages/plugin-rsc/examples/navigation/src/Friends.tsx b/packages/plugin-rsc/examples/navigation/src/Friends.tsx
@@ -0,0 +1,34 @@
+import { RefreshLink, useNavigationEvent } from 'navigation-react'
+import { getFriends } from './data'
+import Gender from './Gender'
+
+const Friends = async () => {
+  const {
+    data: { show, id, gender },
+  } = useNavigationEvent()
+  const friends = show ? await getFriends(id, gender) : null
+  return (
+    <>
+      <RefreshLink
+        navigationData={{ show: !show }}
+        includeCurrentData
+      >{`${!show ? 'Show' : 'Hide'} Friends`}</RefreshLink>
+      {show && (
+        <>
+          <Gender />
+          <ul>
+            {friends?.map(({ id, name }) => (
+              <li key={id}>
+                <RefreshLink navigationData={{ id }} includeCurrentData>
+                  {name}
+                </RefreshLink>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </>
+  )
+}
+
+export default Friends
diff --git a/packages/plugin-rsc/examples/navigation/src/Gender.tsx b/packages/plugin-rsc/examples/navigation/src/Gender.tsx
@@ -0,0 +1,35 @@
+'use client'
+import { startTransition } from 'react'
+import { useNavigationEvent } from 'navigation-react'
+import { useOptimistic } from 'react'
+
+const Gender = () => {
+  const { data, stateNavigator } = useNavigationEvent()
+  const { gender } = data
+  const [optimisticGender, setOptimisticGender] = useOptimistic(
+    gender || '',
+    (_, newGender) => newGender,
+  )
+  return (
+    <div>
+      <label htmlFor="gender">Gender</label>
+      <select
+        id="gender"
+        value={optimisticGender}
+        onChange={({ target: { value } }) => {
+          startTransition(() => {
+            setOptimisticGender(value)
+            stateNavigator.refresh({ ...data, gender: value })
+          })
+        }}
+      >
+        <option value=""></option>
+        <option value="male">Male</option>
+        <option value="female">Female</option>
+        <option value="other">Other</option>
+      </select>
+    </div>
+  )
+}
+
+export default Gender