fix(core, devtools): optimize event emissions

Author: harry-whorlow

.changeset/fast-doors-hug.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/form-devtools': patch
+'@tanstack/react-form': patch
+'@tanstack/form-core': patch
+---
+
+Optimise Optimises event client emissions. Minor layout tweeks

examples/react/devtools/src/index.tsx

@@ -10,6 +10,9 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
 
-    <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
+    <TanStackDevtools
+      plugins={[FormDevtoolsPlugin()]}
+      // eventBusConfig={{ debug: true }}
+    />
   </StrictMode>,
 )

packages/form-core/package.json

@@ -52,6 +52,7 @@
   ],
   "dependencies": {
     "@tanstack/devtools-event-client": "^0.2.5",
+    "@tanstack/pacer": "^0.15.3",
     "@tanstack/store": "^0.7.5",
     "uuid": "^13.0.0"
   },

packages/form-core/src/EventClient.ts

@@ -9,6 +9,11 @@ type ExtractEventNames<T> = T extends `${string}:${infer EventName}`
 export type BroadcastFormState = {
   id: string
   state: AnyFormState
+}
+
+export type BroadcastFormApi = {
+  id: string
+  state: AnyFormState
   options: AnyFormOptions
 }
 
@@ -33,29 +38,20 @@ export type BroadcastFormSubmissionState =
       successful: true
     }
 
-export type BroadcastFormUnmounted = {
-  id: string
-}
-
-export type RequestFormState = {
+export type BroadcastFormId = {
   id: string
 }
 
-export type RequestFormReset = {
-  id: string
-}
+type EventMap = {
+  'form-devtools:form-state': BroadcastFormState
+  'form-devtools:form-api': BroadcastFormApi
+  'form-devtools:form-submission': BroadcastFormSubmissionState
 
-export type RequestFormForceReset = {
-  id: string
-}
+  'form-devtools:request-form-state': BroadcastFormId
+  'form-devtools:request-form-reset': BroadcastFormId
+  'form-devtools:request-form-force-submit': BroadcastFormId
 
-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
+  'form-devtools:form-unmounted': BroadcastFormId
 }
 
 export type EventClientEventMap = keyof EventMap

packages/form-core/src/FormApi.ts

@@ -1,4 +1,5 @@
 import { Derived, Store, batch } from '@tanstack/store'
+import { throttle } from '@tanstack/pacer'
 import { v4 as uuidv4 } from 'uuid'
 import {
   deleteBy,
@@ -21,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,
@@ -1296,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,
@@ -1376,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,
@@ -1454,6 +1459,12 @@ export class FormApi<
         ),
       )
     })
+
+    formEventClient.emit('form-api', {
+      id: this._formId,
+      state: this.store.state,
+      options: this.options,
+    })
   }
 
   /**
@@ -2035,7 +2046,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,
@@ -2059,7 +2070,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,
@@ -2098,7 +2109,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,
@@ -2112,7 +2123,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,

packages/form-devtools/package.json

@@ -52,7 +52,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools-ui": "^0.3.5",
+    "@tanstack/devtools-ui": "^0.4.1",
     "@tanstack/form-core": "workspace:*",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",

packages/form-devtools/src/components/ActionButtons.tsx

@@ -6,7 +6,7 @@ import type { Accessor } from 'solid-js'
 import type { DevtoolsFormState } from '../contexts/eventClientContext'
 
 type ActionButtonsProps = {
-  selectedInstance: Accessor<DevtoolsFormState | null>
+  selectedInstance: Accessor<DevtoolsFormState | null | undefined>
 }
 
 export function ActionButtons(props: ActionButtonsProps) {