@tanstack/devtools-utils 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -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": [

package/src/vue/index.ts

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

package/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
+    }>,
+  ]
+}

package/src/vue/plugin.ts

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