diff --git a/packages/plugin-rsc/README.md b/packages/plugin-rsc/README.md index 8aadcb337..50a165080 100644 --- a/packages/plugin-rsc/README.md +++ b/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 diff --git a/packages/plugin-rsc/examples/basic/package.json b/packages/plugin-rsc/examples/basic/package.json index bed815b99..ff1648a7f 100644 --- a/packages/plugin-rsc/examples/basic/package.json +++ b/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", diff --git a/packages/plugin-rsc/examples/basic/src/framework/entry.browser.tsx b/packages/plugin-rsc/examples/basic/src/framework/entry.browser.tsx index 9ba4ae4ee..473fc492d 100644 --- a/packages/plugin-rsc/examples/basic/src/framework/entry.browser.tsx +++ b/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( // initial RSC stream is injected in SSR stream as - getRscStreamFromHtml(), + rscStream, ) // browser root component to (re-)render RSC payload as state diff --git a/packages/plugin-rsc/examples/basic/src/framework/entry.ssr.tsx b/packages/plugin-rsc/examples/basic/src/framework/entry.ssr.tsx index 129dbadf1..0fd5e92f3 100644 --- a/packages/plugin-rsc/examples/basic/src/framework/entry.ssr.tsx +++ b/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 = htmlStream if (!options?.debugNojs) { // initial RSC stream is injected in HTML stream as + // using utility made by devongovett https://github.com/devongovett/rsc-html-stream responseStream = responseStream.pipeThrough( - injectRscStreamToHtml(rscStream2, { + injectRSCPayload(rscStream2, { nonce: options?.nonce, }), ) diff --git a/packages/plugin-rsc/examples/ssg/src/framework/entry.browser.tsx b/packages/plugin-rsc/examples/ssg/src/framework/entry.browser.tsx index 6ef285d86..7f77627e5 100644 --- a/packages/plugin-rsc/examples/ssg/src/framework/entry.browser.tsx +++ b/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 { @@ -12,9 +12,8 @@ async function hydrate(): Promise { setPayload(payload) } - const initialPayload = await ReactClient.createFromReadableStream( - getRscStreamFromHtml(), - ) + const initialPayload = + await ReactClient.createFromReadableStream(rscStream) let setPayload: (v: RscPayload) => void diff --git a/packages/plugin-rsc/examples/ssg/src/framework/entry.ssr.tsx b/packages/plugin-rsc/examples/ssg/src/framework/entry.ssr.tsx index 452978250..449c6ca21 100644 --- a/packages/plugin-rsc/examples/ssg/src/framework/entry.ssr.tsx +++ b/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) { @@ -24,6 +24,6 @@ export async function renderHtml(rscStream: ReadableStream) { await htmlStream.allReady let responseStream: ReadableStream = htmlStream - responseStream = responseStream.pipeThrough(injectRscStreamToHtml(rscStream2)) + responseStream = responseStream.pipeThrough(injectRSCPayload(rscStream2)) return responseStream } diff --git a/packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.browser.tsx b/packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.browser.tsx index 9ba4ae4ee..473fc492d 100644 --- a/packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.browser.tsx +++ b/packages/plugin-rsc/examples/starter-cf-single/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( // initial RSC stream is injected in SSR stream as - getRscStreamFromHtml(), + rscStream, ) // browser root component to (re-)render RSC payload as state diff --git a/packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.ssr.tsx b/packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.ssr.tsx index c9e0fab93..9fae3468b 100644 --- a/packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.ssr.tsx +++ b/packages/plugin-rsc/examples/starter-cf-single/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 type RenderHTML = typeof renderHTML @@ -45,7 +45,7 @@ export async function renderHTML( if (!options?.debugNojs) { // initial RSC stream is injected in HTML stream as responseStream = responseStream.pipeThrough( - injectRscStreamToHtml(rscStream2, { + injectRSCPayload(rscStream2, { nonce: options?.nonce, }), ) diff --git a/packages/plugin-rsc/examples/starter-cf-single/vite.config.ts b/packages/plugin-rsc/examples/starter-cf-single/vite.config.ts index 3b839553c..9617078a7 100644 --- a/packages/plugin-rsc/examples/starter-cf-single/vite.config.ts +++ b/packages/plugin-rsc/examples/starter-cf-single/vite.config.ts @@ -35,6 +35,9 @@ export default defineConfig({ platform: 'neutral', }, }, + optimizeDeps: { + include: ['turbo-stream'], + }, }, ssr: { keepProcessEnv: false, @@ -43,6 +46,9 @@ export default defineConfig({ // wrangler can deploy self-contained `dist/rsc` outDir: './dist/rsc/ssr', }, + resolve: { + noExternal: true, + }, }, }, }) diff --git a/packages/plugin-rsc/examples/starter/README.md b/packages/plugin-rsc/examples/starter/README.md index 15efa6164..daf79d3bd 100644 --- a/packages/plugin-rsc/examples/starter/README.md +++ b/packages/plugin-rsc/examples/starter/README.md @@ -24,11 +24,11 @@ See [`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main - `import.meta.viteRsc.loadModule` - [`./src/framework/entry.ssr.tsx`](./src/framework/entry.ssr.tsx) - `@vitejs/plugin-rsc/ssr` - - `@vitejs/plugin-rsc/rsc-html-stream/ssr` - `import.meta.viteRsc.loadBootstrapScriptContent` + - `rsc-html-stream/server` - [`./src/framework/entry.browser.tsx`](./src/framework/entry.browser.tsx) - `@vitejs/plugin-rsc/browser` - - `@vitejs/plugin-rsc/rsc-html-stream/browser` + - `rsc-html-stream/client` ## Notes diff --git a/packages/plugin-rsc/examples/starter/package.json b/packages/plugin-rsc/examples/starter/package.json index b400b4da0..059e49fee 100644 --- a/packages/plugin-rsc/examples/starter/package.json +++ b/packages/plugin-rsc/examples/starter/package.json @@ -18,6 +18,7 @@ "@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/starter/src/framework/entry.browser.tsx b/packages/plugin-rsc/examples/starter/src/framework/entry.browser.tsx index 9ba4ae4ee..473fc492d 100644 --- a/packages/plugin-rsc/examples/starter/src/framework/entry.browser.tsx +++ b/packages/plugin-rsc/examples/starter/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( // initial RSC stream is injected in SSR stream as - getRscStreamFromHtml(), + rscStream, ) // browser root component to (re-)render RSC payload as state diff --git a/packages/plugin-rsc/examples/starter/src/framework/entry.ssr.tsx b/packages/plugin-rsc/examples/starter/src/framework/entry.ssr.tsx index 129dbadf1..1918f834b 100644 --- a/packages/plugin-rsc/examples/starter/src/framework/entry.ssr.tsx +++ b/packages/plugin-rsc/examples/starter/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( @@ -43,7 +43,7 @@ export async function renderHTML( if (!options?.debugNojs) { // initial RSC stream is injected in HTML stream as responseStream = responseStream.pipeThrough( - injectRscStreamToHtml(rscStream2, { + injectRSCPayload(rscStream2, { nonce: options?.nonce, }), ) diff --git a/packages/plugin-rsc/src/rsc-html-stream/browser.ts b/packages/plugin-rsc/src/rsc-html-stream/browser.ts index eb2a74e8d..166faf332 100644 --- a/packages/plugin-rsc/src/rsc-html-stream/browser.ts +++ b/packages/plugin-rsc/src/rsc-html-stream/browser.ts @@ -1,4 +1,5 @@ import * as rscHtmlStreamClient from 'rsc-html-stream/client' +/** @deprecated use `rsc-html-stream/client` instead */ export const getRscStreamFromHtml = (): ReadableStream => rscHtmlStreamClient.rscStream diff --git a/packages/plugin-rsc/src/rsc-html-stream/ssr.ts b/packages/plugin-rsc/src/rsc-html-stream/ssr.ts index 109d09eb0..92c0b57d1 100644 --- a/packages/plugin-rsc/src/rsc-html-stream/ssr.ts +++ b/packages/plugin-rsc/src/rsc-html-stream/ssr.ts @@ -1,5 +1,6 @@ import * as rscHtmlStreamServer from 'rsc-html-stream/server' +/** @deprecated use `rsc-html-stream/server` instead */ export const injectRscStreamToHtml = ( stream: ReadableStream, options?: { nonce?: string }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 74e6d51d0..7be516b19 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -542,6 +542,9 @@ importers: '@vitejs/test-dep-server-in-server': specifier: file:./test-dep/server-in-server version: file:packages/plugin-rsc/examples/basic/test-dep/server-in-server(react@19.1.0) + rsc-html-stream: + specifier: ^0.0.7 + version: 0.0.7 tailwindcss: specifier: ^4.1.11 version: 4.1.11 @@ -690,6 +693,9 @@ importers: '@vitejs/plugin-react': specifier: latest version: link:../../../plugin-react + rsc-html-stream: + specifier: ^0.0.7 + version: 0.0.7 vite: specifier: ^7.0.4 version: 7.0.4(@types/node@22.16.3)(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.7.1)