From 17dd97e33ef4814375bdbbbb56b99649330ba799 Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Wed, 14 Jan 2026 10:44:48 +0100
Subject: [PATCH 1/4] feat: refactor props passing to plugins for improved
 flexibility

---
 .changeset/thirty-spies-fetch.md              |  9 +++
 packages/devtools-utils/package.json          | 13 ++--
 packages/devtools-utils/src/preact/panel.tsx  | 13 ++--
 packages/devtools-utils/src/preact/plugin.tsx |  7 +-
 packages/devtools-utils/src/react/panel.tsx   | 12 ++--
 packages/devtools-utils/src/react/plugin.tsx  |  7 +-
 packages/devtools-utils/src/solid/class.tsx   | 13 ++--
 packages/devtools-utils/src/solid/panel.tsx   |  8 +--
 packages/devtools-utils/src/solid/plugin.tsx  |  7 +-
 packages/devtools-utils/src/vue/panel.ts      | 13 ++--
 .../devtools/src/components/tab-content.tsx   |  6 +-
 .../devtools/src/context/devtools-context.tsx | 17 +++--
 packages/devtools/src/devtools.tsx            |  6 +-
 packages/devtools/src/index.ts                |  1 +
 packages/devtools/src/tabs/index.tsx          |  2 +-
 packages/devtools/src/tabs/plugins-tab.tsx    | 13 ++--
 packages/preact-devtools/src/devtools.tsx     | 71 ++++++++++---------
 packages/react-devtools/src/devtools.tsx      | 53 +++++++-------
 packages/solid-devtools/src/core.tsx          | 23 +++---
 pnpm-lock.yaml                                |  3 +
 20 files changed, 163 insertions(+), 134 deletions(-)
 create mode 100644 .changeset/thirty-spies-fetch.md

diff --git a/.changeset/thirty-spies-fetch.md b/.changeset/thirty-spies-fetch.md
new file mode 100644
index 00000000..816db2d7
--- /dev/null
+++ b/.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
diff --git a/packages/devtools-utils/package.json b/packages/devtools-utils/package.json
index 3353dc8f..a11ea73a 100644
--- a/packages/devtools-utils/package.json
+++ b/packages/devtools-utils/package.json
@@ -62,6 +62,12 @@
   "dependencies": {
     "@tanstack/devtools-ui": "workspace:^"
   },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "tsup-preset-solid": "^2.2.0",
+    "vite-plugin-solid": "^2.11.8",
+    "@tanstack/devtools": "workspace:^"
+  },
   "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"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/devtools-utils/src/preact/panel.tsx b/packages/devtools-utils/src/preact/panel.tsx
index ab145404..b1e40fd6 100644
--- a/packages/devtools-utils/src/preact/panel.tsx
+++ b/packages/devtools-utils/src/preact/panel.tsx
@@ -1,9 +1,10 @@
 /** @jsxImportSource preact */
 
 import { useEffect, useRef } from 'preact/hooks'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
+
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
 
