From ee779f0e760c64c53bccb1dc5c08b084c228f76d Mon Sep 17 00:00:00 2001
From: Edmund Hung <me@edmund.dev>
Date: Mon, 13 Nov 2023 00:49:35 +0100
Subject: [PATCH] chore: fix remix example

---
 examples/remix/app/routes/login-fetcher.tsx | 54 +++++++++---------
 examples/remix/app/routes/login.tsx         | 54 +++++++++---------
 examples/remix/app/routes/signup.tsx        | 62 ++++++++++-----------
 examples/remix/app/routes/todos.tsx         | 28 +++++-----
 packages/conform-dom/form.ts                |  7 ++-
 packages/conform-react/context.tsx          |  5 +-
 packages/conform-react/index.ts             |  2 +-
 tests/conform-react.spec.ts                 | 30 +++++-----
 8 files changed, 121 insertions(+), 121 deletions(-)

diff --git a/examples/remix/app/routes/login-fetcher.tsx b/examples/remix/app/routes/login-fetcher.tsx
index cc408bba..5ecdcdcc 100644
--- a/examples/remix/app/routes/login-fetcher.tsx
+++ b/examples/remix/app/routes/login-fetcher.tsx
@@ -1,4 +1,4 @@
-import { ConformBoundary, conform, useForm } from '@conform-to/react';
+import { conform, useForm } from '@conform-to/react';
 import { parse } from '@conform-to/zod';
 import type { ActionArgs } from '@remix-run/node';
 import { json, redirect } from '@remix-run/node';
