diff --git a/fixtures/flight/server/global.js b/fixtures/flight/server/global.js index 16184287b1228..70ccb05ca83ac 100644 --- a/fixtures/flight/server/global.js +++ b/fixtures/flight/server/global.js @@ -138,11 +138,15 @@ app.all('/', async function (req, res, next) { // For HTML, we're a "client" emulator that runs the client code, // so we start by consuming the RSC payload. This needs a module // map that reverse engineers the client-side path to the SSR path. - const root = await createFromNodeStream(rscResponse, moduleMap); + const {root, formState} = await createFromNodeStream( + rscResponse, + moduleMap + ); // Render it into HTML by resolving the client components res.set('Content-type', 'text/html'); const {pipe} = renderToPipeableStream(root, { bootstrapScripts: mainJSChunks, + experimental_formState: formState, }); pipe(res); } catch (e) { diff --git a/fixtures/flight/server/region.js b/fixtures/flight/server/region.js index 4beae03ff35ee..e89f113b7cad6 100644 --- a/fixtures/flight/server/region.js +++ b/fixtures/flight/server/region.js @@ -46,7 +46,7 @@ const {readFile} = require('fs').promises; const React = require('react'); -async function renderApp(res, returnValue) { +async function renderApp(res, returnValue, formState) { const {renderToPipeableStream} = await import( 'react-server-dom-webpack/server' ); @@ -93,13 +93,13 @@ async function renderApp(res, returnValue) { React.createElement(App), ]; // For client-invoked server actions we refresh the tree and return a return value. - const payload = returnValue ? {returnValue, root} : root; + const payload = {root, returnValue, formState}; const {pipe} = renderToPipeableStream(payload, moduleMap); pipe(res); } app.get('/', async function (req, res) { - await renderApp(res, null); + await renderApp(res, null, null); }); app.post('/', bodyParser.text(), async function (req, res) { @@ -108,6 +108,7 @@ app.post('/', bodyParser.text(), async function (req, res) { decodeReply, decodeReplyFromBusboy, decodeAction, + decodeFormState, } = await import('react-server-dom-webpack/server'); const serverReference = req.get('rsc-action'); if (serverReference) { @@ -139,7 +140,7 @@ app.post('/', bodyParser.text(), async function (req, res) { // We handle the error on the client } // Refresh the client and return the value - renderApp(res, result); + renderApp(res, result, null); } else { // This is the progressive enhancement case const UndiciRequest = require('undici').Request; @@ -153,12 +154,14 @@ app.post('/', bodyParser.text(), async function (req, res) { const action = await decodeAction(formData); try { // Wait for any mutations - await action(); + const result = await action(); + const formState = decodeFormState(result, formData); + renderApp(res, null, formState); } catch (x) { const {setServerState} = await import('../src/ServerState.js'); setServerState('Error: ' + x.message); + renderApp(res, null, null); } - renderApp(res, null); } }); diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js index 71eb4fa5d97a0..7a14beb460def 100644 --- a/fixtures/flight/src/App.js +++ b/fixtures/flight/src/App.js @@ -15,7 +15,7 @@ import {Client} from './Client.js'; import {Note} from './cjs/Note.js'; -import {like, greet} from './actions.js'; +import {like, greet, increment} from './actions.js'; import {getServerState} from './ServerState.js'; @@ -32,9 +32,9 @@ export default async function App() {

{getServerState()}

- - - + + +