@tanstack/form-core 1.24.2 → 1.24.4

package/dist/cjs/EventClient.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EventClient.cjs","sources":["../../src/EventClient.ts"],"sourcesContent":["import { EventClient } from '@tanstack/devtools-event-client'\n\nimport type { AnyFormOptions, AnyFormState } from './FormApi'\n\ntype ExtractEventNames<T> = T extends `${string}:${infer EventName}`\n  ? EventName\n  : never\n\nexport type BroadcastFormState = {\n  id: string\n  state: AnyFormState\n  options: AnyFormOptions\n}\n\nexport type BroadcastFormSubmissionState =\n  | {\n      id: string\n      submissionAttempt: number\n      successful: false\n      stage: 'validateAllFields' | 'validate'\n      errors: any[]\n    }\n  | {\n      id: string\n      submissionAttempt: number\n      successful: false\n      stage: 'inflight'\n      onError: unknown\n    }\n  | {\n      id: string\n      submissionAttempt: number\n      successful: true\n    }\n\nexport type BroadcastFormUnmounted = {\n  id: string\n}\n\nexport type RequestFormState = {\n  id: string\n}\n\nexport type RequestFormReset = {\n  id: string\n}\n\nexport type RequestFormForceReset = {\n  id: string\n}\n\ntype EventMap = {\n  'form-devtools:form-state-change': BroadcastFormState\n  'form-devtools:form-submission-state-change': BroadcastFormSubmissionState\n  'form-devtools:form-unmounted': BroadcastFormUnmounted\n  'form-devtools:request-form-state': RequestFormState\n  'form-devtools:request-form-reset': RequestFormReset\n  'form-devtools:request-form-force-submit': RequestFormForceReset\n}\n\nexport type EventClientEventMap = keyof EventMap\n\nexport type EventClientEventNames = ExtractEventNames<EventClientEventMap>\n\nclass FormEventClient extends EventClient<EventMap> {\n  constructor() {\n    super({\n      pluginId: 'form-devtools',\n    })\n  }\n}\n\nexport const formEventClient = new FormEventClient()\n"],"names":["EventClient"],"mappings":";;;AAgEA,MAAM,wBAAwBA,oBAAAA,YAAsB;AAAA,EAClD,cAAc;AACZ,UAAM;AAAA,MACJ,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACF;AAEO,MAAM,kBAAkB,IAAI,gBAAA;;"}
+{"version":3,"file":"EventClient.cjs","sources":["../../src/EventClient.ts"],"sourcesContent":["import { EventClient } from '@tanstack/devtools-event-client'\n\nimport type { AnyFormOptions, AnyFormState } from './FormApi'\n\ntype ExtractEventNames<T> = T extends `${string}:${infer EventName}`\n  ? EventName\n  : never\n\nexport type BroadcastFormState = {\n  id: string\n  state: AnyFormState\n}\n\nexport type BroadcastFormApi = {\n  id: string\n  state: AnyFormState\n  options: AnyFormOptions\n}\n\nexport type BroadcastFormSubmissionState =\n  | {\n      id: string\n      submissionAttempt: number\n      successful: false\n      stage: 'validateAllFields' | 'validate'\n      errors: any[]\n    }\n  | {\n      id: string\n      submissionAttempt: number\n      successful: false\n      stage: 'inflight'\n      onError: unknown\n    }\n  | {\n      id: string\n      submissionAttempt: number\n      successful: true\n    }\n\nexport type BroadcastFormId = {\n  id: string\n}\n\ntype EventMap = {\n  'form-devtools:form-state': BroadcastFormState\n  'form-devtools:form-api': BroadcastFormApi\n  'form-devtools:form-submission': BroadcastFormSubmissionState\n\n  'form-devtools:request-form-state': BroadcastFormId\n  'form-devtools:request-form-reset': BroadcastFormId\n  'form-devtools:request-form-force-submit': BroadcastFormId\n\n  'form-devtools:form-unmounted': BroadcastFormId\n}\n\nexport type EventClientEventMap = keyof EventMap\n\nexport type EventClientEventNames = ExtractEventNames<EventClientEventMap>\n\nclass FormEventClient extends EventClient<EventMap> {\n  constructor() {\n    super({\n      pluginId: 'form-devtools',\n    })\n  }\n}\n\nexport const formEventClient = new FormEventClient()\n"],"names":["EventClient"],"mappings":";;;AA4DA,MAAM,wBAAwBA,oBAAAA,YAAsB;AAAA,EAClD,cAAc;AACZ,UAAM;AAAA,MACJ,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACF;AAEO,MAAM,kBAAkB,IAAI,gBAAA;;"}

package/dist/cjs/EventClient.d.cts

