fix(devtools): fixed theme miss-match and bumps packages (#2072)

harry-whorlow · web-flow · commit 39932c1da28b · 2026-03-11T10:45:48.000+01:00
diff --git a/.changeset/cool-parents-type.md 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/examples/react/array/package.json b/examples/react/array/package.json
@@ -9,13 +9,13 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.8",
     "@tanstack/react-form": "^1.28.4",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.1.1",
diff --git a/examples/react/devtools/package.json b/examples/react/devtools/package.json
@@ -9,13 +9,13 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.8",
     "@tanstack/react-form": "^1.28.4",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.1.1",
diff --git a/examples/react/dynamic/package.json b/examples/react/dynamic/package.json
@@ -9,13 +9,13 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.8",
     "@tanstack/react-form": "^1.28.4",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.1.1",
diff --git a/examples/react/field-errors-from-form-validators/package.json b/examples/react/field-errors-from-form-validators/package.json
@@ -9,13 +9,13 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.8",
     "@tanstack/react-form": "^1.28.4",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.1.1",
diff --git a/examples/react/large-form/package.json b/examples/react/large-form/package.json
@@ -9,13 +9,13 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.8",
     "@tanstack/react-form": "^1.28.4",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.1.1",
diff --git a/examples/react/query-integration/package.json b/examples/react/query-integration/package.json
@@ -9,14 +9,14 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.8",
     "@tanstack/react-form": "^1.28.4",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "@tanstack/react-query": "^5.89.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.1.1",
diff --git a/examples/react/simple/package.json b/examples/react/simple/package.json
@@ -9,13 +9,13 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.8",
     "@tanstack/react-form": "^1.28.4",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.1.1",
diff --git a/examples/react/standard-schema/package.json b/examples/react/standard-schema/package.json
@@ -9,9 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.8",
     "@tanstack/react-form": "^1.28.4",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "arktype": "^2.1.22",
     "effect": "^3.17.14",
     "react": "^19.0.0",
@@ -20,6 +18,8 @@
     "zod": "^3.25.76"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.1.1",
diff --git a/examples/react/tanstack-start/package.json b/examples/react/tanstack-start/package.json
@@ -9,8 +9,6 @@
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.8",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "@tanstack/react-form-start": "^1.28.4",
     "@tanstack/react-router": "^1.134.9",
     "@tanstack/react-start": "^1.134.9",
@@ -19,6 +17,8 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/node": "^24.1.0",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
diff --git a/examples/react/ui-libraries/package.json b/examples/react/ui-libraries/package.json
@@ -14,9 +14,7 @@
     "@mantine/core": "7.17.8",
     "@mantine/hooks": "7.17.8",
     "@mui/material": "6.5.0",
-    "@tanstack/react-devtools": "^0.7.8",
     "@tanstack/react-form": "^1.28.4",
-    "@tanstack/react-form-devtools": "^0.2.17",
     "@yme/lay-postcss": "0.1.0",
     "postcss": "8.5.6",
     "postcss-preset-mantine": "1.18.0",
@@ -25,6 +23,8 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "^0.9.7",
+    "@tanstack/react-form-devtools": "^0.2.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^5.1.1",
diff --git 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/EventClient.ts b/packages/form-core/src/EventClient.ts
@@ -43,15 +43,15 @@ export type BroadcastFormId = {
 }
 
 type EventMap = {
-  'form-devtools:form-state': BroadcastFormState
-  'form-devtools:form-api': BroadcastFormApi
-  'form-devtools:form-submission': BroadcastFormSubmissionState
+  'form-state': BroadcastFormState
+  'form-api': BroadcastFormApi
+  'form-submission': BroadcastFormSubmissionState
 
-  'form-devtools:request-form-state': BroadcastFormId
-  'form-devtools:request-form-reset': BroadcastFormId
-  'form-devtools:request-form-force-submit': BroadcastFormId
+  'request-form-state': BroadcastFormId
+  'request-form-reset': BroadcastFormId
+  'request-form-force-submit': BroadcastFormId
 
-  'form-devtools:form-unmounted': BroadcastFormId
+  'form-unmounted': BroadcastFormId
 }
 
 export type EventClientEventMap = keyof EventMap
diff --git a/packages/form-devtools/package.json b/packages/form-devtools/package.json
@@ -26,23 +26,43 @@
     "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict",
-    "build": "vite build && tsc -p tsconfig.build.json"
+    "build": "tsdown"
   },
   "type": "module",
