@tanstack/vue-form 0.10.2 → 0.11.0

package/src/tests/useForm.test.tsx

@@ -22,7 +22,7 @@ type Person = {
 
 describe('useForm', () => {
   it('preserved field state', async () => {
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -57,7 +57,7 @@ describe('useForm', () => {
   })
 
   it('should allow default values to be set', async () => {
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
@@ -92,8 +92,8 @@ describe('useForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onSubmit: (data) => {
-          submittedData.value = data
+        onSubmit: ({ value }) => {
+          submittedData.value = value
         },
       })
       form.provideFormContext()
@@ -145,9 +145,11 @@ describe('useForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onMount: () => {
-          formMounted.value = true
-          return undefined
+        validators: {
+          onMount: () => {
+            formMounted.value = true
+            return undefined
+          },
         },
       })
 
@@ -171,12 +173,14 @@ describe('useForm', () => {
   it('should validate async on change for the form', async () => {
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChange() {
-          return error
+        validators: {
+          onChange() {
+            return error
+          },
         },
       })
 
@@ -218,11 +222,14 @@ describe('useForm', () => {
   it('should not validate on change if isTouched is false', async () => {
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChange: (value) => (value.firstName === 'other' ? error : undefined),
+        validators: {
+          onChange: ({ value }) =>
+            value.firstName === 'other' ? error : undefined,
+        },
       })
 
       const errors = form.useStore((s) => s.errors)
@@ -264,11 +271,14 @@ describe('useForm', () => {
   it('should validate on change if isTouched is true', async () => {
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChange: (value) => (value.firstName === 'other' ? error : undefined),
+        validators: {
+          onChange: ({ value }) =>
+            value.firstName === 'other' ? error : undefined,
+        },
       })
 
       const errors = form.useStore((s) => s.errorMap)
@@ -317,13 +327,15 @@ describe('useForm', () => {
         defaultValues: {
           firstName: '',
         },
-        onChange: (vals) => {
-          if (vals.firstName === 'other') return onChangeError
-          return undefined
-        },
-        onBlur: (vals) => {
-          if (vals.firstName === 'other') return onBlurError
-          return undefined
+        validators: {
+          onChange: ({ value }) => {
+            if (value.firstName === 'other') return onChangeError
+            return undefined
+          },
+          onBlur: ({ value }) => {
+            if (value.firstName === 'other') return onBlurError
+            return undefined
+          },
         },
       })
 
@@ -370,13 +382,15 @@ describe('useForm', () => {
   it('should validate async on change', async () => {
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChangeAsync: async () => {
-          await sleep(10)
-          return error
+        validators: {
+          onChangeAsync: async () => {
+            await sleep(10)
+            return error
+          },
         },
       })
 
@@ -422,17 +436,19 @@ describe('useForm', () => {
     const onChangeError = 'Please enter a different value (onChangeError)'
     const onBlurError = 'Please enter a different value (onBlurError)'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChangeAsync: async () => {
-          await sleep(10)
-          return onChangeError
-        },
-        onBlurAsync: async () => {
-          await sleep(10)
-          return onBlurError
+        validators: {
+          onChangeAsync: async () => {
+            await sleep(10)
+            return onChangeError
+          },
+          onBlurAsync: async () => {
+            await sleep(10)
+            return onBlurError
+          },
         },
       })
       const errors = form.useStore((s) => s.errorMap)
@@ -482,15 +498,17 @@ describe('useForm', () => {
   it('should validate async on change with debounce', async () => {
     const mockFn = vi.fn()
     const error = 'Please enter a different value'
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChangeAsyncDebounceMs: 100,
-        onChangeAsync: async () => {
-          mockFn()
-          await sleep(10)
-          return error
+        validators: {
+          onChangeAsyncDebounceMs: 100,
+          onChangeAsync: async () => {
+            mockFn()
+            await sleep(10)
+            return error
+          },
         },
       })
       const errors = form.useStore((s) => s.errors)

package/src/types.ts

@@ -1,11 +1,20 @@
-import type { FieldOptions, DeepKeys, DeepValue } from '@tanstack/form-core'
+import type {
+  FieldOptions,
+  DeepKeys,
+  DeepValue,
+  Validator,
+} from '@tanstack/form-core'
 
 export type UseFieldOptions<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
+> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
   mode?: 'value' | 'array'
 }

package/src/useField.tsx

@@ -1,4 +1,4 @@
-import { FieldApi } from '@tanstack/form-core'
+import { FieldApi, type Validator } from '@tanstack/form-core'
 import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
 import { defineComponent, onMounted, onUnmounted, watch } from 'vue'
@@ -11,53 +11,68 @@ declare module '@tanstack/form-core' {
   interface FieldApi<
     TParentData,
     TName extends DeepKeys<TParentData>,
-    ValidatorType,
-    FormValidator,
+    TFieldValidator extends
+      | Validator<DeepValue<TParentData, TName>, unknown>
+      | undefined = undefined,
+    TFormValidator extends
+      | Validator<TParentData, unknown>
+      | undefined = undefined,
     TData = DeepValue<TParentData, TName>,
   > {
-    Field: FieldComponent<TData, FormValidator>
+    Field: FieldComponent<TParentData, TFormValidator>
   }
 }
 
-export type UseField<TParentData, FormValidator> = <
+export type UseField<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> = <
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
 >(
   opts?: { name: Narrow<TName> } & UseFieldOptions<
     TParentData,
     TName,
-    ValidatorType,
-    FormValidator,
+    TFieldValidator,
+    TFormValidator,
     DeepValue<TParentData, TName>
   >,
 ) => FieldApi<
   TParentData,
   TName,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator,
+  TFormValidator,
   DeepValue<TParentData, TName>
 >
 
 export function useField<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(
   opts: UseFieldOptions<
     TParentData,
     TName,
-    ValidatorType,
-    FormValidator,
+    TFieldValidator,
+    TFormValidator,
     TData
   >,
 ): {
   api: FieldApi<
     TParentData,
     TName,
-    ValidatorType,
-    FormValidator,
+    TFieldValidator,
+    TFormValidator,
     TData
     // Omit<typeof opts, 'onMount'> & {
     //   form: FormApi<TParentData>
@@ -68,12 +83,9 @@ export function useField<
       FieldApi<
         TParentData,
         TName,
-        ValidatorType,
-        FormValidator,
+        TFieldValidator,
+        TFormValidator,
         TData
-        // Omit<typeof opts, 'onMount'> & {
-        //   form: FormApi<TParentData>
-        // }
       >['state']
     >
   >
@@ -124,8 +136,12 @@ export type FieldValue<TParentData, TName> = TParentData extends any[]
 type FieldComponentProps<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
 > = (TParentData extends any[]
   ? {
       name?: TName
@@ -136,31 +152,44 @@ type FieldComponentProps<
       index?: never
     }) &
   Omit<
-    UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
+    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
     'name' | 'index'
   >
 
-export type FieldComponent<TParentData, FormValidator> = <
+export type FieldComponent<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> = <
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(
   fieldOptions: FieldComponentProps<
     TParentData,
     TName,
-    ValidatorType,
-    FormValidator
+    TFieldValidator,
+    TFormValidator
   >,
   context: SetupContext<
     {},
     SlotsType<{
       default: {
-        field: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>
+        field: FieldApi<
+          TParentData,
+          TName,
+          TFieldValidator,
+          TFormValidator,
+          TData
+        >
         state: FieldApi<
           TParentData,
           TName,
-          ValidatorType,
-          FormValidator,
+          TFieldValidator,
+          TFormValidator,
           TData
         >['state']
       }
@@ -172,14 +201,18 @@ export const Field = defineComponent(
   <
     TParentData,
     TName extends DeepKeys<TParentData>,
-    ValidatorType,
-    FormValidator,
+    TFieldValidator extends
+      | Validator<DeepValue<TParentData, TName>, unknown>
+      | undefined = undefined,
+    TFormValidator extends
+      | Validator<TParentData, unknown>
+      | undefined = undefined,
   >(
     fieldOptions: UseFieldOptions<
       TParentData,
       TName,
-      ValidatorType,
-      FormValidator
+      TFieldValidator,
+      TFormValidator
     >,
     context: SetupContext,
   ) => {

package/src/useForm.tsx

@@ -1,4 +1,9 @@
-import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'
+import {
+  FormApi,
+  type FormState,
+  type FormOptions,
+  type Validator,
+} from '@tanstack/form-core'
 import { type NoInfer, useStore } from '@tanstack/vue-store'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { provideFormContext } from './formContext'
@@ -13,11 +18,11 @@ import {
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
-  interface FormApi<TFormData, ValidatorType> {
+  interface FormApi<TFormData, TFormValidator> {
     Provider: (props: Record<string, any> & {}) => any
     provideFormContext: () => void
-    Field: FieldComponent<TFormData, ValidatorType>
-    useField: UseField<TFormData, ValidatorType>
+    Field: FieldComponent<TFormData, TFormValidator>
+    useField: UseField<TFormData, TFormValidator>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
     ) => Readonly<Ref<TSelected>>
@@ -33,11 +38,14 @@ declare module '@tanstack/form-core' {
   }
 }
 
-export function useForm<TData, FormValidator>(
-  opts?: FormOptions<TData, FormValidator>,
-): FormApi<TData, FormValidator> {
+export function useForm<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+>(
+  opts?: FormOptions<TFormData, TFormValidator>,
+): FormApi<TFormData, TFormValidator> {
   const formApi = (() => {
-    const api = new FormApi<TData, FormValidator>(opts)
+    const api = new FormApi<TFormData, TFormValidator>(opts)
 
     api.Provider = defineComponent(
       (_, context) => {