@tanstack/form-core 1.24.2 → 1.24.4

package/dist/esm/FormApi.js

@@ -1,4 +1,5 @@
 import { batch, Store, Derived } from "@tanstack/store";
+import { throttle } from "@tanstack/pacer";
 import { evaluate, getSyncValidatorArray, determineFormLevelErrorSourceAndValue, getAsyncValidatorArray, getBy, functionalUpdate, setBy, deleteBy, mergeOpts, uuid, isNonEmptyArray, isGlobalFormValidationError } from "./utils.js";
 import { defaultValidationLogic } from "./ValidationLogic.js";
 import { standardSchemaValidators, isStandardSchemaValidator } from "./standardSchemaValidator.js";
@@ -44,7 +45,7 @@ class FormApi {
       };
       this.options.listeners?.onMount?.({ formApi: this });
       const { onMount } = this.options.validators || {};
-      formEventClient.emit("form-state-change", {
+      formEventClient.emit("form-api", {
         id: this._formId,
         state: this.store.state,
         options: this.options
@@ -78,6 +79,11 @@ class FormApi {
           )
         );
       });
+      formEventClient.emit("form-api", {
+        id: this._formId,
+        state: this.store.state,
+        options: this.options
+      });
     };
     this.reset = (values, opts2) => {
       const { fieldMeta: currentFieldMeta } = this.state;
@@ -504,9 +510,14 @@ class FormApi {
         },
         mergeOpts(options, { dontValidate: true })
       );
-      await this.validateField(field, "change");
+      const dontValidate = options?.dontValidate ?? false;
+      if (!dontValidate) {
+        await this.validateField(field, "change");
+      }
       metaHelper(this).handleArrayFieldMetaShift(field, index, "insert");
-      await this.validateArrayFieldsStartingFrom(field, index, "change");
+      if (!dontValidate) {
+        await this.validateArrayFieldsStartingFrom(field, index, "change");
+      }
     };
     this.replaceFieldValue = async (field, index, value, options) => {
       this.setFieldValue(
@@ -518,8 +529,11 @@ class FormApi {
         },
         mergeOpts(options, { dontValidate: true })
       );
-      await this.validateField(field, "change");
-      await this.validateArrayFieldsStartingFrom(field, index, "change");
+      const dontValidate = options?.dontValidate ?? false;
+      if (!dontValidate) {
+        await this.validateField(field, "change");
+        await this.validateArrayFieldsStartingFrom(field, index, "change");
+      }
     };
     this.removeFieldValue = async (field, index, options) => {
       const fieldValue = this.getFieldValue(field);
@@ -538,8 +552,11 @@ class FormApi {
         const start = `${field}[${lastIndex}]`;
         this.deleteField(start);
       }
-      await this.validateField(field, "change");
-      await this.validateArrayFieldsStartingFrom(field, index, "change");
+      const dontValidate = options?.dontValidate ?? false;
+      if (!dontValidate) {
+        await this.validateField(field, "change");
+        await this.validateArrayFieldsStartingFrom(field, index, "change");
+      }
     };
     this.swapFieldValues = (field, index1, index2, options) => {
       this.setFieldValue(
@@ -552,9 +569,12 @@ class FormApi {
         mergeOpts(options, { dontValidate: true })
       );
       metaHelper(this).handleArrayFieldMetaShift(field, index1, "swap", index2);
-      this.validateField(field, "change");
-      this.validateField(`${field}[${index1}]`, "change");
-      this.validateField(`${field}[${index2}]`, "change");
+      const dontValidate = options?.dontValidate ?? false;
+      if (!dontValidate) {
+        this.validateField(field, "change");
+        this.validateField(`${field}[${index1}]`, "change");
+        this.validateField(`${field}[${index2}]`, "change");
+      }
     };
     this.moveFieldValues = (field, index1, index2, options) => {
       this.setFieldValue(
@@ -567,9 +587,12 @@ class FormApi {
         mergeOpts(options, { dontValidate: true })
       );
       metaHelper(this).handleArrayFieldMetaShift(field, index1, "move", index2);
-      this.validateField(field, "change");
-      this.validateField(`${field}[${index1}]`, "change");
-      this.validateField(`${field}[${index2}]`, "change");
+      const dontValidate = options?.dontValidate ?? false;
+      if (!dontValidate) {
+        this.validateField(field, "change");
+        this.validateField(`${field}[${index1}]`, "change");
+        this.validateField(`${field}[${index2}]`, "change");
+      }
     };
     this.clearFieldValues = (field, options) => {
       const fieldValue = this.getFieldValue(field);
@@ -585,7 +608,10 @@ class FormApi {
           this.deleteField(fieldKey);
         }
       }
-      this.validateField(field, "change");
+      const dontValidate = options?.dontValidate ?? false;
+      if (!dontValidate) {
+        this.validateField(field, "change");
+      }
     };
     this.resetField = (field) => {
       this.baseStore.setState((prev) => {
@@ -787,16 +813,21 @@ class FormApi {
     });
     this.handleSubmit = this.handleSubmit.bind(this);
     this.update(opts || {});
-    this.store.subscribe(() => {
-      formEventClient.emit("form-state-change", {
+    const debouncedDevtoolState = throttle(
+      (state) => formEventClient.emit("form-state", {
         id: this._formId,
-        state: this.store.state,
-        options: this.options
-      });
+        state
+      }),
+      {
+        wait: 300
+      }
+    );
+    this.store.subscribe(() => {
+      debouncedDevtoolState(this.store.state);
     });
     formEventClient.on("request-form-state", (e) => {
       if (e.payload.id === this._formId) {
-        formEventClient.emit("form-state-change", {
+        formEventClient.emit("form-api", {
           id: this._formId,
           state: this.store.state,
           options: this.options
@@ -875,7 +906,7 @@ class FormApi {
         formApi: this,
         meta: submitMetaArg
       });
-      formEventClient.emit("form-submission-state-change", {
+      formEventClient.emit("form-submission", {
         id: this._formId,
         submissionAttempt: this.state.submissionAttempts,
         successful: false,
@@ -892,7 +923,7 @@ class FormApi {
         formApi: this,
         meta: submitMetaArg
       });
-      formEventClient.emit("form-submission-state-change", {
+      formEventClient.emit("form-submission", {
         id: this._formId,
         submissionAttempt: this.state.submissionAttempts,
         successful: false,
@@ -925,7 +956,7 @@ class FormApi {
           isSubmitSuccessful: true
           // Set isSubmitSuccessful to true on successful submission
         }));
-        formEventClient.emit("form-submission-state-change", {
+        formEventClient.emit("form-submission", {
           id: this._formId,
           submissionAttempt: this.state.submissionAttempts,
           successful: true
@@ -938,7 +969,7 @@ class FormApi {
         isSubmitSuccessful: false
         // Ensure isSubmitSuccessful is false if an error occurs
       }));
-      formEventClient.emit("form-submission-state-change", {
+      formEventClient.emit("form-submission", {
         id: this._formId,
         submissionAttempt: this.state.submissionAttempts,
         successful: false,