-  "types": "dist/esm/index.d.ts",
-  "module": "dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      }
+      "workerd": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/server.js"
+      },
+      "browser": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "node": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/server.js"
+      },
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./production": {
-      "import": {
-        "types": "./dist/esm/production.d.ts",
-        "default": "./dist/esm/production.js"
-      }
+      "workerd": {
+        "types": "./dist/production/index.d.ts",
+        "import": "./dist/production/server.js"
+      },
+      "browser": {
+        "types": "./dist/production/index.d.ts",
+        "import": "./dist/production/index.js"
+      },
+      "node": {
+        "types": "./dist/production/index.d.ts",
+        "import": "./dist/production/server.js"
+      },
+      "types": "./dist/production/index.d.ts",
+      "import": "./dist/production/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -52,15 +72,17 @@
     "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",
     "goober": "^2.1.16"
   },
   "devDependencies": {
+    "rolldown-plugin-solid": "^0.2.1",
     "solid-js": "^1.9.9",
+    "tsdown": "^0.21.1",
     "vite": "^7.2.2",
     "vite-plugin-solid": "^2.11.8"
   },
diff --git a/packages/form-devtools/src/components/DetailsPanel.tsx b/packages/form-devtools/src/components/DetailsPanel.tsx
@@ -69,6 +69,7 @@ export function DetailsPanel({ selectedKey }: DetailsPanelProps) {
             <div
               style={{
                 display: 'flex',
+                'flex-wrap': 'wrap',
                 gap: '8px',
               }}
             >
@@ -86,7 +87,7 @@ export function DetailsPanel({ selectedKey }: DetailsPanelProps) {
                     >
                       {fieldName}
                     </div>
-                    <JsonTree copyable value={fieldData as unknown} />
+                    <JsonTree copyable value={fieldData} />
                   </div>
                 )}
               </For>
@@ -98,15 +99,15 @@ export function DetailsPanel({ selectedKey }: DetailsPanelProps) {
             <div class={styles().stateContent}>
               <JsonTree
                 copyable
-                value={store()[selectedIndex()]!.state.values as unknown}
+                value={store()[selectedIndex()]!.state.values}
               />
             </div>
           </div>
 
           <div class={styles().detailSection}>
             <div class={styles().detailSectionHeader}>Form status</div>
             <div class={styles().stateContent}>
-              <JsonTree copyable value={formStatus() as unknown} />
+              <JsonTree copyable value={formStatus()} />
             </div>
           </div>
 
@@ -115,19 +116,16 @@ export function DetailsPanel({ selectedKey }: DetailsPanelProps) {
             <div class={styles().stateContent}>
               <JsonTree
                 copyable
-                value={store()[selectedIndex()]?.options as unknown}
-                collapsePaths={['validators'] as unknown as never}
+                value={store()[selectedIndex()]?.options}
+                collapsePaths={['validators']}
               />
             </div>
           </div>
 
           <div class={styles().detailSection}>
             <div class={styles().detailSectionHeader}>Submission history</div>
             <div class={styles().stateContent}>
-              <JsonTree
-                copyable
-                value={store()[selectedIndex()]?.history as unknown}
-              />
+              <JsonTree copyable value={store()[selectedIndex()]?.history} />
             </div>
           </div>
         </div>
diff --git a/packages/form-devtools/src/core.tsx b/packages/form-devtools/src/core.tsx
@@ -1,10 +1,9 @@
-import { lazy } from 'solid-js'
 import { constructCoreClass } from '@tanstack/devtools-utils/solid'
 
-const Component = lazy(() => import('./components'))
-
 export interface FormDevtoolsInit {}
 
-const [FormDevtoolsCore, FormDevtoolsCoreNoOp] = constructCoreClass(Component)
+const [FormDevtoolsCore, FormDevtoolsCoreNoOp] = constructCoreClass(
+  () => import('./components'),
+)
 
 export { FormDevtoolsCore, FormDevtoolsCoreNoOp }
diff --git a/packages/form-devtools/tsconfig.json b/packages/form-devtools/tsconfig.json
@@ -8,5 +8,11 @@
       "@tanstack/form-core": ["../form-core/src"]
     }
   },
-  "include": ["src", "tests", "eslint.config.js", "vite.config.ts"]
+  "include": [
+    "src",
+    "tests",
+    "eslint.config.js",
+    "vite.config.ts",
+    "tsdown.config.ts"
+  ]
 }
diff --git a/packages/form-devtools/tsdown.config.ts b/packages/form-devtools/tsdown.config.ts
diff --git a/packages/form-devtools/vite.config.ts b/packages/form-devtools/vite.config.ts
diff --git a/packages/react-form-devtools/package.json b/packages/react-form-devtools/package.json
diff --git a/packages/solid-form-devtools/package.json b/packages/solid-form-devtools/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
