fix: pass props to plugin component

Author: DamianOsipiuk

examples/vue/basic/src/App.vue

@@ -1,6 +1,9 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import { TanStackDevtools } from '@tanstack/vue-devtools'
+import {
+  TanStackDevtools,
+  TanStackDevtoolsVuePlugin,
+} from '@tanstack/vue-devtools'
 import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
 
 import Posts from './Posts.vue'
@@ -19,7 +22,12 @@ export default defineComponent({
       postId.value = id
     }
 
-    const plugins = [{ name: 'Vue Query', component: VueQueryDevtoolsPanel }]
+    const plugins: TanStackDevtoolsVuePlugin[] = [
+      {
+        name: 'Vue Query',
+        component: VueQueryDevtoolsPanel,
+      },
+    ]
 
     return {
       isVisited,

packages/vue-devtools/src/types.ts

@@ -2,13 +2,10 @@ import type { Component } from 'vue'
 import type {
   ClientEventBusConfig,
   TanStackDevtoolsConfig,
-  TanStackDevtoolsPlugin,
 } from '@tanstack/devtools'
 
-export type TanStackDevtoolsVuePlugin = Omit<
-  TanStackDevtoolsPlugin,
-  'render' | 'name'
-> & {
+export type TanStackDevtoolsVuePlugin = {
+  id?: string
   component: Component
   name: string | Component
   props?: Record<string, any>

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

@@ -10,7 +10,9 @@ import type {
 const props = defineProps<TanStackDevtoolsVueInit>()
 
 const titlesToRender = shallowRef<Array<{ id: string; component: any }>>([])
-const pluginsToRender = shallowRef<Array<{ id: string; component: any }>>([])
+const pluginsToRender = shallowRef<
+  Array<{ id: string; component: any; props: any }>
+>([])
 const div = ref<HTMLElement>()
 
 function getPlugin(plugin: TanStackDevtoolsVuePlugin): TanStackDevtoolsPlugin {
@@ -33,7 +35,7 @@ function getPlugin(plugin: TanStackDevtoolsVuePlugin): TanStackDevtoolsPlugin {
       const id = e.getAttribute('id')!
       pluginsToRender.value = [
         ...pluginsToRender.value,
-        { id, component: plugin.component },
+        { id, component: plugin.component, props: plugin.props },
       ]
     },
     destroy: (pluginId) => {
@@ -83,6 +85,6 @@ onScopeDispose(() => {
     :key="plugin.id"
     :to="'#' + plugin.id"
   >
-    <component :is="plugin.component" />
+    <component :is="plugin.component" v-bind="plugin.props" />
   </Teleport>
 </template>