@tanstack/form-core 1.20.0 → 1.21.0

package/dist/cjs/EventClient.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const devtoolsEventClient = require("@tanstack/devtools-event-client");
+class FormEventClient extends devtoolsEventClient.EventClient {
+  constructor() {
+    super({
+      pluginId: "form-devtools"
+    });
+  }
+}
+const formEventClient = new FormEventClient();
+exports.formEventClient = formEventClient;
+//# sourceMappingURL=EventClient.cjs.map

package/dist/cjs/EventClient.cjs.map

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

package/dist/cjs/EventClient.d.cts

@@ -0,0 +1,52 @@
+import { EventClient } from '@tanstack/devtools-event-client';
+import { AnyFormOptions, AnyFormState } from './FormApi.cjs';
+type ExtractEventNames<T> = T extends `${string}:${infer EventName}` ? EventName : never;
+export type BroadcastFormState = {
+    id: string;
+    state: AnyFormState;
+    options: AnyFormOptions;
+};
+export type BroadcastFormSubmissionState = {
+    id: string;
+    submissionAttempt: number;
+    successful: false;
+    stage: 'validateAllFields' | 'validate';
+    errors: any[];
+} | {
+    id: string;
+    submissionAttempt: number;
+    successful: false;
+    stage: 'inflight';
+    onError: unknown;
+} | {
+    id: string;
+    submissionAttempt: number;
+    successful: true;
+};
+export type BroadcastFormUnmounted = {
+    id: string;
+};
+export type RequestFormState = {
+    id: string;
+};
+export type RequestFormReset = {
+    id: string;
+};
+export type RequestFormForceReset = {
+    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;
+};
+export type EventClientEventMap = keyof EventMap;
+export type EventClientEventNames = ExtractEventNames<EventClientEventMap>;
+declare class FormEventClient extends EventClient<EventMap> {
+    constructor();
+}
+export declare const formEventClient: FormEventClient;
+export {};

package/dist/cjs/FormApi.cjs

@@ -5,6 +5,7 @@ const utils = require("./utils.cjs");
 const ValidationLogic = require("./ValidationLogic.cjs");
 const standardSchemaValidator = require("./standardSchemaValidator.cjs");
 const metaHelper = require("./metaHelper.cjs");
+const EventClient = require("./EventClient.cjs");
 function getDefaultFormState(defaultState) {
   return {
     values: defaultState.values ?? {},
@@ -39,9 +40,17 @@ class FormApi {
       const cleanup = () => {
         cleanupFieldMetaDerived();
         cleanupStoreDerived();
+        EventClient.formEventClient.emit("form-unmounted", {
+          id: this._formId
+        });
       };
       this.options.listeners?.onMount?.({ formApi: this });
       const { onMount } = this.options.validators || {};
+      EventClient.formEventClient.emit("form-state-change", {
+        id: this._formId,
+        state: this.store.state,
+        options: this.options
+      });
       if (!onMount) return cleanup;
       this.validateSync("mount");
       return cleanup;
@@ -623,6 +632,8 @@ class FormApi {
       listeners: {},
       formListeners: {}
     };
+    this._formId = opts?.formId ?? crypto.randomUUID();
+    this._devtoolsSubmissionOverride = false;
     this.baseStore = new store.Store(
       getDefaultFormState({
         ...opts?.defaultState,
@@ -772,12 +783,40 @@ class FormApi {
     });
     this.handleSubmit = this.handleSubmit.bind(this);
     this.update(opts || {});
+    this.store.subscribe(() => {
+      EventClient.formEventClient.emit("form-state-change", {
+        id: this._formId,
+        state: this.store.state,
+        options: this.options
+      });
+    });
+    EventClient.formEventClient.on("request-form-state", (e) => {
+      if (e.payload.id === this._formId) {
+        EventClient.formEventClient.emit("form-state-change", {
+          id: this._formId,
+          state: this.store.state,
+          options: this.options
+        });
+      }
+    });
+    EventClient.formEventClient.on("request-form-reset", (e) => {
+      if (e.payload.id === this._formId) {
+        this.reset();
+      }
+    });
+    EventClient.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
@@ -811,7 +850,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 = () => {
@@ -825,6 +864,13 @@ class FormApi {
         formApi: this,
         meta: submitMetaArg
       });
+      EventClient.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");
@@ -835,6 +881,13 @@ class FormApi {
         formApi: this,
         meta: submitMetaArg
       });
+      EventClient.formEventClient.emit("form-submission-state-change", {
+        id: this._formId,
+        submissionAttempt: this.state.submissionAttempts,
+        successful: false,
+        stage: "validate",
+        errors: this.state.errors
+      });
       return;
     }
     store.batch(() => {
@@ -861,6 +914,11 @@ class FormApi {
           isSubmitSuccessful: true
           // Set isSubmitSuccessful to true on successful submission
         }));
+        EventClient.formEventClient.emit("form-submission-state-change", {
+          id: this._formId,
+          submissionAttempt: this.state.submissionAttempts,
+          successful: true
+        });
         done();
       });
     } catch (err) {
@@ -869,6 +927,13 @@ class FormApi {
         isSubmitSuccessful: false
         // Ensure isSubmitSuccessful is false if an error occurs
       }));
+      EventClient.formEventClient.emit("form-submission-state-change", {
+        id: this._formId,
+        submissionAttempt: this.state.submissionAttempts,
+        successful: false,
+        stage: "inflight",
+        onError: err
+      });
       done();
       throw err;
     }