@@ -24,7 +24,7 @@ export async function action({ request }: ActionArgs) {
 
 export default function Login() {
 	const fetcher = useFetcher<typeof action>();
-	const { form, fields, context } = useForm({
+	const { form, fields } = useForm({
 		// Sync the result of last submission
 		lastResult: fetcher.data,
 
@@ -37,33 +37,31 @@ export default function Login() {
 	});
 
 	return (
-		<ConformBoundary context={context}>
-			<fetcher.Form method="post" {...conform.form(form)}>
+		<fetcher.Form method="post" {...conform.form(form)}>
+			<div>
+				<label>Email</label>
+				<input
+					className={!fields.email.valid ? 'error' : ''}
+					{...conform.input(fields.email)}
+				/>
+				<div>{fields.email.errors}</div>
+			</div>
+			<div>
+				<label>Password</label>
+				<input
+					className={!fields.password.valid ? 'error' : ''}
+					{...conform.input(fields.password, { type: 'password' })}
+				/>
+				<div>{fields.password.errors}</div>
+			</div>
+			<label>
 				<div>
-					<label>Email</label>
-					<input
-						className={fields.email.error ? 'error' : ''}
-						{...conform.input(fields.email)}
-					/>
-					<div>{fields.email.error}</div>
+					<span>Remember me</span>
+					<input {...conform.input(fields.remember, { type: 'checkbox' })} />
 				</div>
-				<div>
-					<label>Password</label>
-					<input
-						className={fields.password.error ? 'error' : ''}
-						{...conform.input(fields.password, { type: 'password' })}
-					/>
-					<div>{fields.password.error}</div>
-				</div>
-				<label>
-					<div>
-						<span>Remember me</span>
-						<input {...conform.input(fields.remember, { type: 'checkbox' })} />
-					</div>
-				</label>
-				<hr />
-				<button>Login</button>
-			</fetcher.Form>
-		</ConformBoundary>
+			</label>
+			<hr />
+			<button>Login</button>
+		</fetcher.Form>
 	);
 }
diff --git a/examples/remix/app/routes/login.tsx b/examples/remix/app/routes/login.tsx
index b2cf81c7..09760403 100644
--- a/examples/remix/app/routes/login.tsx
+++ b/examples/remix/app/routes/login.tsx
@@ -1,4 +1,4 @@
-import { ConformBoundary, conform, useForm } from '@conform-to/react';
+import { conform, useForm } from '@conform-to/react';
 import { parse } from '@conform-to/zod';
 import type { ActionArgs } from '@remix-run/node';
 import { json, redirect } from '@remix-run/node';
@@ -25,7 +25,7 @@ export async function action({ request }: ActionArgs) {
 export default function Login() {
 	// Last submission returned by the server
 	const lastResult = useActionData<typeof action>();
-	const { form, context, fields } = useForm({
+	const { form, fields } = useForm({
 		// Sync the result of last submission
 		lastResult,
 
@@ -39,33 +39,31 @@ export default function Login() {
 	});
 
 	return (
-		<ConformBoundary context={context}>
-			<Form method="post" {...conform.form(form)}>
+		<Form method="post" {...conform.form(form)}>
+			<div>
+				<label>Email</label>
+				<input
+					className={!fields.email.valid ? 'error' : ''}
+					{...conform.input(fields.email)}
+				/>
+				<div>{fields.email.errors}</div>
+			</div>
+			<div>
+				<label>Password</label>
+				<input
+					className={!fields.password.valid ? 'error' : ''}
+					{...conform.input(fields.password, { type: 'password' })}
+				/>
+				<div>{fields.password.errors}</div>
+			</div>
+			<label>
 				<div>
-					<label>Email</label>
-					<input
-						className={fields.email.error ? 'error' : ''}
-						{...conform.input(fields.email)}
-					/>
-					<div>{fields.email.error}</div>
+					<span>Remember me</span>
+					<input {...conform.input(fields.remember, { type: 'checkbox' })} />
 				</div>
-				<div>
-					<label>Password</label>
-					<input
-						className={fields.password.error ? 'error' : ''}
-						{...conform.input(fields.password, { type: 'password' })}
-					/>
-					<div>{fields.password.error}</div>
-				</div>
-				<label>
-					<div>
-						<span>Remember me</span>
-						<input {...conform.input(fields.remember, { type: 'checkbox' })} />
-					</div>
-				</label>
-				<hr />
-				<button>Login</button>
-			</Form>
-		</ConformBoundary>
+			</label>
+			<hr />
+			<button>Login</button>
+		</Form>
 	);
 }
diff --git a/examples/remix/app/routes/signup.tsx b/examples/remix/app/routes/signup.tsx
index 63593519..ae87eb14 100644
--- a/examples/remix/app/routes/signup.tsx
+++ b/examples/remix/app/routes/signup.tsx
@@ -1,4 +1,4 @@
-import { ConformBoundary, conform, useForm } from '@conform-to/react';
+import { conform, useForm } from '@conform-to/react';
 import { parse, refine } from '@conform-to/zod';
 import type { ActionArgs } from '@remix-run/node';
 import { json, redirect } from '@remix-run/node';
@@ -73,7 +73,7 @@ export async function action({ request }: ActionArgs) {
 
 export default function Signup() {
 	const lastResult = useActionData<typeof action>();
-	const { form, fields, context } = useForm({
+	const { form, fields } = useForm({
 		lastResult,
 		onValidate({ formData }) {
 			return parse(formData, {
@@ -85,35 +85,33 @@ export default function Signup() {
 	});
 
 	return (
-		<ConformBoundary context={context}>
-			<Form method="post" {...conform.form(form)}>
-				<label>
-					<div>Username</div>
-					<input
-						className={fields.username.error ? 'error' : ''}
-						{...conform.input(fields.username)}
-					/>
-					<div>{fields.username.error}</div>
-				</label>
-				<label>
-					<div>Password</div>
-					<input
-						className={fields.password.error ? 'error' : ''}
-						{...conform.input(fields.password, { type: 'password' })}
-					/>
-					<div>{fields.password.error}</div>
-				</label>
-				<label>
-					<div>Confirm Password</div>
-					<input
-						className={fields.confirmPassword.error ? 'error' : ''}
-						{...conform.input(fields.confirmPassword, { type: 'password' })}
-					/>
-					<div>{fields.confirmPassword.error}</div>
-				</label>
-				<hr />
-				<button>Signup</button>
-			</Form>
-		</ConformBoundary>
+		<Form method="post" {...conform.form(form)}>
+			<label>
+				<div>Username</div>
+				<input
+					className={!fields.username.valid ? 'error' : ''}
+					{...conform.input(fields.username)}
+				/>
+				<div>{fields.username.errors}</div>
+			</label>
+			<label>
+				<div>Password</div>
+				<input
+					className={!fields.password.valid ? 'error' : ''}
+					{...conform.input(fields.password, { type: 'password' })}
+				/>
+				<div>{fields.password.errors}</div>
+			</label>
+			<label>
+				<div>Confirm Password</div>
+				<input
+					className={!fields.confirmPassword.valid ? 'error' : ''}
+					{...conform.input(fields.confirmPassword, { type: 'password' })}
+				/>
+				<div>{fields.confirmPassword.errors}</div>
+			</label>
+			<hr />
+			<button>Signup</button>
+		</Form>
 	);
 }
diff --git a/examples/remix/app/routes/todos.tsx b/examples/remix/app/routes/todos.tsx
index 0ad4970f..71540435 100644
--- a/examples/remix/app/routes/todos.tsx
+++ b/examples/remix/app/routes/todos.tsx
@@ -1,11 +1,11 @@
 import type { Field } from '@conform-to/react';
 import {
+	FormProvider,
 	useForm,
 	useFieldset,
 	useFieldList,
 	conform,
 	intent,
-	ConformBoundary,
 } from '@conform-to/react';
 import { parse } from '@conform-to/zod';
 import type { ActionArgs } from '@remix-run/node';
@@ -40,9 +40,9 @@ export default function TodoForm() {
 	const lastResult = useActionData<typeof action>();
 	const { form, fields, context } = useForm({
 		lastResult,
-		onValidate({ formData }) {
-			return parse(formData, { schema: todosSchema });
-		},
+		// onValidate({ formData }) {
+		// 	return parse(formData, { schema: todosSchema });
+		// },
 		shouldValidate: 'onBlur',
 	});
 	const taskList = useFieldList({
@@ -52,20 +52,20 @@ export default function TodoForm() {
 	});
 
 	return (
-		<ConformBoundary context={context}>
+		<FormProvider context={context}>
 			<Form method="post" {...conform.form(form)}>
 				<div>
 					<label>Title</label>
 					<input
-						className={fields.title.error ? 'error' : ''}
+						className={!fields.title.valid ? 'error' : ''}
 						{...conform.input(fields.title)}
 					/>
-					<div>{fields.title.error}</div>
+					<div>{fields.title.errors}</div>
 				</div>
 				<hr />
-				<div className="form-error">{fields.tasks.error}</div>
+				<div className="form-error">{fields.tasks.errors}</div>
 				{taskList.map((task, index) => (
-					<p key={task.key}>
+					<div key={task.key}>
 						<TaskFieldset
 							title={`Task #${index + 1}`}
 							name={task.name}
@@ -87,7 +87,7 @@ export default function TodoForm() {
 						>
 							Clear
 						</button>
-					</p>
+					</div>
 				))}
 				<button
 					{...intent.list.insert(fields.tasks, {
@@ -99,7 +99,7 @@ export default function TodoForm() {
 				<hr />
 				<button>Save</button>
 			</Form>
-		</ConformBoundary>
+		</FormProvider>
 	);
 }
 
@@ -118,16 +118,16 @@ function TaskFieldset({ title, name, formId }: TaskFieldsetProps) {
 			<div>
 				<label>{title}</label>
 				<input
-					className={fields.content.error ? 'error' : ''}
+					className={!fields.content.valid ? 'error' : ''}
 					{...conform.input(fields.content)}
 				/>
-				<div>{fields.content.error}</div>
+				<div>{fields.content.errors}</div>
 			</div>
 			<div>
 				<label>
 					<span>Completed</span>
 					<input
-						className={fields.completed.error ? 'error' : ''}
+						className={!fields.completed.valid ? 'error' : ''}
 						{...conform.input(fields.completed, {
 							type: 'checkbox',
 						})}
diff --git a/packages/conform-dom/form.ts b/packages/conform-dom/form.ts
index a99362f9..ba1d9eae 100644
--- a/packages/conform-dom/form.ts
+++ b/packages/conform-dom/form.ts
@@ -196,6 +196,11 @@ export function createForm<Type extends Record<string, unknown> = any>(
 		const cache: Record<string, string | undefined> = {};
 		const keyProxy = new Proxy(key, {
 			get(_, name: string) {
+				// This makes getSerializedState() returning the raw key instead
+				if (name === 'toJSON') {
+					return () => key;
+				}
+
 				if (typeof cache[name] === 'undefined') {
 					const currentKey = key[name] ?? '';
 					const resultKey =
@@ -203,7 +208,7 @@ export function createForm<Type extends Record<string, unknown> = any>(
 							? currentKey
 							: `${
 									keyProxy[formatPaths(getPaths(name).slice(0, -1))] ?? ''
-							  }${currentKey}`;
+							  }/${currentKey}`;
 
 					if (resultKey) {
 						cache[name] = resultKey;
diff --git a/packages/conform-react/context.tsx b/packages/conform-react/context.tsx
index f7d6833e..c29016f4 100644
--- a/packages/conform-react/context.tsx
+++ b/packages/conform-react/context.tsx
@@ -12,6 +12,7 @@ import {
 	STATE,
 } from '@conform-to/dom';
 import {
+	type ReactElement,
 	type ReactNode,
 	type MutableRefObject,
 	createContext,
@@ -84,10 +85,10 @@ export function useFormContext(
 	return result;
 }
 
-export function FormContextProvider(props: {
+export function FormProvider(props: {
 	context: Form;
 	children: ReactNode;
-}): ReactNode {
+}): ReactElement {
 	const context = useContext(Context);
 	const value = useMemo(
 		() => ({ ...context, [props.context.id]: props.context }),
diff --git a/packages/conform-react/index.ts b/packages/conform-react/index.ts
index f61634b1..93286362 100644
--- a/packages/conform-react/index.ts
+++ b/packages/conform-react/index.ts
@@ -7,7 +7,7 @@ export {
 export {
 	type Field,
 	type FieldMetadata as FieldConfig,
-	FormContextProvider,
+	FormProvider,
 	FormStateInput,
 } from './context';
 export {
diff --git a/tests/conform-react.spec.ts b/tests/conform-react.spec.ts
index d86a125e..912558c7 100644
--- a/tests/conform-react.spec.ts
+++ b/tests/conform-react.spec.ts
@@ -15,10 +15,10 @@ test.describe('conform-react', () => {
 			errorId: 'test-error',
 			descriptionId: 'test-description',
 			constraint: {},
-			defaultValue: undefined,
+			initialValue: undefined,
 			value: undefined,
-			error: undefined,
-			allError: {},
+			errors: undefined,
+			allErrors: {},
 			allValid: true,
 			valid: true,
 			dirty: false,
@@ -33,7 +33,7 @@ test.describe('conform-react', () => {
 		expect(
 			conform.input({
 				...config,
-				defaultValue: 'string',
+				initialValue: 'string',
 				constraint: {
 					required: true,
 					min: 1,
@@ -115,7 +115,7 @@ test.describe('conform-react', () => {
 			defaultChecked: false,
 		});
 		expect(
-			conform.input({ ...config, defaultValue: 'on' }, { type: 'radio' }),
+			conform.input({ ...config, initialValue: 'on' }, { type: 'radio' }),
 		).toEqual({
 			...props,
 			type: 'radio',
@@ -124,7 +124,7 @@ test.describe('conform-react', () => {
 		});
 		expect(
 			conform.input(
-				{ ...config, defaultValue: 'something else' },
+				{ ...config, initialValue: 'something else' },
 				{ type: 'checkbox', value: 'something else' },
 			),
 		).toEqual({
@@ -135,7 +135,7 @@ test.describe('conform-react', () => {
 		});
 		expect(
 			conform.input(
-				{ ...config, defaultValue: 'something else' },
+				{ ...config, initialValue: 'something else' },
 				{ type: 'checkbox', value: 'something else' },
 			),
 		).toEqual({
@@ -158,10 +158,10 @@ test.describe('conform-react', () => {
 			errorId: 'test-error',
 			descriptionId: 'test-description',
 			constraint: {},
-			defaultValue: undefined,
+			initialValue: undefined,
 			value: undefined,
-			error: undefined,
-			allError: {},
+			errors: undefined,
+			allErrors: {},
 			allValid: true,
 			valid: true,
 			dirty: false,
@@ -176,7 +176,7 @@ test.describe('conform-react', () => {
 		expect(
 			conform.textarea({
 				...config,
-				defaultValue: 'string',
+				initialValue: 'string',
 				constraint: {
 					required: true,
 					min: 1,
@@ -252,10 +252,10 @@ test.describe('conform-react', () => {
 			errorId: 'test-error',
 			descriptionId: 'test-description',
 			constraint: {},
-			defaultValue: undefined,
+			initialValue: undefined,
 			value: undefined,
-			error: undefined,
-			allError: {},
+			errors: undefined,
+			allErrors: {},
 			allValid: true,
 			valid: true,
 			dirty: false,
@@ -270,7 +270,7 @@ test.describe('conform-react', () => {
 		expect(
 			conform.select({
 				...config,
-				defaultValue: 'string',
+				initialValue: 'string',
 				constraint: {
 					required: true,
 					min: 1,