withState() — astro Function Reference

Architecture documentation for the withState() function in actions.ts from the astro codebase.

Function typescript CoreAstro CoreMiddleware calls 2 called by 1

Entity Profile

CoreAstro→ CoreMiddleware→ withState() — astro Function Reference

Dependency Diagram

graph TD
  2b5923e4_5066_7a86_ac92_50a2eac9cc59["withState()"]
  06b8da53_857b_8b04_0933_f733f1198a2e["actions.ts"]
  2b5923e4_5066_7a86_ac92_50a2eac9cc59 -->|defined in| 06b8da53_857b_8b04_0933_f733f1198a2e
  7b78e976_79b5_a302_1dfc_b121ae89b56b["getActionState()"]
  7b78e976_79b5_a302_1dfc_b121ae89b56b -->|calls| 2b5923e4_5066_7a86_ac92_50a2eac9cc59
  7b78e976_79b5_a302_1dfc_b121ae89b56b["getActionState()"]
  2b5923e4_5066_7a86_ac92_50a2eac9cc59 -->|calls| 7b78e976_79b5_a302_1dfc_b121ae89b56b
  3a333565_63d0_d54e_2988_717e0999827f["injectStateIntoFormActionData()"]
  2b5923e4_5066_7a86_ac92_50a2eac9cc59 -->|calls| 3a333565_63d0_d54e_2988_717e0999827f
  style 2b5923e4_5066_7a86_ac92_50a2eac9cc59 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/react/src/actions.ts lines 11–41

export function withState<T>(action: FormFn<T>) {
	// React expects two positional arguments when using `useActionState()`:
	// 1. The initial state value.
	// 2. The form data object.

	// Map this first argument to a hidden input
	// for retrieval from `getActionState()`.
	const callback = async function (state: T, formData: FormData) {
		formData.set('_astroActionState', JSON.stringify(state));
		return action(formData);
	};
	if (!('$$FORM_ACTION' in action)) return callback;

	// Re-bind progressive enhancement info for React.
	callback.$$FORM_ACTION = action.$$FORM_ACTION;
	// Called by React when form state is passed from the server.
	// If the action names match, React returns this state from `useActionState()`.
	callback.$$IS_SIGNATURE_EQUAL = (incomingActionName: string) => {
		const actionName = new URLSearchParams(action.toString()).get('_action');
		return actionName === incomingActionName;
	};

	// React calls `.bind()` internally to pass the initial state value.
	// Calling `.bind()` seems to remove our `$$FORM_ACTION` metadata,
	// so we need to define our *own* `.bind()` method to preserve that metadata.
	Object.defineProperty(callback, 'bind', {
		value: (...args: Parameters<typeof callback>) =>
			injectStateIntoFormActionData(callback, ...args),
	});
	return callback;
}