@tanstack/form-core 0.0.9 → 0.0.12

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,10 +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
+          this.store.state = state
+          this.state = state
         },
       },
     )
@@ -151,31 +164,47 @@ export class FormApi<TFormData> {
     if (!options) return
 
     this.store.batch(() => {
-      if (
-        options.defaultState &&
+      const shouldUpdateValues =
+        options.defaultValues &&
+        options.defaultValues !== this.options.defaultValues
+
+      const shouldUpdateState =
         options.defaultState !== this.options.defaultState
-      ) {
-        this.store.setState((prev) => ({
-          ...prev,
-          ...options.defaultState,
-        }))
-      }
 
-      if (options.defaultValues !== this.options.defaultValues) {
-        this.store.setState((prev) => ({
-          ...prev,
-          values: options.defaultValues as TFormData,
-        }))
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!shouldUpdateValues || !shouldUpdateValues) {
+        return
       }
+
+      this.store.setState(() =>
+        getDefaultFormState(
+          Object.assign(
+            {},
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            shouldUpdateState ? options.defaultState : {},
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            shouldUpdateValues
+              ? {
+                  values: options.defaultValues,
+                }
+              : {},
+          ),
+        ),
+      )
     })
 
     this.options = options
   }
 
   reset = () =>
-    this.store.setState(() => getDefaultFormState(this.options.defaultValues!))
+    this.store.setState(() =>
+      getDefaultFormState({
+        ...this.options.defaultState,
+        values: this.options.defaultValues ?? this.options.defaultState?.values,
+      }),
+    )
 
-  validateAllFields = async () => {
+  validateAllFields = async (cause: ValidationCause) => {
     const fieldValidationPromises: Promise<ValidationError>[] = [] as any
 
     this.store.batch(() => {
@@ -187,9 +216,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)),
+              )
             }
           })
         },
@@ -199,63 +228,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()
@@ -284,21 +257,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
     }
 
@@ -327,6 +300,7 @@ export class FormApi<TFormData> {
   }
 
   getFieldInfo = <TField extends DeepKeys<TFormData>>(field: TField) => {
+    // eslint-disable-next-line  @typescript-eslint/no-unnecessary-condition
     return (this.fieldInfo[field] ||= {
       instances: {},
     })
@@ -352,28 +326,28 @@ 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),
+        }
+      })
     })
   }
 
   pushFieldValue = <TField extends DeepKeys<TFormData>>(
     field: TField,
-    value: DeepValue<TFormData, TField>,
+    value: DeepValue<TFormData, TField>[number],
     opts?: { touch?: boolean },
   ) => {
     return this.setFieldValue(
@@ -386,16 +360,12 @@ export class FormApi<TFormData> {
   insertFieldValue = <TField extends DeepKeys<TFormData>>(
     field: TField,
     index: number,
-    value: DeepValue<TFormData, TField>,
+    value: DeepValue<TFormData, TField>[number],
     opts?: { touch?: boolean },
   ) => {
     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
@@ -412,10 +382,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
@@ -432,7 +398,7 @@ export class FormApi<TFormData> {
     this.setFieldValue(field, (prev: any) => {
       const prev1 = prev[index1]!
       const prev2 = prev[index2]!
-      return setBy(setBy(prev, [index1], prev2), [index2], prev1)
+      return setBy(setBy(prev, `${index1}`, prev2), `${index2}`, prev1)
     })
   }
 }

package/src/tests/FieldApi.spec.ts

@@ -0,0 +1,143 @@
+import { expect } from 'vitest'
+
+import { FormApi } from '../FormApi'
+import { FieldApi } from '../FieldApi'
+
+describe('field api', () => {
+  it('should have an initial value', () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: 'test',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'name',
+    })
+
+    expect(field.getValue()).toBe('test')
+  })
+
+  it('should set a value correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: 'test',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'name',
+    })
+
+    field.setValue('other')
+
+    expect(field.getValue()).toBe('other')
+  })
+
+  it('should set a value correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: 'test',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'name',
+    })
+
+    field.setValue('other')
+
+    expect(field.getValue()).toBe('other')
+  })
+
+  it('should push an array value correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one'],
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+
+    field.pushValue('other')
+
+    expect(field.getValue()).toStrictEqual(['one', 'other'])
+  })
+
+  it('should insert a value into an array value correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two'],
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+
+    field.insertValue(1, 'other')
+
+    expect(field.getValue()).toStrictEqual(['one', 'other'])
+  })
+
+  it('should remove a value from an array value correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two'],
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+
+    field.removeValue(1)
+
+    expect(field.getValue()).toStrictEqual(['one'])
+  })
+
+  it('should swap a value from an array value correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two'],
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+
+    field.swapValues(0, 1)
+
+    expect(field.getValue()).toStrictEqual(['two', 'one'])
+  })
+
+  it('should get a subfield properly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: {
+          first: 'one',
+          second: 'two',
+        },
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+
+    const subfield = field.getSubField('first')
+
+    expect(subfield.getValue()).toBe('one')
+  })
+})

package/src/tests/FieldApi.test-d.ts

@@ -0,0 +1,41 @@
+import { assertType } from 'vitest'
+import { FormApi } from '../FormApi'
+import { FieldApi } from '../FieldApi'
+
+it('should type a subfield properly', () => {
+  const form = new FormApi({
+    defaultValues: {
+      names: {
+        first: 'one',
+        second: 'two',
+      },
+    } as const,
+  })
+
+  const field = new FieldApi({
+    form,
+    name: 'names',
+  })
+
+  const subfield = field.getSubField('first')
+
+  assertType<'one'>(subfield.getValue())
+})
+
+it('should type onChange properly', () => {
+  const form = new FormApi({
+    defaultValues: {
+      name: 'test',
+    },
+  } as const)
+
+  const field = new FieldApi({
+    form,
+    name: 'name',
+    onChange: (value) => {
+      assertType<'test'>(value)
+
+      return undefined
+    },
+  })
+})