chore(rsc): deprecate rsc-html-stream re-exports (#602)

Author: hi-ogawa

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

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<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/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 <script>...FLIGHT_DATA...</script>
     responseStream = responseStream.pipeThrough(
-      injectRscStreamToHtml(rscStream2, {
+      injectRSCPayload(rscStream2, {
         nonce: options?.nonce,
       }),
     )

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

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