updated Remix Form Route with conform v1

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to the "remix-forge" extension will be documented in this file. 
 
+## [0.5.5]
+
+- Updated Remix Form Route with conform v1 
+
 ## [0.5.3]
 - Added `clientLoader` generator
 - Added `clientAction` generator

src/forms/conform.ts

@@ -3,8 +3,8 @@ import { getConfig } from "../config";
 export const generateConformForm = () => {
   const runtimeDependency = getConfig().get("runtimeDependency") || "@remix-run/node";
   return [
-    'import { useForm } from "@conform-to/react";',
-    'import { parse } from "@conform-to/zod";',
+    'import { getFormProps, useForm } from "@conform-to/react";',
+    'import { getZodConstraint, parseWithZod } from "@conform-to/zod";',
     'import { Form, useActionData } from "@remix-run/react";',
     `import { json } from "${runtimeDependency}";`,
     `import type { ActionFunctionArgs } from "${runtimeDependency}";`,
@@ -16,27 +16,30 @@ export const generateConformForm = () => {
     "",
     "export async function action({ request }: ActionFunctionArgs) {",
     "  const formData = await request.formData();",
-    "  const submission = parse(formData, { schema });",
+    "  const submission = parseWithZod(formData, { schema });",
     "",
-    "  if (!submission.value || submission.intent !== 'submit') {",
-    "    return json(submission, { status: 400 });",
+    '  if (submission.status !== "success") {',
+    "    return submission.reply();",
     "  }",
     "",
     "  // Do something with the data",
     "  return json(submission);",
     "}",
     "",
     "export default function FormRoute() {",
-    "  const lastSubmission = useActionData<typeof action>();",
+    "  const lastResult = useActionData<typeof action>();",
     "  const [form, fields] = useForm({",
-    "    lastSubmission,",
+    "    lastResult,",
+    "    constraint: getZodConstraint(schema),",
     "    onValidate({ formData }) {",
-    "      return parse(formData, { schema });",
+    "      return parseWithZod(formData, { schema });",
     "    },",
     "  });",
     "",
     "  return (",
-    '    <Form method="post" {...form.props}>',
+    '    <Form method="post" {...getFormProps(form)}>',
+    "      <div id={form.errorId}>{form.errors}</div>",
+    "",
     "      {/** Your form elements here */}",
     "      <button>Submit</button>",
     "    </Form>",