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

packages/devtools-utils/package.json

@@ -62,6 +62,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",
@@ -99,10 +105,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 && 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.test.tsx

@@ -41,7 +41,10 @@ describe('constructCoreClass', () => {
       <div>Test Component</div>
     ))
     const instance = new DevtoolsCore()
-    await instance.mount(document.createElement('div'), 'dark')
+    await instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     expect(renderMock).toHaveBeenCalled()
   })
 
@@ -50,9 +53,15 @@ describe('constructCoreClass', () => {
       <div>Test Component</div>
     ))
     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')
   })
 
@@ -69,10 +78,16 @@ describe('constructCoreClass', () => {
       <div>Test Component</div>
     ))
     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()
   })
 
@@ -81,7 +96,10 @@ describe('constructCoreClass', () => {
       <div>Test Component</div>
     ))
     const noOpInstance = new NoOpDevtoolsCore()
-    await noOpInstance.mount(document.createElement('div'), 'dark')
+    await noOpInstance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
 
     expect(lazyImportMock).not.toHaveBeenCalled()
     expect(renderMock).not.toHaveBeenCalled()
@@ -93,9 +111,15 @@ describe('constructCoreClass', () => {
       <div>Test Component</div>
     ))
     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()
   })
 
@@ -112,7 +136,10 @@ describe('constructCoreClass', () => {
       <div>Test Component</div>
     ))
     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.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 import type { JSX } from 'solid-js'
 
 /**
@@ -22,7 +23,10 @@ export function constructCoreClass(Component: () => JSX.Element) {
 
     constructor() {}
 
-    async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
+    async mount<T extends HTMLElement>(
+      el: T,
+      props: TanStackDevtoolsPluginProps,
+    ) {
       this.#isMounting = true
       const { lazy } = await import('solid-js')
       const { render, Portal } = await import('solid-js/web')
@@ -44,8 +48,8 @@ export function constructCoreClass(Component: () => JSX.Element) {
         return (
           <Portal mount={mountTo}>
             <div style={{ height: '100%' }}>
-              <ThemeProvider theme={theme}>
-                <Devtools />
+              <ThemeProvider theme={props.theme}>
+                <Devtools {...props} />
               </ThemeProvider>
             </div>
           </Portal>
@@ -79,7 +83,10 @@ export function constructCoreClass(Component: () => JSX.Element) {
     constructor() {
       super()
     }
-    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
+    async mount<T extends HTMLElement>(
+      _el: T,
+      _props: TanStackDevtoolsPluginProps,
+    ) {}
     unmount() {}
   }
   return [DevtoolsCore, NoOpDevtoolsCore] as const

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()

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

@@ -2,6 +2,7 @@
 
 import type { JSX } from 'solid-js'
 import type { DevtoolsPanelProps } from './panel'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
 export function createSolidPlugin({
   Component,
@@ -15,15 +16,15 @@ export function createSolidPlugin({
   function Plugin() {
     return {
       ...config,
-      render: (_el: HTMLElement, theme: 'light' | 'dark') => {
-        return <Component theme={theme} />
+      render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => {
+        return <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/vue/panel.ts

@@ -1,20 +1,19 @@
 import { defineComponent, h, onMounted, onUnmounted, ref } from 'vue'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 import type { DefineComponent } from 'vue'
 
-export interface DevtoolsPanelProps {
-  theme?: 'dark' | 'light' | 'system'
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
 export function createVuePanel<
   TComponentProps extends DevtoolsPanelProps,
   TCoreDevtoolsClass extends {
-    mount: (el: HTMLElement, theme?: DevtoolsPanelProps['theme']) => void
+    mount: (el: HTMLElement, props?: TanStackDevtoolsPluginProps) => void
     unmount: () => void
   },
 >(CoreClass: new (props: TComponentProps) => TCoreDevtoolsClass) {
   const props = {
-    theme: {
-      type: String as () => DevtoolsPanelProps['theme'],
+    props: {
+      type: Object as () => DevtoolsPanelProps,
     },
     devtoolsProps: {
       type: Object as () => TComponentProps,
@@ -32,7 +31,7 @@ export function createVuePanel<
         devtools.value = instance
 
         if (devToolRef.value) {
-          instance.mount(devToolRef.value, config.theme)
+          instance.mount(devToolRef.value, config.props)
         }
       })