Copied latest from vite sample in navigation repo

See grahammendick/navigation#883

Author: grahammendick

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

@@ -19,6 +19,8 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "latest",
-    "vite": "^7.0.2"
+    "rsc-html-stream": "^0.0.7",
+    "vite": "^7.0.4",
+    "vite-plugin-inspect": "^11.3.0"
   }
 }

packages/plugin-rsc/examples/navigation/src/client.tsx

@@ -1,46 +1,23 @@
+import * as ReactClient from '@vitejs/plugin-rsc/browser'
 import { useState, useMemo } from "react";
 import ReactDOM from "react-dom/client";
-import { hydrate as _hydrate } from '@vitejs/plugin-rsc/extra/browser'
-import { createFromFetch, createFromReadableStream } from "@vitejs/plugin-rsc/browser";
+import { rscStream } from 'rsc-html-stream/client'
+import { createFromFetch } from "@vitejs/plugin-rsc/browser";
 import { BundlerContext } from 'navigation-react';
 
-declare global{interface Window { __FLIGHT_DATA: any;}}
-
-let encoder = new TextEncoder();
-let streamController: any;
-let rscStream = new ReadableStream({ start(controller) {
-	if (typeof window === "undefined") return;
-	let handleChunk = (chunk: any) => {
-		if (typeof chunk === "string") controller.enqueue(encoder.encode(chunk));
-		else controller.enqueue(chunk);
-	};
-	window.__FLIGHT_DATA ||= [];
-	window.__FLIGHT_DATA.forEach(handleChunk);
-	window.__FLIGHT_DATA.push = (chunk: any) => {
-		handleChunk(chunk);
-	};
-	streamController = controller;
-} });
-if (typeof document !== "undefined" && document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => {
-	streamController?.close();
-});
-else streamController?.close();
-
-async function hydrate() {
-    const initialPayload = await createFromReadableStream(rscStream) as any;
-    function Shell() {
-        const [root, setRoot] = useState(initialPayload.root);
-        const bundler = useMemo(() => ({setRoot, deserialize: fetchRSC}), []);
-        return (
-            <BundlerContext.Provider value={bundler}>
-                {root}
-            </BundlerContext.Provider>
-        );
-    }
-    ReactDOM.hydrateRoot(document, <Shell />);
-}
 async function fetchRSC(url: string, {body, ...options}: any) {
-    const payload = await createFromFetch(fetch(url, {...options, body: JSON.stringify(body), method: 'PUT'})) as any;
+    const payload = await createFromFetch(fetch(url, {...options, body: JSON.stringify(body)})) as any;
     return payload.root;
 }
-hydrate();
+
+const initialPayload = await ReactClient.createFromReadableStream<{root: React.ReactNode}>(rscStream)
+function Shell() {
+    const [root, setRoot] = useState(initialPayload.root);
+    const bundler = useMemo(() => ({setRoot, deserialize: fetchRSC}), []);
+    return (
+        <BundlerContext.Provider value={bundler}>
+            {root}
+        </BundlerContext.Provider>
+    );
+}
+ReactDOM.hydrateRoot(document, <Shell />);

packages/plugin-rsc/examples/navigation/src/server.ssr.tsx

@@ -1 +1,27 @@
-export * from '@vitejs/plugin-rsc/extra/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';
+
+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;
+}

packages/plugin-rsc/examples/navigation/src/server.tsx

@@ -1,52 +1,59 @@
-import { renderRequest } from '@vitejs/plugin-rsc/extra/rsc'
-import { StateNavigator } from 'navigation'
-import stateNavigator from './stateNavigator.ts'
+import * as ReactServer from '@vitejs/plugin-rsc/rsc';
+import { StateNavigator } from 'navigation';
+import stateNavigator from './stateNavigator.ts';
 
 export default async function handler(request: Request): Promise<Response> {
-  let url: string;
+  let url: string = '';
   let view: any;
   const serverNavigator = new StateNavigator(stateNavigator);
   if (request.method === 'GET') {
     let reqUrl = new URL(request.url);
     url = `${reqUrl.pathname}${reqUrl.search}`;
     const App = (await import('./App.tsx')).default;
     view = <App url={url} />;
-  } else {    
+  }
+  if (request.method === 'POST') {
     const sceneViews: any = {
       people: await import('./People.tsx'),
       person: await import('./Person.tsx'),
       friends: await import('./Friends.tsx')
     };
-    const {url: reqUrl, sceneViewKey, state, data, crumbs} = await request.json();
-    if (reqUrl) {
-      url = reqUrl;
-      const SceneView = sceneViews[sceneViewKey].default;
-      view = <SceneView />;
-    } else {
-      let fluentNavigator = serverNavigator.fluent();
-      for (let i = 0; i < crumbs.length; i++) {
-        fluentNavigator = fluentNavigator.navigate(crumbs[i].state, crumbs[i].data);
-      }
-      fluentNavigator = fluentNavigator.navigate(state, data);
-      url = fluentNavigator.url;
-      const App = (await import('./App.tsx')).default;
-      view = <App url={url} />;
+    const {url: reqUrl, sceneViewKey} = await request.json();
+    url = reqUrl;
+    const SceneView = sceneViews[sceneViewKey].default;
+    view = <SceneView />;
+  }
+  if (request.method === 'PUT') {
+    const {state, data, crumbs} = await request.json();
+    let fluentNavigator = serverNavigator.fluent();
+    for (let i = 0; i < crumbs.length; i++) {
+      fluentNavigator = fluentNavigator.navigate(crumbs[i].state, crumbs[i].data);
     }
+    fluentNavigator = fluentNavigator.navigate(state, data);
+    url = fluentNavigator.url;
+    const App = (await import('./App.tsx')).default;
+    view = <App url={url} />;
   }
   try {
-    serverNavigator.navigateLink(url)
+    serverNavigator.navigateLink(url);
   } catch(e) {
     return new Response('Not Found', { status: 404 });
   }
-  const { NavigationHandler } = await import('navigation-react');
+  const {NavigationHandler} = await import('navigation-react');
   const root = (
     <>
       <NavigationHandler stateNavigator={serverNavigator}>
         {view}
       </NavigationHandler>
     </>
   );
-  return renderRequest(request, root);
+  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) {