Merge pull request #8 from TanStack/chore/update-docs

AlemTuzlak · web-flow · commit 64ebecef734d · 2025-08-01T16:20:58.000+02:00
chore: update jsdoc and docs
diff --git a/.changeset/weak-items-sin.md b/.changeset/weak-items-sin.md
@@ -0,0 +1,7 @@
+---
+'@tanstack/react-devtools': patch
+'@tanstack/solid-devtools': patch
+'@tanstack/devtools': patch
+---
+
+Updated the JSdoc descriptions for easier usage
diff --git a/docs/framework/react/reference/index.md b/docs/framework/react/reference/index.md
diff --git a/docs/framework/solid/reference/functions/tanstackdevtools.md b/docs/framework/solid/reference/functions/tanstackdevtools.md
@@ -11,7 +11,7 @@ title: TanstackDevtools
 function TanstackDevtools(__namedParameters): Element
 ```
 
-Defined in: [devtools.tsx:32](https://github.com/TanStack/devtools/blob/main/packages/solid-devtools/src/devtools.tsx#L32)
+Defined in: [devtools.tsx:91](https://github.com/TanStack/devtools/blob/main/packages/solid-devtools/src/devtools.tsx#L91)
 
 ## Parameters
 
diff --git a/docs/framework/solid/reference/type-aliases/tanstackdevtoolssolidplugin.md b/docs/framework/solid/reference/type-aliases/tanstackdevtoolssolidplugin.md
@@ -21,8 +21,43 @@ Defined in: [devtools.tsx:20](https://github.com/TanStack/devtools/blob/main/pac
 name: string | SolidPluginRender;
 ```
 
+Name to be displayed in the devtools UI.
+If a string, it will be used as the plugin name.
+If a function, it will be called with the mount element.
+
+Example:
+```ts
+  {
+    name: "Your Plugin",
+    render: () => <CustomPluginComponent />,
+  }
+```
+or
+```ts
+  {
+    name: <h1>Your Plugin title</h1>,
+    render: () => <CustomPluginComponent />,
+  }
+```
+
 ### render
 
 ```ts
 render: SolidPluginRender;
 ```
+
+The render function can be a SolidJS element or a function that returns a SolidJS element.
+If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
+
+Example:
+```ts
+  {
+    render: () => <CustomPluginComponent />,
+  }
+```
+or
+```ts
+  {
+    render: <CustomPluginComponent />,
+  }
+```
diff --git a/docs/reference/classes/tanstackdevtoolscore.md b/docs/reference/classes/tanstackdevtoolscore.md
@@ -7,7 +7,7 @@ title: TanStackDevtoolsCore
 
 # Class: TanStackDevtoolsCore
 
-Defined in: [core.tsx:15](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L15)
+Defined in: [core.tsx:39](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L39)
 
 ## Constructors
 
