fix(dev/config): add missing formState handling in some RSC templates

integration/helpers/rsc-parcel-framework/app/entry.browser.tsx

@@ -25,7 +25,11 @@ setServerCallback(
 );
 
 createFromReadableStream(getRSCStream()).then((payload: RSCPayload) => {
-  React.startTransition(() => {
+  // @ts-expect-error - on 18 types, requires 19.
+  React.startTransition(async () => {
+    const formState =
+      payload.type === "render" ? await payload.formState : undefined;
+
     hydrateRoot(
       document,
       React.createElement(
@@ -36,6 +40,10 @@ createFromReadableStream(getRSCStream()).then((payload: RSCPayload) => {
           payload,
         }),
       ),
+      {
+        // @ts-expect-error - no types for this yet
+        formState,
+      },
     );
   });
 });

integration/helpers/rsc-parcel-framework/app/entry.rsc.ts

@@ -3,6 +3,7 @@
 import {
   createTemporaryReferenceSet,
   decodeAction,
+  decodeFormState,
   decodeReply,
   loadServerAction,
   renderToReadableStream,
@@ -18,6 +19,7 @@ export function fetchServer(request: Request) {
   return matchRSCServerRequest({
     createTemporaryReferenceSet,
     decodeAction,
+    decodeFormState,
     decodeReply,
     loadServerAction,
     request,

integration/helpers/rsc-parcel-framework/app/index.ts

@@ -16,12 +16,17 @@ export const requestHandler = async (request: Request) => {
     fetchServer,
     createFromReadableStream,
     async renderHTML(getPayload) {
+      const payload = await getPayload();
+      const formState =
+        payload.type === "render" ? await payload.formState : undefined;
+
       return await renderToReadableStream(
         React.createElement(unstable_RSCStaticRouter, { getPayload }),
         {
           bootstrapScriptContent: (
             fetchServer as unknown as { bootstrapScript: string }
           ).bootstrapScript,
+          formState,
         },
       );
     },

integration/helpers/rsc-vite/src/entry.browser.tsx

@@ -23,7 +23,11 @@ setServerCallback(
 );
 
 createFromReadableStream<RSCPayload>(getRSCStream()).then((payload) => {
-  startTransition(() => {
+  // @ts-expect-error - on 18 types, requires 19.
+  startTransition(async () => {
+    const formState =
+      payload.type === "render" ? await payload.formState : undefined;
+
     hydrateRoot(
       document,
       <StrictMode>
@@ -33,6 +37,10 @@ createFromReadableStream<RSCPayload>(getRSCStream()).then((payload) => {
           getContext={getContext}
         />
       </StrictMode>,
+      {
+        // @ts-expect-error - no types for this yet
+        formState,
+      },
     );
   });
 });

integration/helpers/rsc-vite/src/entry.rsc.tsx

@@ -1,6 +1,7 @@
 import {
   createTemporaryReferenceSet,
   decodeAction,
+  decodeFormState,
   decodeReply,
   loadServerAction,
   renderToReadableStream,
@@ -16,6 +17,7 @@ export async function fetchServer(request: Request) {
     createTemporaryReferenceSet,
     decodeReply,
     decodeAction,
+    decodeFormState,
     loadServerAction,
     request,
     requestContext,

integration/helpers/rsc-vite/src/entry.ssr.tsx

@@ -16,12 +16,17 @@ export default async function handler(
     request,
     fetchServer,
     createFromReadableStream,
-    renderHTML(getPayload) {
+    async renderHTML(getPayload) {
+      const payload = await getPayload();
+      const formState =
+        payload.type === "render" ? await payload.formState : undefined;
+
       return ReactDomServer.renderToReadableStream(
         <RSCStaticRouter getPayload={getPayload} />,
         {
           bootstrapScriptContent,
           signal: request.signal,
+          formState,
         },
       );
     },

integration/rsc/rsc-nojs-test.ts

@@ -34,6 +34,10 @@ implementations.forEach((implementation) => {
               redirect("/?redirected=true", { headers: { "x-test": "test" } });
               return "redirected";
             }
+
+            export async function incrementAction(prev) {
+              return prev + 1;
+            }
           `,
           "src/routes/home.client.tsx": js`
             "use client";
@@ -47,7 +51,7 @@ implementations.forEach((implementation) => {
           "src/routes/home.tsx": js`
             "use client";
             import {useActionState} from "react";
-            import { redirectAction } from "./home.actions";
+            import { redirectAction, incrementAction } from "./home.actions";
             import { Counter } from "./home.client";
 
             export default function HomeRoute(props) {
@@ -61,15 +65,36 @@ implementations.forEach((implementation) => {
                   </form>
                   {state && <div data-testid="state">{state}</div>}
                   <Counter />
+                  <TestActionState />
                 </div>
               );
             }
+
+            function TestActionState() {
+              const [state, action] = useActionState(incrementAction, 0);
+              return (
+                <form action={action}>
+                  <button type="submit" data-action-state-increment-submit>
+                    action-state-increment
+                  </button>
+                  <div data-action-state-increment-result>{state}</div>
+                </form>
+              );
+            }
           `,
         },
       });
 
       await page.goto(`http://localhost:${port}/`);
 
+      await expect(
+        page.locator("[data-action-state-increment-result]"),
+      ).toHaveText("0");
+      await page.click("[data-action-state-increment-submit]");
+      await expect(
+        page.locator("[data-action-state-increment-result]"),
+      ).toHaveText("1");
+
       const responseHeadersPromise = new Promise<Record<string, string>>(
         (resolve) => {
           page.addListener("response", (response) => {

packages/react-router-dev/config/default-rsc-entries/entry.client.tsx

@@ -24,7 +24,11 @@ setServerCallback(
 );
 
 createFromReadableStream<RSCPayload>(getRSCStream()).then((payload) => {
-  startTransition(() => {
+  // @ts-expect-error - on 18 types, requires 19.
+  startTransition(async () => {
+    const formState =
+      payload.type === "render" ? await payload.formState : undefined;
+
     hydrateRoot(
       document,
       <StrictMode>
@@ -33,6 +37,10 @@ createFromReadableStream<RSCPayload>(getRSCStream()).then((payload) => {
           createFromReadableStream={createFromReadableStream}
         />
       </StrictMode>,
+      {
+        // @ts-expect-error - no types for this yet
+        formState,
+      },
     );
   });
 });

packages/react-router-dev/config/default-rsc-entries/entry.rsc.tsx

@@ -1,6 +1,7 @@
 import {
   createTemporaryReferenceSet,
   decodeAction,
+  decodeFormState,
   decodeReply,
   loadServerAction,
   renderToReadableStream,
@@ -14,6 +15,7 @@ export async function fetchServer(request: Request) {
     createTemporaryReferenceSet,
     decodeReply,
     decodeAction,
+    decodeFormState,
     loadServerAction,
     request,
     routes,

packages/react-router-dev/config/default-rsc-entries/entry.ssr.tsx

@@ -16,12 +16,17 @@ export default async function handler(
     request,
     fetchServer,
     createFromReadableStream,
-    renderHTML(getPayload) {
+    async renderHTML(getPayload) {
+      const payload = await getPayload();
+      const formState =
+        payload.type === "render" ? await payload.formState : undefined;
+
       return ReactDomServer.renderToReadableStream(
         <RSCStaticRouter getPayload={getPayload} />,
         {
           bootstrapScriptContent,
           signal: request.signal,
+          formState,
         },
       );
     },

playground/rsc-parcel/src/entry.browser.tsx

@@ -26,7 +26,11 @@ setServerCallback(
 
 createFromReadableStream(getRSCStream(), { assets: "manifest" }).then(
   (payload: RSCPayload) => {
-    React.startTransition(() => {
+    // @ts-expect-error - on 18 types, requires 19.
+    React.startTransition(async () => {
+      const formState =
+        payload.type === "render" ? await payload.formState : undefined;
+
       hydrateRoot(
         document,
         <React.StrictMode>
@@ -35,7 +39,11 @@ createFromReadableStream(getRSCStream(), { assets: "manifest" }).then(
             routeDiscovery="eager"
             createFromReadableStream={createFromReadableStream}
           />
-        </React.StrictMode>
+        </React.StrictMode>,
+        {
+          // @ts-expect-error - no types for this yet
+          formState
+        }
       );
     });
   }

playground/rsc-parcel/src/entry.rsc.ts

@@ -4,6 +4,7 @@ import {
   createTemporaryReferenceSet,
   decodeAction,
   decodeReply,
+  decodeFormState,
   loadServerAction,
   renderToReadableStream,
   // @ts-expect-error
@@ -19,6 +20,7 @@ export function fetchServer(request: Request) {
     createTemporaryReferenceSet,
     decodeReply,
     decodeAction,
+    decodeFormState,
     loadServerAction,
     request,
     routes,

playground/rsc-parcel/src/entry.ssr.tsx

@@ -22,12 +22,17 @@ app.use(
       fetchServer,
       createFromReadableStream,
       async renderHTML(getPayload) {
+        const payload = await getPayload();
+        const formState =
+          payload.type === "render" ? await payload.formState : undefined;
+
         return await renderHTMLToReadableStream(
           <RSCStaticRouter getPayload={getPayload} />,
           {
             bootstrapScriptContent: (
               fetchServer as unknown as { bootstrapScript: string }
             ).bootstrapScript,
+            formState,
           }
         );
       },

playground/rsc-vite/src/entry.browser.tsx

@@ -22,15 +22,23 @@ setServerCallback(
 );
 
 createFromReadableStream<RSCPayload>(getRSCStream()).then((payload) => {
-  startTransition(() => {
+  // @ts-expect-error - on 18 types, requires 19.
+  startTransition(async () => {
+    const formState =
+      payload.type === "render" ? await payload.formState : undefined;
+
     hydrateRoot(
       document,
       <StrictMode>
         <RSCHydratedRouter
           payload={payload}
           createFromReadableStream={createFromReadableStream}
         />
-      </StrictMode>
+      </StrictMode>,
+      {
+        // @ts-expect-error - no types for this yet
+        formState
+      }
     );
   });
 });

playground/rsc-vite/src/entry.rsc.tsx

@@ -2,6 +2,7 @@ import {
   createTemporaryReferenceSet,
   decodeAction,
   decodeReply,
+  decodeFormState,
   loadServerAction,
   renderToReadableStream,
 } from "@vitejs/plugin-rsc/rsc";
@@ -14,6 +15,7 @@ export async function fetchServer(request: Request) {
     createTemporaryReferenceSet,
     decodeReply,
     decodeAction,
+    decodeFormState,
     loadServerAction,
     request,
     // @ts-expect-error

playground/rsc-vite/src/entry.ssr.tsx

@@ -15,12 +15,17 @@ export default async function handler(
     request,
     fetchServer,
     createFromReadableStream,
-    renderHTML(getPayload) {
+    async renderHTML(getPayload) {
+      const payload = await getPayload();
+      const formState =
+        payload.type === "render" ? await payload.formState : undefined;
+
       return ReactDomServer.renderToReadableStream(
         <RSCStaticRouter getPayload={getPayload} />,
         {
           bootstrapScriptContent,
           signal: request.signal,
+          formState,
         }
       );
     },