@@ -4,6 +4,10 @@ type ExtractEventNames<T> = T extends `${string}:${infer EventName}` ? EventName
 export type BroadcastFormState = {
     id: string;
     state: AnyFormState;
+};
+export type BroadcastFormApi = {
+    id: string;
+    state: AnyFormState;
     options: AnyFormOptions;
 };
 export type BroadcastFormSubmissionState = {
@@ -23,25 +27,17 @@ export type BroadcastFormSubmissionState = {
     submissionAttempt: number;
     successful: true;
 };
-export type BroadcastFormUnmounted = {
-    id: string;
-};
-export type RequestFormState = {
-    id: string;
-};
-export type RequestFormReset = {
-    id: string;
-};
-export type RequestFormForceReset = {
+export type BroadcastFormId = {
     id: string;
 };
 type EventMap = {
-    'form-devtools:form-state-change': BroadcastFormState;
-    'form-devtools:form-submission-state-change': BroadcastFormSubmissionState;
-    'form-devtools:form-unmounted': BroadcastFormUnmounted;
-    'form-devtools:request-form-state': RequestFormState;
-    'form-devtools:request-form-reset': RequestFormReset;
-    'form-devtools:request-form-force-submit': RequestFormForceReset;
+    'form-devtools:form-state': BroadcastFormState;
+    'form-devtools:form-api': BroadcastFormApi;
+    'form-devtools:form-submission': BroadcastFormSubmissionState;
+    'form-devtools:request-form-state': BroadcastFormId;
+    'form-devtools:request-form-reset': BroadcastFormId;
+    'form-devtools:request-form-force-submit': BroadcastFormId;
+    'form-devtools:form-unmounted': BroadcastFormId;
 };
 export type EventClientEventMap = keyof EventMap;
 export type EventClientEventNames = ExtractEventNames<EventClientEventMap>;

package/dist/cjs/FormApi.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const store = require("@tanstack/store");
+const pacer = require("@tanstack/pacer");
 const utils = require("./utils.cjs");
 const ValidationLogic = require("./ValidationLogic.cjs");
 const standardSchemaValidator = require("./standardSchemaValidator.cjs");
@@ -46,7 +47,7 @@ class FormApi {
       };
       this.options.listeners?.onMount?.({ formApi: this });
       const { onMount } = this.options.validators || {};
-      EventClient.formEventClient.emit("form-state-change", {
+      EventClient.formEventClient.emit("form-api", {
         id: this._formId,
         state: this.store.state,
         options: this.options
@@ -80,6 +81,11 @@ class FormApi {
           )
         );
       });
+      EventClient.formEventClient.emit("form-api", {
+        id: this._formId,
+        state: this.store.state,
+        options: this.options
+      });
     };
     this.reset = (values, opts2) => {
       const { fieldMeta: currentFieldMeta } = this.state;
@@ -506,9 +512,14 @@ class FormApi {
         },
         utils.mergeOpts(options, { dontValidate: true })
       );
-      await this.validateField(field, "change");
+      const dontValidate = options?.dontValidate ?? false;
+      if (!dontValidate) {
+        await this.validateField(field, "change");
+      }
       metaHelper.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(
@@ -520,8 +531,11 @@ class FormApi {
         },
         utils.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);
@@ -540,8 +554,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(
@@ -554,9 +571,12 @@ class FormApi {
         utils.mergeOpts(options, { dontValidate: true })
       );
       metaHelper.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(
@@ -569,9 +589,12 @@ class FormApi {
         utils.mergeOpts(options, { dontValidate: true })
       );
       metaHelper.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);
@@ -587,7 +610,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) => {
@@ -789,16 +815,21 @@ class FormApi {
     });
     this.handleSubmit = this.handleSubmit.bind(this);
     this.update(opts || {});
-    this.store.subscribe(() => {
-      EventClient.formEventClient.emit("form-state-change", {
+    const debouncedDevtoolState = pacer.throttle(
+      (state) => EventClient.formEventClient.emit("form-state", {
         id: this._formId,
-        state: this.store.state,
-        options: this.options
-      });
+        state
+      }),
+      {
+        wait: 300
+      }
+    );
+    this.store.subscribe(() => {
+      debouncedDevtoolState(this.store.state);
     });
     EventClient.formEventClient.on("request-form-state", (e) => {
       if (e.payload.id === this._formId) {
-        EventClient.formEventClient.emit("form-state-change", {
+        EventClient.formEventClient.emit("form-api", {
           id: this._formId,
           state: this.store.state,
           options: this.options
@@ -877,7 +908,7 @@ class FormApi {
         formApi: this,
         meta: submitMetaArg
       });
-      EventClient.formEventClient.emit("form-submission-state-change", {
+      EventClient.formEventClient.emit("form-submission", {
         id: this._formId,
         submissionAttempt: this.state.submissionAttempts,
         successful: false,
@@ -894,7 +925,7 @@ class FormApi {
         formApi: this,
         meta: submitMetaArg
       });
-      EventClient.formEventClient.emit("form-submission-state-change", {
+      EventClient.formEventClient.emit("form-submission", {
         id: this._formId,
         submissionAttempt: this.state.submissionAttempts,
         successful: false,
@@ -927,7 +958,7 @@ class FormApi {
           isSubmitSuccessful: true
           // Set isSubmitSuccessful to true on successful submission
         }));
-        EventClient.formEventClient.emit("form-submission-state-change", {
+        EventClient.formEventClient.emit("form-submission", {
           id: this._formId,
           submissionAttempt: this.state.submissionAttempts,
           successful: true
@@ -940,7 +971,7 @@ class FormApi {
         isSubmitSuccessful: false
         // Ensure isSubmitSuccessful is false if an error occurs
       }));
-      EventClient.formEventClient.emit("form-submission-state-change", {
+      EventClient.formEventClient.emit("form-submission", {
         id: this._formId,
         submissionAttempt: this.state.submissionAttempts,
         successful: false,