update playgrounds

Author: jacob-ebey

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

@@ -21,12 +21,16 @@ setServerCallback(
     createFromReadableStream,
     createTemporaryReferenceSet,
     encodeReply,
-  })
+  }),
 );
 
 createFromReadableStream(getRSCStream(), { assets: "manifest" }).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.StrictMode>
@@ -35,8 +39,12 @@ 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

@@ -3,6 +3,7 @@
 import {
   createTemporaryReferenceSet,
   decodeAction,
+  decodeFormState,
   decodeReply,
   loadServerAction,
   renderToReadableStream,
@@ -17,8 +18,9 @@ import "./entry.browser.tsx";
 export function fetchServer(request: Request) {
   return matchRSCServerRequest({
     createTemporaryReferenceSet,
-    decodeReply,
     decodeAction,
+    decodeFormState,
+    decodeReply,
     loadServerAction,
     request,
     routes,

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

@@ -22,17 +22,22 @@ 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,
+          },
         );
       },
     });
-  })
+  }),
 );
 
 const server = app.listen(3000);

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

@@ -18,19 +18,27 @@ setServerCallback(
     createFromReadableStream,
     createTemporaryReferenceSet,
     encodeReply,
-  })
+  }),
 );
 
 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

@@ -1,6 +1,7 @@
 import {
   createTemporaryReferenceSet,
   decodeAction,
+  decodeFormState,
   decodeReply,
   loadServerAction,
   renderToReadableStream,
@@ -12,8 +13,9 @@ import { routes } from "./routes";
 export async function fetchServer(request: Request) {
   return await matchRSCServerRequest({
     createTemporaryReferenceSet,
-    decodeReply,
     decodeAction,
+    decodeFormState,
+    decodeReply,
     loadServerAction,
     request,
     // @ts-expect-error

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

@@ -8,20 +8,26 @@ import {
 
 export default async function handler(
   request: Request,
-  fetchServer: (request: Request) => Promise<Response>
+  fetchServer: (request: Request) => Promise<Response>,
 ) {
-  const bootstrapScriptContent = await import.meta.viteRsc.loadBootstrapScriptContent("index");
+  const bootstrapScriptContent =
+    await import.meta.viteRsc.loadBootstrapScriptContent("index");
   return routeRSCServerRequest({
     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,
+        },
       );
     },
   });