@tanstack/form-core 1.20.0 → 1.21.0

package/dist/esm/EventClient.js

@@ -0,0 +1,13 @@
+import { EventClient } from "@tanstack/devtools-event-client";
+class FormEventClient extends EventClient {
+  constructor() {
+    super({
+      pluginId: "form-devtools"
+    });
+  }
+}
+const formEventClient = new FormEventClient();
+export {
+  formEventClient
+};
+//# sourceMappingURL=EventClient.js.map

package/dist/esm/EventClient.js.map

@@ -0,0 +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;"}

package/dist/esm/FormApi.d.ts

@@ -164,6 +164,7 @@ export interface FormOptions<in out TFormData, in out TOnMount extends undefined
     }) => void;
     transform?: FormTransform<NoInfer<TFormData>, NoInfer<TOnMount>, NoInfer<TOnChange>, NoInfer<TOnChangeAsync>, NoInfer<TOnBlur>, NoInfer<TOnBlurAsync>, NoInfer<TOnSubmit>, NoInfer<TOnSubmitAsync>, NoInfer<TOnDynamic>, NoInfer<TOnDynamicAsync>, NoInfer<TOnServer>, NoInfer<TSubmitMeta>>;
 }
+export type AnyFormOptions = FormOptions<any, any, any, any, any, any, any, any, any, any, any, any>;
 /**
  * An object representing the validation metadata for a field. Not intended for public usage.
  */
@@ -332,18 +333,26 @@ export declare class FormApi<in out TFormData, in out TOnMount extends undefined
      */
     prevTransformArray: unknown[];
     /**
-     *
+     * @private
      */
     timeoutIds: {
         validations: Record<ValidationCause, ReturnType<typeof setTimeout> | null>;
         listeners: Record<ListenerCause, ReturnType<typeof setTimeout> | null>;
         formListeners: Record<ListenerCause, ReturnType<typeof setTimeout> | null>;
     };
+    /**
+     * @private
+     */
+    private _formId;
+    /**
+     * @private
+     */
+    private _devtoolsSubmissionOverride;
     /**
      * Constructs a new `FormApi` instance with the given form options.
      */
     constructor(opts?: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>);
-    get formId(): string | undefined;
+    formId(): string | undefined;
     /**
      * @private
      */

package/dist/esm/FormApi.js

@@ -3,6 +3,7 @@ import { evaluate, getSyncValidatorArray, determineFormLevelErrorSourceAndValue,
 import { defaultValidationLogic } from "./ValidationLogic.js";
 import { standardSchemaValidators, isStandardSchemaValidator } from "./standardSchemaValidator.js";
 import { defaultFieldMeta, metaHelper } from "./metaHelper.js";
+import { formEventClient } from "./EventClient.js";
 function getDefaultFormState(defaultState) {
   return {
     values: defaultState.values ?? {},
@@ -37,9 +38,17 @@ class FormApi {
       const cleanup = () => {
         cleanupFieldMetaDerived();
         cleanupStoreDerived();
+        formEventClient.emit("form-unmounted", {
+          id: this._formId
+        });
       };
       this.options.listeners?.onMount?.({ formApi: this });
       const { onMount } = this.options.validators || {};
+      formEventClient.emit("form-state-change", {
+        id: this._formId,
+        state: this.store.state,
+        options: this.options
+      });
       if (!onMount) return cleanup;
       this.validateSync("mount");
       return cleanup;
@@ -621,6 +630,8 @@ class FormApi {
       listeners: {},
       formListeners: {}
     };
+    this._formId = opts?.formId ?? crypto.randomUUID();
+    this._devtoolsSubmissionOverride = false;
     this.baseStore = new Store(
       getDefaultFormState({
         ...opts?.defaultState,
@@ -770,12 +781,40 @@ class FormApi {
     });
     this.handleSubmit = this.handleSubmit.bind(this);
     this.update(opts || {});
+    this.store.subscribe(() => {
+      formEventClient.emit("form-state-change", {
+        id: this._formId,
+        state: this.store.state,
+        options: this.options
+      });
+    });
+    formEventClient.on("request-form-state", (e) => {
+      if (e.payload.id === this._formId) {
+        formEventClient.emit("form-state-change", {
+          id: this._formId,
+          state: this.store.state,
+          options: this.options
+        });
+      }
+    });
+    formEventClient.on("request-form-reset", (e) => {
+      if (e.payload.id === this._formId) {
+        this.reset();
+      }
+    });
+    formEventClient.on("request-form-force-submit", (e) => {
+      if (e.payload.id === this._formId) {
+        this._devtoolsSubmissionOverride = true;
+        this.handleSubmit();
+        this._devtoolsSubmissionOverride = false;
+      }
+    });
   }
   get state() {
     return this.store.state;
   }
-  get formId() {
-    return this.options.formId;
+  formId() {
+    return this._formId;
   }
   /**
    * @private
@@ -809,7 +848,7 @@ class FormApi {
         }
       );
     });
-    if (!this.state.canSubmit) return;
+    if (!this.state.canSubmit && !this._devtoolsSubmissionOverride) return;
     const submitMetaArg = submitMeta ?? this.options.onSubmitMeta;
     this.baseStore.setState((d) => ({ ...d, isSubmitting: true }));
     const done = () => {
@@ -823,6 +862,13 @@ class FormApi {
         formApi: this,
         meta: submitMetaArg
       });
+      formEventClient.emit("form-submission-state-change", {
+        id: this._formId,
+        submissionAttempt: this.state.submissionAttempts,
+        successful: false,
+        stage: "validateAllFields",
+        errors: Object.values(this.state.fieldMeta).map((meta) => meta.errors).flat()
+      });
       return;
     }
     await this.validate("submit");
@@ -833,6 +879,13 @@ class FormApi {
         formApi: this,
         meta: submitMetaArg
       });
+      formEventClient.emit("form-submission-state-change", {
+        id: this._formId,
+        submissionAttempt: this.state.submissionAttempts,
+        successful: false,
+        stage: "validate",
+        errors: this.state.errors
+      });
       return;
     }
     batch(() => {
@@ -859,6 +912,11 @@ class FormApi {
           isSubmitSuccessful: true
           // Set isSubmitSuccessful to true on successful submission
         }));
+        formEventClient.emit("form-submission-state-change", {
+          id: this._formId,
+          submissionAttempt: this.state.submissionAttempts,
+          successful: true
+        });
         done();
       });
     } catch (err) {
@@ -867,6 +925,13 @@ class FormApi {
         isSubmitSuccessful: false
         // Ensure isSubmitSuccessful is false if an error occurs
       }));
+      formEventClient.emit("form-submission-state-change", {
+        id: this._formId,
+        submissionAttempt: this.state.submissionAttempts,
+        successful: false,
+        stage: "inflight",
+        onError: err
+      });
       done();
       throw err;
     }