Merge branch 'main' into docs-form-api-update

.github/FUNDING.yml

@@ -1 +1 @@
-github: [tannerlinsley, tkdodo]
+github: [tannerlinsley, crutchcorn]

.github/workflows/ci.yml

@@ -28,20 +28,14 @@ jobs:
           fetch-depth: '0'
       - uses: pnpm/action-setup@v2.2.4
         with:
-          version: 7
+          version: 8
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.14.2
+          node-version: 18.15.0
           registry-url: https://registry.npmjs.org/
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --no-frozen-lockfile
-      - name: Run Tests
-        uses: nick-fields/retry@v2.8.3
-        with:
-          command: pnpm run test:ci --base=${{ github.event.before }}
-          timeout_minutes: 10
-          max_attempts: 3
       - name: Publish
         run: |
           git config --global user.name 'Tanner Linsley'
@@ -54,5 +48,3 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           TAG: ${{ inputs.tag }}
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v3

.github/workflows/pr.yml

@@ -16,13 +16,13 @@ jobs:
           repository: ${{github.event.pull_request.head.repo.full_name}}
       - uses: pnpm/action-setup@v2.2.4
         with:
-          version: 7
+          version: 8
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.14.2
+          node-version: 18.15.0
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm --filter "./packages/**" --filter form --prefer-offline install --no-frozen-lockfile
+        run: pnpm --prefer-offline install --no-frozen-lockfile
       - name: Run Tests
         uses: nick-fields/retry@v2.8.3
         with:
@@ -48,7 +48,7 @@ jobs:
           node-version: 16.14.2
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm --filter "./packages/**" --filter form --prefer-offline install --no-frozen-lockfile
+        run: pnpm --prefer-offline install --no-frozen-lockfile
       - run: pnpm run test:eslint --base=${{ github.event.pull_request.base.sha }}
   typecheck:
     name: 'Typecheck'
@@ -67,7 +67,7 @@ jobs:
           node-version: 16.14.2
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm --filter "./packages/**" --filter form --prefer-offline install --no-frozen-lockfile
+        run: pnpm --prefer-offline install --no-frozen-lockfile
       - run: pnpm run test:types --base=${{ github.event.pull_request.base.sha }}
   format:
     name: 'Format'
@@ -86,7 +86,7 @@ jobs:
           node-version: 16.14.2
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm --filter "./packages/**" --filter form --prefer-offline install --no-frozen-lockfile
+        run: pnpm --prefer-offline install --no-frozen-lockfile
       - run: pnpm run test:format --base=${{ github.event.pull_request.base.sha }}
   test-build:
     name: 'Test Build'
@@ -105,7 +105,7 @@ jobs:
           node-version: 16.14.2
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm --filter "./packages/**" --filter form --prefer-offline install --no-frozen-lockfile
+        run: pnpm --prefer-offline install --no-frozen-lockfile
       - name: Get appropriate base and head commits for `nx affected` commands
         uses: nrwl/nx-set-shas@v3
         with:

docs/config.json

@@ -93,6 +93,50 @@
           ]
         }
       ]
+    },
+    {
+      "framework": "vue",
+      "menuItems": [
+        {
+          "label": "Getting Started",
+          "children": [
+            {
+              "label": "Quick Start",
+              "to": "framework/vue/quick-start"
+            }
+          ]
+        },
+        {
+          "label": "API Reference",
+          "children": [
+            {
+              "label": "useForm",
+              "to": "framework/vue/reference/useForm"
+            },
+            {
+              "label": "useField",
+              "to": "framework/vue/reference/useField"
+            },
+            {
+              "label": "Field",
+              "to": "framework/vue/reference/Field"
+            },
+            {
+              "label": "FormApi",
+              "to": "framework/vue/reference/formApi"
+            }
+          ]
+        },
+        {
+          "label": "Examples",
+          "children": [
+            {
+              "label": "Simple",
+              "to": "framework/vue/examples/simple"
+            }
+          ]
+        }
+      ]
     }
   ]
 }

docs/framework/react/quick-start.md

