feat: add defaultOpen option to plugins (#245)

* feat: add defaultOpen option to plugins

* ci: apply automated fixes

* chore: docs update

* fix utils

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/chubby-otters-grin.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': minor
+---
+
+add defaultOpen to plugins

.changeset/some-adults-sin.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-utils': patch
+---
+
+extend the plugins to accept config

docs/config.json

@@ -21,6 +21,10 @@
           "label": "Configuration",
           "to": "configuration"
         },
+        {
+          "label": "Plugin Configuration",
+          "to": "plugin-configuration"
+        },
         {
           "label": "Installation",
           "to": "installation"
@@ -148,4 +152,4 @@
       ]
     }
   ]
-}
+}

docs/configuration.md

@@ -112,6 +112,7 @@ createRoot(document.getElementById('root')!).render(
         {
           name: 'TanStack Form',
           render: <FormDevtools />,
+          defaultOpen: true,
         },
       ]}
     />

docs/plugin-configuration.md

@@ -0,0 +1,48 @@
+---
+title: Plugin Configuration
+id: plugin-configuration
+---
+ 
+
+# Plugin Configuration
+
+You can configure TanStack Devtools plugins by passing them as an array to the `plugins` prop of the `TanStackDevtools` component.
+
+Each plugin can have the following configuration options:
+- `render` (required) - A React component that renders the plugin's UI
+- `defaultOpen` (optional) - A boolean that determines if the plugin panel is open by default (default: false).
+- `id` (optional) - A unique identifier for the plugin. If not provided, a random id will be generated.
+
+Here's an example of how to configure plugins in the `TanStackDevtools` component:
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { FormDevtools } from '@tanstack/react-form-devtools'
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <TanStackDevtools
+        plugins={[
+          { 
+            name: 'TanStack Form',
+            render: <FormDevtools />,
+            defaultOpen: true,
+          },
+        ]}
+      />
+    </>
+  )
+}
+```
+
+## Default open
+
+You can set a plugin to be open by default by setting the `defaultOpen` property to `true` when configuring the plugin. This will make the plugin panel open when the devtools are first loaded.
+
+If you only have 1 plugin it will automatically be opened regardless of the `defaultOpen` setting.
+
+The limit to open plugins is at 3 panels at a time. If more than 3 plugins are set to `defaultOpen: true`, only the first 3 will be opened.
+
+This does not override the settings saved in localStorage. If you have previously opened the plugin panel, and selected some plugins to be open or closed, those settings will take precedence over the `defaultOpen` setting.

docs/quick-start.md

@@ -69,10 +69,12 @@ function App() {
         {
           name: 'TanStack Query',
           render: <ReactQueryDevtoolsPanel />,
+          defaultOpen: true
         },
         {
           name: 'TanStack Router',
           render: <TanStackRouterDevtoolsPanel />,
+          defaultOpen: false
         },
       ]} />
     </QueryClientProvider>

packages/devtools-utils/src/react/plugin.tsx

@@ -1,21 +1,26 @@
 import type { JSX } from 'react'
 import type { DevtoolsPanelProps } from './panel'
 
-export function createReactPlugin(
-  name: string,
-  Component: (props: DevtoolsPanelProps) => JSX.Element,
-) {
+export function createReactPlugin({
+  Component,
+  ...config
+}: {
+  name: string
+  id?: string
+  defaultOpen?: boolean
+  Component: (props: DevtoolsPanelProps) => JSX.Element
+}) {
   function Plugin() {
     return {
-      name: name,
+      config,
       render: (_el: HTMLElement, theme: 'light' | 'dark') => (
         <Component theme={theme} />
       ),
     }
   }
   function NoOpPlugin() {
     return {
-      name: name,
+      config,
       render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
     }
   }

packages/devtools-utils/src/solid/plugin.tsx

@@ -3,21 +3,26 @@
 import type { JSX } from 'solid-js'
 import type { DevtoolsPanelProps } from './panel'
 
-export function createSolidPlugin(
-  name: string,
-  Component: (props: DevtoolsPanelProps) => JSX.Element,
-) {
+export function createSolidPlugin({
+  Component,
+  ...config
+}: {
+  name: string
+  id?: string
+  defaultOpen?: boolean
+  Component: (props: DevtoolsPanelProps) => JSX.Element
+}) {
   function Plugin() {
     return {
-      name: name,
+      ...config,
       render: (_el: HTMLElement, theme: 'light' | 'dark') => {
         return <Component theme={theme} />
       },
     }
   }
   function NoOpPlugin() {
     return {
-      name: name,
+      ...config,
       render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
     }
   }