-export interface DevtoolsPanelProps {
-  theme?: 'light' | 'dark'
 }
 
 /**
@@ -24,9 +25,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 +39,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 +48,7 @@ export function createPreactPanel<
           devtools.current = null
         }
       }
-    }, [props?.theme])
+    }, [props])
 
     return <div style={{ height: '100%' }} ref={devToolRef} />
   }
diff --git a/packages/devtools-utils/src/preact/plugin.tsx b/packages/devtools-utils/src/preact/plugin.tsx
index a5485487..bd855e41 100644
--- a/packages/devtools-utils/src/preact/plugin.tsx
+++ b/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
diff --git a/packages/devtools-utils/src/react/panel.tsx b/packages/devtools-utils/src/react/panel.tsx
index 83d3ebc5..8da929a6 100644
--- a/packages/devtools-utils/src/react/panel.tsx
+++ b/packages/devtools-utils/src/react/panel.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
+import type { TanStackDevtoolsPluginProps } from "@tanstack/devtools"
 
-export interface DevtoolsPanelProps {
-  theme?: 'light' | 'dark'
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
 }
 
 /**
@@ -22,9 +22,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 +36,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 +45,7 @@ export function createReactPanel<
           devtools.current = null
         }
       }
-    }, [props?.theme])
+    }, [props])
 
     return <div style={{ height: '100%' }} ref={devToolRef} />
   }
diff --git a/packages/devtools-utils/src/react/plugin.tsx b/packages/devtools-utils/src/react/plugin.tsx
index fad8b8cd..1786bf53 100644
--- a/packages/devtools-utils/src/react/plugin.tsx
+++ b/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
diff --git a/packages/devtools-utils/src/solid/class.tsx b/packages/devtools-utils/src/solid/class.tsx
index 7cbb94ae..25952ec4 100644
--- a/packages/devtools-utils/src/solid/class.tsx
+++ b/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'
 
 /**
@@ -20,9 +21,9 @@ export function constructCoreClass(Component: () => JSX.Element) {
     #Component: any
     #ThemeProvider: any
 
-    constructor() {}
+    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 +45,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,8 +80,8 @@ export function constructCoreClass(Component: () => JSX.Element) {
     constructor() {
       super()
     }
-    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
-    unmount() {}
+    async mount<T extends HTMLElement>(_el: T, _props: TanStackDevtoolsPluginProps) { }
+    unmount() { }
   }
   return [DevtoolsCore, NoOpDevtoolsCore] as const
 }
diff --git a/packages/devtools-utils/src/solid/panel.tsx b/packages/devtools-utils/src/solid/panel.tsx
index 8051118d..63c0f8ef 100644
--- a/packages/devtools-utils/src/solid/panel.tsx
+++ b/packages/devtools-utils/src/solid/panel.tsx
@@ -2,20 +2,20 @@
 
 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,
+  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()
diff --git a/packages/devtools-utils/src/solid/plugin.tsx b/packages/devtools-utils/src/solid/plugin.tsx
index 2bc378e6..81a7ef28 100644
--- a/packages/devtools-utils/src/solid/plugin.tsx
+++ b/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
diff --git a/packages/devtools-utils/src/vue/panel.ts b/packages/devtools-utils/src/vue/panel.ts
index b8dfbe19..2c2e6b9b 100644
--- a/packages/devtools-utils/src/vue/panel.ts
+++ b/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)
         }
       })
 
diff --git a/packages/devtools/src/components/tab-content.tsx b/packages/devtools/src/components/tab-content.tsx
index 02e1378a..8ee08823 100644
--- a/packages/devtools/src/components/tab-content.tsx
+++ b/packages/devtools/src/components/tab-content.tsx
@@ -4,12 +4,12 @@ import { tabs } from '../tabs'
 import { useStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js'
 
-export const TabContent = () => {
+export const TabContent = (props: { isOpen: boolean }) => {
   const { state } = useDevtoolsState()
   const styles = useStyles()
-  const component = createMemo<(() => JSX.Element) | null>(
+  const component = createMemo<((props: { isOpen: boolean }) => JSX.Element) | null>(
     () => tabs.find((t) => t.id === state().activeTab)?.component || null,
   )
 
-  return <div class={styles().tabContent}>{component()?.()}</div>
+  return <div class={styles().tabContent}>{component()?.({ isOpen: props.isOpen })}</div>
 }
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
index d92855df..2a99a71d 100644
--- a/packages/devtools/src/context/devtools-context.tsx
+++ b/packages/devtools/src/context/devtools-context.tsx
@@ -12,6 +12,10 @@ import { initialState } from './devtools-store'
 import type { DevtoolsStore } from './devtools-store'
 import type { JSX, Setter } from 'solid-js'
 
+export interface TanStackDevtoolsPluginProps {
+  theme: DevtoolsStore['settings']['theme']
+  devtoolsOpen: boolean
+}
 export interface TanStackDevtoolsPlugin {
   /**
    * Name to be displayed in the devtools UI.
@@ -40,11 +44,11 @@ export interface TanStackDevtoolsPlugin {
    * ```
    */
   name:
-    | string
-    | ((
-        el: HTMLHeadingElement,
-        theme: DevtoolsStore['settings']['theme'],
-      ) => void)
+  | string
+  | ((
+    el: HTMLHeadingElement,
+    props: TanStackDevtoolsPluginProps,
+  ) => void)
   /**
    * Unique identifier for the plugin.
    * If not provided, it will be generated based on the name.
@@ -71,9 +75,8 @@ export interface TanStackDevtoolsPlugin {
    */
   render: (
     el: HTMLDivElement,
-    theme: DevtoolsStore['settings']['theme'],
+    props: TanStackDevtoolsPluginProps,
   ) => void