@@ -13,12 +13,9 @@ import { useForm } from '@tanstack/react-form'
 export default function App() {
   const form = useForm({
     // Memoize your default values to prevent re-renders
-    defaultValues: React.useMemo(
-      () => ({
-        fullName: '',
-      }),
-      [],
-    ),
+    defaultValues: {
+      fullName: '',
+    },
     onSubmit: async (values) => {
       // Do something with form data
       console.log(values)
@@ -27,17 +24,30 @@ export default function App() {
 
   return (
     <div>
-      <form.Form>
-        <div>
-          <form.Field
-            name="fullName"
-            children={(field) => (
-              <input name={field.name} {...field.getInputProps()} />
-            )}
-          />
-        </div>
-        <button type="submit">Submit</button>
-      </form.Form>
+      <form.Provider>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            void form.handleSubmit();
+          }}
+        >
+          <div>
+            <form.Field
+              name="fullName"
+              children={(field) => (
+                <input
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )}
+            />
+          </div>
+          <button type="submit">Submit</button>
+        </form>
+      </form.Provider>
     </div>
   )
 }

docs/framework/react/reference/Field.md

@@ -3,42 +3,47 @@ id: field
 title: Field
 ---
 
-### `FieldComponent<TFormData>`
+### `FieldComponent<TParentData>`
 
 A type alias representing a field component for a specific form data type.
 
 ```tsx
-export type FieldComponent = <TField extends DeepKeys<TFormData>>({
+export type FieldComponent = <TField extends DeepKeys<TParentData>>({
   children,
   ...fieldOptions
 }: {
-  children: (fieldApi: FieldApi<DeepValue<TFormData, TField>, TFormData>) => any
+  children: (
+    fieldApi: FieldApi<DeepValue<TParentData, TField>, TParentData>,
+  ) => any
   name: TField
-} & Omit<FieldOptions<DeepValue<TFormData, TField>, TFormData>, 'name'>) => any
+} & Omit<
+  FieldOptions<DeepValue<TParentData, TField>, TParentData>,
+  'name'
+>) => any
 ```
 
 A function component that takes field options and a render function as children and returns a React component.
 
 ### `Field`
 
 ```tsx
-export function Field<TData, TFormData>({
+export function Field<TData, TParentData>({
   children,
   ...fieldOptions
-}: { children: (fieldApi: FieldApi<TData, TFormData>) => any } & FieldOptions<
+}: { children: (fieldApi: FieldApi<TData, TParentData>) => any } & FieldOptions<
   TData,
-  TFormData
+  TParentData
 >): any
 ```
 
 A functional React component that renders a form field.
 
 - ```tsx
-  children: (fieldApi: FieldApi<TData, TFormData>) => any
+  children: (fieldApi: FieldApi<TData, TParentData>) => any
   ```
   - A render function that takes a field API instance and returns a React element.
 - ```tsx
-  fieldOptions: FieldOptions<TData, TFormData>
+  fieldOptions: FieldOptions<TData, TParentData>
   ```
   - The field options.
 
@@ -47,14 +52,14 @@ The `Field` component uses the `useField` hook internally to manage the field in
 ### `createFieldComponent`
 
 ```tsx
-export function createFieldComponent<TFormData>(
-  formApi: FormApi<TFormData>,
-): FieldComponent<TFormData>
+export function createFieldComponent<TParentData>(
+  formApi: FormApi<TParentData>,
+): FieldComponent<TParentData>
 ```
 
 A factory function that creates a connected field component for a specific form API instance.
 
 - ```tsx
-  formApi: FormApi<TFormData>
+  formApi: FormApi<TParentData>
   ```
   - The form API instance to connect the field component to.

docs/framework/react/reference/fieldApi.md

@@ -3,11 +3,11 @@ id: fieldApi
 title: Field API
 ---
 
-### `FieldApi<TData, TFormData>`
+### `FieldApi<TData, TParentData>`
 
 When using `@tanstack/react-form`, the [core field API](../../reference/fieldApi) is extended with additional methods for React-specific functionality:
 
 - ```tsx
-  Field: FieldComponent<TData, TFormData>
+  Field: FieldComponent<TData, TParentData>
   ```
   - A pre-bound and type-safe sub-field component using this field as a root.

docs/framework/react/reference/formApi.md

@@ -7,10 +7,6 @@ title: Form API
 
 When using `@tanstack/react-form`, the [core form API](../../reference/formApi) is extended with additional methods for React-specific functionality:
 
-- ```tsx
-  getFormProps: () => FormProps
-  ```
-  - A function that returns props for the form element.
 - ```tsx
   Field: FieldComponent<TFormData>
   ```

docs/framework/react/reference/useField.md

@@ -3,49 +3,49 @@ id: useField
 title: useField
 ---
 
-### `UseField<TFormData>`
+### `UseField<TParentData>`
 
 A type representing a hook for using a field in a form with the given form data type.
 
 ```tsx
-export type UseField = <TField extends DeepKeys<TFormData>>(
+export type UseField = <TField extends DeepKeys<TParentData>>(
   opts?: { name: TField } & FieldOptions<
-    DeepValue<TFormData, TField>,
-    TFormData
+    DeepValue<TParentData, TField>,
+    TParentData
   >,
-) => FieldApi<DeepValue<TFormData, TField>, TFormData>
+) => FieldApi<DeepValue<TParentData, TField>, TParentData>
 ```
 
 - A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.
 
 ### `useField`
 
 ```tsx
-export function useField<TData, TFormData>(
-  opts: FieldOptions<TData, TFormData>,
-): FieldApi<TData, TFormData>
+export function useField<TData, TParentData>(
+  opts: FieldOptions<TData, TParentData>,
+): FieldApi<TData, TParentData>
 ```
 
 A hook for managing a field in a form.
 
 - ```tsx
-  opts: FieldOptions<TData, TFormData>
+  opts: FieldOptions<TData, TParentData>
   ```
   - An object with field options.
 
 #### Returns
 
 - ```tsx
-  FieldApi<TData, TFormData>
+  FieldApi<TData, TParentData>
   ```
   - The `FieldApi` instance for the specified field.
 
 ### `createUseField`
 
 ```tsx
-export function createUseField<TFormData>(
-  formApi: FormApi<TFormData>,
-): UseField<TFormData>
+export function createUseField<TParentData>(
+  formApi: FormApi<TParentData>,
+): UseField<TParentData>
 ```
 
 A function that creates a `UseField` hook bound to the given `formApi`.