feat(devtools): update to devtools utils, add solid devtools

.changeset/config.json

@@ -8,7 +8,13 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "fixed": [],
+  "fixed": [
+    [
+      "@tanstack/form-devtools",
+      "@tanstack/react-form-devtools",
+      "@tanstack/solid-form-devtools"
+    ]
+  ],
   "linked": [],
   "ignore": []
 }

.changeset/petite-ducks-cough.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/react-form-devtools': minor
+'@tanstack/solid-form-devtools': minor
+'@tanstack/form-devtools': minor
+---
+
+Migrated to devtools utils, adds support for solid devtools. Renamed plugin to reflect tanstack plugin schema (FormDevtoolsPlugin to formDevtoolsPlugin)

codecov.yml

@@ -9,3 +9,4 @@ coverage:
 ignore:
   - 'packages/form-devtools'
   - 'packages/react-form-devtools'
+  - 'packages/solid-form-devtools'

docs/framework/react/guides/devtools.md

@@ -30,19 +30,19 @@ createRoot(document.getElementById('root')!).render(
 )
 ```
 
-Import the `FormDevtoolsPlugin` from **TanStack Form** and provide it to the `TanStackDevtools` component.
+Import the `formDevtoolsPlugin` from **TanStack Form** and provide it to the `TanStackDevtools` component.
 
 ```tsx
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
 
