chore: fix remix example

edmundhung · Nov 12, 2023 · ee779f0 · ee779f0
1 parent 78c9ce5
commit ee779f0
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 121 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -196,14 +196,19 @@ 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 =
 						name === ''
 							? 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
@@ -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
@@ -7,7 +7,7 @@ export {
 export {
 	type Field,
 	type FieldMetadata as FieldConfig,
-	FormContextProvider,
+	FormProvider,
 	FormStateInput,
 } from './context';
 export {