1 files changed, 55 insertions, 0 deletions
diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
index 2ff3f55fb..a0b2db744 100644
--- a/packages/integrations/react/server.js
+++ b/packages/integrations/react/server.js
@@ -1,6 +1,7 @@
 import opts from 'astro:react:opts';
 import React from 'react';
 import ReactDOM from 'react-dom/server';
+import { AstroError } from 'astro/errors';
 import { incrementId } from './context.js';
 import StaticHtml from './static-html.js';
 
@@ -101,9 +102,16 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
 			value: newChildren,
 		});
 	}
+	const formState = this ? await getFormState(this) : undefined;
+	if (formState) {
+		attrs['data-action-result'] = JSON.stringify(formState[0]);
+		attrs['data-action-key'] = formState[1];
+		attrs['data-action-name'] = formState[2];
+	}
 	const vnode = React.createElement(Component, newProps);
 	const renderOptions = {
 		identifierPrefix: prefix,
+		formState,
 	};
 	let html;
 	if ('renderToReadableStream' in ReactDOM) {
@@ -114,6 +122,43 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
 	return { html, attrs };
 }
 
+/**
+ * @returns {Promise<[actionResult: any, actionKey: string, actionName: string] | undefined>}
+ */
+async function getFormState({ result }) {
+	const { request, actionResult } = result;
+
+	if (!actionResult) return undefined;
+	if (!isFormRequest(request.headers.get('content-type'))) return undefined;
+
+	const formData = await request.clone().formData();
+	/**
+	 * The key generated by React to identify each `useActionState()` call.
+	 * @example "k511f74df5a35d32e7cf266450d85cb6c"
+	 */
+	const actionKey = formData.get('$ACTION_KEY')?.toString();
+	/**
+	 * The action name returned by an action's `toString()` property.
+	 * This matches the endpoint path.
+	 * @example "/_actions/blog.like"
+	 */
+	const actionName = formData.get('_astroAction')?.toString();
+
+	if (!actionKey || !actionName) return undefined;
+
+	const isUsingSafe = formData.has('_astroActionSafe');
+	if (!isUsingSafe && actionResult.error) {
+		throw new AstroError(
+			`Unhandled error calling action ${actionName.replace(/^\/_actions\//, '')}:\n[${
+				actionResult.error.code
+			}] ${actionResult.error.message}`,
+			'use `.safe()` to handle from your React component.'
+		);
+	}
+
+	return [isUsingSafe ? actionResult : actionResult.data, actionKey, actionName];
+}
+
 async function renderToPipeableStreamAsync(vnode, options) {
 	const Writable = await getNodeWritable();
 	let html = '';
@@ -170,6 +215,16 @@ async function renderToReadableStreamAsync(vnode, options) {
 	return await readResult(await ReactDOM.renderToReadableStream(vnode, options));
 }
 
+const formContentTypes = ['application/x-www-form-urlencoded', 'multipart/form-data'];
+
+function isFormRequest(contentType) {
+	// Split off parameters like charset or boundary
+	// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type#content-type_in_html_forms
+	const type = contentType?.split(';')[0].toLowerCase();
+
+	return formContentTypes.some((t) => type === t);
+}
+
 export default {
 	check,
 	renderToStaticMarkup,