@tanstack/form-core 0.0.2 → 0.0.4

package/build/stats-react.json

@@ -8,31 +8,31 @@
         "children": [
           {
             "name": "node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js",
-            "uid": "7ee7-13"
+            "uid": "8485-13"
           },
           {
             "name": "packages/form-core/src",
             "children": [
               {
-                "uid": "7ee7-15",
+                "uid": "8485-15",
                 "name": "utils.ts"
               },
               {
-                "uid": "7ee7-17",
+                "uid": "8485-17",
                 "name": "FormApi.ts"
               },
               {
-                "uid": "7ee7-21",
+                "uid": "8485-21",
                 "name": "FieldApi.ts"
               },
               {
-                "uid": "7ee7-23",
+                "uid": "8485-23",
                 "name": "index.ts"
               }
             ]
           },
           {
-            "uid": "7ee7-19",
+            "uid": "8485-19",
             "name": "\u0000rollupPluginBabelHelpers.js"
           }
         ]
@@ -41,138 +41,138 @@
     "isRoot": true
   },
   "nodeParts": {
-    "7ee7-13": {
+    "8485-13": {
       "renderedLength": 1288,
       "gzipLength": 497,
       "brotliLength": 0,
-      "mainUid": "7ee7-12"
+      "mainUid": "8485-12"
     },
-    "7ee7-15": {
+    "8485-15": {
       "renderedLength": 1944,
       "gzipLength": 684,
       "brotliLength": 0,
-      "mainUid": "7ee7-14"
+      "mainUid": "8485-14"
     },
-    "7ee7-17": {
+    "8485-17": {
       "renderedLength": 10266,
       "gzipLength": 2308,
       "brotliLength": 0,
-      "mainUid": "7ee7-16"
+      "mainUid": "8485-16"
     },
-    "7ee7-19": {
+    "8485-19": {
       "renderedLength": 353,
       "gzipLength": 227,
       "brotliLength": 0,
-      "mainUid": "7ee7-18"
+      "mainUid": "8485-18"
     },
-    "7ee7-21": {
-      "renderedLength": 7553,
-      "gzipLength": 1868,
+    "8485-21": {
+      "renderedLength": 10602,
+      "gzipLength": 2507,
       "brotliLength": 0,
-      "mainUid": "7ee7-20"
+      "mainUid": "8485-20"
     },
-    "7ee7-23": {
+    "8485-23": {
       "renderedLength": 0,
       "gzipLength": 0,
       "brotliLength": 0,
-      "mainUid": "7ee7-22"
+      "mainUid": "8485-22"
     }
   },
   "nodeMetas": {
-    "7ee7-12": {
+    "8485-12": {
       "id": "/node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "7ee7-13"
+        "index.production.js": "8485-13"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "7ee7-16"
+          "uid": "8485-16"
         },
         {
-          "uid": "7ee7-20"
+          "uid": "8485-20"
         }
       ]
     },
-    "7ee7-14": {
+    "8485-14": {
       "id": "/packages/form-core/src/utils.ts",
       "moduleParts": {
-        "index.production.js": "7ee7-15"
+        "index.production.js": "8485-15"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "7ee7-22"
+          "uid": "8485-22"
         },
         {
-          "uid": "7ee7-16"
+          "uid": "8485-16"
         }
       ]
     },
-    "7ee7-16": {
+    "8485-16": {
       "id": "/packages/form-core/src/FormApi.ts",
       "moduleParts": {
-        "index.production.js": "7ee7-17"
+        "index.production.js": "8485-17"
       },
       "imported": [
         {
-          "uid": "7ee7-12"
+          "uid": "8485-12"
         },
         {
-          "uid": "7ee7-14"
+          "uid": "8485-14"
         }
       ],
       "importedBy": [
         {
-          "uid": "7ee7-22"
+          "uid": "8485-22"
         }
       ]
     },
-    "7ee7-18": {
+    "8485-18": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "7ee7-19"
+        "index.production.js": "8485-19"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "7ee7-20"
+          "uid": "8485-20"
         }
       ]
     },
-    "7ee7-20": {
+    "8485-20": {
       "id": "/packages/form-core/src/FieldApi.ts",
       "moduleParts": {
-        "index.production.js": "7ee7-21"
+        "index.production.js": "8485-21"
       },
       "imported": [
         {
-          "uid": "7ee7-18"
+          "uid": "8485-18"
         },
         {
-          "uid": "7ee7-12"
+          "uid": "8485-12"
         }
       ],
       "importedBy": [
         {
-          "uid": "7ee7-22"
+          "uid": "8485-22"
         }
       ]
     },
-    "7ee7-22": {
+    "8485-22": {
       "id": "/packages/form-core/src/index.ts",
       "moduleParts": {
-        "index.production.js": "7ee7-23"
+        "index.production.js": "8485-23"
       },
       "imported": [
         {
-          "uid": "7ee7-16"
+          "uid": "8485-16"
         },
         {
-          "uid": "7ee7-20"
+          "uid": "8485-20"
         },
         {
-          "uid": "7ee7-14"
+          "uid": "8485-14"
         }
       ],
       "importedBy": [],

package/build/types/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/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/umd/index.development.js

@@ -447,7 +447,7 @@
 
   var _updateStore = /*#__PURE__*/_classPrivateFieldLooseKey("updateStore");
 
-  var _validate = /*#__PURE__*/_classPrivateFieldLooseKey("validate");
+  var _leaseValidateAsync = /*#__PURE__*/_classPrivateFieldLooseKey("leaseValidateAsync");
 
   class FieldApi {
     constructor(_opts) {
@@ -494,10 +494,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
 
@@ -535,48 +538,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;
 
-                return undefined;
-              })();
+        if (!validateAsync) {
+          return;
+        }
+
+        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
@@ -598,14 +644,45 @@
               delete this.getInfo().validationPromise;
             }
           }
+        } // Always return the latest validation promise to the caller
+
+
+        return this.getInfo().validationPromise;
+      };
+
+      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
 
-          return this.getInfo().validationPromise;
-        }
-      });
 
-      this.validate = () => _classPrivateFieldLooseBase(this, _validate)[_validate](false);
+        if (this.state.meta.error) {
+          return this.state.meta.error;
+        } // No error? Attempt async validation
 
-      this.validateAsync = () => _classPrivateFieldLooseBase(this, _validate)[_validate](true);
+
+        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,
@@ -618,14 +695,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);
           }
         };
@@ -664,17 +734,12 @@
         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) {
+            this.validate('change', next.value);
           }
-
-          this.state = next;
         }
       });
       this.state = this.store.state;
@@ -682,6 +747,27 @@
     }
 
   }
+  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;
+  }
 
   exports.FieldApi = FieldApi;
   exports.FormApi = FormApi;