-    <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
+    <TanStackDevtools plugins={[formDevtoolsPlugin()]} />
   </StrictMode>,
 )
 ```

docs/framework/solid/guides/devtools.md

@@ -0,0 +1,60 @@
+---
+id: devtools
+title: Devtools
+---
+
+TanStack Form comes with a ready to go suit of devtools.
+
+## Setup
+
+Install the [TanStack Devtools](https://tanstack.com/devtools/latest/docs/quick-start) library and the [TanStack Form plugin](http://npmjs.com/package/@tanstack/solid-form-devtools), from the framework adapter that your working in (in this case `@tanstack/solid-devtools`, and `@tanstack/solid-form-devtools`).
+
+```bash
+npm i @tanstack/solid-devtools
+npm i @tanstack/solid-form-devtools
+```
+
+Next in the root of your application import the `TanStackDevtools`.
+
+```tsx
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+
+import App from './App'
+
+render(
+  () => (
+    <>
+      <App />
+
+      <TanStackDevtools />
+    </>
+  ),
+  root!,
+)
+```
+
+Import the `formDevtoolsPlugin` from **TanStack Form** and provide it to the `TanStackDevtools` component.
+
+```tsx
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { formDevtoolsPlugin } from '@tanstack/solid-form-devtools'
+
+import App from './app'
+
+const root = document.getElementById('root')
+
+render(
+  () => (
+    <>
+      <App />
+
+      <TanStackDevtools plugins={[formDevtoolsPlugin()]} />
+    </>
+  ),
+  root!,
+)
+```
+
+Finally add any additional configuration you desire to the `TanStackDevtools` component, more information can be found under the [TanStack Devtools Configuration](https://tanstack.com/devtools/) section.
+
+A complete working example can be found in our [examples section](https://tanstack.com/form/latest/docs/framework/solid/examples/devtools).

examples/react/array/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "react": "^19.0.0",

examples/react/array/src/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import { useForm } from '@tanstack/react-form'
 
 interface Person {
@@ -85,7 +85,7 @@ createRoot(rootElement).render(
 
     <TanStackDevtools
       config={{ hideUntilHover: true }}
-      plugins={[FormDevtoolsPlugin()]}
+      plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,
 )

examples/react/devtools/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "react": "^19.0.0",

examples/react/devtools/src/index.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 
 import App from './App'
 
@@ -11,7 +11,7 @@ createRoot(document.getElementById('root')!).render(
     <App />
 
     <TanStackDevtools
-      plugins={[FormDevtoolsPlugin()]}
+      plugins={[formDevtoolsPlugin()]}
       eventBusConfig={{ debug: true }}
     />
   </StrictMode>,

examples/react/dynamic/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "react": "^19.0.0",

examples/react/dynamic/src/index.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'
 import { z } from 'zod'
 
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import { revalidateLogic, useForm } from '@tanstack/react-form'
 
 import type { AnyFieldApi } from '@tanstack/react-form'
@@ -125,7 +125,7 @@ createRoot(rootElement).render(
 
     <TanStackDevtools
       config={{ hideUntilHover: true }}
-      plugins={[FormDevtoolsPlugin()]}
+      plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,
 )

examples/react/field-errors-from-form-validators/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "react": "^19.0.0",

examples/react/field-errors-from-form-validators/src/index.tsx

@@ -2,7 +2,7 @@ import { createRoot } from 'react-dom/client'
 
 import { useForm } from '@tanstack/react-form'
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 
 async function sleep(ms: number) {
   return new Promise((resolve) => {
@@ -141,7 +141,7 @@ createRoot(rootElement).render(
 
     <TanStackDevtools
       config={{ hideUntilHover: true }}
-      plugins={[FormDevtoolsPlugin()]}
+      plugins={[formDevtoolsPlugin()]}
     />
   </>,
 )

examples/react/large-form/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "react": "^19.0.0",

examples/react/large-form/src/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 
 import App from './App.tsx'
 
@@ -14,7 +14,7 @@ createRoot(rootElement).render(
 
     <TanStackDevtools
       config={{ hideUntilHover: true }}
-      plugins={[FormDevtoolsPlugin()]}
+      plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,
 )

examples/react/query-integration/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "@tanstack/react-query": "^5.89.0",

examples/react/query-integration/src/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import { useForm } from '@tanstack/react-form'
 import {
   QueryClient,
@@ -174,7 +174,7 @@ createRoot(rootElement).render(
 
     <TanStackDevtools
       config={{ hideUntilHover: true }}
-      plugins={[FormDevtoolsPlugin()]}
+      plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,
 )

examples/react/simple/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "react": "^19.0.0",

examples/react/simple/src/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import { useForm } from '@tanstack/react-form'
 
 import type { AnyFieldApi } from '@tanstack/react-form'
@@ -128,7 +128,7 @@ createRoot(rootElement).render(
 
     <TanStackDevtools
       config={{ hideUntilHover: true }}
-      plugins={[FormDevtoolsPlugin()]}
+      plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,
 )

examples/react/standard-schema/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "arktype": "^2.1.22",

examples/react/standard-schema/src/index.tsx

@@ -7,7 +7,7 @@ import * as v from 'valibot'
 import { z } from 'zod'
 
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 import { useForm } from '@tanstack/react-form'
 
 import type { AnyFieldApi } from '@tanstack/react-form'
@@ -155,7 +155,7 @@ createRoot(rootElement).render(
 
     <TanStackDevtools
       config={{ hideUntilHover: true }}
-      plugins={[FormDevtoolsPlugin()]}
+      plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,
 )

examples/react/tanstack-start/package.json

@@ -9,7 +9,7 @@
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "@tanstack/react-router": "1.131.50",

examples/react/tanstack-start/src/routes/__root.tsx

@@ -1,7 +1,7 @@
 import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
 
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 
 export const Route = createRootRoute({
   head: () => ({
@@ -30,7 +30,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       <body>
         {children}
         <Scripts />
-        <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
+        <TanStackDevtools plugins={[formDevtoolsPlugin()]} />
       </body>
     </html>
   )

examples/react/ui-libraries/package.json

@@ -14,7 +14,7 @@
     "@mantine/core": "7.17.8",
     "@mantine/hooks": "7.17.8",
     "@mui/material": "6.5.0",
-    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-devtools": "^0.7.7",
     "@tanstack/react-form": "^1.23.8",
     "@tanstack/react-form-devtools": "^0.1.8",
     "@yme/lay-postcss": "0.1.0",

examples/react/ui-libraries/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { FormDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
 
 import { createRoot } from 'react-dom/client'
 import { createTheme } from '@mui/material/styles'
@@ -41,7 +41,7 @@ createRoot(rootElement).render(
 
     <TanStackDevtools
       config={{ hideUntilHover: true }}
-      plugins={[FormDevtoolsPlugin()]}
+      plugins={[formDevtoolsPlugin()]}
     />
   </React.StrictMode>,
 )