Merge branch 'navigation-vite' of https://github.com/grahammendick/vite-plugin-react into navigation-vite

Author: grahammendick

packages/plugin-rsc/README.md

@@ -11,7 +11,7 @@ This package provides [React Server Components](https://react.dev/reference/rsc/
 
 ## Getting Started
 
-You can start a project by copying an example locally by:
+You can create a starter project by:
 
 ```sh
 npx degit vitejs/vite-plugin-react/packages/plugin-rsc/examples/starter my-app

packages/plugin-rsc/e2e/fixture.ts

@@ -213,10 +213,11 @@ export async function setupInlineFixture(options: {
 
   // write additional files
   if (options.files) {
-    for (const [filename, contents] of Object.entries(options.files)) {
+    for (let [filename, contents] of Object.entries(options.files)) {
       let filepath = path.join(options.dest, filename)
       fs.mkdirSync(path.dirname(filepath), { recursive: true })
       // strip indent
+      contents = contents.replace(/^\n/, '')
       const indent = contents.match(/^\s*/)?.[0] ?? ''
       const strippedContents = contents
         .split('\n')

packages/plugin-rsc/e2e/starter.test.ts

@@ -143,6 +143,66 @@ test.describe(() => {
   })
 })
 
+test.describe(() => {
+  const root = 'examples/e2e/temp/module-runner-hmr-false'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter',
+      dest: root,
+      files: {
+        'vite.config.ts': /* js */ `
+          import rsc from '@vitejs/plugin-rsc'
+          import react from '@vitejs/plugin-react'
+          import { defineConfig, createRunnableDevEnvironment } from 'vite'
+
+          export default defineConfig({
+            plugins: [
+              react(),
+              rsc({
+                entries: {
+                  client: './src/framework/entry.browser.tsx',
+                  ssr: './src/framework/entry.ssr.tsx',
+                  rsc: './src/framework/entry.rsc.tsx',
+                }
+              }),
+            ],
+            environments: {
+              ssr: {
+                dev: {
+                  createEnvironment(name, config) {
+                    return createRunnableDevEnvironment(name, config, {
+                      runnerOptions: {
+                        hmr: false,
+                      },
+                    })
+                  },
+                },
+              },
+              rsc: {
+                dev: {
+                  createEnvironment(name, config) {
+                    return createRunnableDevEnvironment(name, config, {
+                      runnerOptions: {
+                        hmr: false,
+                      },
+                    })
+                  },
+                },
+              },
+            },
+          })
+        `,
+      },
+    })
+  })
+
+  test.describe('dev-module-runner-hmr-false', () => {
+    const f = useFixture({ root, mode: 'dev' })
+    defineTest(f)
+  })
+})
+
 function defineTest(f: Fixture, variant?: 'no-ssr') {
   const waitForHydration: typeof waitForHydration_ = (page) =>
     waitForHydration_(page, variant === 'no-ssr' ? '#root' : 'body')

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

@@ -25,6 +25,7 @@
     "@vitejs/test-dep-client-in-server2": "file:./test-dep/client-in-server2",
     "@vitejs/test-dep-server-in-client": "file:./test-dep/server-in-client",
     "@vitejs/test-dep-server-in-server": "file:./test-dep/server-in-server",
+    "rsc-html-stream": "^0.0.7",
     "tailwindcss": "^4.1.11",
     "vite": "^7.0.4",
     "vite-plugin-inspect": "^11.3.0",

packages/plugin-rsc/examples/basic/src/framework/entry.browser.tsx

@@ -1,7 +1,7 @@
 import * as ReactClient from '@vitejs/plugin-rsc/browser'
-import { getRscStreamFromHtml } from '@vitejs/plugin-rsc/rsc-html-stream/browser'
 import React from 'react'
 import * as ReactDOMClient from 'react-dom/client'
+import { rscStream } from 'rsc-html-stream/client'
 import type { RscPayload } from './entry.rsc'
 
 async function main() {
@@ -12,7 +12,7 @@ async function main() {
   // deserialize RSC stream back to React VDOM for CSR
   const initialPayload = await ReactClient.createFromReadableStream<RscPayload>(
     // initial RSC stream is injected in SSR stream as <script>...FLIGHT_DATA...</script>
-    getRscStreamFromHtml(),
+    rscStream,
   )
 
   // browser root component to (re-)render RSC payload as state

packages/plugin-rsc/examples/basic/src/framework/entry.ssr.tsx

@@ -1,8 +1,8 @@
-import { injectRscStreamToHtml } from '@vitejs/plugin-rsc/rsc-html-stream/ssr' // helper API
 import * as ReactClient from '@vitejs/plugin-rsc/ssr' // RSC API
 import React from 'react'
 import type { ReactFormState } from 'react-dom/client'
 import * as ReactDOMServer from 'react-dom/server.edge'
+import { injectRSCPayload } from 'rsc-html-stream/server'
 import type { RscPayload } from './entry.rsc'
 
 export async function renderHTML(
@@ -42,8 +42,9 @@ export async function renderHTML(
   let responseStream: ReadableStream<Uint8Array> = htmlStream
   if (!options?.debugNojs) {
     // initial RSC stream is injected in HTML stream as <script>...FLIGHT_DATA...</script>
+    // using utility made by devongovett https://github.com/devongovett/rsc-html-stream
     responseStream = responseStream.pipeThrough(
-      injectRscStreamToHtml(rscStream2, {
+      injectRSCPayload(rscStream2, {
         nonce: options?.nonce,
       }),
     )

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

@@ -1,5 +1,5 @@
 {
-  "name": "@vitejs/plugin-rsc-examples-basic",
+  "name": "@vitejs/plugin-rsc-examples-navigation",
   "private": true,
   "license": "MIT",
   "type": "module",

packages/plugin-rsc/examples/no-ssr/src/framework/entry.rsc.tsx

@@ -32,11 +32,12 @@ export default async function handler(request: Request): Promise<Response> {
     }
   }
 
-  const rscStream = ReactServer.renderToReadableStream<RscPayload>({
-    root: <Root />,
-    returnValue,
-    formState,
-  })
+  const rscPayload: RscPayload = { root: <Root />, formState, returnValue }
+  const rscOptions = { temporaryReferences }
+  const rscStream = ReactServer.renderToReadableStream<RscPayload>(
+    rscPayload,
+    rscOptions,
+  )
 
   return new Response(rscStream, {
     headers: {

packages/plugin-rsc/examples/ssg/src/framework/entry.browser.tsx

@@ -1,7 +1,7 @@
 import * as ReactClient from '@vitejs/plugin-rsc/browser'
-import { getRscStreamFromHtml } from '@vitejs/plugin-rsc/rsc-html-stream/browser'
 import React from 'react'
 import ReactDomClient from 'react-dom/client'
+import { rscStream } from 'rsc-html-stream/client'
 import { RSC_POSTFIX, type RscPayload } from './shared'
 
 async function hydrate(): Promise<void> {
@@ -12,9 +12,8 @@ async function hydrate(): Promise<void> {
     setPayload(payload)
   }
 
-  const initialPayload = await ReactClient.createFromReadableStream<RscPayload>(
-    getRscStreamFromHtml(),
-  )
+  const initialPayload =
+    await ReactClient.createFromReadableStream<RscPayload>(rscStream)
 
   let setPayload: (v: RscPayload) => void
 

packages/plugin-rsc/examples/ssg/src/framework/entry.ssr.tsx

@@ -1,7 +1,7 @@
-import { injectRscStreamToHtml } from '@vitejs/plugin-rsc/rsc-html-stream/ssr'
 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'
 import type { RscPayload } from './shared'
 
 export async function renderHtml(rscStream: ReadableStream<Uint8Array>) {
@@ -24,6 +24,6 @@ export async function renderHtml(rscStream: ReadableStream<Uint8Array>) {
   await htmlStream.allReady
 
   let responseStream: ReadableStream<Uint8Array> = htmlStream
-  responseStream = responseStream.pipeThrough(injectRscStreamToHtml(rscStream2))
+  responseStream = responseStream.pipeThrough(injectRSCPayload(rscStream2))
   return responseStream
 }