@tanstack/vue-query-devtools 5.8.0

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import type { DefineComponent } from 'vue';
+import type { DevtoolsOptions } from './types';
+export declare const VueQueryDevtools: DefineComponent<DevtoolsOptions, {}, unknown>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,eAAO,MAAM,gBAAgB,+CAMqB,CAAA"}

package/dist/index.js

@@ -0,0 +1,8 @@
+import { _ as e } from "./devtools.vue_vue_type_script_setup_true_lang-7800e317.js";
+import "vue";
+const r = process.env.NODE_ENV !== "development" ? function() {
+  return null;
+} : e;
+export {
+  r as VueQueryDevtools
+};

package/dist/production.d.ts

@@ -0,0 +1,3 @@
+import devtools from './devtools.vue';
+export default devtools;
+//# sourceMappingURL=production.d.ts.map

package/dist/production.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"production.d.ts","sourceRoot":"","sources":["../src/production.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAErC,eAAe,QAAQ,CAAA"}

package/dist/production.js

@@ -0,0 +1,5 @@
+import { _ as m } from "./devtools.vue_vue_type_script_setup_true_lang-7800e317.js";
+import "vue";
+export {
+  m as default
+};

package/dist/types.d.ts

@@ -0,0 +1,33 @@
+import type { DevToolsErrorType, DevtoolsButtonPosition, DevtoolsPosition } from '@tanstack/query-devtools';
+import type { QueryClient } from '@tanstack/vue-query';
+export interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * The position of the React Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-left'.
+     */
+    buttonPosition?: DevtoolsButtonPosition;
+    /**
+     * The position of the React Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition;
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevToolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,0BAA0B,CAAA;AACjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEtD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAA;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAA;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@tanstack/vue-query-devtools",
+  "version": "5.8.0",
+  "description": "Developer tools to interact with and visualize the TanStack/vue-query cache",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/query.git",
+    "directory": "packages/vue-query-devtools"
+  },
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./production": {
+      "types": "./dist/production.d.ts",
+      "default": "./dist/production.js"
+    },
+    "./dist/production.js": {
+      "types": "./dist/production.d.ts",
+      "default": "./dist/production.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/query-devtools": "5.7.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.4.0",
+    "vue": "^3.3.0",
+    "vue-tsc": "^1.8.21",
+    "vite": "^4.4.4",
+    "@tanstack/vue-query": "5.7.3"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build && vue-tsc"
+  }
+}

package/src/devtools.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { onMounted, onScopeDispose, watchEffect, ref } from 'vue'
+import { onlineManager, useQueryClient } from '@tanstack/vue-query'
+import { TanstackQueryDevtools } from '@tanstack/query-devtools'
+import type { DevtoolsOptions } from './types'
+
+const props = defineProps<DevtoolsOptions>()
+
+const div = ref<HTMLElement>()
+const client = props.client || useQueryClient()
+const devtools = new TanstackQueryDevtools({
+  client,
+  queryFlavor: 'Vue Query',
+  version: '5',
+  onlineManager,
+  buttonPosition: props.buttonPosition,
+  position: props.position,
+  initialIsOpen: props.initialIsOpen,
+  errorTypes: props.errorTypes,
+  styleNonce: props.styleNonce,
+})
+
+watchEffect(() => {
+  devtools.setButtonPosition(props.buttonPosition || 'bottom-left')
+  devtools.setPosition(props.position || 'bottom')
+  devtools.setInitialIsOpen(props.initialIsOpen)
+  devtools.setErrorTypes(props.errorTypes || [])
+})
+
+onMounted(() => {
+  devtools.mount(div.value as HTMLElement)
+})
+
+onScopeDispose(() => {
+  devtools.unmount()
+})
+</script>
+
+<template>
+  <div className="tsqd-parent-container" ref="div"></div>
+</template>

package/src/index.ts

@@ -0,0 +1,11 @@
+import devtools from './devtools.vue'
+import type { DefineComponent } from 'vue'
+import type { DevtoolsOptions } from './types'
+
+export const VueQueryDevtools = (
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : devtools
+) as DefineComponent<DevtoolsOptions, {}, unknown>

package/src/production.ts

@@ -0,0 +1,3 @@
+import devtools from './devtools.vue'
+
+export default devtools

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,37 @@
+import type {
+  DevToolsErrorType,
+  DevtoolsButtonPosition,
+  DevtoolsPosition,
+} from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/vue-query'
+
+export interface DevtoolsOptions {
+  /**
+   * Set this true if you want the dev tools to default to being open
+   */
+  initialIsOpen?: boolean
+  /**
+   * The position of the React Query logo to open and close the devtools panel.
+   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+   * Defaults to 'bottom-left'.
+   */
+  buttonPosition?: DevtoolsButtonPosition
+  /**
+   * The position of the React Query devtools panel.
+   * 'top' | 'bottom' | 'left' | 'right'
+   * Defaults to 'bottom'.
+   */
+  position?: DevtoolsPosition
+  /**
+   * Custom instance of QueryClient
+   */
+  client?: QueryClient
+  /**
+   * Use this so you can define custom errors that can be shown in the devtools.
+   */
+  errorTypes?: Array<DevToolsErrorType>
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+   */
+  styleNonce?: string
+}