@tanstack/react-form 0.0.1 → 0.0.3

package/build/types/form-core/src/FieldApi.d.ts

@@ -1,7 +1,7 @@
 import type { DeepKeys, DeepValue, RequiredByKey, Updater } from './utils';
 import type { FormApi, ValidationError } from './FormApi';
 import { Store } from '@tanstack/store';
-declare type ValidateOn = 'change' | 'blur' | 'submit';
+export declare type ValidationCause = 'change' | 'blur' | 'submit';
 export declare type FieldOptions<TData, TFormData> = {
     name: unknown extends TFormData ? string : DeepKeys<TFormData>;
     defaultValue?: TData;
@@ -9,14 +9,10 @@ export declare type FieldOptions<TData, TFormData> = {
     validate?: (value: TData, fieldApi: FieldApi<TData, TFormData>) => ValidationError;
     validateAsync?: (value: TData, fieldApi: FieldApi<TData, TFormData>) => ValidationError | Promise<ValidationError>;
     validatePristine?: boolean;
-    validateOn?: ValidateOn;
-    validateAsyncOn?: ValidateOn;
+    validateOn?: ValidationCause;
+    validateAsyncOn?: ValidationCause;
     validateAsyncDebounceMs?: number;
-    filterValue?: (value: TData) => TData;
     defaultMeta?: Partial<FieldMeta>;
-    change?: boolean;
-    blur?: boolean;
-    submit?: boolean;
 };
 export declare type FieldMeta = {
     isTouched: boolean;
@@ -44,7 +40,7 @@ export declare class FieldApi<TData, TFormData> {
     name: DeepKeys<TFormData>;
     store: Store<FieldState<TData>>;
     state: FieldState<TData>;
-    options: RequiredByKey<FieldOptions<TData, TFormData>, 'validateOn' | 'validateAsyncOn'>;
+    options: RequiredByKey<FieldOptions<TData, TFormData>, 'validatePristine' | 'validateOn' | 'validateAsyncOn' | 'validateAsyncDebounceMs'>;
     constructor(opts: FieldApiOptions<TData, TFormData>);
     mount: () => () => void;
     update: (opts: FieldApiOptions<TData, TFormData>) => void;
@@ -61,9 +57,11 @@ export declare class FieldApi<TData, TFormData> {
     removeValue: (index: number) => void;
     swapValues: (aIndex: number, bIndex: number) => void;
     getSubField: <TName extends DeepKeys<TData>>(name: TName) => FieldApi<DeepValue<TData, TName>, TFormData>;
-    validate: () => Promise<ValidationError>;
-    validateAsync: () => Promise<ValidationError>;
+    validateSync: (value?: TData) => Promise<void>;
+    cancelValidateAsync: () => void;
+    validateAsync: (value?: TData) => Promise<ValidationError>;
+    shouldValidate: (isAsync: boolean, cause?: ValidationCause) => boolean;
+    validate: (cause?: ValidationCause, value?: TData) => Promise<ValidationError>;
     getChangeProps: <T extends ChangeProps<any>>(props?: T) => ChangeProps<TData> & Omit<T, keyof ChangeProps<TData>>;
     getInputProps: <T extends InputProps>(props?: T) => InputProps & Omit<T, keyof InputProps>;
 }
-export {};

package/build/types/form-core/src/FormApi.d.ts

@@ -1,21 +1,25 @@
 import type { FormEvent } from 'react';
 import { Store } from '@tanstack/store';
 import type { DeepKeys, DeepValue, Updater } from './utils';
-import type { FieldApi, FieldMeta } from './FieldApi';
+import type { FieldApi, FieldMeta, ValidationCause } from './FieldApi';
 export declare type FormOptions<TData> = {
     defaultValues?: TData;
     defaultState?: Partial<FormState<TData>>;
-    onSubmit?: (values: TData, formApi: FormApi<TData>) => Promise<any>;
+    onSubmit?: (values: TData, formApi: FormApi<TData>) => void;
     onInvalidSubmit?: (values: TData, formApi: FormApi<TData>) => void;
     validate?: (values: TData, formApi: FormApi<TData>) => Promise<any>;
     debugForm?: boolean;
-    validatePristine?: boolean;
+    defaultValidatePristine?: boolean;
+    defaultValidateOn?: ValidationCause;
+    defaultValidateAsyncOn?: ValidationCause;
+    defaultValidateAsyncDebounceMs?: number;
 };
 export declare type FieldInfo<TFormData> = {
     instances: Record<string, FieldApi<any, TFormData>>;
 } & ValidationMeta;
 export declare type ValidationMeta = {
     validationCount?: number;
+    validationAsyncCount?: number;
     validationPromise?: Promise<ValidationError>;
     validationResolve?: (error: ValidationError) => void;
     validationReject?: (error: unknown) => void;

package/build/types/index.d.ts

@@ -9,6 +9,7 @@
  * @license MIT
  */
 import { DeepKeys, FieldApi, DeepValue, FieldOptions, FormApi, FormState, FormOptions } from '@tanstack/form-core';
+export * from '@tanstack/form-core';
 import { NoInfer } from '@tanstack/react-store';
 import React from 'react';
 

package/build/types/react-form/src/formContext.d.ts

@@ -1,4 +1,4 @@
-import { FormApi } from '@tanstack/form-core';
+import type { FormApi } from '@tanstack/form-core';
 import * as React from 'react';
-export declare const formContext: React.Context<FormApi<any>>;
+export declare const formContext: React.Context<FormApi<any> | null>;
 export declare function useFormContext(customFormApi?: FormApi<any>): FormApi<any>;

package/build/types/react-form/src/index.d.ts

@@ -1,3 +1,4 @@
+export * from '@tanstack/form-core';
 export * from './useForm';
 export * from './Field';
 export * from './useField';

package/build/umd/index.development.js

@@ -37,23 +37,6 @@
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
   /**
    * store
    *
@@ -498,7 +481,7 @@
 
   var _updateStore = /*#__PURE__*/_classPrivateFieldLooseKey("updateStore");
 
-  var _validate = /*#__PURE__*/_classPrivateFieldLooseKey("validate");
+  var _leaseValidateAsync = /*#__PURE__*/_classPrivateFieldLooseKey("leaseValidateAsync");
 
   class FieldApi {
     constructor(_opts) {
@@ -545,10 +528,13 @@
       });
 
       this.update = opts => {
+        var _this$form$options$de, _this$form$options$de2, _this$form$options$de3, _this$form$options$de4;
+
         this.options = {
-          validateOn: 'change',
-          validateAsyncOn: 'blur',
-          validateAsyncDebounceMs: 0,
+          validatePristine: (_this$form$options$de = this.form.options.defaultValidatePristine) != null ? _this$form$options$de : false,
+          validateOn: (_this$form$options$de2 = this.form.options.defaultValidateOn) != null ? _this$form$options$de2 : 'change',
+          validateAsyncOn: (_this$form$options$de3 = this.form.options.defaultValidateAsyncOn) != null ? _this$form$options$de3 : 'blur',
+          validateAsyncDebounceMs: (_this$form$options$de4 = this.form.options.defaultValidateAsyncDebounceMs) != null ? _this$form$options$de4 : 0,
           ...opts
         }; // Default Value
 
@@ -586,48 +572,91 @@
         form: this.form
       });
 
-      Object.defineProperty(this, _validate, {
-        writable: true,
-        value: async isAsync => {
-          if (!this.options.validate) {
-            return;
-          }
+      this.validateSync = async (value = this.state.value) => {
+        const {
+          validate
+        } = this.options;
+
+        if (!validate) {
+          return;
+        } // Use the validationCount for all field instances to
+        // track freshness of the validation
+
 
+        const validationCount = (this.getInfo().validationCount || 0) + 1;
+        this.getInfo().validationCount = validationCount;
+        const error = normalizeError(validate(value, this));
+
+        if (this.state.meta.error !== error) {
           this.setMeta(prev => ({ ...prev,
-            isValidating: true
-          })); // Use the validationCount for all field instances to
-          // track freshness of the validation
+            error
+          }));
+        } // If a sync error is encountered, cancel any async validation
 
-          const validationCount = (this.getInfo().validationCount || 0) + 1;
-          this.getInfo().validationCount = validationCount;
 
-          const checkLatest = () => validationCount === this.getInfo().validationCount;
+        if (this.state.meta.error) {
+          this.cancelValidateAsync();
+        }
+      };
 
-          if (!this.getInfo().validationPromise) {
-            this.getInfo().validationPromise = new Promise((resolve, reject) => {
-              this.getInfo().validationResolve = resolve;
-              this.getInfo().validationReject = reject;
-            });
-          }
+      Object.defineProperty(this, _leaseValidateAsync, {
+        writable: true,
+        value: () => {
+          const count = (this.getInfo().validationAsyncCount || 0) + 1;
+          this.getInfo().validationAsyncCount = count;
+          return count;
+        }
+      });
 
-          try {
-            const rawError = await this.options.validate(this.state.value, this);
+      this.cancelValidateAsync = () => {
+        // Lease a new validation count to ignore any pending validations
+        _classPrivateFieldLooseBase(this, _leaseValidateAsync)[_leaseValidateAsync](); // Cancel any pending validation state
 
-            if (checkLatest()) {
-              var _this$getInfo$validat, _this$getInfo;
 
-              const error = (() => {
-                if (rawError) {
-                  if (typeof rawError !== 'string') {
-                    return 'Invalid Form Values';
-                  }
+        this.setMeta(prev => ({ ...prev,
+          isValidating: false
+        }));
+      };
 
-                  return rawError;
-                }
+      this.validateAsync = async (value = this.state.value) => {
+        const {
+          validateAsync,
+          validateAsyncDebounceMs
+        } = this.options;
+
+        if (!validateAsync) {
+          return;
+        }
 
-                return undefined;
-              })();
+        if (this.state.meta.isValidating !== true) this.setMeta(prev => ({ ...prev,
+          isValidating: true
+        })); // Use the validationCount for all field instances to
+        // track freshness of the validation
+
+        const validationAsyncCount = _classPrivateFieldLooseBase(this, _leaseValidateAsync)[_leaseValidateAsync]();
+
+        const checkLatest = () => validationAsyncCount === this.getInfo().validationAsyncCount;
+
+        if (!this.getInfo().validationPromise) {
+          this.getInfo().validationPromise = new Promise((resolve, reject) => {
+            this.getInfo().validationResolve = resolve;
+            this.getInfo().validationReject = reject;
+          });
+        }
 
+        if (validateAsyncDebounceMs > 0) {
+          await new Promise(r => setTimeout(r, validateAsyncDebounceMs));
+        } // Only kick off validation if this validation is the latest attempt
+
+
+        if (checkLatest()) {
+          try {
+            const rawError = await validateAsync(value, this);
+
+            if (checkLatest()) {
+              var _this$getInfo$validat, _this$getInfo;
+
+              const error = normalizeError(rawError);
               this.setMeta(prev => ({ ...prev,
                 isValidating: false,
                 error
@@ -649,14 +678,45 @@
               delete this.getInfo().validationPromise;
             }
           }
+        } // Always return the latest validation promise to the caller
 
-          return this.getInfo().validationPromise;
-        }
-      });
 
-      this.validate = () => _classPrivateFieldLooseBase(this, _validate)[_validate](false);
+        return this.getInfo().validationPromise;
+      };
 
-      this.validateAsync = () => _classPrivateFieldLooseBase(this, _validate)[_validate](true);
+      this.shouldValidate = (isAsync, cause) => {
+        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]);
+      };
+
+      this.validate = async (cause, value) => {
+        // If the field is pristine and validatePristine is false, do not validate
+        if (!this.options.validatePristine && !this.state.meta.isTouched) return; // Attempt to sync validate first
+
+        if (this.shouldValidate(false, cause)) {
+          this.validateSync(value);
+        } // If there is an error, return it, do not attempt async validation
+
+
+        if (this.state.meta.error) {
+          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;
+      };
 
       this.getChangeProps = (props = {}) => {
         return { ...props,
@@ -669,14 +729,7 @@
             this.setMeta(prev => ({ ...prev,
               isTouched: true
             }));
-            const {
-              validateOn
-            } = this.options;
-
-            if (validateOn === 'blur' || validateOn.split('-')[0] === 'blur') {
-              this.validate();
-            }
-
+            this.validate('blur');
             props.onBlur == null ? void 0 : props.onBlur(e);
           }
         };
@@ -715,17 +768,13 @@
         onUpdate: next => {
           next.meta.touchedError = next.meta.isTouched ? next.meta.error : undefined; // Do not validate pristine fields
 
-          if (!this.options.validatePristine && !next.meta.isTouched) return; // If validateOn is set to a variation of change, run the validation
+          const prevState = this.state;
+          this.state = next;
 
-          if (this.options.validateOn === 'change' || this.options.validateOn.split('-')[0] === 'change') {
-            try {
-              this.validate();
-            } catch (err) {
-              console.error('An error occurred during validation', err);
-            }
+          if (next.value !== prevState.value) {
+            console.log('change');
+            this.validate('change', next.value);
           }
-
-          this.state = next;
         }
       });
       this.state = this.store.state;
@@ -733,6 +782,44 @@
     }
 
   }
+  const validateCauseLevels = {
+    change: 0,
+    blur: 1,
+    submit: 2
+  };
+
+  function getValidationCauseLevel(cause) {
+    return !cause ? 3 : validateCauseLevels[cause];
+  }
+
+  function normalizeError(rawError) {
+    if (rawError) {
+      if (typeof rawError !== 'string') {
+        return 'Invalid Form Values';
+      }
+
+      return rawError;
+    }
+
+    return undefined;
+  }
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
 
   /**
    * react-store
@@ -895,9 +982,15 @@
   }
 
   exports.Field = Field;
+  exports.FieldApi = FieldApi;
+  exports.FormApi = FormApi;
   exports.createFieldComponent = createFieldComponent;
   exports.createFormComponent = createFormComponent;
   exports.createUseField = createUseField;
+  exports.functionalUpdate = functionalUpdate;
+  exports.getBy = getBy;
+  exports.getDefaultFormState = getDefaultFormState;
+  exports.setBy = setBy;
   exports.useField = useField;
   exports.useForm = useForm;