feat(devtools): devtools v2 as a browser extension

docs/getting-started/devtools.md

@@ -2,6 +2,13 @@ Wave your hands in the air and shout hooray because Vue Query comes with dedicat
 
 When you begin your Vue Query journey, you'll want these DevTools by your side. They help visualize all of the inner workings of Vue Query and will likely save you hours of debugging if you find yourself in a pinch!
 
+**The only thing you need to do is to install official [Vue Devtools](https://devtools.vuejs.org/guide/installation.html)**
+
+Vue Query will seemingly integrate with official devtools, adding custom inspector and timeline events.
+Devtools would be treeshaken from production bundles by default.
+
+# **Deprecated**: standalone devtools
+
 ## Import the Devtools
 
 The DevTools are bundle split into the vue-query/devtools package. No need to install anything extra, just:
@@ -68,7 +75,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <VueQueryDevToolsPanel :style={styles} :className={className} />
+  <VueQueryDevToolsPanel :style="{ styles }" :className="{ className }" />
 </template>
 ```
 

examples/2.x-basic/src/App.vue

@@ -1,13 +1,12 @@
 <script lang="ts">
 import { defineComponent, ref } from "@vue/composition-api";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Posts from "./Posts.vue";
 import Post from "./Post.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Posts, Post, VueQueryDevTools },
+  components: { Posts, Post },
   setup() {
     const visitedPosts = ref(new Set());
     const isVisited = (id: number) => visitedPosts.value.has(id);
@@ -47,6 +46,5 @@ export default defineComponent({
       @setPostId="setPostId"
     />
     <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
-    <VueQueryDevTools :initialIsOpen="true" />
   </div>
 </template>

examples/2.x-basic/vite.config.ts

@@ -4,4 +4,6 @@ import { createVuePlugin } from "vite-plugin-vue2";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [createVuePlugin()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });

examples/basic/src/App.vue

@@ -1,13 +1,12 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Posts from "./Posts.vue";
 import Post from "./Post.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Posts, Post, VueQueryDevTools },
+  components: { Posts, Post },
   setup() {
     const visitedPosts = ref(new Set());
     const isVisited = (id: number) => visitedPosts.value.has(id);
@@ -39,12 +38,6 @@ export default defineComponent({
       sequences)
     </strong>
   </p>
-  <Post
-    v-if="postId > -1"
-    :postId="postId"
-    :style="{}"
-    @setPostId="setPostId"
-  />
+  <Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
   <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
-  <VueQueryDevTools :initialIsOpen="true" />
 </template>

examples/basic/vite.config.ts

@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });

examples/multi-client/src/App.vue

@@ -1,17 +1,15 @@
 <script lang="ts">
 import { defineComponent } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Todos from "./Todos.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Todos, VueQueryDevTools },
+  components: { Todos },
 });
 </script>
 
 <template>
   <h1>Vue Query - Multi Client</h1>
   <Todos />
-  <VueQueryDevTools :initialIsOpen="true" :queryClientKeys="['Foo', 'Bar']" />
 </template>

examples/multi-client/vite.config.ts

@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });

examples/multi-page/src/App.vue

@@ -1,11 +1,10 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 import Page from "./Page.vue";
 
 export default defineComponent({
   name: "App",
-  components: { VueQueryDevTools, Page },
+  components: { Page },
   setup() {
     const firstPage = ref(1);
 
@@ -28,7 +27,6 @@ export default defineComponent({
   <button @click="remove">Remove page</button>
   <Page v-if="firstPage === 1" title="Page1" />
   <Page v-else-if="firstPage === 2" title="Page2" />
-  <VueQueryDevTools :initialIsOpen="true" />
 </template>
 
 <style>

examples/multi-page/vite.config.ts

@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });

examples/simple/src/App.vue

@@ -1,17 +1,15 @@
 <script lang="ts">
 import { defineComponent } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Todos from "./Todos.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Todos, VueQueryDevTools },
+  components: { Todos },
 });
 </script>
 
 <template>
   <h1>Vue Query - Simple</h1>
   <Todos />
-  <VueQueryDevTools :initialIsOpen="true" />
 </template>

examples/simple/vite.config.ts

@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });

examples/suspense/src/App.vue

@@ -1,12 +1,11 @@
 <script lang="ts">
 import { defineComponent } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Content from "./Content.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Content, VueQueryDevTools },
+  components: { Content },
 });
 </script>
 
@@ -24,7 +23,6 @@ export default defineComponent({
       <div>Loading...</div>
     </template>
   </Suspense>
-  <VueQueryDevTools :initialIsOpen="true" />
 </template>
 
 <style>

examples/suspense/vite.config.ts

@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });

jest.config.ts

@@ -17,7 +17,12 @@ const config: Config.InitialOptions = {
     "!src/**/*.d.ts",
     // Exlude devtools
     "!src/devtools/**/*",
+    "!src/vue/devtools/**/*",
   ],
+  globals: {
+    "ts-jest": {},
+    __VUE_PROD_DEVTOOLS__: false,
+  },
 };
 
 export default config;

package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "prepare": "husky install",
     "build": "rollup -c rollup.config.ts",
+    "watch": "rollup -c rollup.config.ts -w",
     "lint": "eslint ./src/**/*.{ts,vue}",
     "test": "npm run test:2 && npm run test:3",
     "test:2": "vue-demi-switch 2 vue2 && jest",
@@ -40,6 +41,7 @@
   },
   "homepage": "https://github.com/DamianOsipiuk/vue-query#readme",
   "dependencies": {
+    "@vue/devtools-api": "^6.1.4",
     "match-sorter": "^6.3.1",
     "react-query": "^3.34.9",
     "vue-demi": "0.10.1"

rollup.config.ts

@@ -1,3 +1,4 @@
+import { defineConfig } from "rollup";
 import resolve from "@rollup/plugin-node-resolve";
 import postcss from "rollup-plugin-postcss";
 import typescript from "rollup-plugin-typescript2";
@@ -15,10 +16,10 @@ const common = {
   ],
   watch: {
     include: "src/**",
-    exclude: ["node_modules/**", "tests"],
+    exclude: ["node_modules/**", "__tests__", "__mocks__"],
   },
 };
-export default [
+export default defineConfig([
   {
     input: "src/index.ts",
     output: {
@@ -73,4 +74,4 @@ export default [
     },
     ...common,
   },
-];
+]);

src/devtools/Devtools.vue

@@ -8,7 +8,12 @@ import { Position } from "./utils";
 
 import type { ButtonProps, PanelProps } from "./types";
 
-export default defineComponent({
+/**
+ * @deprecated Vue Query Devtools are now available as a plugin to the official Vue Devtools.
+ * Standalone devtools will be removed in v2 of vue-query.
+ * Please visit https://vue-query.vercel.app/#/getting-started/devtools for more information.
+ */
+const VueQueryDevTools = defineComponent({
   name: "VueQueryDevTools",
   props: {
     initialIsOpen: {
@@ -155,6 +160,8 @@ export default defineComponent({
     ]);
   },
 });
+
+export default VueQueryDevTools;
 </script>
 
 <style>

src/devtools/DevtoolsPanel.vue

@@ -47,7 +47,12 @@ const getSortedQueries = (queryCache: QueryCache, filterOptions: Options) => {
   }).filter((d) => d.queryHash);
 };
 
-export default defineComponent({
+/**
+ * @deprecated Vue Query Devtools are now available as a plugin to the official Vue Devtools.
+ * Standalone devtools will be removed in v2 of vue-query.
+ * Please visit https://vue-query.vercel.app/#/getting-started/devtools for more information.
+ */
+const DevtoolsPanel = defineComponent({
   name: "DevtoolsPanel",
   props: {
     isOpen: {
@@ -64,6 +69,13 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
+    if (process.env.NODE_ENV === "development") {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[vue-query] Deprecation warning: Vue Query Devtools are now available as a plugin to the official Vue Devtools.\nStandalone devtools will be removed in v2 of vue-query.\nPlease visit https://vue-query.vercel.app/#/getting-started/devtools for more information.`
+      );
+    }
+
     let queryCache: QueryCache;
     let unsubscribe = () => {
       // NOOP
@@ -247,6 +259,8 @@ export default defineComponent({
     );
   },
 });
