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

Author: harry-whorlow

.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/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/src/index.tsx

@@ -2,14 +2,14 @@ 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'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
 
-    <TanStackDevtools plugins={[FormDevtoolsPlugin()]} />
+    <TanStackDevtools plugins={[formDevtoolsPlugin()]} />
   </StrictMode>,
 )

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/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/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>,
 )