@tanstack/form-core 1.24.3 → 1.24.5

package/dist/esm/EventClient.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventClient.js","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":[],"mappings":";AAgEA,MAAM,wBAAwB,YAAsB;AAAA,EAClD,cAAc;AACZ,UAAM;AAAA,MACJ,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACF;AAEO,MAAM,kBAAkB,IAAI,gBAAA;"}
+{"version":3,"file":"EventClient.js","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":[],"mappings":";AA4DA,MAAM,wBAAwB,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/esm/FormApi.d.ts

@@ -206,7 +206,7 @@ export type BaseFormState<in out TFormData, in out TOnMount extends undefined |
     /**
      * A record of field metadata for each field in the form, not including the derived properties, like `errors` and such
      */
-    fieldMetaBase: Record<DeepKeys<TFormData>, AnyFieldMetaBase>;
+    fieldMetaBase: Partial<Record<DeepKeys<TFormData>, AnyFieldMetaBase>>;
     /**
      * A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called.
      *
@@ -297,7 +297,7 @@ export type DerivedFormState<in out TFormData, in out TOnMount extends undefined
     /**
      * A record of field metadata for each field in the form.
      */
-    fieldMeta: Record<DeepKeys<TFormData>, AnyFieldMeta>;
+    fieldMeta: Partial<Record<DeepKeys<TFormData>, AnyFieldMeta>>;
 };
 export interface FormState<in out TFormData, in out TOnMount extends undefined | FormValidateOrFn<TFormData>, in out TOnChange extends undefined | FormValidateOrFn<TFormData>, in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, in out TOnBlur extends undefined | FormValidateOrFn<TFormData>, in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>, in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>, in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>> extends BaseFormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>, DerivedFormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer> {
 }
@@ -321,7 +321,7 @@ export declare class FormApi<in out TFormData, in out TOnMount extends undefined
      */
     options: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
     baseStore: Store<BaseFormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>>;
-    fieldMetaDerived: Derived<Record<DeepKeys<TFormData>, AnyFieldMeta>>;
+    fieldMetaDerived: Derived<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>['fieldMeta']>;
     store: Derived<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer>>;
     /**
      * A record of field information for each field in the form.
@@ -430,7 +430,7 @@ export declare class FormApi<in out TFormData, in out TOnMount extends undefined
     /**
      * resets every field's meta
      */
-    resetFieldMeta: <TField extends DeepKeys<TFormData>>(fieldMeta: Record<TField, AnyFieldMeta>) => Record<TField, AnyFieldMeta>;
+    resetFieldMeta: <TField extends DeepKeys<TFormData>>(fieldMeta: Partial<Record<TField, AnyFieldMeta>>) => Partial<Record<TField, AnyFieldMeta>>;
     /**
      * Sets the value of the specified field and optionally updates the touched state.
      */

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;
@@ -807,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
@@ -895,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,
@@ -912,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,
@@ -945,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
@@ -958,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,