feat(vue-query): component based vue devtools - Vue3 only (#6255)

DamianOsipiuk · web-flow · commit 634b6dac3267 · 2023-11-07T09:41:53.000+01:00
diff --git a/docs/vue/devtools.md b/docs/vue/devtools.md
@@ -11,3 +11,52 @@ The only thing you need to do is to install the official **[Vue Devtools](https:
 
 Vue Query will seamlessly integrate with the official devtools, adding custom inspector and timeline events.
 Devtool code will be treeshaken from production bundles by default.
+
+## Component based Devtools (Vue 3)
+
+You can embeed devtools component into your page by using dedicated package.  
+Component based devtools are using the same framework-agnostic implementation, have more features and are updated more frequently.
+
+The devtools component is a separate package that you need to install:
+
+```bash
+$ npm i @tanstack/vue-query-devtools
+# or
+$ pnpm add @tanstack/vue-query-devtools
+# or
+$ yarn add @tanstack/vue-query-devtools
+```
+
+By default, Vue Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build.
+
+Devtools will be mounted as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
+
+Place the following code as high in your Vue app as you can. The closer it is to the root of the page, the better it will work!
+
+```vue
+<script setup>
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+</script>
+
+<template>
+  <h1>The app!</h1>
+  <VueQueryDevtools />
+</template>
+```
+
+### Options
+
+- `initialIsOpen: Boolean`
+  - Set this `true` if you want the dev tools to default to being open
+- `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
+  - Defaults to `bottom-left`
+  - The position of the React Query logo to open and close the devtools panel
+- `position?: "top" | "bottom" | "left" | "right"`
+  - Defaults to `bottom`
+  - The position of the React Query devtools panel
+- `client?: QueryClient`,
+  - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.
+- `errorTypes?: { name: string; initializer: (query: Query) => TError}`
+  - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error.
+- `styleNonce?: string`
+  - 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.
diff --git a/examples/vue/basic/package.json b/examples/vue/basic/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@tanstack/vue-query": "^5.0.0",
+    "@tanstack/vue-query-devtools": "^5.0.0",
     "vue": "^3.3.0"
   },
   "devDependencies": {
diff --git a/examples/vue/basic/src/App.vue b/examples/vue/basic/src/App.vue
@@ -1,12 +1,13 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
 
 import Posts from './Posts.vue'
 import Post from './Post.vue'
 
 export default defineComponent({
   name: 'App',
-  components: { Posts, Post },
+  components: { Posts, Post, VueQueryDevtools },
   setup() {
     const visitedPosts = ref(new Set())
     const isVisited = (id: number) => visitedPosts.value.has(id)
@@ -40,4 +41,5 @@ export default defineComponent({
   </p>
   <Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
   <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
+  <VueQueryDevtools />
 </template>
diff --git a/packages/vue-query-devtools/.eslintrc.cjs b/packages/vue-query-devtools/.eslintrc.cjs
@@ -0,0 +1,12 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+    extraFileExtensions: ['.vue'],
+  },
+}
+
+module.exports = config
diff --git a/packages/vue-query-devtools/package.json b/packages/vue-query-devtools/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "@tanstack/vue-query-devtools",
+  "version": "5.1.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"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "@tanstack/query-devtools": "workspace:*"
+  },
+  "devDependencies": {
+    "@tanstack/vue-query": "workspace:*",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "vue": "^3.3.0",
+    "vue-tsc": "^1.8.21",
+    "vite": "^4.4.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  }
+}
diff --git a/packages/vue-query-devtools/src/devtools.vue b/packages/vue-query-devtools/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>
diff --git a/packages/vue-query-devtools/src/index.ts b/packages/vue-query-devtools/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>
diff --git a/packages/vue-query-devtools/src/production.ts b/packages/vue-query-devtools/src/production.ts
@@ -0,0 +1,3 @@
+import devtools from './devtools.vue'
+
+export default devtools
diff --git a/packages/vue-query-devtools/src/shims-vue.d.ts b/packages/vue-query-devtools/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/packages/vue-query-devtools/src/types.ts b/packages/vue-query-devtools/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
+}
diff --git a/packages/vue-query-devtools/tsconfig.json b/packages/vue-query-devtools/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "shims-vue.d.ts"]
+}
diff --git a/packages/vue-query-devtools/vite.config.js b/packages/vue-query-devtools/vite.config.js
@@ -0,0 +1,29 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vuePlugin from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vuePlugin()],
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: [
+        resolve(__dirname, 'src/index.ts'),
+        resolve(__dirname, 'src/production.ts'),
+      ],
+      formats: ['es'],
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+})
diff --git a/packages/vue-query-devtools/vitest.config.ts b/packages/vue-query-devtools/vitest.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    name: 'vue-query-devtools',
+    dir: './src',
+    watch: false,
+    setupFiles: ['test-setup.ts'],
+    environment: 'jsdom',
+    coverage: { provider: 'istanbul' },
+  },
+})
diff --git a/packages/vue-query/README.md b/packages/vue-query/README.md
@@ -13,7 +13,7 @@ Support for Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi)
 
 # Documentation
 
-Visit https://tanstack.com/query/v4/docs/adapters/vue-query
+Visit https://tanstack.com/query/latest/docs/vue/overview
 
 # Quick Features
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/config.js b/scripts/config.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import devtools from './devtools.vue'`
	`2`	`+`
	`3`	`+export default devtools`