@tanstack/react-form 0.10.3 → 0.11.0

package/src/tests/useForm.test.tsx

@@ -15,7 +15,7 @@ describe('useForm', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.useForm()
@@ -53,7 +53,7 @@ describe('useForm', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.useForm({
@@ -90,8 +90,8 @@ describe('useForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onSubmit: (data) => {
-          setSubmittedData(data)
+        onSubmit: ({ value }) => {
+          setSubmittedData(value)
         },
       })
 
@@ -135,9 +135,11 @@ describe('useForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onMount: () => {
-          setFormMounted(true)
-          return undefined
+        validators: {
+          onMount: () => {
+            setFormMounted(true)
+            return undefined
+          },
         },
       })
 
@@ -166,12 +168,14 @@ describe('useForm', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.useForm({
-        onChange() {
-          return error
+        validators: {
+          onChange() {
+            return error
+          },
         },
       })
       return (
@@ -210,11 +214,14 @@ describe('useForm', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       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)
@@ -252,11 +259,14 @@ describe('useForm', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       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)
       return (
@@ -297,13 +307,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
+          },
         },
       })
 
@@ -347,13 +359,15 @@ describe('useForm', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.useForm({
-        onChangeAsync: async () => {
-          await sleep(10)
-          return error
+        validators: {
+          onChangeAsync: async () => {
+            await sleep(10)
+            return error
+          },
         },
       })
       const errors = form.useStore((s) => s.errorMap)
@@ -395,17 +409,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>()
 
     function Comp() {
       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)
@@ -453,15 +469,17 @@ describe('useForm', () => {
     }
     const mockFn = vi.fn()
     const error = 'Please enter a different value'
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       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,6 +1,11 @@
 import React, { useState } from 'react'
 import { useStore } from '@tanstack/react-store'
-import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
+import type {
+  DeepKeys,
+  DeepValue,
+  Narrow,
+  Validator,
+} from '@tanstack/form-core'
 import { FieldApi, functionalUpdate } from '@tanstack/form-core'
 import { useFormContext, formContext } from './formContext'
 import type { UseFieldOptions } from './types'
@@ -11,49 +16,53 @@ 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 extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
   > {
-    Field: FieldComponent<TData, FormValidator>
+    Field: FieldComponent<TParentData, TFormValidator>
   }
 }
 
 export type UseField<TParentData> = <
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
 >(
   opts?: { name: Narrow<TName> } & UseFieldOptions<
     TParentData,
     TName,
-    ValidatorType,
-    FormValidator
+    TFieldValidator,
+    TFormValidator
   >,
 ) => 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,
 >(
-  opts: UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
-): FieldApi<
-  TParentData,
-  TName,
-  ValidatorType,
-  FormValidator
-  // Omit<typeof opts, 'onMount'> & {
-  //   form: FormApi<TParentData>
-  // }
-> {
+  opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
+): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {
   // Get the form API either manually or from context
   const { formApi, parentFieldName } = useFormContext()
 
@@ -68,9 +77,9 @@ export function useField<
 
     const api = new FieldApi({
       ...opts,
-      form: formApi,
+      form: formApi as never,
       // TODO: Fix typings to include `index` and `parentFieldName`, if present
-      name: name as typeof opts.name,
+      name: name as typeof opts.name as never,
     })
 
     api.Field = Field as never
@@ -97,18 +106,28 @@ export function useField<
   // Instantiates field meta and removes it when unrendered
   useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])
 
-  return fieldApi
+  return fieldApi as never
 }
 
 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,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 > = {
   children: (
-    fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>,
+    fieldApi: FieldApi<
+      TParentData,
+      TName,
+      TFieldValidator,
+      TFormValidator,
+      TData
+    >,
   ) => any
 } & (TParentData extends any[]
   ? {
@@ -120,13 +139,20 @@ 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>,
 >({
   children,
@@ -134,24 +160,28 @@ export type FieldComponent<TParentData, FormValidator> = <
 }: FieldComponentProps<
   TParentData,
   TName,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator,
+  TFormValidator,
   TData
 >) => any
 
 export function Field<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
 >({
   children,
   ...fieldOptions
 }: {
   children: (
-    fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>,
+    fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>,
   ) => any
-} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>) {
+} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) {
   const fieldApi = useField(fieldOptions as any)
 
   return (

package/src/useForm.tsx

@@ -1,17 +1,17 @@
-import type { FormState, FormOptions } from '@tanstack/form-core'
+import type { FormState, FormOptions, Validator } from '@tanstack/form-core'
 import { FormApi, functionalUpdate } from '@tanstack/form-core'
 import type { NoInfer } from '@tanstack/react-store'
 import { useStore } from '@tanstack/react-store'
-import React, { type ReactNode, useState } from 'react'
+import React, { type PropsWithChildren, type ReactNode, useState } from 'react'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { formContext } from './formContext'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
-  interface FormApi<TFormData, ValidatorType> {
-    Provider: (props: { children: any }) => any
-    Field: FieldComponent<TFormData, ValidatorType>
+  interface FormApi<TFormData, TFormValidator> {
+    Provider: (props: PropsWithChildren) => JSX.Element
+    Field: FieldComponent<TFormData, TFormValidator>
     useField: UseField<TFormData>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
@@ -19,20 +19,25 @@ declare module '@tanstack/form-core' {
     Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
       children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
-    }) => any
+    }) => JSX.Element
   }
 }
 
-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] = useState(() => {
     // @ts-ignore
-    const api = new FormApi<TData>(opts)
+    const api = new FormApi<TFormData, TFormValidator>(opts)
 
     api.Provider = function Provider(props) {
       useIsomorphicLayoutEffect(api.mount, [])
-      return <formContext.Provider {...props} value={{ formApi: api }} />
+      return (
+        <formContext.Provider {...props} value={{ formApi: api as never }} />
+      )
     }
     api.Field = Field as any
     api.useField = useField as any