@tanstack/devtools-utils 0.3.4 → 0.4.0

package/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

package/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} />
   }

package/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

package/src/solid/class-mount-impl.tsx

@@ -2,27 +2,24 @@
 
 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(() =>
-    import('@tanstack/devtools-ui').then((m) => ({
-      default: m.ThemeContextProvider,
-    })),
-  )
 
   return render(
     () => (
       <Portal mount={el}>
         <div style={{ height: '100%' }}>
-          <ThemeProvider theme={theme}>
-            <Component />
-          </ThemeProvider>
+          <Component {...props} />
         </div>
       </Portal>
     ),

package/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,17 +57,26 @@ 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()
   })
@@ -68,7 +84,10 @@ describe('constructCoreClass', () => {
   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()
   })
 })

package/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) {
@@ -48,11 +54,13 @@ export function constructCoreClass(
       if (!this.#isMounted && !this.#isMounting) {
         throw new Error('Devtools is not mounted')
       }
+
       if (this.#isMounting) {
         this.#abortMount = true
         this.#isMounting = false
         return
       }
+
       this.#dispose?.()
       this.#isMounted = false
     }
@@ -62,7 +70,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() {}
   }
 

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

package/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

package/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)
         }
       })
 

package/dist/preact/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/react/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/solid/esm/class-mount-impl/LK7V47IP.js

@@ -1 +0,0 @@
-export { __mountComponent } from '../chunk/UX5ZZ4MG.js';

package/dist/solid/esm/class-mount-impl/ZAIAXV4M.js

@@ -1 +0,0 @@
-export { __mountComponent } from '../chunk/ZXPCWXRH.js';

package/dist/vue/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}