@tanstack/devtools-utils - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

src/vue/index.ts

+export * from './panel'
+export * from './plugin'

src/vue/panel.ts

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

src/vue/plugin.ts

+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
+}

package.json

 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "TanStack Devtools utilities for creating your own devtools.",
@@ -56,3 +56,4 @@ "author": "Tanner Linsley",
     "react": ">=19.0.0",
-    "solid-js": ">=1.9.7"
+    "solid-js": ">=1.9.7",
+    "vue": ">=3.2.0"
   },
@@ -68,2 +69,5 @@ "peerDependenciesMeta": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
     }
@@ -70,0 +74,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

34123

7.35%

Number of package files

27

12.5%

Lines of code

888

10.72%

Worsened metrics

Dependency count

5

25%

No dependency changes