From a6ef9f51184b293b516f51a906b6bf340cc6863d Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Mon, 9 Mar 2026 20:22:17 +0100 Subject: [PATCH 1/6] fix(devtools): fixed theme miss-match and bumps packages --- .changeset/cool-parents-type.md | 8 ++++ packages/form-core/package.json | 2 +- packages/form-core/src/FormApi.ts | 22 ++++----- packages/form-core/src/utils.ts | 2 +- packages/form-devtools/package.json | 4 +- .../src/components/ActionButtons.tsx | 6 +-- .../src/components/DetailsPanel.tsx | 1 + .../src/contexts/eventClientContext.tsx | 8 ++-- packages/form-devtools/src/core.tsx | 6 +-- packages/react-form-devtools/package.json | 2 +- packages/solid-form-devtools/package.json | 2 +- pnpm-lock.yaml | 46 +++++++++++-------- 12 files changed, 62 insertions(+), 47 deletions(-) create mode 100644 .changeset/cool-parents-type.md diff --git a/.changeset/cool-parents-type.md b/.changeset/cool-parents-type.md new file mode 100644 index 000000000..08309ddf5 --- /dev/null +++ b/.changeset/cool-parents-type.md @@ -0,0 +1,8 @@ +--- +'@tanstack/react-form-devtools': patch +'@tanstack/solid-form-devtools': patch +'@tanstack/form-devtools': patch +'@tanstack/form-core': patch +--- + +Upgrade packages and fixed theme pacakge missmatch diff --git a/packages/form-core/package.json b/packages/form-core/package.json index 073a3c77e..bea3cf956 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -51,7 +51,7 @@ "src" ], "dependencies": { - "@tanstack/devtools-event-client": "^0.4.0", + "@tanstack/devtools-event-client": "^0.4.1", "@tanstack/pacer-lite": "^0.1.1", "@tanstack/store": "^0.9.1" }, diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index d78c39a8a..a42949fc2 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -1369,10 +1369,10 @@ export class FormApi< // devtool requests const cleanupFormStateListener = formEventClient.on( - 'request-form-state', + 'form-devtools:request-form-state', (e) => { if (e.payload.id === this._formId) { - formEventClient.emit('form-api', { + formEventClient.emit('form-devtools:form-api', { id: this._formId, state: this.store.state, options: this.options, @@ -1382,7 +1382,7 @@ export class FormApi< ) const cleanupFormResetListener = formEventClient.on( - 'request-form-reset', + 'form-devtools:request-form-reset', (e) => { if (e.payload.id === this._formId) { this.reset() @@ -1391,7 +1391,7 @@ export class FormApi< ) const cleanupFormForceSubmitListener = formEventClient.on( - 'request-form-force-submit', + 'form-devtools:request-form-force-submit', (e) => { if (e.payload.id === this._formId) { this._devtoolsSubmissionOverride = true @@ -1408,7 +1408,7 @@ export class FormApi< cleanupDevtoolBroadcast.unsubscribe() // broadcast form unmount for devtools - formEventClient.emit('form-unmounted', { + formEventClient.emit('form-devtools:form-unmounted', { id: this._formId, }) } @@ -1418,7 +1418,7 @@ export class FormApi< const { onMount } = this.options.validators || {} // broadcast form state for devtools on mounting - formEventClient.emit('form-api', { + formEventClient.emit('form-devtools:form-api', { id: this._formId, state: this.store.state, options: this.options, @@ -1488,7 +1488,7 @@ export class FormApi< ) }) - formEventClient.emit('form-api', { + formEventClient.emit('form-devtools:form-api', { id: this._formId, state: this.store.state, options: this.options, @@ -2109,7 +2109,7 @@ export class FormApi< meta: submitMetaArg, }) - formEventClient.emit('form-submission', { + formEventClient.emit('form-devtools:form-submission', { id: this._formId, submissionAttempt: this.state.submissionAttempts, successful: false, @@ -2133,7 +2133,7 @@ export class FormApi< meta: submitMetaArg, }) - formEventClient.emit('form-submission', { + formEventClient.emit('form-devtools:form-submission', { id: this._formId, submissionAttempt: this.state.submissionAttempts, successful: false, @@ -2172,7 +2172,7 @@ export class FormApi< isSubmitSuccessful: true, // Set isSubmitSuccessful to true on successful submission })) - formEventClient.emit('form-submission', { + formEventClient.emit('form-devtools:form-submission', { id: this._formId, submissionAttempt: this.state.submissionAttempts, successful: true, @@ -2186,7 +2186,7 @@ export class FormApi< isSubmitSuccessful: false, // Ensure isSubmitSuccessful is false if an error occurs })) - formEventClient.emit('form-submission', { + formEventClient.emit('form-devtools:form-submission', { id: this._formId, submissionAttempt: this.state.submissionAttempts, successful: false, diff --git a/packages/form-core/src/utils.ts b/packages/form-core/src/utils.ts index 71a6ddb69..62f5360ec 100644 --- a/packages/form-core/src/utils.ts +++ b/packages/form-core/src/utils.ts @@ -607,7 +607,7 @@ export function uuid(): string { export const throttleFormState = liteThrottle( (form: AnyFormApi) => - formEventClient.emit('form-state', { + formEventClient.emit('form-devtools:form-state', { id: form.formId, state: form.store.state, }), diff --git a/packages/form-devtools/package.json b/packages/form-devtools/package.json index 50db6c152..0f6c87ceb 100644 --- a/packages/form-devtools/package.json +++ b/packages/form-devtools/package.json @@ -52,8 +52,8 @@ "src" ], "dependencies": { - "@tanstack/devtools-ui": "^0.4.4", - "@tanstack/devtools-utils": "^0.3.0", + "@tanstack/devtools-ui": "^0.5.0", + "@tanstack/devtools-utils": "^0.3.2", "@tanstack/form-core": "workspace:*", "clsx": "^2.1.1", "dayjs": "^1.11.18", diff --git a/packages/form-devtools/src/components/ActionButtons.tsx b/packages/form-devtools/src/components/ActionButtons.tsx index c962b9ded..00a73ad6e 100644 --- a/packages/form-devtools/src/components/ActionButtons.tsx +++ b/packages/form-devtools/src/components/ActionButtons.tsx @@ -17,7 +17,7 @@ export function ActionButtons(props: ActionButtonsProps) {