chore(rsc): update default RSC entries to support formState for progressive enahnced actions

Author: jacob-ebey

.changeset/wet-turtles-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+update default RSC entries to support formState for progressive enahnced actions

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.
+  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

@@ -6,22 +6,16 @@ import { implementations, js, setupRscTest, validateRSCHtml } from "./utils";
 test.use({ javaScriptEnabled: false });
 
 implementations.forEach((implementation) => {
-  let stop: () => void;
-
-  test.afterEach(() => {
-    stop?.();
-  });
-
   test.describe(`RSC nojs (${implementation.name})`, () => {
-    test("Supports React Server Functions side-effect redirect headers for document requests", async ({
-      page,
-    }, { project }) => {
-      test.skip(
-        implementation.name === "parcel" || project.name !== "chromium",
-        "TODO: figure out why parcel isn't working here",
-      );
+    let port: number;
+    let stop: () => void;
 
-      let port = await getPort();
+    test.afterAll(() => {
+      stop?.();
+    });
+
+    test.beforeAll(async () => {
+      port = await getPort();
       stop = await setupRscTest({
         implementation,
         port,
@@ -34,6 +28,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 +45,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,12 +59,34 @@ 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>
+              );
+            }
           `,
         },
       });
+    });
+
+    test("Supports React Server Functions side-effect redirect headers for document requests", async ({
+      page,
+    }, { project }) => {
+      test.skip(
+        implementation.name === "parcel" || project.name !== "chromium",
+        "TODO: figure out why parcel isn't working here",
+      );
 
       await page.goto(`http://localhost:${port}/`);
 
@@ -89,5 +109,25 @@ implementations.forEach((implementation) => {
       // Ensure this is using RSC
       validateRSCHtml(await page.content());
     });
+
+    test("Supports form state without JS", async ({ page }, { project }) => {
+      test.skip(
+        implementation.name === "parcel" || project.name !== "chromium",
+        "TODO: figure out why parcel isn't working here",
+      );
+
+      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");
+
+      // Ensure this is using RSC
+      validateRSCHtml(await page.content());
+    });
   });
 });

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,
@@ -12,8 +13,9 @@ import routes from "virtual:react-router/unstable_rsc/routes";
 export async function fetchServer(request: Request) {
   return await matchRSCServerRequest({
     createTemporaryReferenceSet,
-    decodeReply,
     decodeAction,
+    decodeFormState,
+    decodeReply,
     loadServerAction,
     request,
     routes,