+
+export default DevtoolsPanel;
 </script>
 
 <style>

src/devtools/index.ts

@@ -1,5 +1,3 @@
-/* istanbul ignore file */
-
 export { default as VueQueryDevTools } from "./Devtools.vue";
 export { default as VueQueryDevToolsPanel } from "./DevtoolsPanel.vue";
 export { VUE_QUERY_DEVTOOLS_THEME } from "./useTheme";

src/vue/__tests__/vueQueryPlugin.test.ts

@@ -4,6 +4,9 @@ import { QueryClient } from "react-query/types/core";
 
 import { VueQueryPlugin } from "../vueQueryPlugin";
 import { VUE_QUERY_CLIENT } from "../utils";
+import { setupDevtools } from "../devtools/devtools";
+
+jest.mock("../devtools/devtools");
 
 interface TestApp extends App {
   onUnmount: Function;
@@ -36,6 +39,26 @@ describe("VueQueryPlugin", () => {
     jest.clearAllMocks();
   });
 
+  describe("devtools", () => {
+    test("should NOT setup devtools", () => {
+      const setupDevtoolsMock = setupDevtools as jest.Mock;
+      const appMock = getAppMock();
+      VueQueryPlugin.install?.(appMock);
+
+      expect(setupDevtoolsMock).toHaveBeenCalledTimes(0);
+    });
+
+    test("should setup devtools", () => {
+      // @ts-ignore
+      global.__VUE_PROD_DEVTOOLS__ = true;
+      const setupDevtoolsMock = setupDevtools as jest.Mock;
+      const appMock = getAppMock();
+      VueQueryPlugin.install?.(appMock);
+
+      expect(setupDevtoolsMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe("when app unmounts", () => {
     test("should call unmount on each client when onUnmount is missing", () => {
       const appMock = getAppMock();