@@ -17,7 +17,7 @@ Defined in: [core.tsx:15](https://github.com/TanStack/devtools/blob/main/package
 new TanStackDevtoolsCore(init): TanStackDevtoolsCore
 ```
 
-Defined in: [core.tsx:24](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L24)
+Defined in: [core.tsx:48](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L48)
 
 #### Parameters
 
@@ -37,7 +37,7 @@ Defined in: [core.tsx:24](https://github.com/TanStack/devtools/blob/main/package
 mount<T>(el): void
 ```
 
-Defined in: [core.tsx:32](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L32)
+Defined in: [core.tsx:56](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L56)
 
 #### Type Parameters
 
@@ -61,7 +61,7 @@ Defined in: [core.tsx:32](https://github.com/TanStack/devtools/blob/main/package
 setConfig(config): void
 ```
 
-Defined in: [core.tsx:63](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L63)
+Defined in: [core.tsx:87](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L87)
 
 #### Parameters
 
@@ -81,7 +81,7 @@ Defined in: [core.tsx:63](https://github.com/TanStack/devtools/blob/main/package
 unmount(): void
 ```
 
-Defined in: [core.tsx:55](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L55)
+Defined in: [core.tsx:79](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L79)
 
 #### Returns
 
diff --git a/docs/reference/interfaces/tanstackdevtoolsinit.md b/docs/reference/interfaces/tanstackdevtoolsinit.md
@@ -25,7 +25,11 @@ optional config: Partial<{
 }>;
 ```
 
-Defined in: [core.tsx:11](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L11)
+Defined in: [core.tsx:16](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L16)
+
+Configuration for the devtools shell. These configuration options are used to set the
+initial state of the devtools when it is started for the first time. Afterwards,
+the settings are persisted in local storage and changed through the settings panel.
 
 ***
 
@@ -35,4 +39,22 @@ Defined in: [core.tsx:11](https://github.com/TanStack/devtools/blob/main/package
 optional plugins: TanStackDevtoolsPlugin[];
 ```
 
-Defined in: [core.tsx:12](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L12)
+Defined in: [core.tsx:36](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L36)
+
+Array of plugins to be used in the devtools.
+Each plugin has a `render` function that gives you the dom node to mount into
+
+Example:
+```ts
+ const devtools = new TanStackDevtoolsCore({
+   plugins: [
+     {
+       id: "your-plugin-id",
+       name: "Your Plugin",
+       render: (el) => {
+         // Your render logic here
+       },
+     },
+   ],
+ })
+```
diff --git a/docs/reference/interfaces/tanstackdevtoolsplugin.md b/docs/reference/interfaces/tanstackdevtoolsplugin.md
@@ -17,7 +17,10 @@ Defined in: [context/devtools-context.tsx:15](https://github.com/TanStack/devtoo
 optional id: string;
 ```
 
-Defined in: [context/devtools-context.tsx:17](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L17)
+Defined in: [context/devtools-context.tsx:47](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L47)
+
+Unique identifier for the plugin.
+If not provided, it will be generated based on the name.
 
 ***
 
@@ -27,7 +30,32 @@ Defined in: [context/devtools-context.tsx:17](https://github.com/TanStack/devtoo
 name: string | (el) => void;
 ```
 
-Defined in: [context/devtools-context.tsx:16](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L16)
+Defined in: [context/devtools-context.tsx:42](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L42)
+
+Name to be displayed in the devtools UI.
+If a string, it will be used as the plugin name.
+If a function, it will be called with the mount element.
+
+Example:
+```ts
+  {
+    // If a string, it will be used as the plugin name
+    name: "Your Plugin",
+    render: () => {}
+  }
+```
+or
+
+```ts
+  {
+    // If a function, it will be called with the mount element
+    name: (el) => {
+      el.innerText = "Your Plugin Name"
+      // Your name logic here
+    },
+    render: () => {}
+  }
+```
 
 ***
 
@@ -37,14 +65,28 @@ Defined in: [context/devtools-context.tsx:16](https://github.com/TanStack/devtoo
 render: (el) => void;
 ```
 
-Defined in: [context/devtools-context.tsx:18](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L18)
+Defined in: [context/devtools-context.tsx:61](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L61)
+
+Render the plugin UI by using the provided element. This function will be called
+when the plugin tab is clicked and expected to be mounted.
 
 #### Parameters
 
 ##### el
 
 `HTMLDivElement`
 
+The mount element for the plugin.
+
 #### Returns
 
 `void`
+
+void
+
+Example:
+```ts
+  render: (el) => {
+    el.innerHTML = "<h1>Your Plugin</h1>"
+  }
+```
diff --git a/docs/reference/type-aliases/tanstackdevtoolsconfig.md b/docs/reference/type-aliases/tanstackdevtoolsconfig.md
@@ -11,4 +11,4 @@ title: TanStackDevtoolsConfig
 type TanStackDevtoolsConfig = DevtoolsStore["settings"];
 ```
 
-Defined in: [context/devtools-context.tsx:82](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L82)
+Defined in: [context/devtools-context.tsx:125](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L125)
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "@faker-js/faker": "^9.7.0",
     "@size-limit/preset-small-lib": "^11.2.0",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tanstack/config": "0.18.0",
+    "@tanstack/config": "0.20.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@types/node": "^22.15.2",
     "eslint": "^9.25.1",
diff --git a/packages/devtools/src/components/main-panel.tsx b/packages/devtools/src/components/main-panel.tsx
@@ -2,8 +2,7 @@ import clsx from 'clsx'
 import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
-import type { JSX } from 'solid-js/jsx-runtime'
-import type { Accessor } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
 
 export const MainPanel = (props: {
   isOpen: Accessor<boolean>
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
@@ -9,12 +9,54 @@ import {
 } from '../utils/storage'
 import { initialState } from './devtools-store'
 import type { DevtoolsStore } from './devtools-store'
-import type { Setter } from 'solid-js'
-import type { JSX } from 'solid-js/jsx-runtime'
+import type { JSX, Setter } from 'solid-js'
 
 export interface TanStackDevtoolsPlugin {
+  /**
+   * Name to be displayed in the devtools UI.
+   * If a string, it will be used as the plugin name.
+   * If a function, it will be called with the mount element.
+   *
+   * Example:
+   * ```ts
+   *   {
+   *     // If a string, it will be used as the plugin name
+   *     name: "Your Plugin",
+   *     render: () => {}
+   *   }
+   * ```
+   * or
+   *
+   * ```ts
+   *   {
+   *     // If a function, it will be called with the mount element
+   *     name: (el) => {
+   *       el.innerText = "Your Plugin Name"
+   *       // Your name logic here
+   *     },
+   *     render: () => {}
+   *   }
+   * ```
+   */
   name: string | ((el: HTMLHeadingElement) => void)
+  /**
+   * Unique identifier for the plugin.
+   * If not provided, it will be generated based on the name.
+   */
   id?: string
+  /**
+   * Render the plugin UI by using the provided element. This function will be called
+   * when the plugin tab is clicked and expected to be mounted.
+   * @param el The mount element for the plugin.
+   * @returns void
+   *
+   * Example:
+   * ```ts
+   *   render: (el) => {
+   *     el.innerHTML = "<h1>Your Plugin</h1>"
+   *   }
+   * ```
+   */
   render: (el: HTMLDivElement) => void
 }
 export const DevtoolsContext = createContext<{
diff --git a/packages/devtools/src/core.tsx b/packages/devtools/src/core.tsx
@@ -8,7 +8,31 @@ import type {
 } from './context/devtools-context'
 
 export interface TanStackDevtoolsInit {
+  /**
+   * Configuration for the devtools shell. These configuration options are used to set the
+   * initial state of the devtools when it is started for the first time. Afterwards,
+   * the settings are persisted in local storage and changed through the settings panel.
+   */
   config?: Partial<TanStackDevtoolsConfig>
+  /**
+   * Array of plugins to be used in the devtools.
+   * Each plugin has a `render` function that gives you the dom node to mount into
+   *
+   * Example:
+   * ```ts
+   *  const devtools = new TanStackDevtoolsCore({
+   *    plugins: [
+   *      {
+   *        id: "your-plugin-id",
+   *        name: "Your Plugin",
+   *        render: (el) => {
+   *          // Your render logic here
+   *        },
+   *      },
+   *    ],
+   *  })
+   * ```
+   */
   plugins?: Array<TanStackDevtoolsPlugin>
 }
 
diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
@@ -8,10 +8,11 @@ This package is still under active development and might have breaking changes i
 import { TanstackDevtools } from '@tanstack/react-devtools'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+const queryClient = new QueryClient()
 function App() {
   return (
-    <div>
+    <QueryClientProvider client={queryClient}>
       <h1>My App</h1>
       <TanstackDevtools
         plugins={[
@@ -25,6 +26,31 @@ function App() {
           },
         ]}
       />
+    </QueryClientProvider>
+  )
+}
+```
+
+## Creating plugins
+
+In order to create a plugin for TanStack Devtools, you can use the `plugins` prop of the `TanstackDevtools` component. Here's an example of how to create a simple plugin:
+
+```tsx
+import { TanstackDevtools } from '@tanstack/react-devtools'
+
+function App() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <TanstackDevtools
+        plugins={[
+          {
+            id: 'your-plugin-id',
+            name: 'Your Plugin',
+            render: <CustomPluginComponent />,
+          },
+        ]}
+      />
     </div>
   )
 }
diff --git a/packages/react-devtools/src/devtools.tsx b/packages/react-devtools/src/devtools.tsx
diff --git a/packages/solid-devtools/README.md b/packages/solid-devtools/README.md
diff --git a/packages/solid-devtools/src/devtools.tsx b/packages/solid-devtools/src/devtools.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
