fix: basic intent support

package.json

@@ -28,7 +28,7 @@
 		"@babel/preset-env": "^7.20.2",
 		"@babel/preset-react": "^7.18.6",
 		"@babel/preset-typescript": "^7.20.2",
-		"@playwright/test": "^1.36.2",
+		"@playwright/test": "^1.40.1",
 		"@remix-run/eslint-config": "^1.19.3",
 		"@remix-run/node": "^1.19.3",
 		"@rollup/plugin-babel": "^5.3.1",

packages/conform-dom/submission.ts

@@ -327,6 +327,7 @@ export function replySubmission<Error>(
 
 	return {
 		status: context.intent ? undefined : error ? 'error' : 'success',
+		intent: context.intent ? context.intent : undefined,
 		initialValue: simplify(context.payload) ?? {},
 		error,
 		state: context.state,

playground/app/routes/validate.tsx → playground/app/routes/intent.tsx

@@ -5,6 +5,7 @@ import {
 	getInputProps,
 	getTextareaProps,
 	getControlButtonProps,
+	FormStateInput,
 } from '@conform-to/react';
 import { parseWithZod } from '@conform-to/zod';
 import type { ActionArgs, LoaderArgs } from '@remix-run/node';
@@ -33,7 +34,7 @@ export async function action({ request }: ActionArgs) {
 	return json(submission.reply());
 }
 
-export default function Validate() {
+export default function Intent() {
 	const { noClientValidate } = useLoaderData<typeof loader>();
 	const lastResult = useActionData();
 	const { meta, fields } = useForm({
@@ -45,14 +46,15 @@ export default function Validate() {
 
 	return (
 		<Form method="post" {...getFormProps(meta)}>
-			<Playground title="Validate" lastSubmission={lastResult}>
+			<FormStateInput context={meta.context} />
+			<Playground title="Intent" lastSubmission={lastResult}>
 				<Field label="Name" config={fields.name}>
 					<input {...getInputProps(fields.name, { type: 'text' })} />
 				</Field>
 				<Field label="Message" config={fields.message}>
 					<textarea {...getTextareaProps(fields.message)} />
 				</Field>
-				<div className="flex flex-row gap-2">
+				<div className="flex flex-col gap-2">
 					<button
 						className="rounded-md border p-2 hover:border-black"
 						{...getControlButtonProps(
@@ -71,6 +73,46 @@ export default function Validate() {
 					>
 						Validate Message
 					</button>
+					<button
+						className="rounded-md border p-2 hover:border-black"
+						{...getControlButtonProps(
+							meta.id,
+							intent.replace({
+								name: fields.message.name,
+								value: 'Hello World',
+							}),
+						)}
+					>
+						Update message
+					</button>
+					<button
+						className="rounded-md border p-2 hover:border-black"
+						{...getControlButtonProps(
+							meta.id,
+							intent.replace({
+								name: fields.message.name,
+								value: '',
+								validated: true,
+							}),
+						)}
+					>
+						Clear message
+					</button>
+					<button
+						className="rounded-md border p-2 hover:border-black"
+						{...getControlButtonProps(
+							meta.id,
+							intent.reset({ name: fields.message.name }),
+						)}
+					>
+						Reset message
+					</button>
+					<button
+						className="rounded-md border p-2 hover:border-black"
+						{...getControlButtonProps(meta.id, intent.reset())}
+					>
+						Reset form
+					</button>
 				</div>
 			</Playground>
 		</Form>

tests/integrations/intent.spec.ts

@@ -0,0 +1,75 @@
+import { type Page, type Locator, test, expect } from '@playwright/test';
+import { getPlayground } from '../helpers';
+
+function getFieldset(form: Locator) {
+	return {
+		name: form.locator('[name="name"]'),
+		message: form.locator('[name="message"]'),
+		validateName: form.locator('button:text("Validate Name")'),
+		validateMessage: form.locator('button:text("Validate Message")'),
+		updateMessage: form.locator('button:text("Update message")'),
+		clearMessage: form.locator('button:text("Clear message")'),
+		resetMessage: form.locator('button:text("Reset message")'),
+		resetForm: form.locator('button:text("Reset form")'),
+	};
+}
+
+async function runValidationScenario(page: Page) {
+	const playground = getPlayground(page);
+	const fieldset = getFieldset(playground.container);
+
+	await expect(playground.error).toHaveText(['', '']);
+
+	await fieldset.validateName.click();
+	await expect(playground.error).toHaveText(['Name is required', '']);
+
+	await fieldset.validateMessage.click();
+	await expect(playground.error).toHaveText([
+		'Name is required',
+		'Message is required',
+	]);
+
+	await fieldset.updateMessage.click();
+	await expect(fieldset.name).toHaveValue('');
+	await expect(fieldset.message).toHaveValue('Hello World');
+	await expect(playground.error).toHaveText(['Name is required', '']);
+
+	await fieldset.clearMessage.click();
+	await expect(fieldset.name).toHaveValue('');
+	await expect(fieldset.message).toHaveValue('');
+	await expect(playground.error).toHaveText([
+		'Name is required',
+		'Message is required',
+	]);
+
+	await fieldset.resetMessage.click();
+	await expect(fieldset.name).toHaveValue('');
+	await expect(fieldset.message).toHaveValue('');
+	await expect(playground.error).toHaveText(['Name is required', '']);
+
+	await fieldset.resetForm.click();
+	await expect(fieldset.name).toHaveValue('');
+	await expect(fieldset.message).toHaveValue('');
+	await expect(playground.error).toHaveText(['', '']);
+}
+
+test.describe('With JS', () => {
+	test('Client Validation', async ({ page }) => {
+		await page.goto('/intent');
+		await runValidationScenario(page);
+	});
+
+	test('Server Validation', async ({ page }) => {
+		await page.goto('/intent?noClientValidate=yes');
+		await runValidationScenario(page);
+	});
+});
+
+test.describe('No JS', () => {
+	test.use({ javaScriptEnabled: false });
+
+	test('Validation', async ({ page }) => {
+		await page.goto('/intent');
+		await runValidationScenario(page);
+	});
+});