@tanstack/vue-devtools 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TanStack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# @tanstack/vue-devtools
+
+This package is still under active development and might have breaking changes in the future. Please use it with caution.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { TanStackDevtools } from '@tanstack/vue-devtools'
+import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
+
+const plugins = [{ name: 'Vue Query', component: VueQueryDevtoolsPanel }]
+</script>
+
+<template>
+  <TanStackDevtools
+    :eventBusConfig="{ connectToServerBus: true }"
+    :plugins="plugins"
+  />
+</template>
+```
+
+## Creating plugins
+
+In order to create a plugin for TanStack Devtools, you can use the `plugins` prop of the `TanStackDevtools` component. Here's an example of how to create a simple plugin:
+
+```vue
+<script setup lang="ts">
+import { TanStackDevtools } from '@tanstack/vue-devtools'
+
+const plugins = [
+  {
+    id: 'your-plugin-id',
+    name: 'Your Plugin',
+    component: CustomPluginComponent,
+  },
+]
+</script>
+
+<template>
+  <TanStackDevtools
+    :eventBusConfig="{ connectToServerBus: true }"
+    :plugins="plugins"
+  />
+</template>
+```

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export declare const TanStackDevtools: import('vue').DefineComponent<import('./types.js').TanStackDevtoolsVueInit, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('./types.js').TanStackDevtoolsVueInit> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export type { TanStackDevtoolsVuePlugin, TanStackDevtoolsVueInit, } from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./vue-devtools.vue.js";
+const TanStackDevtools = _sfc_main;
+export {
+  TanStackDevtools
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import Devtools from './vue-devtools.vue'\n\nexport const TanStackDevtools = Devtools\n\nexport type {\n  TanStackDevtoolsVuePlugin,\n  TanStackDevtoolsVueInit,\n} from './types'\n"],"names":["Devtools"],"mappings":";AAEO,MAAM,mBAAmBA;"}

package/dist/esm/types.d.ts

@@ -0,0 +1,47 @@
+import { Component } from 'vue';
+import { ClientEventBusConfig, TanStackDevtoolsConfig } from '@tanstack/devtools';
+export type TanStackDevtoolsVuePlugin = {
+    id?: string;
+    component: Component;
+    name: string | Component;
+    props?: Record<string, any>;
+};
+export interface TanStackDevtoolsVueInit {
+    /**
+     * Array of plugins to be used in the devtools.
+     * Each plugin should have a `render` prop that returns a Vue component
+     *
+     * Example:
+     * ```vue
+     * <script setup lang="ts">
+     * import { TanStackDevtools } from '@tanstack/vue-devtools'
+     * import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
+     *
+     * const plugins = [{ name: 'Vue Query', component: VueQueryDevtoolsPanel }]
+     * </script>
+     *
+     * <template>
+     *  <TanStackDevtools
+     *   :eventBusConfig="{ connectToServerBus: true }"
+     *   :plugins="plugins"
+     *  />
+     * </template>
+     * ```
+     */
+    plugins?: Array<TanStackDevtoolsVuePlugin>;
+    /**
+     * Configuration for the devtools shell. These configuration options are used to set the
+     * initial state of the devtools when it is started for the first time. Afterwards,
+     * the settings are persisted in local storage and changed through the settings panel.
+     */
+    config?: Partial<TanStackDevtoolsConfig>;
+    /**
+     * Configuration for the TanStack Devtools client event bus.
+     */
+    eventBusConfig?: ClientEventBusConfig;
+}
+export type RenderArray = Array<{
+    id: string;
+    component: Component;
+    props: Record<string, unknown>;
+}>;

package/dist/esm/vue-devtools.vue.d.ts

@@ -0,0 +1,4 @@
+import { DefineComponent } from 'vue';
+import { TanStackDevtoolsVueInit } from './types.js';
+declare const _default: DefineComponent<TanStackDevtoolsVueInit, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TanStackDevtoolsVueInit> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/esm/vue-devtools.vue.js

@@ -0,0 +1,96 @@
+import { defineComponent, shallowRef, ref, watchEffect, onMounted, onScopeDispose, createElementBlock, openBlock, Fragment, createElementVNode, renderList, createBlock, Teleport, resolveDynamicComponent, mergeProps } from "vue";
+import { TanStackDevtoolsCore, PLUGIN_CONTAINER_ID } from "@tanstack/devtools";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "vue-devtools",
+  props: {
+    plugins: {},
+    config: {},
+    eventBusConfig: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const titlesToRender = shallowRef([]);
+    const pluginsToRender = shallowRef([]);
+    const div = ref();
+    function getPlugin(plugin) {
+      return {
+        id: plugin.id,
+        name: typeof plugin.name === "string" ? plugin.name : (e, theme) => {
+          const id = e.getAttribute("id");
+          titlesToRender.value = [
+            ...titlesToRender.value,
+            {
+              id,
+              component: plugin.name,
+              props: {
+                theme
+              }
+            }
+          ];
+        },
+        render: (e, theme) => {
+          const id = e.getAttribute("id");
+          pluginsToRender.value = [
+            ...pluginsToRender.value,
+            { id, component: plugin.component, props: { theme, ...plugin.props } }
+          ];
+        },
+        destroy: (pluginId) => {
+          pluginsToRender.value = pluginsToRender.value.filter(
+            (plugin2) => plugin2.id !== `${PLUGIN_CONTAINER_ID}-${pluginId}`
+          );
+        }
+      };
+    }
+    const devtools = new TanStackDevtoolsCore({
+      config: props.config,
+      eventBusConfig: props.eventBusConfig,
+      plugins: props.plugins?.map(getPlugin)
+    });
+    watchEffect(() => {
+      devtools.setConfig({
+        config: props.config,
+        eventBusConfig: props.eventBusConfig,
+        plugins: props.plugins?.map(getPlugin)
+      });
+    });
+    onMounted(() => {
+      if (div.value) {
+        devtools.mount(div.value);
+      }
+    });
+    onScopeDispose(() => {
+      devtools.unmount();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          ref_key: "div",
+          ref: div
+        }, null, 512),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(titlesToRender.value, (title) => {
+          return openBlock(), createBlock(Teleport, {
+            key: title.id,
+            to: "#" + title.id
+          }, [
+            (openBlock(), createBlock(resolveDynamicComponent(title.component), mergeProps({ ref_for: true }, title.props), null, 16))
+          ], 8, ["to"]);
+        }), 128)),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(pluginsToRender.value, (plugin) => {
+          return openBlock(), createBlock(Teleport, {
+            key: plugin.id,
+            to: "#" + plugin.id
+          }, [
+            (openBlock(), createBlock(resolveDynamicComponent(plugin.component), mergeProps({
+              "devtools-props": plugin.props
+            }, { ref_for: true }, plugin.props), null, 16, ["devtools-props"]))
+          ], 8, ["to"]);
+        }), 128))
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=vue-devtools.vue.js.map

package/dist/esm/vue-devtools.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-devtools.vue.js","sources":["../../src/vue-devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, shallowRef, watchEffect } from 'vue'\nimport { PLUGIN_CONTAINER_ID, TanStackDevtoolsCore } from '@tanstack/devtools'\nimport type { DefineComponent } from 'vue'\nimport type { TanStackDevtoolsPlugin } from '@tanstack/devtools'\nimport type {\n  RenderArray,\n  TanStackDevtoolsVueInit,\n  TanStackDevtoolsVuePlugin,\n} from './types'\n\nconst props = defineProps<TanStackDevtoolsVueInit>()\n\nconst titlesToRender = shallowRef<RenderArray>([])\nconst pluginsToRender = shallowRef<RenderArray>([])\nconst div = ref<HTMLElement>()\n\nfunction getPlugin(plugin: TanStackDevtoolsVuePlugin): TanStackDevtoolsPlugin {\n  return {\n    id: plugin.id,\n    name:\n      typeof plugin.name === 'string'\n        ? plugin.name\n        : (e, theme) => {\n            const id = e.getAttribute('id')!\n            titlesToRender.value = [\n              ...titlesToRender.value,\n              {\n                id,\n                component: plugin.name as DefineComponent<any>,\n                props: {\n                  theme,\n                },\n              },\n            ]\n          },\n    render: (e, theme) => {\n      const id = e.getAttribute('id')!\n      pluginsToRender.value = [\n        ...pluginsToRender.value,\n        { id, component: plugin.component, props: { theme, ...plugin.props } },\n      ]\n    },\n    destroy: (pluginId) => {\n      pluginsToRender.value = pluginsToRender.value.filter(\n        (plugin) => plugin.id !== `${PLUGIN_CONTAINER_ID}-${pluginId}`,\n      )\n    },\n  }\n}\n\nconst devtools = new TanStackDevtoolsCore({\n  config: props.config,\n  eventBusConfig: props.eventBusConfig,\n  plugins: props.plugins?.map(getPlugin),\n})\n\nwatchEffect(() => {\n  devtools.setConfig({\n    config: props.config,\n    eventBusConfig: props.eventBusConfig,\n    plugins: props.plugins?.map(getPlugin),\n  })\n})\n\nonMounted(() => {\n  if (div.value) {\n    devtools.mount(div.value)\n  }\n})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div ref=\"div\" />\n  <Teleport\n    v-for=\"title in titlesToRender\"\n    :key=\"title.id\"\n    :to=\"'#' + title.id\"\n  >\n    <component :is=\"title.component\" v-bind=\"title.props\" />\n  </Teleport>\n  <Teleport\n    v-for=\"plugin in pluginsToRender\"\n    :key=\"plugin.id\"\n    :to=\"'#' + plugin.id\"\n  >\n    <component\n      :is=\"plugin.component\"\n      :devtools-props=\"plugin.props\"\n      v-bind=\"plugin.props\"\n    />\n  </Teleport>\n</template>\n"],"names":["plugin","_createElementVNode","_createElementBlock","_Fragment","_renderList","_createBlock","_Teleport","_resolveDynamicComponent","_mergeProps","_openBlock"],"mappings":";;;;;;;;;;AAWA,UAAM,QAAQ;AAEd,UAAM,iBAAiB,WAAwB,EAAE;AACjD,UAAM,kBAAkB,WAAwB,EAAE;AAClD,UAAM,MAAM,IAAA;AAEZ,aAAS,UAAU,QAA2D;AAC5E,aAAO;AAAA,QACL,IAAI,OAAO;AAAA,QACX,MACE,OAAO,OAAO,SAAS,WACnB,OAAO,OACP,CAAC,GAAG,UAAU;AACZ,gBAAM,KAAK,EAAE,aAAa,IAAI;AAC9B,yBAAe,QAAQ;AAAA,YACrB,GAAG,eAAe;AAAA,YAClB;AAAA,cACE;AAAA,cACA,WAAW,OAAO;AAAA,cAClB,OAAO;AAAA,gBACL;AAAA,cAAA;AAAA,YACF;AAAA,UACF;AAAA,QAEJ;AAAA,QACN,QAAQ,CAAC,GAAG,UAAU;AACpB,gBAAM,KAAK,EAAE,aAAa,IAAI;AAC9B,0BAAgB,QAAQ;AAAA,YACtB,GAAG,gBAAgB;AAAA,YACnB,EAAE,IAAI,WAAW,OAAO,WAAW,OAAO,EAAE,OAAO,GAAG,OAAO,MAAA,EAAM;AAAA,UAAE;AAAA,QAEzE;AAAA,QACA,SAAS,CAAC,aAAa;AACrB,0BAAgB,QAAQ,gBAAgB,MAAM;AAAA,YAC5C,CAACA,YAAWA,QAAO,OAAO,GAAG,mBAAmB,IAAI,QAAQ;AAAA,UAAA;AAAA,QAEhE;AAAA,MAAA;AAAA,IAEJ;AAEA,UAAM,WAAW,IAAI,qBAAqB;AAAA,MACxC,QAAQ,MAAM;AAAA,MACd,gBAAgB,MAAM;AAAA,MACtB,SAAS,MAAM,SAAS,IAAI,SAAS;AAAA,IAAA,CACtC;AAED,gBAAY,MAAM;AAChB,eAAS,UAAU;AAAA,QACjB,QAAQ,MAAM;AAAA,QACd,gBAAgB,MAAM;AAAA,QACtB,SAAS,MAAM,SAAS,IAAI,SAAS;AAAA,MAAA,CACtC;AAAA,IACH,CAAC;AAED,cAAU,MAAM;AACd,UAAI,IAAI,OAAO;AACb,iBAAS,MAAM,IAAI,KAAK;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,mBAAe,MAAM;AACnB,eAAS,QAAA;AAAA,IACX,CAAC;;;QAICC,mBAAiB,OAAA;AAAA,mBAAR;AAAA,UAAJ,KAAI;AAAA,QAAA;0BACTC,mBAMWC,UAAA,MAAAC,WALO,eAAA,OAAc,CAAvB,UAAK;8BADdC,YAMWC,UAAA;AAAA,YAJR,KAAK,MAAM;AAAA,YACX,IAAE,MAAQ,MAAM;AAAA,UAAA;0BAEjBD,YAAwDE,wBAAxC,MAAM,SAAS,GAA/BC,WAAwD,EAAA,SAAA,QAAf,MAAM,KAAK,GAAA,MAAA,EAAA;AAAA,UAAA;;0BAEtDN,mBAUWC,UAAA,MAAAC,WATQ,gBAAA,OAAe,CAAzB,WAAM;8BADfC,YAUWC,UAAA;AAAA,YARR,KAAK,OAAO;AAAA,YACZ,IAAE,MAAQ,OAAO;AAAA,UAAA;aAElBG,aAAAJ,YAIEE,wBAHK,OAAO,SAAS,GADvBC,WAIE;AAAA,cAFC,kBAAgB,OAAO;AAAA,YAAA,GAChB,EAAA,SAAA,KAAA,GAAA,OAAO,KAAK,GAAA,MAAA,IAAA,CAAA,gBAAA,CAAA;AAAA,UAAA;;;;;;"}

package/dist/esm/vue-devtools.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./vue-devtools.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=vue-devtools.vue2.js.map

package/dist/esm/vue-devtools.vue2.js.map

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

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@tanstack/vue-devtools",
+  "version": "0.1.0",
+  "description": "TanStack Devtools is a set of tools for building advanced devtools for your Vue application.",
+  "author": "Damian Osipiuk",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/devtools.git",
+    "directory": "packages/vue-devtools"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "vue",
+    "devtools"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/devtools": "0.8.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint-plugin-vue": "^10.5.1",
+    "vue": "^3.5.22"
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  }
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+import Devtools from './vue-devtools.vue'
+
+export const TanStackDevtools = Devtools
+
+export type {
+  TanStackDevtoolsVuePlugin,
+  TanStackDevtoolsVueInit,
+} from './types'

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/types.ts

@@ -0,0 +1,53 @@
+import type { Component } from 'vue'
+import type {
+  ClientEventBusConfig,
+  TanStackDevtoolsConfig,
+} from '@tanstack/devtools'
+
+export type TanStackDevtoolsVuePlugin = {
+  id?: string
+  component: Component
+  name: string | Component
+  props?: Record<string, any>
+}
+
+export interface TanStackDevtoolsVueInit {
+  /**
+   * Array of plugins to be used in the devtools.
+   * Each plugin should have a `render` prop that returns a Vue component
+   *
+   * Example:
+   * ```vue
+   * <script setup lang="ts">
+   * import { TanStackDevtools } from '@tanstack/vue-devtools'
+   * import { VueQueryDevtoolsPanel } from '@tanstack/vue-query-devtools'
+   *
+   * const plugins = [{ name: 'Vue Query', component: VueQueryDevtoolsPanel }]
+   * </script>
+   *
+   * <template>
+   *  <TanStackDevtools
+   *   :eventBusConfig="{ connectToServerBus: true }"
+   *   :plugins="plugins"
+   *  />
+   * </template>
+   * ```
+   */
+  plugins?: Array<TanStackDevtoolsVuePlugin>
+  /**
+   * Configuration for the devtools shell. These configuration options are used to set the
+   * initial state of the devtools when it is started for the first time. Afterwards,
+   * the settings are persisted in local storage and changed through the settings panel.
+   */
+  config?: Partial<TanStackDevtoolsConfig>
+  /**
+   * Configuration for the TanStack Devtools client event bus.
+   */
+  eventBusConfig?: ClientEventBusConfig
+}
+
+export type RenderArray = Array<{
+  id: string
+  component: Component
+  props: Record<string, unknown>
+}>

package/src/vue-devtools.vue

@@ -0,0 +1,97 @@
+<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<RenderArray>([])
+const pluginsToRender = shallowRef<RenderArray>([])
+const div = ref<HTMLElement>()
+
+function getPlugin(plugin: TanStackDevtoolsVuePlugin): TanStackDevtoolsPlugin {
+  return {
+    id: plugin.id,
+    name:
+      typeof plugin.name === 'string'
+        ? plugin.name
+        : (e, theme) => {
+            const id = e.getAttribute('id')!
+            titlesToRender.value = [
+              ...titlesToRender.value,
+              {
+                id,
+                component: plugin.name as DefineComponent<any>,
+                props: {
+                  theme,
+                },
+              },
+            ]
+          },
+    render: (e, theme) => {
+      const id = e.getAttribute('id')!
+      pluginsToRender.value = [
+        ...pluginsToRender.value,
+        { id, component: plugin.component, props: { theme, ...plugin.props } },
+      ]
+    },
+    destroy: (pluginId) => {
+      pluginsToRender.value = pluginsToRender.value.filter(
+        (plugin) => plugin.id !== `${PLUGIN_CONTAINER_ID}-${pluginId}`,
+      )
+    },
+  }
+}
+
+const devtools = new TanStackDevtoolsCore({
+  config: props.config,
+  eventBusConfig: props.eventBusConfig,
+  plugins: props.plugins?.map(getPlugin),
+})
+
+watchEffect(() => {
+  devtools.setConfig({
+    config: props.config,
+    eventBusConfig: props.eventBusConfig,
+    plugins: props.plugins?.map(getPlugin),
+  })
+})
+
+onMounted(() => {
+  if (div.value) {
+    devtools.mount(div.value)
+  }
+})
+
+onScopeDispose(() => {
+  devtools.unmount()
+})
+</script>
+
+<template>
+  <div ref="div" />
+  <Teleport
+    v-for="title in titlesToRender"
+    :key="title.id"
+    :to="'#' + title.id"
+  >
+    <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"
+      :devtools-props="plugin.props"
+      v-bind="plugin.props"
+    />
+  </Teleport>
+</template>