chore: update jsdoc and docs

Author: AlemTuzlak

.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

docs/framework/react/reference/index.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
 

docs/framework/solid/reference/functions/tanstackdevtools.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 />,
+  }
+```

docs/framework/solid/reference/type-aliases/tanstackdevtoolssolidplugin.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
 

docs/reference/classes/tanstackdevtoolscore.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
+       },
+     },
+   ],
+ })
+```

docs/reference/interfaces/tanstackdevtoolsinit.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>"
+  }
+```

docs/reference/interfaces/tanstackdevtoolsplugin.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)

docs/reference/type-aliases/tanstackdevtoolsconfig.md

@@ -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",

package.json

@@ -2,8 +2,8 @@ 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/jsx-runtime'
+
 
 export const MainPanel = (props: {
   isOpen: Accessor<boolean>