Add preact integration for tanstack form

docs/config.json

@@ -45,6 +45,15 @@
             }
           ]
         },
+        {
+          "label": "preact",
+          "children": [
+            {
+              "label": "Quick Start",
+              "to": "framework/preact/quick-start"
+            }
+          ]
+        },
         {
           "label": "vue",
           "children": [
@@ -169,6 +178,67 @@
             }
           ]
         },
+        {
+          "label": "preact",
+          "children": [
+            {
+              "label": "Basic Concepts",
+              "to": "framework/preact/guides/basic-concepts"
+            },
+            {
+              "label": "Form Validation",
+              "to": "framework/preact/guides/validation"
+            },
+            {
+              "label": "Dynamic Validation",
+              "to": "framework/preact/guides/dynamic-validation"
+            },
+            {
+              "label": "Async Initial Values",
+              "to": "framework/preact/guides/async-initial-values"
+            },
+            {
+              "label": "Arrays",
+              "to": "framework/preact/guides/arrays"
+            },
+            {
+              "label": "Linked Fields",
+              "to": "framework/preact/guides/linked-fields"
+            },
+            {
+              "label": "Reactivity",
+              "to": "framework/preact/guides/reactivity"
+            },
+            {
+              "label": "Listeners",
+              "to": "framework/preact/guides/listeners"
+            },
+            {
+              "label": "Custom Errors",
+              "to": "framework/preact/guides/custom-errors"
+            },
+            {
+              "label": "Submission Handling",
+              "to": "framework/preact/guides/submission-handling"
+            },
+            {
+              "label": "UI Libraries",
+              "to": "framework/preact/guides/ui-libraries"
+            },
+            {
+              "label": "Focus Management",
+              "to": "framework/preact/guides/focus-management"
+            },
+            {
+              "label": "Form Composition",
+              "to": "framework/preact/guides/form-composition"
+            },
+            {
+              "label": "Debugging",
+              "to": "framework/preact/guides/debugging"
+            }
+          ]
+        },
         {
           "label": "vue",
           "children": [
@@ -432,6 +502,35 @@
             }
           ]
         },
+        {
+          "label": "preact",
+          "children": [
+            {
+              "label": "Preact Reference",
+              "to": "framework/preact/reference/index"
+            },
+            {
+              "label": "Variables / Field",
+              "to": "framework/preact/reference/variables/Field"
+            },
+            {
+              "label": "Functions / useField",
+              "to": "framework/preact/reference/functions/useField"
+            },
+            {
+              "label": "Functions / useForm",
+              "to": "framework/preact/reference/functions/useForm"
+            },
+            {
+              "label": "Types / FieldComponent",
+              "to": "framework/preact/reference/type-aliases/FieldComponent"
+            },
+            {
+              "label": "Types / UseField",
+              "to": "framework/preact/reference/type-aliases/UseField"
+            }
+          ]
+        },
         {
           "label": "vue",
           "children": [

docs/framework/preact/guides/arrays.md

@@ -0,0 +1,124 @@
+---
+id: arrays
+title: Arrays
+---
+
+TanStack Form supports arrays as values in a form, including sub-object values inside of an array.
+
+## Basic Usage
+
+To use an array, you can use `field.state.value` on an array value:
+
+```jsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      people: [],
+    },
+  })
+
+  return (
+    <form.Field name="people" mode="array">
+      {(field) => (
+        <div>
+          {field.state.value.map((_, i) => {
+            // ...
+          })}
+        </div>
+      )}
+    </form.Field>
+  )
+}
+```
+
+This will generate the mapped JSX every time you run `pushValue` on `field`:
+
+```jsx
+<button onClick={() => field.pushValue({ name: '', age: 0 })} type="button">
+  Add person
+</button>
+```
+
+Finally, you can use a subfield like so:
+
+```jsx
+<form.Field key={i} name={`people[${i}].name`}>
+  {(subField) => (
+    <input
+      value={subField.state.value}
+      onInput={(e) => subField.handleChange(e.target.value)}
+    />
+  )}
+</form.Field>
+```
+
+## Full Example
+
+```jsx
+function App() {
+  const form = useForm({
+    defaultValues: {
+      people: [],
+    },
+    onSubmit({ value }) {
+      alert(JSON.stringify(value))
+    },
+  })
+
+  return (
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <form.Field name="people" mode="array">
+          {(field) => {
+            return (
+              <div>
+                {field.state.value.map((_, i) => {
+                  return (
+                    <form.Field key={i} name={`people[${i}].name`}>
+                      {(subField) => {
+                        return (
+                          <div>
+                            <label>
+                              <div>Name for person {i}</div>
+                              <input
+                                value={subField.state.value}
+                                onInput={(e) =>
+                                  subField.handleChange(e.target.value)
+                                }
+                              />
+                            </label>
+                          </div>
+                        )
+                      }}
+                    </form.Field>
+                  )
+                })}
+                <button
+                  onClick={() => field.pushValue({ name: '', age: 0 })}
+                  type="button"
+                >
+                  Add person
+                </button>
+              </div>
+            )
+          }}
+        </form.Field>
+        <form.Subscribe
+          selector={(state) => [state.canSubmit, state.isSubmitting]}
+          children={([canSubmit, isSubmitting]) => (
+            <button type="submit" disabled={!canSubmit}>
+              {isSubmitting ? '...' : 'Submit'}
+            </button>
+          )}
+        />
+      </form>
+    </div>
+  )
+}
+```

docs/framework/preact/guides/async-initial-values.md

@@ -0,0 +1,51 @@
+---
+id: async-initial-values
+title: Async Initial Values
+---
+
+Let's say that you want to fetch some data from an API and use it as the initial value of a form.
+
+While this problem sounds simple on the surface, there are hidden complexities you might not have thought of thus far.
+
+For example, you might want to show a loading spinner while the data is being fetched, or you might want to handle errors gracefully.
+Likewise, you could also find yourself looking for a way to cache the data so that you don't have to fetch it every time the form is rendered.
+
+While we could implement many of these features from scratch, it would end up looking a lot like another project we maintain: [TanStack Query](https://tanstack.com/query).
+
+As such, this guide shows you how you can mix-n-match TanStack Form with TanStack Query to achieve the desired behavior.
+
+## Basic Usage
+
+```tsx
+import { useForm } from '@tanstack/preact-form'
+import { useQuery } from '@tanstack/react-query'
+
+export default function App() {
+  const {data, isLoading} = useQuery({
+    queryKey: ['data'],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return {firstName: 'FirstName', lastName: "LastName"}
+    }
+  })
+
+  const form = useForm({
+    defaultValues: {
+      firstName: data?.firstName ?? '',
+      lastName: data?.lastName ?? '',
+    },
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      console.log(value)
+    },
+  })
+
+  if (isLoading) return <p>Loading...</p>
+
+  return (
+    // ...
+  )
+}
+```
+
+This will show a loading spinner until the data is fetched, and then it will render the form with the fetched data as the initial values.