@tanstack/form-core 0.0.8 → 0.0.11

package/src/FieldApi.ts

@@ -5,22 +5,30 @@ import { Store } from '@tanstack/store'
 
 export type ValidationCause = 'change' | 'blur' | 'submit'
 
+type ValidateFn<TData, TFormData> = (
+  value: TData,
+  fieldApi: FieldApi<TData, TFormData>,
+) => ValidationError
+
+type ValidateAsyncFn<TData, TFormData> = (
+  value: TData,
+  fieldApi: FieldApi<TData, TFormData>,
+) => ValidationError | Promise<ValidationError>
+
 export interface FieldOptions<TData, TFormData> {
   name: unknown extends TFormData ? string : DeepKeys<TFormData>
   index?: TData extends any[] ? number : never
   defaultValue?: TData
-  validate?: (
-    value: TData,
-    fieldApi: FieldApi<TData, TFormData>,
-  ) => ValidationError
-  validateAsync?: (
-    value: TData,
-    fieldApi: FieldApi<TData, TFormData>,
-  ) => ValidationError | Promise<ValidationError>
-  validatePristine?: boolean // Default: false
-  validateOn?: ValidationCause // Default: 'change'
-  validateAsyncOn?: ValidationCause // Default: 'blur'
-  validateAsyncDebounceMs?: number
+  asyncDebounceMs?: number
+  asyncAlways?: boolean
+  onMount?: (formApi: FieldApi<TData, TFormData>) => void
+  onChange?: ValidateFn<TData, TFormData>
+  onChangeAsync?: ValidateAsyncFn<TData, TFormData>
+  onChangeAsyncDebounceMs?: number
+  onBlur?: ValidateFn<TData, TFormData>
+  onBlurAsync?: ValidateAsyncFn<TData, TFormData>
+  onBlurAsyncDebounceMs?: number
+  onSubmitAsync?: ValidateAsyncFn<TData, TFormData>
   defaultMeta?: Partial<FieldMeta>
 }
 
