feat: refactor props passing to plugins for improved flexibility

.changeset/thirty-spies-fetch.md

@@ -0,0 +1,9 @@
+---
+'@tanstack/preact-devtools': minor
+'@tanstack/devtools-utils': minor
+'@tanstack/react-devtools': minor
+'@tanstack/solid-devtools': minor
+'@tanstack/devtools': minor
+---
+
+Change the way props are passed to the plugins

.gitignore

@@ -58,4 +58,5 @@ vite.config.ts.timestamp-*
 .angular
 .nitro
 .sonda
-*settings.local.json
+*settings.local.json
+.claude/worktrees

packages/devtools-utils/package.json

@@ -75,6 +75,12 @@
   "dependencies": {
     "@tanstack/devtools-ui": "workspace:^"
   },
+  "devDependencies": {
+    "@tanstack/devtools": "workspace:^",
+    "tsup": "^8.5.0",
+    "tsup-preset-solid": "^2.2.0",
+    "vite-plugin-solid": "^2.11.8"
+  },
   "peerDependencies": {
     "@types/react": ">=17.0.0",
     "preact": ">=10.0.0",
@@ -114,10 +120,5 @@
     "test:types": "tsc",
     "test:build": "publint --strict",
     "build": "vite build && vite build --config vite.config.preact.ts && vite build --config vite.config.vue.ts && vite build --config vite.config.solid-class.ts && tsup"
-  },
-  "devDependencies": {
-    "tsup": "^8.5.0",
-    "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.8"
   }
 }

packages/devtools-utils/src/preact/panel.tsx

@@ -1,10 +1,9 @@
 /** @jsxImportSource preact */
 
 import { useEffect, useRef } from 'preact/hooks'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
-export interface DevtoolsPanelProps {
-  theme?: 'light' | 'dark'
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
 /**
  * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.
@@ -24,9 +23,9 @@ export interface DevtoolsPanelProps {
  * ```
  */
 export function createPreactPanel<
-  TComponentProps extends DevtoolsPanelProps | undefined,
+  TComponentProps extends DevtoolsPanelProps,
   TCoreDevtoolsClass extends {
-    mount: (el: HTMLElement, theme: 'light' | 'dark') => void
+    mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => void
     unmount: () => void
   },
 >(CoreClass: new () => TCoreDevtoolsClass) {
@@ -38,7 +37,7 @@ export function createPreactPanel<
       devtools.current = new CoreClass()
 
       if (devToolRef.current) {
-        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+        devtools.current.mount(devToolRef.current, props)
       }
 
       return () => {
@@ -47,7 +46,7 @@ export function createPreactPanel<
           devtools.current = null
         }
       }
-    }, [props?.theme])
+    }, [props])
 
     return <div style={{ height: '100%' }} ref={devToolRef} />
   }

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

