@tanstack/form-core 0.40.4 → 0.41.1

package/dist/esm/FormApi.js

@@ -1,24 +1,13 @@
-import { Store } from "@tanstack/store";
+import { batch, Store, Derived } from "@tanstack/store";
 import { getSyncValidatorArray, getAsyncValidatorArray, getBy, functionalUpdate, setBy, deleteBy, isNonEmptyArray } from "./utils.js";
 import { isStandardSchemaValidator, standardSchemaValidator } from "./standardSchemaValidator.js";
 function getDefaultFormState(defaultState) {
   return {
     values: defaultState.values ?? {},
-    errors: defaultState.errors ?? [],
     errorMap: defaultState.errorMap ?? {},
-    fieldMeta: defaultState.fieldMeta ?? {},
-    canSubmit: defaultState.canSubmit ?? true,
-    isFieldsValid: defaultState.isFieldsValid ?? false,
-    isFieldsValidating: defaultState.isFieldsValidating ?? false,
-    isFormValid: defaultState.isFormValid ?? false,
-    isFormValidating: defaultState.isFormValidating ?? false,
+    fieldMetaBase: defaultState.fieldMetaBase ?? {},
     isSubmitted: defaultState.isSubmitted ?? false,
     isSubmitting: defaultState.isSubmitting ?? false,
-    isTouched: defaultState.isTouched ?? false,
-    isBlurred: defaultState.isBlurred ?? false,
-    isPristine: defaultState.isPristine ?? true,
-    isDirty: defaultState.isDirty ?? false,
-    isValid: defaultState.isValid ?? false,
     isValidating: defaultState.isValidating ?? false,
     submissionAttempts: defaultState.submissionAttempts ?? 0,
     validationMetaMap: defaultState.validationMetaMap ?? {
@@ -43,18 +32,25 @@ class FormApi {
     this.fieldInfo = {};
     this.prevTransformArray = [];
     this.mount = () => {
+      const cleanupFieldMetaDerived = this.fieldMetaDerived.mount();
+      const cleanupStoreDerived = this.store.mount();
+      const cleanup = () => {
+        cleanupFieldMetaDerived();
+        cleanupStoreDerived();
+      };
       const { onMount } = this.options.validators || {};
-      if (!onMount) return;
+      if (!onMount) return cleanup;
       this.validateSync("mount");
+      return cleanup;
     };
     this.update = (options) => {
       if (!options) return;
       const oldOptions = this.options;
       this.options = options;
-      this.store.batch(() => {
+      batch(() => {
         const shouldUpdateValues = options.defaultValues && options.defaultValues !== oldOptions.defaultValues && !this.state.isTouched;
         const shouldUpdateState = options.defaultState !== oldOptions.defaultState && !this.state.isTouched;
-        this.store.setState(
+        this.baseStore.setState(
           () => getDefaultFormState(
             Object.assign(
               {},
@@ -70,27 +66,27 @@ class FormApi {
     };
     this.reset = (values, opts2) => {
       const { fieldMeta: currentFieldMeta } = this.state;
-      const fieldMeta = this.resetFieldMeta(currentFieldMeta);
+      const fieldMetaBase = this.resetFieldMeta(currentFieldMeta);
       if (values && !(opts2 == null ? void 0 : opts2.keepDefaultValues)) {
         this.options = {
           ...this.options,
           defaultValues: values
         };
       }
-      this.store.setState(
+      this.baseStore.setState(
         () => {
           var _a2;
           return getDefaultFormState({
             ...this.options.defaultState,
             values: values ?? this.options.defaultValues ?? ((_a2 = this.options.defaultState) == null ? void 0 : _a2.values),
-            fieldMeta
+            fieldMetaBase
           });
         }
       );
     };
     this.validateAllFields = async (cause) => {
       const fieldValidationPromises = [];
-      this.store.batch(() => {
+      batch(() => {
         void Object.values(this.fieldInfo).forEach((field) => {
           if (!field.instance) return;
           const fieldInstance = field.instance;
@@ -117,7 +113,7 @@ class FormApi {
         (fieldKey) => fieldKeysToValidate.some((key) => fieldKey.startsWith(key))
       );
       const fieldValidationPromises = [];
-      this.store.batch(() => {
+      batch(() => {
         fieldsToValidate.forEach((nestedField) => {
           fieldValidationPromises.push(
             Promise.resolve().then(() => this.validateField(nestedField, cause))
@@ -140,7 +136,7 @@ class FormApi {
       const validates = getSyncValidatorArray(cause, this.options);
       let hasErrored = false;
       const fieldsErrorMap = {};
-      this.store.batch(() => {
+      batch(() => {
         for (const validateObj of validates) {
           if (!validateObj.validate) continue;
           const rawError = this.runValidator({
@@ -175,7 +171,7 @@ class FormApi {
             }
           }
           if (this.state.errorMap[errorMapKey] !== formError) {
-            this.store.setState((prev) => ({
+            this.baseStore.setState((prev) => ({
               ...prev,
               errorMap: {
                 ...prev.errorMap,
@@ -190,7 +186,7 @@ class FormApi {
       });
       const submitErrKey = getErrorMapKey("submit");
       if (this.state.errorMap[submitErrKey] && cause !== "submit" && !hasErrored) {
-        this.store.setState((prev) => ({
+        this.baseStore.setState((prev) => ({
           ...prev,
           errorMap: {
             ...prev.errorMap,
@@ -203,7 +199,7 @@ class FormApi {
     this.validateAsync = async (cause) => {
       const validates = getAsyncValidatorArray(cause, this.options);
       if (!this.state.isFormValidating) {
-        this.store.setState((prev) => ({ ...prev, isFormValidating: true }));
+        this.baseStore.setState((prev) => ({ ...prev, isFormValidating: true }));
       }
       const promises = [];
       let fieldErrors;
@@ -263,7 +259,7 @@ class FormApi {
                 }
               }
             }
-            this.store.setState((prev) => ({
+            this.baseStore.setState((prev) => ({
               ...prev,
               errorMap: {
                 ...prev.errorMap,
@@ -294,7 +290,7 @@ class FormApi {
           }
         }
       }
-      this.store.setState((prev) => ({
+      this.baseStore.setState((prev) => ({
         ...prev,
         isFormValidating: false
       }));
@@ -309,7 +305,7 @@ class FormApi {
     };
     this.handleSubmit = async () => {
       var _a2, _b, _c, _d;
-      this.store.setState((old) => ({
+      this.baseStore.setState((old) => ({
         ...old,
         // Submission attempts mark the form as not submitted
         isSubmitted: false,
@@ -317,9 +313,9 @@ class FormApi {
         submissionAttempts: old.submissionAttempts + 1
       }));
       if (!this.state.canSubmit) return;
-      this.store.setState((d) => ({ ...d, isSubmitting: true }));
+      this.baseStore.setState((d) => ({ ...d, isSubmitting: true }));
       const done = () => {
-        this.store.setState((prev) => ({ ...prev, isSubmitting: false }));
+        this.baseStore.setState((prev) => ({ ...prev, isSubmitting: false }));
       };
       await this.validateAllFields("submit");
       if (!this.state.isValid) {
@@ -330,7 +326,7 @@ class FormApi {
         });
         return;
       }
-      this.store.batch(() => {
+      batch(() => {
         void Object.values(this.fieldInfo).forEach((field) => {
           var _a3, _b2, _c2;
           (_c2 = (_b2 = (_a3 = field.instance) == null ? void 0 : _a3.options.listeners) == null ? void 0 : _b2.onSubmit) == null ? void 0 : _c2.call(_b2, {
@@ -341,8 +337,8 @@ class FormApi {
       });
       try {
         await ((_d = (_c = this.options).onSubmit) == null ? void 0 : _d.call(_c, { value: this.state.values, formApi: this }));
-        this.store.batch(() => {
-          this.store.setState((prev) => ({ ...prev, isSubmitted: true }));
+        batch(() => {
+          this.baseStore.setState((prev) => ({ ...prev, isSubmitted: true }));
           done();
         });
       } catch (err) {
@@ -368,12 +364,15 @@ class FormApi {
       });
     };
     this.setFieldMeta = (field, updater) => {
-      this.store.setState((prev) => {
+      this.baseStore.setState((prev) => {
         return {
           ...prev,
-          fieldMeta: {
-            ...prev.fieldMeta,
-            [field]: functionalUpdate(updater, prev.fieldMeta[field])
+          fieldMetaBase: {
+            ...prev.fieldMetaBase,
+            [field]: functionalUpdate(
+              updater,
+              prev.fieldMetaBase[field]
+            )
           }
         };
       });
@@ -398,7 +397,7 @@ class FormApi {
     };
     this.setFieldValue = (field, updater, opts2) => {
       const dontUpdateMeta = (opts2 == null ? void 0 : opts2.dontUpdateMeta) ?? false;
-      this.store.batch(() => {
+      batch(() => {
         if (!dontUpdateMeta) {
           this.setFieldMeta(field, (prev) => ({
             ...prev,
@@ -411,7 +410,7 @@ class FormApi {
             }
           }));
         }
-        this.store.setState((prev) => {
+        this.baseStore.setState((prev) => {
           return {
             ...prev,
             values: setBy(prev.values, field, updater)
@@ -420,10 +419,10 @@ class FormApi {
       });
     };
     this.deleteField = (field) => {
-      this.store.setState((prev) => {
+      this.baseStore.setState((prev) => {
         const newState = { ...prev };
         newState.values = deleteBy(newState.values, field);
-        delete newState.fieldMeta[field];
+        delete newState.fieldMetaBase[field];
         return newState;
       });
       delete this.fieldInfo[field];
@@ -512,80 +511,131 @@ class FormApi {
       this.validateField(`${field}[${index1}]`, "change");
       this.validateField(`${field}[${index2}]`, "change");
     };
-    this.store = new Store(
+    this.baseStore = new Store(
       getDefaultFormState({
         ...opts == null ? void 0 : opts.defaultState,
         values: (opts == null ? void 0 : opts.defaultValues) ?? ((_a = opts == null ? void 0 : opts.defaultState) == null ? void 0 : _a.values),
         isFormValid: true
-      }),
-      {
-        onUpdate: () => {
-          var _a2, _b, _c, _d;
-          let { state } = this.store;
-          const fieldMetaValues = Object.values(state.fieldMeta);
-          const isFieldsValidating = fieldMetaValues.some(
-            (field) => field == null ? void 0 : field.isValidating
-          );
-          const isFieldsValid = !fieldMetaValues.some(
-            (field) => (field == null ? void 0 : field.errorMap) && isNonEmptyArray(Object.values(field.errorMap).filter(Boolean))
-          );
-          const isTouched = fieldMetaValues.some((field) => field == null ? void 0 : field.isTouched);
-          const isBlurred = fieldMetaValues.some((field) => field == null ? void 0 : field.isBlurred);
-          if (isTouched && ((_a2 = state == null ? void 0 : state.errorMap) == null ? void 0 : _a2.onMount)) {
-            state.errorMap.onMount = void 0;
+      })
+    );
+    this.fieldMetaDerived = new Derived({
+      deps: [this.baseStore],
+      fn: ({ prevDepVals, currDepVals, prevVal: _prevVal }) => {
+        var _a2;
+        const prevVal = _prevVal;
+        const prevBaseStore = prevDepVals == null ? void 0 : prevDepVals[0];
+        const currBaseStore = currDepVals[0];
+        const fieldMeta = {};
+        for (const fieldName of Object.keys(
+          currBaseStore.fieldMetaBase
+        )) {
+          const currBaseVal = currBaseStore.fieldMetaBase[fieldName];
+          const prevBaseVal = prevBaseStore == null ? void 0 : prevBaseStore.fieldMetaBase[fieldName];
+          let fieldErrors = (_a2 = prevVal == null ? void 0 : prevVal[fieldName]) == null ? void 0 : _a2.errors;
+          if (!prevBaseVal || currBaseVal.errorMap !== prevBaseVal.errorMap) {
+            fieldErrors = Object.values(currBaseVal.errorMap ?? {}).filter(
+              (val) => val !== void 0
+            );
           }
-          const isDirty = fieldMetaValues.some((field) => field == null ? void 0 : field.isDirty);
-          const isPristine = !isDirty;
-          const hasOnMountError = Boolean(
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            ((_b = state.errorMap) == null ? void 0 : _b.onMount) || // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            fieldMetaValues.some((f) => {
-              var _a3;
-              return (_a3 = f == null ? void 0 : f.errorMap) == null ? void 0 : _a3.onMount;
-            })
-          );
-          const isValidating = isFieldsValidating || state.isFormValidating;
-          state.errors = Object.values(state.errorMap).reduce((prev, curr) => {
-            if (curr === void 0) return prev;
-            if (typeof curr === "string") {
-              prev.push(curr);
-              return prev;
-            } else if (curr && isFormValidationError(curr)) {
-              prev.push(curr.form);
-              return prev;
-            }
-            return prev;
-          }, []);
-          const isFormValid = state.errors.length === 0;
-          const isValid = isFieldsValid && isFormValid;
-          const canSubmit = state.submissionAttempts === 0 && !isTouched && !hasOnMountError || !isValidating && !state.isSubmitting && isValid;
-          state = {
-            ...state,
-            isFieldsValidating,
-            isFieldsValid,
-            isFormValid,
-            isValid,
-            canSubmit,
-            isTouched,
-            isBlurred,
-            isPristine,
-            isDirty
+          const isFieldPristine = !currBaseVal.isDirty;
+          fieldMeta[fieldName] = {
+            ...currBaseVal,
+            errors: fieldErrors,
+            isPristine: isFieldPristine
           };
-          this.state = state;
-          this.store.state = this.state;
-          const transformArray = ((_c = this.options.transform) == null ? void 0 : _c.deps) ?? [];
-          const shouldTransform = transformArray.length !== this.prevTransformArray.length || transformArray.some((val, i) => val !== this.prevTransformArray[i]);
-          if (shouldTransform) {
-            (_d = this.options.transform) == null ? void 0 : _d.fn(this);
-            this.store.state = this.state;
-            this.prevTransformArray = transformArray;
-          }
         }
+        return fieldMeta;
       }
-    );
-    this.state = this.store.state;
+    });
+    this.store = new Derived({
+      deps: [this.baseStore, this.fieldMetaDerived],
+      fn: ({ prevDepVals, currDepVals, prevVal: _prevVal }) => {
+        var _a2, _b, _c, _d;
+        const prevVal = _prevVal;
+        const prevBaseStore = prevDepVals == null ? void 0 : prevDepVals[0];
+        const currBaseStore = currDepVals[0];
+        const fieldMetaValues = Object.values(currBaseStore.fieldMetaBase);
+        const isFieldsValidating = fieldMetaValues.some(
+          (field) => field == null ? void 0 : field.isValidating
+        );
+        const isFieldsValid = !fieldMetaValues.some(
+          (field) => (field == null ? void 0 : field.errorMap) && isNonEmptyArray(Object.values(field.errorMap).filter(Boolean))
+        );
+        const isTouched = fieldMetaValues.some((field) => field == null ? void 0 : field.isTouched);
+        const isBlurred = fieldMetaValues.some((field) => field == null ? void 0 : field.isBlurred);
+        const shouldInvalidateOnMount = (
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          isTouched && ((_a2 = currBaseStore == null ? void 0 : currBaseStore.errorMap) == null ? void 0 : _a2.onMount)
+        );
+        const isDirty = fieldMetaValues.some((field) => field == null ? void 0 : field.isDirty);
+        const isPristine = !isDirty;
+        const hasOnMountError = Boolean(
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          ((_b = currBaseStore.errorMap) == null ? void 0 : _b.onMount) || // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          fieldMetaValues.some((f) => {
+            var _a3;
+            return (_a3 = f == null ? void 0 : f.errorMap) == null ? void 0 : _a3.onMount;
+          })
+        );
+        const isValidating = !!isFieldsValidating;
+        let errors = (prevVal == null ? void 0 : prevVal.errors) ?? [];
+        if (!prevBaseStore || currBaseStore.errorMap !== prevBaseStore.errorMap) {
+          errors = Object.values(currBaseStore.errorMap).reduce(
+            (prev, curr) => {
+              if (curr === void 0) return prev;
+              if (typeof curr === "string") {
+                prev.push(curr);
+                return prev;
+              } else if (curr && isFormValidationError(curr)) {
+                prev.push(curr.form);
+                return prev;
+              }
+              return prev;
+            },
+            []
+          );
+        }
+        const isFormValid = errors.length === 0;
+        const isValid = isFieldsValid && isFormValid;
+        const canSubmit = currBaseStore.submissionAttempts === 0 && !isTouched && !hasOnMountError || !isValidating && !currBaseStore.isSubmitting && isValid;
+        let errorMap = currBaseStore.errorMap;
+        if (shouldInvalidateOnMount) {
+          errors = errors.filter(
+            (err) => err !== currBaseStore.errorMap.onMount
+          );
+          errorMap = Object.assign(errorMap, { onMount: void 0 });
+        }
+        let state = {
+          ...currBaseStore,
+          errorMap,
+          fieldMeta: this.fieldMetaDerived.state,
+          errors,
+          isFieldsValidating,
+          isFieldsValid,
+          isFormValid,
+          isValid,
+          canSubmit,
+          isTouched,
+          isBlurred,
+          isPristine,
+          isDirty
+        };
+        const transformArray = ((_c = this.options.transform) == null ? void 0 : _c.deps) ?? [];
+        const shouldTransform = transformArray.length !== this.prevTransformArray.length || transformArray.some((val, i) => val !== this.prevTransformArray[i]);
+        if (shouldTransform) {
+          const newObj = Object.assign({}, this, { state });
+          (_d = this.options.transform) == null ? void 0 : _d.fn(newObj);
+          state = newObj.state;
+          this.prevTransformArray = transformArray;
+        }
+        return state;
+      }
+    });
     this.update(opts || {});
   }
+  get state() {
+    return this.store.state;
+  }
   /**
    * @private
    */
@@ -606,7 +656,7 @@ class FormApi {
    * Updates the form's errorMap
    */
   setErrorMap(errorMap) {
-    this.store.setState((prev) => ({
+    this.baseStore.setState((prev) => ({
       ...prev,
       errorMap: {
         ...prev.errorMap,