@@ -50,7 +58,7 @@ export type UserInputProps = {
 
 export type ChangeProps<TData> = {
   value: TData
-  onChange: (updater: Updater<TData>) => void
+  onChange: (value: TData) => void
   onBlur: (event: any) => void
 }
 
@@ -73,13 +81,8 @@ export class FieldApi<TData, TFormData> {
   name!: DeepKeys<TFormData>
   store!: Store<FieldState<TData>>
   state!: FieldState<TData>
-  options: RequiredByKey<
-    FieldOptions<TData, TFormData>,
-    | 'validatePristine'
-    | 'validateOn'
-    | 'validateAsyncOn'
-    | 'validateAsyncDebounceMs'
-  > = {} as any
+  #prevState!: FieldState<TData>
+  options: FieldOptions<TData, TFormData> = {} as any
 
   constructor(opts: FieldApiOptions<TData, TFormData>) {
     this.form = opts.form
@@ -103,23 +106,25 @@ export class FieldApi<TData, TFormData> {
         },
       },
       {
-        onUpdate: (next) => {
-          next.meta.touchedError = next.meta.isTouched
-            ? next.meta.error
+        onUpdate: () => {
+          const state = this.store.state
+
+          state.meta.touchedError = state.meta.isTouched
+            ? state.meta.error
             : undefined
 
-          // Do not validate pristine fields
-          const prevState = this.state
-          this.state = next
-          if (next.value !== prevState.value) {
-            this.validate('change', next.value)
+          if (state.value !== this.#prevState.value) {
+            this.validate('change', state.value)
           }
-          console.log(this)
+
+          this.#prevState = state
+          this.state = state
         },
       },
     )
 
     this.state = this.store.state
+    this.#prevState = this.state
     this.update(opts)
   }
 
@@ -128,9 +133,22 @@ export class FieldApi<TData, TFormData> {
     info.instances[this.uid] = this
 
     const unsubscribe = this.form.store.subscribe(() => {
-      this.#updateStore()
+      this.store.batch(() => {
+        const nextValue = this.getValue()
+        const nextMeta = this.getMeta()
+
+        if (nextValue !== this.state.value) {
+          this.store.setState((prev) => ({ ...prev, value: nextValue }))
+        }
+
+        if (nextMeta !== this.state.meta) {
+          this.store.setState((prev) => ({ ...prev, meta: nextMeta }))
+        }
+      })
     })
 
+    this.options.onMount?.(this)
+
     return () => {
       unsubscribe()
       delete info.instances[this.uid]
@@ -140,28 +158,11 @@ export class FieldApi<TData, TFormData> {
     }
   }
 
-  #updateStore = () => {
-    this.store.batch(() => {
-      const nextValue = this.getValue()
-      const nextMeta = this.getMeta()
-
-      if (nextValue !== this.state.value) {
-        this.store.setState((prev) => ({ ...prev, value: nextValue }))
-      }
-
-      if (nextMeta !== this.state.meta) {
-        this.store.setState((prev) => ({ ...prev, meta: nextMeta }))
-      }
-    })
-  }
-
   update = (opts: FieldApiOptions<TData, TFormData>) => {
     this.options = {
-      validatePristine: this.form.options.defaultValidatePristine ?? false,
-      validateOn: this.form.options.defaultValidateOn ?? 'change',
-      validateAsyncOn: this.form.options.defaultValidateAsyncOn ?? 'blur',
-      validateAsyncDebounceMs:
-        this.form.options.defaultValidateAsyncDebounceMs ?? 0,
+      asyncDebounceMs: this.form.options.asyncDebounceMs ?? 0,
+      onChangeAsyncDebounceMs: this.form.options.onChangeAsyncDebounceMs ?? 0,
+      onBlurAsyncDebounceMs: this.form.options.onBlurAsyncDebounceMs ?? 0,
       ...opts,
     }
 
@@ -208,12 +209,12 @@ export class FieldApi<TData, TFormData> {
       form: this.form,
     })
 
-  validateSync = async (value = this.state.value) => {
-    const { validate } = this.options
+  validateSync = async (value = this.state.value, cause: ValidationCause) => {
+    const { onChange, onBlur } = this.options
+    const validate =
+      cause === 'submit' ? undefined : cause === 'change' ? onChange : onBlur
 
-    if (!validate) {
-      return
-    }
+    if (!validate) return
 
     // Use the validationCount for all field instances to
     // track freshness of the validation
@@ -250,12 +251,33 @@ export class FieldApi<TData, TFormData> {
     }))
   }
 
-  validateAsync = async (value = this.state.value) => {
-    const { validateAsync, validateAsyncDebounceMs } = this.options
-
-    if (!validateAsync) {
-      return
-    }
+  validateAsync = async (value = this.state.value, cause: ValidationCause) => {
+    const {
+      onChangeAsync,
+      onBlurAsync,
+      onSubmitAsync,
+      asyncDebounceMs,
+      onBlurAsyncDebounceMs,
+      onChangeAsyncDebounceMs,
+    } = this.options
+
+    const validate =
+      cause === 'change'
+        ? onChangeAsync
+        : cause === 'submit'
+        ? onSubmitAsync
+        : onBlurAsync
+
+    if (!validate) return
+
+    const debounceMs =
+      cause === 'submit'
+        ? 0
+        : (cause === 'change'
+            ? onChangeAsyncDebounceMs
+            : onBlurAsyncDebounceMs) ??
+          asyncDebounceMs ??
+          500
 
     if (this.state.meta.isValidating !== true)
       this.setMeta((prev) => ({ ...prev, isValidating: true }))
@@ -274,14 +296,14 @@ export class FieldApi<TData, TFormData> {
       })
     }
 
-    if (validateAsyncDebounceMs > 0) {
-      await new Promise((r) => setTimeout(r, validateAsyncDebounceMs))
+    if (debounceMs > 0) {
+      await new Promise((r) => setTimeout(r, debounceMs))
     }
 
     // Only kick off validation if this validation is the latest attempt
     if (checkLatest()) {
       try {
-        const rawError = await validateAsync(value, this)
+        const rawError = await validate(value, this)
 
         if (checkLatest()) {
           const error = normalizeError(rawError)
@@ -309,44 +331,25 @@ export class FieldApi<TData, TFormData> {
     return this.getInfo().validationPromise
   }
 
-  shouldValidate = (isAsync: boolean, cause?: ValidationCause) => {
-    const { validateOn, validateAsyncOn } = this.options
-    const level = getValidationCauseLevel(cause)
-
-    // Must meet *at least* the validation level to validate,
-    // e.g. if validateOn is 'change' and validateCause is 'blur',
-    // the field will still validate
-    return Object.keys(validateCauseLevels).some((d) =>
-      isAsync
-        ? validateAsyncOn
-        : validateOn === d && level >= validateCauseLevels[d],
-    )
-  }
-
-  validate = async (
-    cause?: ValidationCause,
+  validate = (
+    cause: ValidationCause,
     value?: TData,
-  ): Promise<ValidationError> => {
+  ): ValidationError | Promise<ValidationError> => {
     // If the field is pristine and validatePristine is false, do not validate
-    if (!this.options.validatePristine && !this.state.meta.isTouched) return
+    if (!this.state.meta.isTouched) return
 
     // Attempt to sync validate first
-    if (this.shouldValidate(false, cause)) {
-      this.validateSync(value)
-    }
+    this.validateSync(value, cause)
 
     // If there is an error, return it, do not attempt async validation
     if (this.state.meta.error) {
-      return this.state.meta.error
+      if (!this.options.asyncAlways) {
+        return this.state.meta.error
+      }
     }
 
     // No error? Attempt async validation
-    if (this.shouldValidate(true, cause)) {
-      return this.validateAsync(value)
-    }
-
-    // If there is no sync error or async validation attempt, there is no error
-    return undefined
+    return this.validateAsync(value, cause)
   }
 
   getChangeProps = <T extends UserChangeProps<any>>(
@@ -360,9 +363,12 @@ export class FieldApi<TData, TFormData> {
         props.onChange?.(value)
       },
       onBlur: (e) => {
+        const prevTouched = this.state.meta.isTouched
         this.setMeta((prev) => ({ ...prev, isTouched: true }))
+        if (!prevTouched) {
+          this.validate('change')
+        }
         this.validate('blur')
-        props.onBlur?.(e)
       },
     } as ChangeProps<TData> & Omit<T, keyof ChangeProps<TData>>
   }
@@ -382,16 +388,6 @@ export class FieldApi<TData, TFormData> {
   }
 }
 
-const validateCauseLevels = {
-  change: 0,
-  blur: 1,
-  submit: 2,
-}
-
-function getValidationCauseLevel(cause?: ValidationCause) {
-  return !cause ? 3 : validateCauseLevels[cause]
-}
-
 function normalizeError(rawError?: ValidationError) {
   if (rawError) {
     if (typeof rawError !== 'string') {

package/src/FormApi.ts

@@ -17,13 +17,27 @@ export type FormSubmitEvent = Register extends {
 export type FormOptions<TData> = {
   defaultValues?: TData
   defaultState?: Partial<FormState<TData>>
-  onSubmit?: (values: TData, formApi: FormApi<TData>) => void
-  onInvalidSubmit?: (values: TData, formApi: FormApi<TData>) => void
-  validate?: (values: TData, formApi: FormApi<TData>) => Promise<any>
-  defaultValidatePristine?: boolean
-  defaultValidateOn?: ValidationCause
-  defaultValidateAsyncOn?: ValidationCause
-  defaultValidateAsyncDebounceMs?: number
+  asyncDebounceMs?: number
+  onMount?: (values: TData, formApi: FormApi<TData>) => ValidationError
+  onMountAsync?: (
+    values: TData,
+    formApi: FormApi<TData>,
+  ) => ValidationError | Promise<ValidationError>
+  onMountAsyncDebounceMs?: number
+  onChange?: (values: TData, formApi: FormApi<TData>) => ValidationError
+  onChangeAsync?: (
+    values: TData,
+    formApi: FormApi<TData>,
+  ) => ValidationError | Promise<ValidationError>
+  onChangeAsyncDebounceMs?: number
+  onBlur?: (values: TData, formApi: FormApi<TData>) => ValidationError
+  onBlurAsync?: (
+    values: TData,
+    formApi: FormApi<TData>,
+  ) => ValidationError | Promise<ValidationError>
+  onBlurAsyncDebounceMs?: number
+  onSubmit?: (values: TData, formApi: FormApi<TData>) => any | Promise<any>
+  onSubmitInvalid?: (values: TData, formApi: FormApi<TData>) => void
 }
 
 export type FieldInfo<TFormData> = {
@@ -99,12 +113,13 @@ export class FormApi<TFormData> {
       getDefaultFormState({
         ...opts?.defaultState,
         values: opts?.defaultValues ?? opts?.defaultState?.values,
-        isFormValid: !opts?.validate,
+        isFormValid: true,
       }),
       {
-        onUpdate: (next) => {
+        onUpdate: () => {
+          let { state } = this.store
           // Computed state
-          const fieldMetaValues = Object.values(next.fieldMeta) as (
+          const fieldMetaValues = Object.values(state.fieldMeta) as (
             | FieldMeta
             | undefined
           )[]
@@ -117,15 +132,15 @@ export class FormApi<TFormData> {
 
           const isTouched = fieldMetaValues.some((field) => field?.isTouched)
 
-          const isValidating = isFieldsValidating || next.isFormValidating
-          const isFormValid = !next.formError
+          const isValidating = isFieldsValidating || state.isFormValidating
+          const isFormValid = !state.formError
           const isValid = isFieldsValid && isFormValid
           const canSubmit =
-            (next.submissionAttempts === 0 && !isTouched) ||
-            (!isValidating && !next.isSubmitting && isValid)
+            (state.submissionAttempts === 0 && !isTouched) ||
+            (!isValidating && !state.isSubmitting && isValid)
 
-          next = {
-            ...next,
+          state = {
+            ...state,
             isFieldsValidating,
             isFieldsValid,
             isFormValid,
@@ -134,11 +149,8 @@ export class FormApi<TFormData> {
             isTouched,
           }
 
-          // Create a shortcut for the state
-          // Write it back to the store
-          this.store.state = next
-          this.state = next
-          console.log(this.state)
+          this.store.state = state
+          this.state = state
         },
       },
     )
@@ -163,10 +175,7 @@ export class FormApi<TFormData> {
       }
 
       if (options.defaultValues !== this.options.defaultValues) {
-        this.store.setState((prev) => ({
-          ...prev,
-          values: options.defaultValues as TFormData,
-        }))
+        this.store.setState(() => getDefaultFormState(options.defaultValues!))
       }
     })
 
@@ -176,7 +185,7 @@ export class FormApi<TFormData> {
   reset = () =>
     this.store.setState(() => getDefaultFormState(this.options.defaultValues!))
 
-  validateAllFields = async () => {
+  validateAllFields = async (cause: ValidationCause) => {
     const fieldValidationPromises: Promise<ValidationError>[] = [] as any
 
     this.store.batch(() => {
@@ -188,9 +197,9 @@ export class FormApi<TFormData> {
               // Mark them as touched
               instance.setMeta((prev) => ({ ...prev, isTouched: true }))
               // Validate the field
-              if (instance.options.validate) {
-                fieldValidationPromises.push(instance.validate())
-              }
+              fieldValidationPromises.push(
+                Promise.resolve().then(() => instance.validate(cause)),
+              )
             }
           })
         },
@@ -200,63 +209,7 @@ export class FormApi<TFormData> {
     return Promise.all(fieldValidationPromises)
   }
 
-  validateForm = async () => {
-    const { validate } = this.options
-
-    if (!validate) {
-      return
-    }
-
-    // Use the formValidationCount for all field instances to
-    // track freshness of the validation
-    this.store.setState((prev) => ({
-      ...prev,
-      isValidating: true,
-      formValidationCount: prev.formValidationCount + 1,
-    }))
-
-    const formValidationCount = this.state.formValidationCount
-
-    const checkLatest = () =>
-      formValidationCount === this.state.formValidationCount
-
-    if (!this.validationMeta.validationPromise) {
-      this.validationMeta.validationPromise = new Promise((resolve, reject) => {
-        this.validationMeta.validationResolve = resolve
-        this.validationMeta.validationReject = reject
-      })
-    }
-
-    const doValidation = async () => {
-      try {
-        const error = await validate(this.state.values, this)
-
-        if (checkLatest()) {
-          this.store.setState((prev) => ({
-            ...prev,
-            isValidating: false,
-            error: error
-              ? typeof error === 'string'
-                ? error
-                : 'Invalid Form Values'
-              : null,
-          }))
-
-          this.validationMeta.validationResolve?.(error)
-        }
-      } catch (err) {
-        if (checkLatest()) {
-          this.validationMeta.validationReject?.(err)
-        }
-      } finally {
-        delete this.validationMeta.validationPromise
-      }
-    }
-
-    doValidation()
-
-    return this.validationMeta.validationPromise
-  }
+  // validateForm = async () => {}
 
   handleSubmit = async (e: FormSubmitEvent) => {
     e.preventDefault()
@@ -285,21 +238,21 @@ export class FormApi<TFormData> {
     }
 
     // Validate all fields
-    await this.validateAllFields()
+    await this.validateAllFields('submit')
 
     // Fields are invalid, do not submit
     if (!this.state.isFieldsValid) {
       done()
-      this.options.onInvalidSubmit?.(this.state.values, this)
+      this.options.onSubmitInvalid?.(this.state.values, this)
       return
     }
 
     // Run validation for the form
-    await this.validateForm()
+    // await this.validateForm()
 
     if (!this.state.isValid) {
       done()
-      this.options.onInvalidSubmit?.(this.state.values, this)
+      this.options.onSubmitInvalid?.(this.state.values, this)
       return
     }
 
@@ -353,22 +306,22 @@ export class FormApi<TFormData> {
     updater: Updater<DeepValue<TFormData, TField>>,
     opts?: { touch?: boolean },
   ) => {
-    const touch = opts?.touch ?? true
+    const touch = opts?.touch
 
     this.store.batch(() => {
-      this.store.setState((prev) => {
-        return {
-          ...prev,
-          values: setBy(prev.values, field, updater),
-        }
-      })
-
       if (touch) {
         this.setFieldMeta(field, (prev) => ({
           ...prev,
           isTouched: true,
         }))
       }
+
+      this.store.setState((prev) => {
+        return {
+          ...prev,
+          values: setBy(prev.values, field, updater),
+        }
+      })
     })
   }
 
@@ -393,10 +346,6 @@ export class FormApi<TFormData> {
     this.setFieldValue(
       field,
       (prev) => {
-        // invariant( // TODO: bring in invariant
-        //   Array.isArray(prev),
-        //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
-        // )
         return (prev as DeepValue<TFormData, TField>[]).map((d, i) =>
           i === index ? value : d,
         ) as any
@@ -413,10 +362,6 @@ export class FormApi<TFormData> {
     this.setFieldValue(
       field,
       (prev) => {
-        // invariant( // TODO: bring in invariant
-        //   Array.isArray(prev),
-        //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
-        // )
         return (prev as DeepValue<TFormData, TField>[]).filter(
           (_d, i) => i !== index,
         ) as any