-
   destroy?: (pluginId: string) => void
 }
 export const DevtoolsContext = createContext<{
diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx
index 5a68a04d..453b2493 100644
--- a/packages/devtools/src/devtools.tsx
+++ b/packages/devtools/src/devtools.tsx
@@ -123,10 +123,10 @@ export default function DevTools() {
       run()
 
       if (typeof window !== 'undefined') {
-        ;(pip().pipWindow ?? window).addEventListener('resize', run)
+        ; (pip().pipWindow ?? window).addEventListener('resize', run)
 
         return () => {
-          ;(pip().pipWindow ?? window).removeEventListener('resize', run)
+          ; (pip().pipWindow ?? window).removeEventListener('resize', run)
           if (rootEl()?.parentElement && typeof previousValue === 'string') {
             setRootEl((prev) => {
               // prev!.parentElement!.style.paddingBottom = previousValue
@@ -196,7 +196,7 @@ export default function DevTools() {
                 handleDragStart={(e) => handleDragStart(panelRef, e)}
               >
                 <Tabs toggleOpen={toggleOpen} />
-                <TabContent />
+                <TabContent isOpen={isOpen()} />
               </ContentPanel>
             </MainPanel>
           </Show>
diff --git a/packages/devtools/src/index.ts b/packages/devtools/src/index.ts
index 058273ba..93293af0 100644
--- a/packages/devtools/src/index.ts
+++ b/packages/devtools/src/index.ts
@@ -3,5 +3,6 @@ export { TanStackDevtoolsCore } from './core'
 export type { TanStackDevtoolsInit, ClientEventBusConfig } from './core'
 export type {
   TanStackDevtoolsPlugin,
+  TanStackDevtoolsPluginProps,
   TanStackDevtoolsConfig,
 } from './context/devtools-context'
diff --git a/packages/devtools/src/tabs/index.tsx b/packages/devtools/src/tabs/index.tsx
index d7e93700..beb4f17e 100644
--- a/packages/devtools/src/tabs/index.tsx
+++ b/packages/devtools/src/tabs/index.tsx
@@ -7,7 +7,7 @@ export const tabs = [
   {
     name: 'Plugins',
     id: 'plugins',
-    component: () => <PluginsTab />,
+    component: (props: { isOpen: boolean }) => <PluginsTab {...props} />,
     icon: () => <List />,
   },
   {
diff --git a/packages/devtools/src/tabs/plugins-tab.tsx b/packages/devtools/src/tabs/plugins-tab.tsx
index 4746087f..652f0379 100644
--- a/packages/devtools/src/tabs/plugins-tab.tsx
+++ b/packages/devtools/src/tabs/plugins-tab.tsx
@@ -6,10 +6,9 @@ import { useStyles } from '../styles/use-styles'
 import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
 import { PluginMarketplace } from './plugin-marketplace'
 
-export const PluginsTab = () => {
+export const PluginsTab = (props: { isOpen: boolean }) => {
   const { plugins, activePlugins, toggleActivePlugins } = usePlugins()
   const { expanded, hoverUtils, animationMs, setForceExpand } = useDrawContext()
-
   const [pluginRefs, setPluginRefs] = createSignal(
     new Map<string, HTMLDivElement>(),
   )
@@ -37,7 +36,10 @@ export const PluginsTab = () => {
       const ref = pluginRefs().get(plugin.id!)
 
       if (ref) {
-        plugin.render(ref, theme())
+        plugin.render(ref, {
+          theme: theme(),
+          devtoolsOpen: props.isOpen,
+        })
       }
     })
   })
@@ -86,7 +88,10 @@ export const PluginsTab = () => {
                     if (pluginHeading) {
                       typeof plugin.name === 'string'
                         ? (pluginHeading.textContent = plugin.name)
-                        : plugin.name(pluginHeading, theme())
+                        : plugin.name(pluginHeading, {
+                          theme: theme(),
+                          devtoolsOpen: props.isOpen,
+                        })
                     }
                   })
 
diff --git a/packages/preact-devtools/src/devtools.tsx b/packages/preact-devtools/src/devtools.tsx
index d5136cb1..5849c1f8 100644
--- a/packages/preact-devtools/src/devtools.tsx
+++ b/packages/preact-devtools/src/devtools.tsx
@@ -6,11 +6,12 @@ import type {
   ClientEventBusConfig,
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
+  TanStackDevtoolsPluginProps,
 } from '@tanstack/devtools'
 
 type PluginRender =
   | JSX.Element
-  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)
+  | ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)
 
 type TriggerProps = {
   theme: 'dark' | 'light'
@@ -140,10 +141,10 @@ const convertRender = (
       | ((prev: Record<string, JSX.Element>) => Record<string, JSX.Element>),
   ) => void,
   e: HTMLElement,
-  theme: 'dark' | 'light',
+  props: TanStackDevtoolsPluginProps,
 ) => {
   const element =
-    typeof Component === 'function' ? Component(e, theme) : Component
+    typeof Component === 'function' ? Component(e, props) : Component
 
   setComponents((prev) => ({
     ...prev,
@@ -198,23 +199,23 @@ export const TanStackDevtools = ({
             typeof plugin.name === 'string'
               ? plugin.name
               : (e, theme) => {
-                  const id = e.getAttribute('id')!
-                  const target = e.ownerDocument.getElementById(id)
+                const id = e.getAttribute('id')!
+                const target = e.ownerDocument.getElementById(id)
 
-                  if (target) {
-                    setTitleContainers((prev) => ({
-                      ...prev,
-                      [id]: e,
-                    }))
-                  }
+                if (target) {
+                  setTitleContainers((prev) => ({
+                    ...prev,
+                    [id]: e,
+                  }))
+                }
 
-                  convertRender(
-                    plugin.name as PluginRender,
-                    setTitleComponents,
-                    e,
-                    theme,
-                  )
-                },
+                convertRender(
+                  plugin.name as PluginRender,
+                  setTitleComponents,
+                  e,
+                  theme,
+                )
+              },
           render: (e, theme) => {
             const id = e.getAttribute('id')!
             const target = e.ownerDocument.getElementById(id)
@@ -240,9 +241,9 @@ export const TanStackDevtools = ({
         ...coreConfig,
         customTrigger: customTrigger
           ? (el, props) => {
-              setTriggerContainer(el)
-              convertTrigger(customTrigger, setTriggerComponent, el, props)
-            }
+            setTriggerContainer(el)
+            convertTrigger(customTrigger, setTriggerComponent, el, props)
+          }
           : undefined,
       },
       eventBusConfig,
@@ -277,24 +278,24 @@ export const TanStackDevtools = ({
 
       {hasPlugins
         ? Object.entries(pluginContainers).map(([key, pluginContainer]) => {
-            const component = PluginComponents[key]
-            return component ? (
-              <Portal key={key} container={pluginContainer}>
-                {component}
-              </Portal>
-            ) : null
-          })
+          const component = PluginComponents[key]
+          return component ? (
+            <Portal key={key} container={pluginContainer}>
+              {component}
+            </Portal>
+          ) : null
+        })
         : null}
 
       {hasTitles
         ? Object.entries(titleContainers).map(([key, titleContainer]) => {
-            const component = TitleComponents[key]
-            return component ? (
-              <Portal key={key} container={titleContainer}>
-                {component}
-              </Portal>
-            ) : null
-          })
+          const component = TitleComponents[key]
+          return component ? (
+            <Portal key={key} container={titleContainer}>
+              {component}
+            </Portal>
+          ) : null
+        })
         : null}
 
       {triggerContainer && TriggerComponent ? (
diff --git a/packages/react-devtools/src/devtools.tsx b/packages/react-devtools/src/devtools.tsx
index 6d9b9729..50ba3dac 100644
--- a/packages/react-devtools/src/devtools.tsx
+++ b/packages/react-devtools/src/devtools.tsx
@@ -6,11 +6,12 @@ import type {
   ClientEventBusConfig,
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
+  TanStackDevtoolsPluginProps,
 } from '@tanstack/devtools'
 
 type PluginRender =
   | JSX.Element
-  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)
+  | ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)
 
 type TriggerProps = {
   theme: 'dark' | 'light'
@@ -120,10 +121,10 @@ const convertRender = (
     React.SetStateAction<Record<string, JSX.Element>>
   >,
   e: HTMLElement,
-  theme: 'dark' | 'light',
+  props: TanStackDevtoolsPluginProps,
 ) => {
   const element =
-    typeof Component === 'function' ? Component(e, theme) : Component
+    typeof Component === 'function' ? Component(e, props) : Component
 
   setComponents((prev) => ({
     ...prev,
@@ -177,24 +178,24 @@ export const TanStackDevtools = ({
           name:
             typeof plugin.name === 'string'
               ? plugin.name
-              : (e, theme) => {
-                  const id = e.getAttribute('id')!
-                  const target = e.ownerDocument.getElementById(id)
+              : (e, props) => {
+                const id = e.getAttribute('id')!
+                const target = e.ownerDocument.getElementById(id)
 
-                  if (target) {
-                    setTitleContainers((prev) => ({
-                      ...prev,
-                      [id]: e,
-                    }))
-                  }
+                if (target) {
+                  setTitleContainers((prev) => ({
+                    ...prev,
+                    [id]: e,
+                  }))
+                }
 
-                  convertRender(
-                    plugin.name as PluginRender,
-                    setTitleComponents,
-                    e,
-                    theme,
-                  )
-                },
+                convertRender(
+                  plugin.name as PluginRender,
+                  setTitleComponents,
+                  e,
+                  props,
+                )
+              },
           render: (e, theme) => {
             const id = e.getAttribute('id')!
             const target = e.ownerDocument.getElementById(id)
@@ -220,9 +221,9 @@ export const TanStackDevtools = ({
         ...coreConfig,
         customTrigger: customTrigger
           ? (el, props) => {
-              setTriggerContainer(el)
-              convertTrigger(customTrigger, setTriggerComponent, el, props)
-            }
+            setTriggerContainer(el)
+            convertTrigger(customTrigger, setTriggerComponent, el, props)
+          }
           : undefined,
       },
       eventBusConfig,
@@ -257,14 +258,14 @@ export const TanStackDevtools = ({
 
       {hasPlugins
         ? Object.entries(pluginContainers).map(([key, pluginContainer]) =>
-            createPortal(<>{PluginComponents[key]}</>, pluginContainer),
-          )
+          createPortal(<>{PluginComponents[key]}</>, pluginContainer),
+        )
         : null}
 
       {hasTitles
         ? Object.entries(titleContainers).map(([key, titleContainer]) =>
-            createPortal(<>{TitleComponents[key]}</>, titleContainer),
-          )
+          createPortal(<>{TitleComponents[key]}</>, titleContainer),
+        )
         : null}
 
       {triggerContainer && TriggerComponent
diff --git a/packages/solid-devtools/src/core.tsx b/packages/solid-devtools/src/core.tsx
index 5b2938ef..c766fc88 100644
--- a/packages/solid-devtools/src/core.tsx
+++ b/packages/solid-devtools/src/core.tsx
@@ -12,21 +12,22 @@ import type {
   ClientEventBusConfig,
   TanStackDevtoolsConfig,
   TanStackDevtoolsPlugin,
+  TanStackDevtoolsPluginProps,
 } from '@tanstack/devtools'
 
 type SolidPluginRender =
   | JSX.Element
   | ((
-      el: HTMLDivElement | HTMLHeadingElement,
-      theme: 'dark' | 'light',
-    ) => JSX.Element)
+    el: HTMLDivElement | HTMLHeadingElement,
+    props: TanStackDevtoolsPluginProps,
+  ) => JSX.Element)
 const convertRender = (
   el: HTMLDivElement | HTMLHeadingElement,
   Component: SolidPluginRender,
-  theme: 'dark' | 'light',
+  props: TanStackDevtoolsPluginProps,
 ) => (
   <Portal mount={el}>
-    {typeof Component === 'function' ? Component(el, theme) : Component}
+    {typeof Component === 'function' ? Component(el, props) : Component}
   </Portal>
 )
 
@@ -106,8 +107,8 @@ export interface TanStackDevtoolsInit {
      * An optional custom function to render the dev tools trigger component.
      */
     customTrigger?:
-      | ((el: HTMLElement, props: TriggerProps) => JSX.Element)
-      | JSX.Element
+    | ((el: HTMLElement, props: TriggerProps) => JSX.Element)
+    | JSX.Element
   }
   /**
    * Configuration for the TanStack Devtools client event bus.
@@ -128,10 +129,10 @@ export default function SolidDevtoolsCore({
         typeof plugin.name === 'string'
           ? plugin.name
           : // The check above confirms that `plugin.name` is of Render type
-            (el, theme) =>
-              convertRender(el, plugin.name as SolidPluginRender, theme),
-      render: (el: HTMLDivElement, theme: 'dark' | 'light') =>
-        convertRender(el, plugin.render, theme),
+          (el, props) =>
+            convertRender(el, plugin.name as SolidPluginRender, props),
+      render: (el: HTMLDivElement, props: TanStackDevtoolsPluginProps) =>
+        convertRender(el, plugin.render, props),
     })),
   )
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d13b7ee2..98f960bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -629,6 +629,9 @@ importers:
         specifier: '>=3.2.0'
         version: 3.5.25(typescript@5.9.3)
     devDependencies:
+      '@tanstack/devtools':
+        specifier: workspace:^
+        version: link:../devtools
       tsup:
         specifier: ^8.5.0
         version: 8.5.1(@microsoft/api-extractor@7.47.7(@types/node@24.10.4))(jiti@2.6.1)(postcss@8.5.6)(tsx@4.20.3)(typescript@5.9.3)(yaml@2.8.1)

From 135f8c84ed890135cb8f379c3ba6726608b8dd14 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 14 Jan 2026 09:47:00 +0000
Subject: [PATCH 2/4] ci: apply automated fixes

---
 packages/devtools-utils/package.json          |  2 +-
 packages/devtools-utils/src/preact/panel.tsx  |  4 +-
 packages/devtools-utils/src/react/panel.tsx   |  5 +-
 packages/devtools-utils/src/solid/class.tsx   | 16 +++--
 packages/devtools-utils/src/solid/panel.tsx   |  9 ++-
 .../devtools/src/components/tab-content.tsx   | 12 ++--
 .../devtools/src/context/devtools-context.tsx | 12 +---
 packages/devtools/src/devtools.tsx            |  4 +-
 packages/devtools/src/tabs/plugins-tab.tsx    |  6 +-
 packages/preact-devtools/src/devtools.tsx     | 64 +++++++++----------
 packages/react-devtools/src/devtools.tsx      | 44 ++++++-------
 packages/solid-devtools/src/core.tsx          | 14 ++--
 12 files changed, 96 insertions(+), 96 deletions(-)

diff --git a/packages/devtools-utils/package.json b/packages/devtools-utils/package.json
index a11ea73a..dc364a50 100644
--- a/packages/devtools-utils/package.json
+++ b/packages/devtools-utils/package.json
@@ -106,4 +106,4 @@
     "test:build": "publint --strict",
     "build": "vite build && vite build --config vite.config.preact.ts && vite build --config vite.config.vue.ts && tsup "
   }
-}
\ No newline at end of file
+}
diff --git a/packages/devtools-utils/src/preact/panel.tsx b/packages/devtools-utils/src/preact/panel.tsx
index b1e40fd6..5c8fcd60 100644
--- a/packages/devtools-utils/src/preact/panel.tsx
+++ b/packages/devtools-utils/src/preact/panel.tsx
@@ -3,9 +3,7 @@
 import { useEffect, useRef } from 'preact/hooks'
 import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
-export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
-
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
 /**
  * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.
diff --git a/packages/devtools-utils/src/react/panel.tsx b/packages/devtools-utils/src/react/panel.tsx
index 8da929a6..548f27de 100644
--- a/packages/devtools-utils/src/react/panel.tsx
+++ b/packages/devtools-utils/src/react/panel.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useRef } from 'react'
-import type { TanStackDevtoolsPluginProps } from "@tanstack/devtools"
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
-export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
 /**
  * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.
diff --git a/packages/devtools-utils/src/solid/class.tsx b/packages/devtools-utils/src/solid/class.tsx
index 25952ec4..c82d2c24 100644
--- a/packages/devtools-utils/src/solid/class.tsx
+++ b/packages/devtools-utils/src/solid/class.tsx
@@ -21,9 +21,12 @@ export function constructCoreClass(Component: () => JSX.Element) {
     #Component: any
     #ThemeProvider: any
 
-    constructor() { }
+    constructor() {}
 
-    async mount<T extends HTMLElement>(el: T, props: TanStackDevtoolsPluginProps) {
+    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')
@@ -45,7 +48,7 @@ export function constructCoreClass(Component: () => JSX.Element) {
         return (
           <Portal mount={mountTo}>
             <div style={{ height: '100%' }}>
-              <ThemeProvider theme={props.theme} >
+              <ThemeProvider theme={props.theme}>
                 <Devtools {...props} />
               </ThemeProvider>
             </div>
@@ -80,8 +83,11 @@ export function constructCoreClass(Component: () => JSX.Element) {
     constructor() {
       super()
     }
-    async mount<T extends HTMLElement>(_el: T, _props: TanStackDevtoolsPluginProps) { }
-    unmount() { }
+    async mount<T extends HTMLElement>(
+      _el: T,
+      _props: TanStackDevtoolsPluginProps,
+    ) {}
+    unmount() {}
   }
   return [DevtoolsCore, NoOpDevtoolsCore] as const
 }
diff --git a/packages/devtools-utils/src/solid/panel.tsx b/packages/devtools-utils/src/solid/panel.tsx
index 63c0f8ef..cecafe38 100644
--- a/packages/devtools-utils/src/solid/panel.tsx
+++ b/packages/devtools-utils/src/solid/panel.tsx
@@ -4,12 +4,11 @@ import { createSignal, onCleanup, onMount } from 'solid-js'
 import type { ClassType } from './class'
 import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
-export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
-export function createSolidPanel<
-  TComponentProps extends DevtoolsPanelProps,
->(CoreClass: ClassType) {
+export function createSolidPanel<TComponentProps extends DevtoolsPanelProps>(
+  CoreClass: ClassType,
+) {
   function Panel(props: TComponentProps) {
     let devToolRef: HTMLDivElement | undefined
     const [devtools] = createSignal(new CoreClass())
diff --git a/packages/devtools/src/components/tab-content.tsx b/packages/devtools/src/components/tab-content.tsx
index 8ee08823..bbb64e56 100644
--- a/packages/devtools/src/components/tab-content.tsx
+++ b/packages/devtools/src/components/tab-content.tsx
@@ -7,9 +7,13 @@ import type { JSX } from 'solid-js'
 export const TabContent = (props: { isOpen: boolean }) => {
   const { state } = useDevtoolsState()
   const styles = useStyles()
-  const component = createMemo<((props: { isOpen: boolean }) => JSX.Element) | null>(
-    () => tabs.find((t) => t.id === state().activeTab)?.component || null,
-  )
+  const component = createMemo<
+    ((props: { isOpen: boolean }) => JSX.Element) | null
+  >(() => tabs.find((t) => t.id === state().activeTab)?.component || null)
 
-  return <div class={styles().tabContent}>{component()?.({ isOpen: props.isOpen })}</div>
+  return (
+    <div class={styles().tabContent}>
+      {component()?.({ isOpen: props.isOpen })}
+    </div>
+  )
 }
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
index 2a99a71d..362b2f4c 100644
--- a/packages/devtools/src/context/devtools-context.tsx
+++ b/packages/devtools/src/context/devtools-context.tsx
@@ -44,11 +44,8 @@ export interface TanStackDevtoolsPlugin {
    * ```
    */
   name:
-  | string
-  | ((
-    el: HTMLHeadingElement,
-    props: TanStackDevtoolsPluginProps,
-  ) => void)
+    | string
+    | ((el: HTMLHeadingElement, props: TanStackDevtoolsPluginProps) => void)
   /**
    * Unique identifier for the plugin.
    * If not provided, it will be generated based on the name.
@@ -73,10 +70,7 @@ export interface TanStackDevtoolsPlugin {
    *   }
    * ```
    */
-  render: (
-    el: HTMLDivElement,
-    props: TanStackDevtoolsPluginProps,
-  ) => void
+  render: (el: HTMLDivElement, props: TanStackDevtoolsPluginProps) => void
   destroy?: (pluginId: string) => void
 }
 export const DevtoolsContext = createContext<{
diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx
index 453b2493..5db22a3b 100644
--- a/packages/devtools/src/devtools.tsx
+++ b/packages/devtools/src/devtools.tsx
@@ -123,10 +123,10 @@ export default function DevTools() {
       run()
 
       if (typeof window !== 'undefined') {
-        ; (pip().pipWindow ?? window).addEventListener('resize', run)
+        ;(pip().pipWindow ?? window).addEventListener('resize', run)
 
         return () => {
-          ; (pip().pipWindow ?? window).removeEventListener('resize', run)
+          ;(pip().pipWindow ?? window).removeEventListener('resize', run)
           if (rootEl()?.parentElement && typeof previousValue === 'string') {
             setRootEl((prev) => {
               // prev!.parentElement!.style.paddingBottom = previousValue
diff --git a/packages/devtools/src/tabs/plugins-tab.tsx b/packages/devtools/src/tabs/plugins-tab.tsx
index 652f0379..c9616777 100644
--- a/packages/devtools/src/tabs/plugins-tab.tsx
+++ b/packages/devtools/src/tabs/plugins-tab.tsx
@@ -89,9 +89,9 @@ export const PluginsTab = (props: { isOpen: boolean }) => {
                       typeof plugin.name === 'string'
                         ? (pluginHeading.textContent = plugin.name)
                         : plugin.name(pluginHeading, {
-                          theme: theme(),
-                          devtoolsOpen: props.isOpen,
-                        })
+                            theme: theme(),
+                            devtoolsOpen: props.isOpen,
+                          })
                     }
                   })
 
diff --git a/packages/preact-devtools/src/devtools.tsx b/packages/preact-devtools/src/devtools.tsx
index 5849c1f8..19dbf547 100644
--- a/packages/preact-devtools/src/devtools.tsx
+++ b/packages/preact-devtools/src/devtools.tsx
@@ -199,23 +199,23 @@ export const TanStackDevtools = ({
             typeof plugin.name === 'string'
               ? plugin.name
               : (e, theme) => {
-                const id = e.getAttribute('id')!
-                const target = e.ownerDocument.getElementById(id)
+                  const id = e.getAttribute('id')!
+                  const target = e.ownerDocument.getElementById(id)
 
-                if (target) {
-                  setTitleContainers((prev) => ({
-                    ...prev,
-                    [id]: e,
-                  }))
-                }
+                  if (target) {
+                    setTitleContainers((prev) => ({
+                      ...prev,
+                      [id]: e,
+                    }))
+                  }
 
-                convertRender(
-                  plugin.name as PluginRender,
-                  setTitleComponents,
-                  e,
-                  theme,
-                )
-              },
+                  convertRender(
+                    plugin.name as PluginRender,
+                    setTitleComponents,
+                    e,
+                    theme,
+                  )
+                },
           render: (e, theme) => {
             const id = e.getAttribute('id')!
             const target = e.ownerDocument.getElementById(id)
@@ -241,9 +241,9 @@ export const TanStackDevtools = ({
         ...coreConfig,
         customTrigger: customTrigger
           ? (el, props) => {
-            setTriggerContainer(el)
-            convertTrigger(customTrigger, setTriggerComponent, el, props)
-          }
+              setTriggerContainer(el)
+              convertTrigger(customTrigger, setTriggerComponent, el, props)
+            }
           : undefined,
       },
       eventBusConfig,
@@ -278,24 +278,24 @@ export const TanStackDevtools = ({
 
       {hasPlugins
         ? Object.entries(pluginContainers).map(([key, pluginContainer]) => {
-          const component = PluginComponents[key]
-          return component ? (
-            <Portal key={key} container={pluginContainer}>
-              {component}
-            </Portal>
-          ) : null
-        })
+            const component = PluginComponents[key]
+            return component ? (
+              <Portal key={key} container={pluginContainer}>
+                {component}
+              </Portal>
+            ) : null
+          })
         : null}
 
       {hasTitles
         ? Object.entries(titleContainers).map(([key, titleContainer]) => {
-          const component = TitleComponents[key]
-          return component ? (
-            <Portal key={key} container={titleContainer}>
-              {component}
-            </Portal>
-          ) : null
-        })
+            const component = TitleComponents[key]
+            return component ? (
+              <Portal key={key} container={titleContainer}>
+                {component}
+              </Portal>
+            ) : null
+          })
         : null}
 
       {triggerContainer && TriggerComponent ? (
diff --git a/packages/react-devtools/src/devtools.tsx b/packages/react-devtools/src/devtools.tsx
index 50ba3dac..43688150 100644
--- a/packages/react-devtools/src/devtools.tsx
+++ b/packages/react-devtools/src/devtools.tsx
@@ -179,23 +179,23 @@ export const TanStackDevtools = ({
             typeof plugin.name === 'string'
               ? plugin.name
               : (e, props) => {
-                const id = e.getAttribute('id')!
-                const target = e.ownerDocument.getElementById(id)
+                  const id = e.getAttribute('id')!
+                  const target = e.ownerDocument.getElementById(id)
 
-                if (target) {
-                  setTitleContainers((prev) => ({
-                    ...prev,
-                    [id]: e,
-                  }))
-                }
+                  if (target) {
+                    setTitleContainers((prev) => ({
+                      ...prev,
+                      [id]: e,
+                    }))
+                  }
 
-                convertRender(
-                  plugin.name as PluginRender,
-                  setTitleComponents,
-                  e,
-                  props,
-                )
-              },
+                  convertRender(
+                    plugin.name as PluginRender,
+                    setTitleComponents,
+                    e,
+                    props,
+                  )
+                },
           render: (e, theme) => {
             const id = e.getAttribute('id')!
             const target = e.ownerDocument.getElementById(id)
@@ -221,9 +221,9 @@ export const TanStackDevtools = ({
         ...coreConfig,
         customTrigger: customTrigger
           ? (el, props) => {
-            setTriggerContainer(el)
-            convertTrigger(customTrigger, setTriggerComponent, el, props)
-          }
+              setTriggerContainer(el)
+              convertTrigger(customTrigger, setTriggerComponent, el, props)
+            }
           : undefined,
       },
       eventBusConfig,
@@ -258,14 +258,14 @@ export const TanStackDevtools = ({
 
       {hasPlugins
         ? Object.entries(pluginContainers).map(([key, pluginContainer]) =>
-          createPortal(<>{PluginComponents[key]}</>, pluginContainer),
-        )
+            createPortal(<>{PluginComponents[key]}</>, pluginContainer),
+          )
         : null}
 
       {hasTitles
         ? Object.entries(titleContainers).map(([key, titleContainer]) =>
-          createPortal(<>{TitleComponents[key]}</>, titleContainer),
-        )
+            createPortal(<>{TitleComponents[key]}</>, titleContainer),
+          )
         : null}
 
       {triggerContainer && TriggerComponent
diff --git a/packages/solid-devtools/src/core.tsx b/packages/solid-devtools/src/core.tsx
index c766fc88..84895299 100644
--- a/packages/solid-devtools/src/core.tsx
+++ b/packages/solid-devtools/src/core.tsx
@@ -18,9 +18,9 @@ import type {
 type SolidPluginRender =
   | JSX.Element
   | ((
-    el: HTMLDivElement | HTMLHeadingElement,
-    props: TanStackDevtoolsPluginProps,
-  ) => JSX.Element)
+      el: HTMLDivElement | HTMLHeadingElement,
+      props: TanStackDevtoolsPluginProps,
+    ) => JSX.Element)
 const convertRender = (
   el: HTMLDivElement | HTMLHeadingElement,
   Component: SolidPluginRender,
@@ -107,8 +107,8 @@ export interface TanStackDevtoolsInit {
      * An optional custom function to render the dev tools trigger component.
      */
     customTrigger?:
-    | ((el: HTMLElement, props: TriggerProps) => JSX.Element)
-    | JSX.Element
+      | ((el: HTMLElement, props: TriggerProps) => JSX.Element)
+      | JSX.Element
   }
   /**
    * Configuration for the TanStack Devtools client event bus.
@@ -129,8 +129,8 @@ export default function SolidDevtoolsCore({
         typeof plugin.name === 'string'
           ? plugin.name
           : // The check above confirms that `plugin.name` is of Render type
-          (el, props) =>
-            convertRender(el, plugin.name as SolidPluginRender, props),
+            (el, props) =>
+              convertRender(el, plugin.name as SolidPluginRender, props),
       render: (el: HTMLDivElement, props: TanStackDevtoolsPluginProps) =>
         convertRender(el, plugin.render, props),
     })),

From 9b9a3277d5148540a981283911218a6559804366 Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Wed, 14 Jan 2026 11:13:19 +0100
Subject: [PATCH 3/4] fix tests

---
 packages/devtools-utils/package.json           |  4 ++--
 .../devtools-utils/src/solid/class.test.tsx    | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/devtools-utils/package.json b/packages/devtools-utils/package.json
index dc364a50..874a01c0 100644
--- a/packages/devtools-utils/package.json
+++ b/packages/devtools-utils/package.json
@@ -63,10 +63,10 @@
     "@tanstack/devtools-ui": "workspace:^"
   },
   "devDependencies": {
+    "@tanstack/devtools": "workspace:^",
     "tsup": "^8.5.0",
     "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.8",
-    "@tanstack/devtools": "workspace:^"
+    "vite-plugin-solid": "^2.11.8"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",
diff --git a/packages/devtools-utils/src/solid/class.test.tsx b/packages/devtools-utils/src/solid/class.test.tsx
index 80ce341a..9d99d892 100644
--- a/packages/devtools-utils/src/solid/class.test.tsx
+++ b/packages/devtools-utils/src/solid/class.test.tsx
@@ -41,7 +41,7 @@ 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 +50,9 @@ 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 +69,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 })
     instance.unmount()
     await expect(
-      instance.mount(document.createElement('div'), 'dark'),
+      instance.mount(document.createElement('div'), { theme: 'dark', devtoolsOpen: true }),
     ).resolves.not.toThrow()
   })
 
@@ -81,7 +81,7 @@ 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 +93,9 @@ 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 +112,7 @@ 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()
   })
 })

From 64ae60edc7582676be0b06579282d15a174079b7 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 14 Jan 2026 10:13:36 +0000
Subject: [PATCH 4/4] ci: apply automated fixes

---
 .../devtools-utils/src/solid/class.test.tsx   | 45 +++++++++++++++----
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/devtools-utils/src/solid/class.test.tsx b/packages/devtools-utils/src/solid/class.test.tsx
index 9d99d892..1ee8cd31 100644
--- a/packages/devtools-utils/src/solid/class.test.tsx
+++ b/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'), { theme: 'dark', devtoolsOpen: true })
+    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'), { theme: 'dark', devtoolsOpen: true })
+    await instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     await expect(
-      instance.mount(document.createElement('div'), { theme: 'dark', devtoolsOpen: true }),
+      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'), { theme: 'dark', devtoolsOpen: true })
+    await instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     instance.unmount()
     await expect(
-      instance.mount(document.createElement('div'), { theme: 'dark', devtoolsOpen: true }),
+      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'), { theme: 'dark', devtoolsOpen: true })
+    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'), { theme: 'dark', devtoolsOpen: true })
+    await noOpInstance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     await expect(
-      noOpInstance.mount(document.createElement('div'), { theme: 'dark', devtoolsOpen: true }),
+      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'), { theme: 'dark', devtoolsOpen: true })
+    await noOpInstance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     expect(() => noOpInstance.unmount()).not.toThrow()
   })
 })