refactor!: move onChange,onBlur,onMount,onSubmit props to pass object

examples/react/simple/src/index.tsx

@@ -20,9 +20,11 @@ export default function App() {
       firstName: "",
       lastName: "",
     },
-    onSubmit: async (values) => {
-      // Do something with form data
-      console.log(values);
+    validators: {
+      onSubmit: async ({ value }) => {
+        // Do something with form data
+        console.log(value);
+      },
     },
   });
 
@@ -42,14 +44,14 @@ export default function App() {
             <form.Field
               name="firstName"
               validators={{
-                onChange: (value) =>
+                onChange: ({ value }) =>
                   !value
                     ? "A first name is required"
                     : value.length < 3
                     ? "First name must be at least 3 characters"
                     : undefined,
                 onChangeAsyncDebounceMs: 500,
-                onChangeAsync: async (value) => {
+                onChangeAsync: async ({ value }) => {
                   await new Promise((resolve) => setTimeout(resolve, 1000));
                   return (
                     value.includes("error") &&

examples/react/valibot/src/index.tsx

@@ -22,9 +22,11 @@ export default function App() {
       firstName: "",
       lastName: "",
     },
-    onSubmit: async (values) => {
-      // Do something with form data
-      console.log(values);
+    validators: {
+      onSubmit: async ({ value }) => {
+        // Do something with form data
+        console.log(value);
+      },
     },
     // Add a validator to support Valibot usage in Form and Field
     validatorAdapter: valibotValidator,

examples/react/yup/src/index.tsx

@@ -22,9 +22,11 @@ export default function App() {
       firstName: "",
       lastName: "",
     },
-    onSubmit: async (values) => {
-      // Do something with form data
-      console.log(values);
+    validators: {
+      onSubmit: async ({ value }) => {
+        // Do something with form data
+        console.log(value);
+      },
     },
     // Add a validator to support Yup usage in Form and Field
     validatorAdapter: yupValidator,

examples/react/zod/src/index.tsx

@@ -22,9 +22,11 @@ export default function App() {
       firstName: "",
       lastName: "",
     },
-    onSubmit: async (values) => {
-      // Do something with form data
-      console.log(values);
+    validators: {
+      onSubmit: async ({ value }) => {
+        // Do something with form data
+        console.log(value);
+      },
     },
     // Add a validator to support Zod usage in Form and Field
     validatorAdapter: zodValidator,

examples/solid/simple/src/index.tsx

@@ -24,9 +24,11 @@ function App() {
       firstName: '',
       lastName: '',
     },
-    onSubmit: async (values) => {
-      // Do something with form data
-      console.log(values)
+    validators: {
+      onSubmit: async ({ value }) => {
+        // Do something with form data
+        console.log(value)
+      },
     },
   }))
 
@@ -46,14 +48,14 @@ function App() {
             <form.Field
               name="firstName"
               validators={{
-                onChange: (value) =>
+                onChange: ({ value }) =>
                   !value
                     ? 'A first name is required'
                     : value.length < 3
                     ? 'First name must be at least 3 characters'
                     : undefined,
                 onChangeAsyncDebounceMs: 500,
-                onChangeAsync: async (value) => {
+                onChangeAsync: async ({ value }) => {
                   await new Promise((resolve) => setTimeout(resolve, 1000))
                   return (
                     value.includes('error') &&

examples/solid/valibot/src/index.tsx

@@ -26,9 +26,11 @@ function App() {
       firstName: '',
       lastName: '',
     },
-    onSubmit: async (values) => {
-      // Do something with form data
-      console.log(values)
+    validators: {
+      onSubmit: async ({ value }) => {
+        // Do something with form data
+        console.log(value)
+      },
     },
     // Add a validator to support Valibot usage in Form and Field
     validatorAdapter: valibotValidator,

examples/solid/yup/src/index.tsx

@@ -26,9 +26,11 @@ function App() {
       firstName: '',
       lastName: '',
     },
-    onSubmit: async (values) => {
-      // Do something with form data
-      console.log(values)
+    validators: {
+      onSubmit: async ({ value }) => {
+        // Do something with form data
+        console.log(value)
+      },
     },
     // Add a validator to support Yup usage in Form and Field
     validatorAdapter: yupValidator,

examples/solid/zod/src/index.tsx

@@ -26,9 +26,11 @@ function App() {
       firstName: '',
       lastName: '',
     },
-    onSubmit: async (values) => {
-      // Do something with form data
-      console.log(values)
+    validators: {
+      onSubmit: async ({ value }) => {
+        // Do something with form data
+        console.log(value)
+      },
     },
     // Add a validator to support Zod usage in Form and Field
     validatorAdapter: zodValidator,

examples/vue/simple/src/App.vue

@@ -7,15 +7,17 @@ const form = useForm({
     firstName: '',
     lastName: '',
   },
-  onSubmit: async (values) => {
-    // Do something with form data
-    alert(JSON.stringify(values))
+  validators: {
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      alert(JSON.stringify(value))
+    },
   },
 })
 
 form.provideFormContext()
 
-async function onChangeFirstName(value: string) {
+async function onChangeFirstName({ value }: { value: string }) {
   await new Promise((resolve) => setTimeout(resolve, 1000))
   return value.includes(`error`) && `No 'error' allowed in first name`
 }
@@ -35,7 +37,7 @@ async function onChangeFirstName(value: string) {
       <form.Field
         name="firstName"
         :validators="{
-          onChange: (value) =>
+          onChange: ({ value }) =>
             !value
               ? `A first name is required`
               : value.length < 3

examples/vue/valibot/src/App.vue

@@ -9,9 +9,11 @@ const form = useForm({
     firstName: '',
     lastName: '',
   },
-  onSubmit: async (values) => {
-    // Do something with form data
-    alert(JSON.stringify(values))
+  validators: {
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      alert(JSON.stringify(value))
+    },
   },
   // Add a validator to support Valibot usage in Form and Field
   validatorAdapter: valibotValidator,

examples/vue/yup/src/App.vue

@@ -9,9 +9,11 @@ const form = useForm({
     firstName: '',
     lastName: '',
   },
-  onSubmit: async (values) => {
-    // Do something with form data
-    alert(JSON.stringify(values))
+  validators: {
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      alert(JSON.stringify(value))
+    },
   },
   // Add a validator to support Yup usage in Form and Field
   validatorAdapter: yupValidator,

examples/vue/zod/src/App.vue

@@ -9,9 +9,11 @@ const form = useForm({
     firstName: '',
     lastName: '',
   },
-  onSubmit: async (values) => {
-    // Do something with form data
-    alert(JSON.stringify(values))
+  validators: {
+    onSubmit: async ({ value }) => {
+      // Do something with form data
+      alert(JSON.stringify(value))
+    },
   },
   // Add a validator to support Zod usage in Form and Field
   validatorAdapter: zodValidator,

packages/form-core/src/FieldApi.ts

@@ -14,10 +14,10 @@ type ValidateFn<
   TName extends DeepKeys<TParentData>,
   ValidatorType,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = (
-  value: TData,
-  fieldApi: FieldApi<TParentData, TName, ValidatorType, TData>,
-) => ValidationError
+> = (props: {
+  value: TData
+  fieldApi: FieldApi<TParentData, TName, ValidatorType, TData>
+}) => ValidationError
 
 type ValidateOrFn<
   TParentData,
@@ -40,13 +40,11 @@ type ValidateAsyncFn<
   TName extends DeepKeys<TParentData>,
   ValidatorType,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = (
-  value: TData,
-  options: {
-    fieldApi: FieldApi<TParentData, TName, ValidatorType, TData>
-    signal: AbortSignal
-  },
-) => ValidationError | Promise<ValidationError>
+> = (options: {
+  value: TData
+  fieldApi: FieldApi<TParentData, TName, ValidatorType, TData>
+  signal: AbortSignal
+}) => ValidationError | Promise<ValidationError>
 
 type AsyncValidateOrFn<
   TParentData,
@@ -274,7 +272,15 @@ export class FieldApi<
     const { onMount } = this.options.validators || {}
 
     if (onMount) {
-      const error = this._runValidator(onMount, this.state.value, 'validate')
+      const error = runValidatorOrAdapter({
+        validateFn: onMount,
+        value: {
+          value: this.state.value,
+          fieldApi: this,
+        },
+        methodName: 'validate',
+        adapters: [this.options.validatorAdapter as never],
+      })
       if (error) {
         this.setMeta((prev) => ({
           ...prev,
@@ -374,24 +380,6 @@ export class FieldApi<
       form: this.form,
     }) as any
 
-  _runValidator<T, M extends 'validate' | 'validateAsync'>(
-    validateFn: T,
-    value: TData,
-    methodName: M,
-    suppliedThis: unknown = this,
-  ) {
-    return runValidatorOrAdapter({
-      validateFn,
-      value,
-      methodName,
-      suppliedThis,
-      adapters: [
-        this.form.options.validatorAdapter,
-        this.options.validatorAdapter as never,
-      ],
-    })
-  }
-
   validateSync = (value = this.state.value, cause: ValidationCause) => {
     const { onChange, onBlur, onSubmit } = this.options.validators || {}
 
@@ -414,7 +402,15 @@ export class FieldApi<
       for (const validateObj of validates) {
         if (!validateObj.validate) continue
         const error = normalizeError(
-          this._runValidator(validateObj.validate, value, 'validate'),
+          runValidatorOrAdapter({
+            validateFn: validateObj.validate,
+            value: { value, fieldApi: this },
+            methodName: 'validate',
+            adapters: [
+              this.form.options.validatorAdapter,
+              this.options.validatorAdapter as never,
+            ],
+          }),
         )
         const errorMapKey = getErrorMapKey(validateObj.cause)
         if (this.state.meta.errorMap[errorMapKey] !== error) {
@@ -511,9 +507,9 @@ export class FieldApi<
      * We have to use a for loop and generate our promises this way, otherwise it won't be sync
      * when there are no validators needed to be run
      */
-    let promises: Promise<ValidationError | undefined>[] = []
+    const promises: Promise<ValidationError | undefined>[] = []
 
-    for (let validateObj of validates) {
+    for (const validateObj of validates) {
       if (!validateObj.validate) continue
       const key = getErrorMapKey(validateObj.cause)
       const fieldOnChangeMeta = this.getInfo().validationMetaMap[key]
@@ -524,7 +520,9 @@ export class FieldApi<
       if (fieldOnChangeMeta?.lastRan && lastRunDiff < validateObj.debounceMs) {
         continue
       }
-      fieldOnChangeMeta?.lastAbortController?.abort()
+      fieldOnChangeMeta?.lastAbortController.abort()
+      // Sorry Safari 12
+      // eslint-disable-next-line compat/compat
       const controller = new AbortController()
 
       this.getInfo().validationMetaMap[key] = {
@@ -537,12 +535,15 @@ export class FieldApi<
         new Promise<ValidationError | undefined>(async (resolve) => {
           let rawError!: ValidationError | undefined
           try {
-            rawError = await this._runValidator(
-              validateObj.validate,
-              value,
-              'validateAsync',
-              { fieldApi: this, signal: controller.signal },
-            )
+            rawError = await runValidatorOrAdapter({
+              validateFn: validateObj.validate,
+              value: { value, fieldApi: this, signal: controller.signal },
+              methodName: 'validateAsync',
+              adapters: [
+                this.form.options.validatorAdapter,
+                this.options.validatorAdapter as never,
+              ],
+            })
           } catch (e: unknown) {
             rawError = e as ValidationError
           }