@tanstack/form-core 1.24.3 → 1.24.5

package/dist/cjs/EventClient.cjs

@@ -4,7 +4,9 @@ const devtoolsEventClient = require("@tanstack/devtools-event-client");
 class FormEventClient extends devtoolsEventClient.EventClient {
   constructor() {
     super({
-      pluginId: "form-devtools"
+      pluginId: "form-devtools",
+      debug: true,
+      reconnectEveryMs: 4e3
     });
   }
 }

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      debug: true,\n      reconnectEveryMs: 4000,\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,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,IAAA,CACnB;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;
@@ -809,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
@@ -897,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,
@@ -914,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,
@@ -947,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
@@ -960,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,