chore(deps): update react-router (#632)

Author: hi-ogawa

packages/plugin-rsc/examples/react-router/cf/entry.rsc.tsx

@@ -7,7 +7,3 @@ export default {
     return fetchServer(request)
   },
 }
-
-if (import.meta.hot) {
-  import.meta.hot.accept()
-}

packages/plugin-rsc/examples/react-router/cf/entry.ssr.tsx

@@ -1,13 +1,9 @@
-import handler from '../react-router-vite/entry.ssr'
+import { generateHTML } from '../react-router-vite/entry.ssr'
 
 console.log('[debug:cf-ssr-entry]')
 
-// TODO:
-// shouldn't "entry.rsc.tsx" be the main server entry
-// and optionally call "entry.ssr.tsx" only for rendering html?
-
 export default {
   fetch(request: Request, env: any) {
-    return handler(request, (request) => env.RSC.fetch(request))
+    return generateHTML(request, (request) => env.RSC.fetch(request))
   },
 }

packages/plugin-rsc/examples/react-router/package.json

@@ -16,11 +16,11 @@
     "@vitejs/plugin-rsc": "latest",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "0.0.0-experimental-23decd7bc"
+    "react-router": "7.7.0"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.10.0",
-    "@react-router/dev": "0.0.0-experimental-23decd7bc",
+    "@react-router/dev": "7.7.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.11",
     "@types/react": "^19.1.8",

packages/plugin-rsc/examples/react-router/react-router-vite/entry.browser.tsx

@@ -4,35 +4,42 @@ import {
   encodeReply,
   setServerCallback,
 } from '@vitejs/plugin-rsc/browser'
-import * as React from 'react'
+import { startTransition, StrictMode } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import {
-  unstable_RSCHydratedRouter as RSCHydratedRouter,
-  type unstable_RSCPayload as RSCPayload,
   unstable_createCallServer as createCallServer,
   unstable_getRSCStream as getRSCStream,
+  unstable_RSCHydratedRouter as RSCHydratedRouter,
+  type unstable_RSCPayload as RSCServerPayload,
 } from 'react-router'
 
+// Create and set the callServer function to support post-hydration server actions.
 setServerCallback(
   createCallServer({
     createFromReadableStream,
-    encodeReply,
     createTemporaryReferenceSet,
+    encodeReply,
   }),
 )
 
-createFromReadableStream<RSCPayload>(getRSCStream()).then(
-  (payload: RSCPayload) => {
-    React.startTransition(() => {
-      hydrateRoot(
-        document,
-        <React.StrictMode>
-          <RSCHydratedRouter
-            createFromReadableStream={createFromReadableStream}
-            payload={payload}
-          />
-        </React.StrictMode>,
-      )
-    })
-  },
-)
+// Get and decode the initial server payload
+createFromReadableStream<RSCServerPayload>(getRSCStream()).then((payload) => {
+  startTransition(async () => {
+    const formState =
+      payload.type === 'render' ? await payload.formState : undefined
+
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RSCHydratedRouter
+          createFromReadableStream={createFromReadableStream}
+          payload={payload}
+        />
+      </StrictMode>,
+      {
+        // @ts-expect-error - no types for this yet
+        formState,
+      },
+    )
+  })
+})

packages/plugin-rsc/examples/react-router/react-router-vite/entry.rsc.single.tsx

@@ -0,0 +1,10 @@
+import { fetchServer } from './entry.rsc'
+
+export default async function handler(request: Request) {
+  // Import the generateHTML function from the client environment
+  const ssr = await import.meta.viteRsc.loadModule<
+    typeof import('./entry.ssr')
+  >('ssr', 'index')
+
+  return ssr.generateHTML(request, fetchServer)
+}

packages/plugin-rsc/examples/react-router/react-router-vite/entry.rsc.tsx

@@ -1,6 +1,7 @@
 import {
   createTemporaryReferenceSet,
   decodeAction,
+  decodeFormState,
   decodeReply,
   loadServerAction,
   renderToReadableStream,
@@ -9,14 +10,19 @@ import { unstable_matchRSCServerRequest as matchRSCServerRequest } from 'react-r
 
 import routes from 'virtual:react-router-routes'
 
-export async function fetchServer(request: Request): Promise<Response> {
-  return await matchRSCServerRequest({
+export function fetchServer(request: Request) {
+  return matchRSCServerRequest({
+    // Provide the React Server touchpoints.
     createTemporaryReferenceSet,
-    decodeReply,
     decodeAction,
+    decodeFormState,
+    decodeReply,
     loadServerAction,
+    // The incoming request.
     request,
+    // The app routes.
     routes,
+    // Encode the match with the React Server implementation.
     generateResponse(match, options) {
       return new Response(renderToReadableStream(match.payload, options), {
         status: match.statusCode,

packages/plugin-rsc/examples/react-router/react-router-vite/entry.ssr.single.tsx

@@ -1,25 +1,36 @@
 import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
-import * as ReactDomServer from 'react-dom/server.edge'
+import { renderToReadableStream as renderHTMLToReadableStream } from 'react-dom/server.edge'
 import {
-  unstable_RSCStaticRouter as RSCStaticRouter,
   unstable_routeRSCServerRequest as routeRSCServerRequest,
+  unstable_RSCStaticRouter as RSCStaticRouter,
 } from 'react-router'
 
-export default async function handler(
+export async function generateHTML(
   request: Request,
   fetchServer: (request: Request) => Promise<Response>,
 ): Promise<Response> {
-  const bootstrapScriptContent =
-    await import.meta.viteRsc.loadBootstrapScriptContent('index')
-  return routeRSCServerRequest({
+  return await routeRSCServerRequest({
+    // The incoming request.
     request,
+    // How to call the React Server.
     fetchServer,
-    createFromReadableStream: (body) => createFromReadableStream(body),
-    renderHTML(getPayload) {
-      return ReactDomServer.renderToReadableStream(
+    // Provide the React Server touchpoints.
+    createFromReadableStream,
+    // Render the router to HTML.
+    async renderHTML(getPayload) {
+      const payload = await getPayload()
+      const formState =
+        payload.type === 'render' ? await payload.formState : undefined
+
+      const bootstrapScriptContent =
+        await import.meta.viteRsc.loadBootstrapScriptContent('index')
+
+      return await renderHTMLToReadableStream(
         <RSCStaticRouter getPayload={getPayload} />,
         {
           bootstrapScriptContent,
+          // @ts-expect-error - no types for this yet
+          formState,
         },
       )
     },

packages/plugin-rsc/examples/react-router/react-router-vite/entry.ssr.tsx

@@ -17,12 +17,8 @@ export default defineConfig({
     rsc({
       entries: {
         client: './react-router-vite/entry.browser.tsx',
-        ssr: './react-router-vite/entry.ssr.single.tsx',
-        rsc: './react-router-vite/entry.rsc.tsx',
-      },
-      serverHandler: {
-        environmentName: 'ssr',
-        entryName: 'index',
+        ssr: './react-router-vite/entry.ssr.tsx',
+        rsc: './react-router-vite/entry.rsc.single.tsx',
       },
     }),
     inspect(),