@tanstack/form-core 1.24.2 → 1.24.4

package/src/FormApi.ts

@@ -1,5 +1,5 @@
 import { Derived, Store, batch } from '@tanstack/store'
-
+import { throttle } from '@tanstack/pacer'
 import {
   deleteBy,
   determineFormLevelErrorSourceAndValue,
@@ -22,11 +22,6 @@ import {
 } 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,
@@ -1297,17 +1292,26 @@ export class FormApi<
 
     this.update(opts || {})
 
+    const debouncedDevtoolState = throttle(
+      (state: AnyFormState) =>
+        formEventClient.emit('form-state', {
+          id: this._formId,
+          state: state,
+        }),
+      {
+        wait: 300,
+      },
+    )
+
+    // devtool broadcasts
     this.store.subscribe(() => {
-      formEventClient.emit('form-state-change', {
-        id: this._formId,
-        state: this.store.state,
-        options: this.options,
-      })
+      debouncedDevtoolState(this.store.state)
     })
 
+    // devtool requests
     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,
@@ -1377,7 +1381,7 @@ export class FormApi<
     const { onMount } = this.options.validators || {}
 
     // broadcast form state for devtools on mounting
-    formEventClient.emit('form-state-change', {
+    formEventClient.emit('form-api', {
       id: this._formId,
       state: this.store.state,
       options: this.options,
@@ -1455,6 +1459,12 @@ export class FormApi<
         ),
       )
     })
+
+    formEventClient.emit('form-api', {
+      id: this._formId,
+      state: this.store.state,
+      options: this.options,
+    })
   }
 
   /**
@@ -2053,7 +2063,7 @@ export class FormApi<
         meta: submitMetaArg,
       })
 
-      formEventClient.emit('form-submission-state-change', {
+      formEventClient.emit('form-submission', {
         id: this._formId,
         submissionAttempt: this.state.submissionAttempts,
         successful: false,
@@ -2077,7 +2087,7 @@ export class FormApi<
         meta: submitMetaArg,
       })
 
-      formEventClient.emit('form-submission-state-change', {
+      formEventClient.emit('form-submission', {
         id: this._formId,
         submissionAttempt: this.state.submissionAttempts,
         successful: false,
@@ -2116,7 +2126,7 @@ export 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,
@@ -2130,7 +2140,7 @@ export 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,
@@ -2318,13 +2328,18 @@ export class FormApi<
       mergeOpts(options, { dontValidate: true }),
     )
 
-    // Validate the whole array + all fields that have shifted
-    await this.validateField(field, 'change')
+    const dontValidate = options?.dontValidate ?? false
+    if (!dontValidate) {
+      // Validate the whole array + all fields that have shifted
+      await this.validateField(field, 'change')
+    }
 
     // Shift down all meta after validating to make sure the new field has been mounted
     metaHelper(this).handleArrayFieldMetaShift(field, index, 'insert')
 
-    await this.validateArrayFieldsStartingFrom(field, index, 'change')
+    if (!dontValidate) {
+      await this.validateArrayFieldsStartingFrom(field, index, 'change')
+    }
   }
 
   /**
@@ -2348,9 +2363,12 @@ export class FormApi<
       mergeOpts(options, { dontValidate: true }),
     )
 
-    // Validate the whole array + all fields that have shifted
-    await this.validateField(field, 'change')
-    await this.validateArrayFieldsStartingFrom(field, index, 'change')
+    const dontValidate = options?.dontValidate ?? false
+    if (!dontValidate) {
+      // Validate the whole array + all fields that have shifted
+      await this.validateField(field, 'change')
+      await this.validateArrayFieldsStartingFrom(field, index, 'change')
+    }
   }
 
   /**
@@ -2385,9 +2403,12 @@ export class FormApi<
       this.deleteField(start as never)
     }
 
-    // Validate the whole array + all fields that have shifted
-    await this.validateField(field, 'change')
-    await this.validateArrayFieldsStartingFrom(field, index, 'change')
+    const dontValidate = options?.dontValidate ?? false
+    if (!dontValidate) {
+      // Validate the whole array + all fields that have shifted
+      await this.validateField(field, 'change')
+      await this.validateArrayFieldsStartingFrom(field, index, 'change')
+    }
   }
 
   /**
@@ -2412,11 +2433,14 @@ export class FormApi<
     // Swap meta
     metaHelper(this).handleArrayFieldMetaShift(field, index1, 'swap', index2)
 
-    // Validate the whole array
-    this.validateField(field, 'change')
-    // Validate the swapped fields
-    this.validateField(`${field}[${index1}]` as DeepKeys<TFormData>, 'change')
-    this.validateField(`${field}[${index2}]` as DeepKeys<TFormData>, 'change')
+    const dontValidate = options?.dontValidate ?? false
+    if (!dontValidate) {
+      // Validate the whole array
+      this.validateField(field, 'change')
+      // Validate the swapped fields
+      this.validateField(`${field}[${index1}]` as DeepKeys<TFormData>, 'change')
+      this.validateField(`${field}[${index2}]` as DeepKeys<TFormData>, 'change')
+    }
   }
 
   /**
@@ -2441,11 +2465,14 @@ export class FormApi<
     // Move meta between index1 and index2
     metaHelper(this).handleArrayFieldMetaShift(field, index1, 'move', index2)
 
-    // Validate the whole array
-    this.validateField(field, 'change')
-    // Validate the moved fields
-    this.validateField(`${field}[${index1}]` as DeepKeys<TFormData>, 'change')
-    this.validateField(`${field}[${index2}]` as DeepKeys<TFormData>, 'change')
+    const dontValidate = options?.dontValidate ?? false
+    if (!dontValidate) {
+      // Validate the whole array
+      this.validateField(field, 'change')
+      // Validate the moved fields
+      this.validateField(`${field}[${index1}]` as DeepKeys<TFormData>, 'change')
+      this.validateField(`${field}[${index2}]` as DeepKeys<TFormData>, 'change')
+    }
   }
 
   /**
@@ -2474,8 +2501,11 @@ export class FormApi<
       }
     }
 
-    // validate array change
-    this.validateField(field, 'change')
+    const dontValidate = options?.dontValidate ?? false
+    if (!dontValidate) {
+      // validate array change
+      this.validateField(field, 'change')
+    }
   }
 
   /**