feat: utils and props passing

Author: DamianOsipiuk

examples/vue/basic/package.json

@@ -11,12 +11,12 @@
     "@tanstack/devtools": "^0.6.22",
     "@tanstack/vue-devtools": "^0.1.0",
     "@tanstack/vue-query": "^5.90.5",
-    "@tanstack/vue-query-devtools": "^5.91.0",
+    "@tanstack/vue-query-devtools": "^6.1.0",
     "vue": "^3.5.22"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "typescript": "~5.9.2",
     "vite": "^7.1.7"
   }
-}
+}

packages/devtools-utils/package.json

@@ -53,7 +53,8 @@
   "peerDependencies": {
     "@types/react": ">=19.0.0",
     "react": ">=19.0.0",
-    "solid-js": ">=1.9.7"
+    "solid-js": ">=1.9.7",
+    "vue": ">=3.2.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -64,6 +65,9 @@
     },
     "solid-js": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "files": [
@@ -85,4 +89,4 @@
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.8"
   }
-}
+}

packages/devtools-utils/src/vue/index.ts

@@ -0,0 +1,2 @@
+export * from './panel'
+export * from './plugin'

packages/devtools-utils/src/vue/panel.ts

@@ -0,0 +1,71 @@
+import { defineComponent, h, onMounted, onUnmounted, ref } from 'vue'
+import type { DefineComponent } from 'vue'
+
+export interface DevtoolsPanelProps {
+  theme?: 'dark' | 'light' | 'system'
+}
+
+export function createVuePanel<
+  TComponentProps extends DevtoolsPanelProps,
+  TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, theme?: DevtoolsPanelProps['theme']) => void
+    unmount: () => void
+  },
+>(CoreClass: new (props: TComponentProps) => TCoreDevtoolsClass) {
+  const props = {
+    theme: {
+      type: String as () => DevtoolsPanelProps['theme'],
+    },
+    devtoolsProps: {
+      type: Object as () => TComponentProps,
+    },
+  }
+
+  const Panel = defineComponent({
+    props,
+    setup(config) {
+      const devToolRef = ref<HTMLElement | null>(null)
+      const devtools = ref<TCoreDevtoolsClass | null>(null)
+
+      onMounted(() => {
+        const instance = new CoreClass(config.devtoolsProps as TComponentProps)
+        devtools.value = instance
+
+        if (devToolRef.value) {
+          instance.mount(devToolRef.value, config.theme)
+        }
+      })
+
+      onUnmounted(() => {
+        if (devToolRef.value && devtools.value) {
+          devtools.value.unmount()
+        }
+      })
+
+      return () => {
+        return h('div', {
+          style: { height: '100%' },
+          ref: devToolRef,
+        })
+      }
+    },
+  })
+
+  const NoOpPanel = defineComponent({
+    props,
+    setup() {
+      return () => null
+    },
+  })
+
+  return [Panel, NoOpPanel] as unknown as [
+    DefineComponent<{
+      theme?: DevtoolsPanelProps['theme']
+      devtoolsProps: TComponentProps
+    }>,
+    DefineComponent<{
+      theme?: DevtoolsPanelProps['theme']
+      devtoolsProps: TComponentProps
+    }>,
+  ]
+}

packages/devtools-utils/src/vue/plugin.ts

@@ -0,0 +1,24 @@
+import { Fragment } from 'vue'
+import type { DefineComponent } from 'vue'
+
+export function createVuePlugin<TComponentProps extends Record<string, any>>(
+  name: string,
+  component: DefineComponent<TComponentProps, {}, unknown>,
+  props: TComponentProps,
+) {
+  function Plugin() {
+    return {
+      name,
+      component,
+      props,
+    }
+  }
+  function NoOpPlugin(props: Record<string, any>) {
+    return {
+      name,
+      component: Fragment,
+      props,
+    }
+  }
+  return [Plugin, NoOpPlugin] as const
+}

packages/vue-devtools/src/types.ts

@@ -45,3 +45,9 @@ export interface TanStackDevtoolsVueInit {
    */
   eventBusConfig?: ClientEventBusConfig
 }
+
+export type RenderArray = Array<{
+  id: string
+  component: Component
+  props: Record<string, unknown>
+}>

packages/vue-devtools/src/vue-devtools.vue

@@ -1,41 +1,44 @@
 <script setup lang="ts">
 import { onMounted, onScopeDispose, ref, shallowRef, watchEffect } from 'vue'
 import { PLUGIN_CONTAINER_ID, TanStackDevtoolsCore } from '@tanstack/devtools'
+import type { DefineComponent } from 'vue'
 import type { TanStackDevtoolsPlugin } from '@tanstack/devtools'
 import type {
+  RenderArray,
   TanStackDevtoolsVueInit,
   TanStackDevtoolsVuePlugin,
 } from './types'
 
 const props = defineProps<TanStackDevtoolsVueInit>()
 
-const titlesToRender = shallowRef<Array<{ id: string; component: any }>>([])
-const pluginsToRender = shallowRef<
-  Array<{ id: string; component: any; props: any }>
->([])
+const titlesToRender = shallowRef<RenderArray>([])
+const pluginsToRender = shallowRef<RenderArray>([])
 const div = ref<HTMLElement>()
 
 function getPlugin(plugin: TanStackDevtoolsVuePlugin): TanStackDevtoolsPlugin {
   return {
-    ...plugin,
+    id: plugin.id,
     name:
       typeof plugin.name === 'string'
         ? plugin.name
-        : (e, _theme) => {
+        : (e, theme) => {
             const id = e.getAttribute('id')!
             titlesToRender.value = [
               ...titlesToRender.value,
               {
                 id,
-                component: plugin.name,
+                component: plugin.name as DefineComponent<any>,
+                props: {
+                  theme,
+                },
               },
             ]
           },
-    render: (e, _theme) => {
+    render: (e, theme) => {
       const id = e.getAttribute('id')!
       pluginsToRender.value = [
         ...pluginsToRender.value,
-        { id, component: plugin.component, props: plugin.props },
+        { id, component: plugin.component, props: { theme, ...plugin.props } },
       ]
     },
     destroy: (pluginId) => {
@@ -78,13 +81,17 @@ onScopeDispose(() => {
     :key="title.id"
     :to="'#' + title.id"
   >
-    <component :is="title.component" />
+    <component :is="title.component" v-bind="title.props" />
   </Teleport>
   <Teleport
     v-for="plugin in pluginsToRender"
     :key="plugin.id"
     :to="'#' + plugin.id"
   >
-    <component :is="plugin.component" v-bind="plugin.props" />
+    <component
+      :is="plugin.component"
+      :devtools-props="plugin.props"
+      v-bind="plugin.props"
+    />
   </Teleport>
 </template>