@@ -2,6 +2,7 @@
 
 import type { JSX } from 'preact'
 import type { DevtoolsPanelProps } from './panel'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
 export function createPreactPlugin({
   Component,
@@ -15,15 +16,15 @@ export function createPreactPlugin({
   function Plugin() {
     return {
       ...config,
-      render: (_el: HTMLElement, theme: 'light' | 'dark') => (
-        <Component theme={theme} />
+      render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => (
+        <Component {...props} />
       ),
     }
   }
   function NoOpPlugin() {
     return {
       ...config,
-      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
+      render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,
     }
   }
   return [Plugin, NoOpPlugin] as const

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

@@ -1,8 +1,7 @@
 import { useEffect, useRef } from 'react'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
-export interface DevtoolsPanelProps {
-  theme?: 'light' | 'dark'
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
 /**
  * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.
@@ -22,9 +21,9 @@ export interface DevtoolsPanelProps {
  * ```
  */
 export function createReactPanel<
-  TComponentProps extends DevtoolsPanelProps | undefined,
+  TComponentProps extends TanStackDevtoolsPluginProps,
   TCoreDevtoolsClass extends {
-    mount: (el: HTMLElement, theme: 'light' | 'dark') => void
+    mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => void
     unmount: () => void
   },
 >(CoreClass: new () => TCoreDevtoolsClass) {
@@ -36,7 +35,7 @@ export function createReactPanel<
       devtools.current = new CoreClass()
 
       if (devToolRef.current) {
-        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+        devtools.current.mount(devToolRef.current, props)
       }
 
       return () => {
@@ -45,7 +44,7 @@ export function createReactPanel<
           devtools.current = null
         }
       }
-    }, [props?.theme])
+    }, [props])
 
     return <div style={{ height: '100%' }} ref={devToolRef} />
   }

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

@@ -1,5 +1,6 @@
 import type { JSX } from 'react'
 import type { DevtoolsPanelProps } from './panel'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
 export function createReactPlugin({
   Component,
@@ -13,15 +14,15 @@ export function createReactPlugin({
   function Plugin() {
     return {
       ...config,
-      render: (_el: HTMLElement, theme: 'light' | 'dark') => (
-        <Component theme={theme} />
+      render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => (
+        <Component {...props} />
       ),
     }
   }
   function NoOpPlugin() {
     return {
       ...config,
-      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
+      render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,
     }
   }
   return [Plugin, NoOpPlugin] as const

packages/devtools-utils/src/solid/class-mount-impl.tsx

@@ -3,11 +3,14 @@
 import { lazy } from 'solid-js'
 import { Portal, render } from 'solid-js/web'
 import type { JSX } from 'solid-js'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
 export function __mountComponent(
   el: HTMLElement,
-  theme: 'light' | 'dark',
-  importFn: () => Promise<{ default: () => JSX.Element }>,
+  props: TanStackDevtoolsPluginProps,
+  importFn: () => Promise<{
+    default: (props: TanStackDevtoolsPluginProps) => JSX.Element
+  }>,
 ): () => void {
   const Component = lazy(importFn)
   const ThemeProvider = lazy(() =>
@@ -20,8 +23,8 @@ export function __mountComponent(
     () => (
       <Portal mount={el}>
         <div style={{ height: '100%' }}>
-          <ThemeProvider theme={theme}>
-            <Component />
+          <ThemeProvider theme={props.theme}>
+            <Component {...props} />
           </ThemeProvider>
         </div>
       </Portal>

packages/devtools-utils/src/solid/class.test.tsx

@@ -28,16 +28,23 @@ describe('constructCoreClass', () => {
     const [DevtoolsCore] = constructCoreClass(importFn)
     const instance = new DevtoolsCore()
     const el = document.createElement('div')
-    await instance.mount(el, 'dark')
-    expect(mountComponentMock).toHaveBeenCalledWith(el, 'dark', importFn)
+    const props = { theme: 'dark' as const, devtoolsOpen: true }
+    await instance.mount(el, props)
+    expect(mountComponentMock).toHaveBeenCalledWith(el, props, importFn)
   })
 
   it('DevtoolsCore should throw if mount is called twice without unmounting', async () => {
     const [DevtoolsCore] = constructCoreClass(importFn)
     const instance = new DevtoolsCore()
-    await instance.mount(document.createElement('div'), 'dark')
+    await instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     await expect(
-      instance.mount(document.createElement('div'), 'dark'),
+      instance.mount(document.createElement('div'), {
+        theme: 'dark',
+        devtoolsOpen: true,
+      }),
     ).rejects.toThrow('Devtools is already mounted')
   })
 
@@ -50,25 +57,37 @@ describe('constructCoreClass', () => {
   it('DevtoolsCore should allow mount after unmount', async () => {
     const [DevtoolsCore] = constructCoreClass(importFn)
     const instance = new DevtoolsCore()
-    await instance.mount(document.createElement('div'), 'dark')
+    await instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     instance.unmount()
     await expect(
-      instance.mount(document.createElement('div'), 'dark'),
+      instance.mount(document.createElement('div'), {
+        theme: 'dark',
+        devtoolsOpen: true,
+      }),
     ).resolves.not.toThrow()
   })
 
   it('DevtoolsCore should call dispose on unmount', async () => {
     const [DevtoolsCore] = constructCoreClass(importFn)
     const instance = new DevtoolsCore()
-    await instance.mount(document.createElement('div'), 'dark')
+    await instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     instance.unmount()
     expect(disposeMock).toHaveBeenCalled()
   })
 
   it('DevtoolsCore should abort mount if unmount is called during mounting', async () => {
     const [DevtoolsCore] = constructCoreClass(importFn)
     const instance = new DevtoolsCore()
-    const mountPromise = instance.mount(document.createElement('div'), 'dark')
+    const mountPromise = instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     // Unmount while mount is in progress — triggers abort path
     // Note: since the mock resolves immediately, this tests the #abortMount flag
     await mountPromise
@@ -80,16 +99,25 @@ describe('constructCoreClass', () => {
   it('NoOpDevtoolsCore should not call __mountComponent when mount is called', async () => {
     const [, NoOpDevtoolsCore] = constructCoreClass(importFn)
     const noOpInstance = new NoOpDevtoolsCore()
-    await noOpInstance.mount(document.createElement('div'), 'dark')
+    await noOpInstance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     expect(mountComponentMock).not.toHaveBeenCalled()
   })
 
   it('NoOpDevtoolsCore should not throw if mount is called multiple times', async () => {
     const [, NoOpDevtoolsCore] = constructCoreClass(importFn)
     const noOpInstance = new NoOpDevtoolsCore()
-    await noOpInstance.mount(document.createElement('div'), 'dark')
+    await noOpInstance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     await expect(
-      noOpInstance.mount(document.createElement('div'), 'dark'),
+      noOpInstance.mount(document.createElement('div'), {
+        theme: 'dark',
+        devtoolsOpen: true,
+      }),
     ).resolves.not.toThrow()
   })
 
@@ -102,7 +130,10 @@ describe('constructCoreClass', () => {
   it('NoOpDevtoolsCore should not throw if unmount is called after mount', async () => {
     const [, NoOpDevtoolsCore] = constructCoreClass(importFn)
     const noOpInstance = new NoOpDevtoolsCore()
-    await noOpInstance.mount(document.createElement('div'), 'dark')
+    await noOpInstance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     expect(() => noOpInstance.unmount()).not.toThrow()
   })
 })

packages/devtools-utils/src/solid/class.ts

@@ -1,3 +1,4 @@
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 import type { JSX } from 'solid-js'
 
 /**
@@ -10,7 +11,9 @@ import type { JSX } from 'solid-js'
  * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
  */
 export function constructCoreClass(
-  importFn: () => Promise<{ default: () => JSX.Element }>,
+  importFn: () => Promise<{
+    default: (props: TanStackDevtoolsPluginProps) => JSX.Element
+  }>,
 ) {
   class DevtoolsCore {
     #isMounted = false
@@ -20,7 +23,10 @@ export function constructCoreClass(
 
     constructor() {}
 
-    async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
+    async mount<T extends HTMLElement>(
+      el: T,
+      props: TanStackDevtoolsPluginProps,
+    ) {
       if (this.#isMounted || this.#isMounting) {
         throw new Error('Devtools is already mounted')
       }
@@ -35,7 +41,7 @@ export function constructCoreClass(
           return
         }
 
-        this.#dispose = __mountComponent(el, theme, importFn)
+        this.#dispose = __mountComponent(el, props, importFn)
         this.#isMounted = true
         this.#isMounting = false
       } catch (err) {
@@ -62,7 +68,10 @@ export function constructCoreClass(
     constructor() {
       super()
     }
-    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
+    async mount<T extends HTMLElement>(
+      _el: T,
+      _props: TanStackDevtoolsPluginProps,
+    ) {}
     unmount() {}
   }
 

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

@@ -2,20 +2,19 @@
 
 import { createSignal, onCleanup, onMount } from 'solid-js'
 import type { ClassType } from './class'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
-export interface DevtoolsPanelProps {
-  theme?: 'light' | 'dark'
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
-export function createSolidPanel<
-  TComponentProps extends DevtoolsPanelProps | undefined,
->(CoreClass: ClassType) {
+export function createSolidPanel<TComponentProps extends DevtoolsPanelProps>(
+  CoreClass: ClassType,
+) {
   function Panel(props: TComponentProps) {
     let devToolRef: HTMLDivElement | undefined
     const [devtools] = createSignal(new CoreClass())
     onMount(() => {
       if (devToolRef) {
-        devtools().mount(devToolRef, props?.theme ?? 'dark')
+        devtools().mount(devToolRef, props)
       }
       onCleanup(() => {
         devtools().unmount()