@tanstack/react-form 0.10.3 → 0.12.0

package/src/index.ts

@@ -16,7 +16,12 @@ export type {
   ValidationMeta,
 } from '@tanstack/form-core'
 
-export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'
+export {
+  FormApi,
+  FieldApi,
+  functionalUpdate,
+  mergeForm,
+} from '@tanstack/form-core'
 
 export { useForm } from './useForm'
 
@@ -25,3 +30,4 @@ export { useField, Field } from './useField'
 
 export type { FormFactory } from './createFormFactory'
 export { createFormFactory } from './createFormFactory'
+export { useTransform } from './useTransform'

package/src/tests/createFormFactory.test.tsx

@@ -11,7 +11,7 @@ describe('createFormFactory', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>({
+    const formFactory = createFormFactory<Person>({
       defaultValues: {
         firstName: 'FirstName',
         lastName: 'LastName',

package/src/tests/useField.test-d.tsx

@@ -43,19 +43,23 @@ it('should type onChange properly', () => {
       <form.Provider>
         <form.Field
           name="firstName"
-          onChange={(val) => {
-            assertType<'test'>(val)
-            return null
+          validators={{
+            onChange: ({ value }) => {
+              assertType<'test'>(value)
+              return null
+            },
           }}
-          children={(field) => null}
+          children={() => null}
         />
         <form.Field
           name="age"
-          onChange={(val) => {
-            assertType<84>(val)
-            return null
+          validators={{
+            onChange: ({ value }) => {
+              assertType<84>(value)
+              return null
+            },
           }}
-          children={(field) => null}
+          children={() => null}
         />
       </form.Provider>
     )

package/src/tests/useField.test.tsx

@@ -15,7 +15,7 @@ describe('useField', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.useForm({
@@ -55,7 +55,7 @@ describe('useField', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.useForm({
@@ -97,7 +97,7 @@ describe('useField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.useForm()
@@ -106,7 +106,9 @@ describe('useField', () => {
         <form.Provider>
           <form.Field
             name="firstName"
-            onChange={(value) => (value === 'other' ? error : undefined)}
+            validators={{
+              onChange: ({ value }) => (value === 'other' ? error : undefined),
+            }}
             children={(field) => (
               <div>
                 <input
@@ -137,7 +139,7 @@ describe('useField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.useForm()
@@ -147,7 +149,9 @@ describe('useField', () => {
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
-            onChange={(value) => (value === 'other' ? error : undefined)}
+            validators={{
+              onChange: ({ value }) => (value === 'other' ? error : undefined),
+            }}
             children={(field) => (
               <div>
                 <input
@@ -180,7 +184,7 @@ describe('useField', () => {
     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()
@@ -190,10 +194,12 @@ describe('useField', () => {
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
-            onChange={(value) =>
-              value === 'other' ? onChangeError : undefined
-            }
-            onBlur={(value) => (value === 'other' ? onBlurError : undefined)}
+            validators={{
+              onChange: ({ value }) =>
+                value === 'other' ? onChangeError : undefined,
+              onBlur: ({ value }) =>
+                value === 'other' ? onBlurError : undefined,
+            }}
             children={(field) => (
               <div>
                 <input
@@ -229,7 +235,7 @@ describe('useField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.useForm()
@@ -239,9 +245,11 @@ describe('useField', () => {
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
-            onChangeAsync={async () => {
-              await sleep(10)
-              return error
+            validators={{
+              onChangeAsync: async () => {
+                await sleep(10)
+                return error
+              },
             }}
             children={(field) => (
               <div>
@@ -276,7 +284,7 @@ describe('useField', () => {
     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()
@@ -286,13 +294,15 @@ describe('useField', () => {
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
-            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
+              },
             }}
             children={(field) => (
               <div>
@@ -332,7 +342,7 @@ describe('useField', () => {
     }
     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()
@@ -342,11 +352,13 @@ describe('useField', () => {
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
-            onChangeAsyncDebounceMs={100}
-            onChangeAsync={async () => {
-              mockFn()
-              await sleep(10)
-              return error
+            validators={{
+              onChangeAsyncDebounceMs: 100,
+              onChangeAsync: async () => {
+                mockFn()
+                await sleep(10)
+                return error
+              },
             }}
             children={(field) => (
               <div>
@@ -379,8 +391,8 @@ describe('useField', () => {
       firstName: string
       lastName: string
     }
-    const formFactory = createFormFactory<Person, unknown>()
-    let form: FormApi<Person, unknown> | null = null
+    const formFactory = createFormFactory<Person>()
+    let form: FormApi<Person> | null = null
     function Comp() {
       form = formFactory.useForm()
       return (
@@ -417,8 +429,8 @@ describe('useField', () => {
       firstName: string
       lastName: string
     }
-    const formFactory = createFormFactory<Person, unknown>()
-    let form: FormApi<Person, unknown> | null = null
+    const formFactory = createFormFactory<Person>()
+    let form: FormApi<Person> | null = null
     function Comp() {
       form = formFactory.useForm()
       return (

package/src/tests/useForm.test-d.tsx

@@ -0,0 +1,36 @@
+import { assertType } from 'vitest'
+import * as React from 'react'
+import { useForm } from '../useForm'
+
+it('should type onSubmit properly', () => {
+  function Comp() {
+    const form = useForm({
+      defaultValues: {
+        firstName: 'test',
+        age: 84,
+        // as const is required here
+      } as const,
+      onSubmit({ value }) {
+        assertType<84>(value.age)
+      },
+    })
+  }
+})
+
+it('should type a validator properly', () => {
+  function Comp() {
+    const form = useForm({
+      defaultValues: {
+        firstName: 'test',
+        age: 84,
+        // as const is required here
+      } as const,
+      validators: {
+        onChange({ value }) {
+          assertType<84>(value.age)
+          return undefined
+        },
+      },
+    })
+  }
+})

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,14 +168,17 @@ 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
+          },
         },
       })
+      const onChangeError = form.useStore((s) => s.errorMap.onChange)
       return (
         <form.Provider>
           <form.Field
@@ -188,9 +193,7 @@ describe('useForm', () => {
               />
             )}
           />
-          <form.Subscribe selector={(state) => state.errorMap}>
-            {(errorMap) => <p>{errorMap.onChange}</p>}
-          </form.Subscribe>
+          <p>{onChangeError}</p>
         </form.Provider>
       )
     }
@@ -210,11 +213,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 +258,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 +306,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 +358,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 +408,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 +468,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'
 }