@tanstack/form-core 1.20.0 → 1.21.0

package/src/FormApi.ts

@@ -19,6 +19,12 @@ import {
   standardSchemaValidators,
 } from './standardSchemaValidator'
 import { defaultFieldMeta, metaHelper } from './metaHelper'
+import { formEventClient } from './EventClient'
+import type {
+  RequestFormForceReset,
+  RequestFormReset,
+  RequestFormState,
+} from './EventClient'
 import type { ValidationLogicFn } from './ValidationLogic'
 import type {
   StandardSchemaV1,
@@ -510,6 +516,21 @@ export interface FormOptions<
   >
 }
 
+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.
  */
@@ -937,13 +958,21 @@ export class FormApi<
   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: string
+  /**
+   * @private
+   */
+  private _devtoolsSubmissionOverride: boolean
 
   /**
    * Constructs a new `FormApi` instance with the given form options.
@@ -970,6 +999,10 @@ export class FormApi<
       formListeners: {} as Record<ListenerCause, never>,
     }
 
+    this._formId = opts?.formId ?? crypto.randomUUID()
+
+    this._devtoolsSubmissionOverride = false
+
     this.baseStore = new Store(
       getDefaultFormState({
         ...(opts?.defaultState as any),
@@ -1261,10 +1294,42 @@ export 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 formId(): string | undefined {
-    return this.options.formId
+  formId(): string | undefined {
+    return this._formId
   }
 
   /**
@@ -1298,14 +1363,29 @@ export class FormApi<
     const cleanup = () => {
       cleanupFieldMetaDerived()
       cleanupStoreDerived()
+
+      // broadcast form unmount for devtools
+      formEventClient.emit('form-unmounted', {
+        id: this._formId,
+      })
     }
 
     this.options.listeners?.onMount?.({ formApi: this })
 
     const { onMount } = this.options.validators || {}
+
+    // broadcast form state for devtools on mounting
+    formEventClient.emit('form-state-change', {
+      id: this._formId,
+      state: this.store.state,
+      options: this.options,
+    })
+
+    // if no validation skip
     if (!onMount) return cleanup
-    this.validateSync('mount')
 
+    // validate
+    this.validateSync('mount')
     return cleanup
   }
 
@@ -1932,7 +2012,7 @@ export class FormApi<
       )
     })
 
-    if (!this.state.canSubmit) return
+    if (!this.state.canSubmit && !this._devtoolsSubmissionOverride) return
 
     const submitMetaArg =
       submitMeta ?? (this.options.onSubmitMeta as TSubmitMeta)
@@ -1947,11 +2027,22 @@ export class FormApi<
 
     if (!this.state.isFieldsValid) {
       done()
+
       this.options.onSubmitInvalid?.({
         value: this.state.values,
         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) as AnyFieldMeta[])
+          .map((meta: AnyFieldMeta) => meta.errors)
+          .flat(),
+      })
       return
     }
 
@@ -1960,11 +2051,21 @@ export class FormApi<
     // Fields are invalid, do not submit
     if (!this.state.isValid) {
       done()
+
       this.options.onSubmitInvalid?.({
         value: this.state.values,
         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
     }
 
@@ -1995,6 +2096,13 @@ export class FormApi<
           isSubmitted: true,
           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) {
@@ -2002,7 +2110,17 @@ export class FormApi<
         ...prev,
         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
     }
   }

package/src/index.ts

@@ -8,3 +8,4 @@ export * from './formOptions'
 export * from './standardSchemaValidator'
 export * from './FieldGroupApi'
 export * from './ValidationLogic'
+export * from './EventClient'