vite-plugin-vue-devtools 0.5.0 → 1.0.0-alpha.1

package/dist/client/assets/{splitpanes.es-2f5182b4.js → splitpanes.es-36fe45c8.js}

@@ -1,4 +1,4 @@
-import { ar as h, o as openBlock, e as createElementBlock, f as renderSlot, l as normalizeStyle } from './index-197edebf.js';
+import { ar as h, o as openBlock, e as createElementBlock, f as renderSlot, l as normalizeStyle } from './index-9f1190d8.js';
 
 const M = {
   name: "splitpanes",

package/dist/client/assets/{timeline-bc5ea36f.js → timeline-8ce18510.js}

@@ -1,11 +1,11 @@
-import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-617e4d70.js';
-import { _ as __unplugin_components_0 } from './VPanelGrids-4b915e62.js';
-import { p as pushScopeId, a as popScopeId, n as nextTick, o as openBlock, c as createBlock, w as withScopeId, m as markRaw, s as shallowReactive, r as resolveComponent, b as resolveDirective, d as withDirectives, e as createElementBlock, f as renderSlot, g as createCommentVNode, h as withCtx, F as Fragment, i as renderList, j as resolveDynamicComponent, k as mergeProps, t as toHandlers, l as normalizeStyle, q as normalizeClass, u as createVNode, v as defineComponent, x as createBaseVNode, y as toDisplayString, z as unref, _ as __unplugin_components_7, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-197edebf.js';
+import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-019c8d08.js';
+import { _ as __unplugin_components_0 } from './PanelGrids-93648569.js';
+import { p as pushScopeId, a as popScopeId, n as nextTick, o as openBlock, c as createBlock, w as withScopeId, m as markRaw, s as shallowReactive, r as resolveComponent, b as resolveDirective, d as withDirectives, e as createElementBlock, f as renderSlot, g as createCommentVNode, h as withCtx, F as Fragment, i as renderList, j as resolveDynamicComponent, k as mergeProps, t as toHandlers, l as normalizeStyle, q as normalizeClass, u as createVNode, v as defineComponent, x as createBaseVNode, y as toDisplayString, z as unref, _ as __unplugin_components_7, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-9f1190d8.js';
 import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-65004790.js';
-import { g, M } from './splitpanes.es-2f5182b4.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-6cd486d4.js';
-import './index-f977bcde.js';
-import './VIconButton.vue_vue_type_script_setup_true_lang-63abce3f.js';
+import { g, M } from './splitpanes.es-36fe45c8.js';
+import './Icon.vue_vue_type_script_setup_true_lang-f867c918.js';
+import './index-95398468.js';
+import './IconButton.vue_vue_type_script_setup_true_lang-74db1ae6.js';
 
 var dayjs_min = {exports: {}};/* Injected with object hook! */
 
@@ -1329,8 +1329,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   emits: ["update-selected"],
   setup(__props, { emit: emits }) {
     return (_ctx, _cache) => {
-      const _component_VCard = __unplugin_components_7;
-      const _component_VPanelGrids = __unplugin_components_0;
+      const _component_VDCard = __unplugin_components_7;
+      const _component_VDPanelGrids = __unplugin_components_0;
       return _ctx.data.length ? (openBlock(), createElementBlock("ul", _hoisted_1$1, [
         createVNode(unref(script$2), {
           items: _ctx.data,
@@ -1365,12 +1365,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["items"])
-      ])) : (openBlock(), createBlock(_component_VPanelGrids, {
+      ])) : (openBlock(), createBlock(_component_VDPanelGrids, {
         key: 1,
         px5: ""
       }, {
         default: withCtx(() => [
-          createVNode(_component_VCard, {
+          createVNode(_component_VDCard, {
             flex: "~ col gap2",
             "min-w-30": "",
             "items-center": "",

package/dist/client/index.html

@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <title>Vue DevTools</title>
-  <script type="module" crossorigin src="./assets/index-197edebf.js"></script>
-  <link rel="stylesheet" href="./assets/index-fb18df65.css">
+  <script type="module" crossorigin src="./assets/index-9f1190d8.js"></script>
+  <link rel="stylesheet" href="./assets/index-d3dcbe9e.css">
 </head>
 <body>
   <div id="app"></div>

package/dist/{index.cjs → vite.cjs}

@@ -6,7 +6,7 @@ const vite = require('vite');
 const sirv = require('sirv');
 const Inspect = require('vite-plugin-inspect');
 const VueInspector = require('vite-plugin-vue-inspector');
-const birpc = require('birpc');
+const core$1 = require('@vite-plugin-vue-devtools/core');
 const fs$9 = require('node:fs/promises');
 const require$$0 = require('os');
 const require$$0$1 = require('path');
@@ -50,37 +50,7 @@ const require$$0$3__default = /*#__PURE__*/_interopDefaultCompat(require$$0$3$1)
 const require$$0$5__default = /*#__PURE__*/_interopDefaultCompat(require$$0$5);
 const require$$1__default = /*#__PURE__*/_interopDefaultCompat(require$$1);
 
-function createRPCServer(name, ws, functions) {
-  const event = `${name}:rpc`;
-  const group = birpc.createBirpcGroup(
-    functions,
-    () => birpc.cachedMap(
-      Array.from(ws?.clients || []),
-      (socket) => {
-        return {
-          on: (fn) => {
-            ws.on(event, (data, source) => {
-              if (socket === source)
-                fn(data);
-            });
-          },
-          post: (data) => {
-            socket.send(event, data);
-          }
-        };
-      }
-    ),
-    {
-      timeout: -1
-    }
-  );
-  ws.on("connection", () => {
-    group.updateChannels();
-  });
-  return group.broadcast;
-}
-
-const DIR_DIST = typeof __dirname !== "undefined" ? __dirname : path$3$1.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))));
+const DIR_DIST = typeof __dirname !== "undefined" ? __dirname : path$3$1.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('vite.cjs', document.baseURI).href))));
 const DIR_CLIENT = path$3$1.resolve(DIR_DIST, "../dist/client");
 
 async function getComponentsRelationships(rpc) {
@@ -13777,10 +13747,9 @@ async function getComponentInfo(root, filename) {
   });
 }
 
-const NAME = "vite-plugin-vue-devtools";
 function getVueDevtoolsPath() {
-  const pluginPath = vite.normalizePath(path$3__default.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)))));
-  return pluginPath.replace(/\/dist$/, "//src/node");
+  const pluginPath = vite.normalizePath(path$3__default.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('vite.cjs', document.baseURI).href)))));
+  return pluginPath.replace(/\/dist$/, "//src");
 }
 function VitePluginVueDevTools(options = { appendTo: "" }) {
   const vueDevtoolsPath = getVueDevtoolsPath();
@@ -13794,9 +13763,10 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
       single: true,
       dev: true
     }));
-    const rpc = createRPCServer("vite-plugin-vue-devtools", server.ws, {
-      componentGraph: () => getComponentsRelationships(inspect.api.rpc),
+    const rpc = core$1.createRPCServer(server.ws, {
+      root: () => config.root,
       inspectClientUrl: () => `${config.base || "/"}__inspect/`,
+      componentGraph: () => getComponentsRelationships(inspect.api.rpc),
       staticAssets: () => getStaticAssets(config),
       getImageMeta,
       getTextAssetContent,
@@ -13824,12 +13794,11 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
           else if (type === "exit")
             rpc.onTerminalExit({ data });
         }
-      }),
-      root: () => config.root
+      })
     });
   }
   const plugin = {
-    name: NAME,
+    name: core$1.PLUGIN_NAME,
     enforce: "pre",
     apply: "serve",
     configResolved(resolvedConfig) {

package/dist/{index.mjs → vite.mjs}

@@ -4,7 +4,7 @@ import { normalizePath } from 'vite';
 import sirv from 'sirv';
 import Inspect from 'vite-plugin-inspect';
 import VueInspector from 'vite-plugin-vue-inspector';
-import { createBirpcGroup, cachedMap } from 'birpc';
+import { PLUGIN_NAME, createRPCServer } from '@vite-plugin-vue-devtools/core';
 import fs$9 from 'node:fs/promises';
 import require$$0 from 'os';
 import require$$0$1 from 'path';
@@ -24,36 +24,6 @@ import require$$0$5 from 'buffer';
 import { debuglog } from 'node:util';
 import require$$1 from 'tty';
 
-function createRPCServer(name, ws, functions) {
-  const event = `${name}:rpc`;
-  const group = createBirpcGroup(
-    functions,
-    () => cachedMap(
-      Array.from(ws?.clients || []),
-      (socket) => {
-        return {
-          on: (fn) => {
-            ws.on(event, (data, source) => {
-              if (socket === source)
-                fn(data);
-            });
-          },
-          post: (data) => {
-            socket.send(event, data);
-          }
-        };
-      }
-    ),
-    {
-      timeout: -1
-    }
-  );
-  ws.on("connection", () => {
-    group.updateChannels();
-  });
-  return group.broadcast;
-}
-
 const DIR_DIST = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
 const DIR_CLIENT = resolve$1(DIR_DIST, "../dist/client");
 
@@ -13751,10 +13721,9 @@ async function getComponentInfo(root, filename) {
   });
 }
 
-const NAME = "vite-plugin-vue-devtools";
 function getVueDevtoolsPath() {
   const pluginPath = normalizePath(path$3$1.dirname(fileURLToPath(import.meta.url)));
-  return pluginPath.replace(/\/dist$/, "//src/node");
+  return pluginPath.replace(/\/dist$/, "//src");
 }
 function VitePluginVueDevTools(options = { appendTo: "" }) {
   const vueDevtoolsPath = getVueDevtoolsPath();
@@ -13768,9 +13737,10 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
       single: true,
       dev: true
     }));
-    const rpc = createRPCServer("vite-plugin-vue-devtools", server.ws, {
-      componentGraph: () => getComponentsRelationships(inspect.api.rpc),
+    const rpc = createRPCServer(server.ws, {
+      root: () => config.root,
       inspectClientUrl: () => `${config.base || "/"}__inspect/`,
+      componentGraph: () => getComponentsRelationships(inspect.api.rpc),
       staticAssets: () => getStaticAssets(config),
       getImageMeta,
       getTextAssetContent,
@@ -13798,12 +13768,11 @@ function VitePluginVueDevTools(options = { appendTo: "" }) {
           else if (type === "exit")
             rpc.onTerminalExit({ data });
         }
-      }),
-      root: () => config.root
+      })
     });
   }
   const plugin = {
-    name: NAME,
+    name: PLUGIN_NAME,
     enforce: "pre",
     apply: "serve",
     configResolved(resolvedConfig) {

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.5.0",
-  "packageManager": "pnpm@8.6.7",
-  "description": "A vite plugin for Vue Devtools",
+  "type": "module",
+  "version": "1.0.0-alpha.1",
+  "description": "A vite plugin for Vue DevTools",
   "author": "webfansplz",
   "license": "MIT",
   "homepage": "https://github.com/webfansplz/vite-plugin-vue-devtools#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/webfansplz/vite-plugin-vue-devtools.git"
+    "url": "git+https://github.com/webfansplz/vite-plugin-vue-devtools.git",
+    "directory": "packages/node"
   },
   "bugs": {
     "url": "https://github.com/webfansplz/vite-plugin-vue-devtools/issues"
@@ -21,111 +22,47 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "types": "./dist/vite.d.ts",
+      "require": "./dist/vite.cjs",
+      "import": "./dist/vite.mjs"
     },
-    "./*": "./*"
+    "./*": "./*",
+    "./client": {
+      "types": "./client.d.ts"
+    }
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "dist/vite.cjs",
+  "module": "dist/vite.mjs",
+  "types": "dist/vite.d.ts",
   "files": [
     "dist",
-    "src/node/views/*",
-    "src/node/app.js",
+    "./src/views/*",
+    "./src/app.js",
     "*.d.ts"
   ],
   "engines": {
-    "node": ">=v14"
-  },
-  "scripts": {
-    "build": "rimraf dist && run-s build:*",
-    "build:client": "vite build src/client",
-    "build:js": "unbuild",
-    "dev": "nr stub && pnpm dev:client",
-    "dev:client": "vite build src/client --watch",
-    "play": "nr -C playground dev",
-    "stub": "unbuild --stub",
-    "lint": "eslint .",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "prepublishOnly": "npm run build",
-    "release": "bumpp && nr changelog && npm publish",
-    "dep:up": "taze -I major"
+    "node": ">=v14.21.3"
   },
   "peerDependencies": {
     "vite": "^3.1.0 || ^4.0.0-0"
   },
   "dependencies": {
-    "@vueuse/core": "^10.2.1",
-    "@vueuse/integrations": "^10.2.1",
     "@webfansplz/vuedoc-parser": "^0.0.3",
-    "algoliasearch": "^4.18.0",
     "birpc": "^0.2.12",
     "execa": "^7.1.1",
-    "json-editor-vue": "^0.10.6",
-    "minimatch": "^9.0.3",
-    "nanoid": "^4.0.2",
     "sirv": "^2.0.3",
-    "splitpanes": "^3.1.5",
-    "vanilla-jsoneditor": "^0.17.8",
-    "vite-hot-client": "^0.2.1",
-    "vite-plugin-inspect": "^0.7.32",
+    "vite-plugin-inspect": "^0.7.33",
     "vite-plugin-vue-inspector": "^3.4.2",
-    "vue-router": "^4.2.4",
-    "vuedraggable": "^4.1.0",
-    "xterm": "^5.2.1",
-    "xterm-addon-fit": "^0.7.0"
+    "@vite-plugin-vue-devtools/core": "1.0.0-alpha.1"
   },
   "devDependencies": {
-    "@algolia/client-search": "^4.18.0",
-    "@antfu/eslint-config": "^0.39.7",
-    "@antfu/ni": "^0.21.4",
-    "@iconify/json": "^2.2.88",
-    "@nuxt/devtools-ui-kit": "^0.6.7",
-    "@types/codemirror": "^5.60.8",
-    "@types/node": "^20.4.1",
-    "@types/splitpanes": "^2.2.1",
-    "@unocss/eslint-config": "^0.53.5",
-    "@unocss/reset": "^0.53.5",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "bumpp": "^9.1.1",
-    "codemirror": "^6.0.1",
-    "codemirror-theme-vars": "^0.1.2",
-    "conventional-changelog-cli": "^3.0.0",
-    "dayjs": "^1.11.9",
-    "eslint": "8.44.0",
+    "@types/node": "^20.4.2",
     "fast-glob": "^3.3.0",
-    "floating-vue": "2.0.0-beta.24",
-    "fuse.js": "^6.6.2",
     "image-meta": "^0.1.1",
-    "lint-staged": "^13.2.3",
-    "npm-run-all": "^4.1.5",
-    "ohash": "^1.1.2",
-    "pathe": "^1.1.1",
-    "pinia": "^2.1.4",
-    "pnpm": "^8.6.7",
-    "rimraf": "^5.0.1",
-    "simple-git-hooks": "^2.8.1",
-    "taze": "^0.11.2",
-    "typescript": "^5.1.6",
-    "unbuild": "^1.2.1",
-    "unocss": "^0.53.5",
-    "unplugin-auto-import": "^0.16.6",
-    "unplugin-vue-components": "^0.25.1",
-    "vis-data": "^7.1.6",
-    "vis-network": "^9.1.6",
-    "vite": "^4.4.2",
-    "vite-dev-rpc": "^0.1.2",
-    "vite-plugin-pages": "^0.31.0",
-    "vue": "^3.3.4",
-    "vue-virtual-scroller": "2.0.0-beta.8"
+    "pathe": "^1.1.1"
   },
-  "simple-git-hooks": {
-    "pre-commit": "pnpm lint-staged"
-  },
-  "lint-staged": {
-    "*": "eslint --fix"
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
   }
-}
+}

package/src/app.js

@@ -0,0 +1,4 @@
+import { createDevToolsContainer } from '@vite-plugin-vue-devtools/core'
+import App from 'virtual:vue-devtools-path:views/Main.vue'
+
+createDevToolsContainer(App)

package/src/{node/views → views}/ComponentInspector.vue

@@ -14,10 +14,10 @@ const props = defineProps<{
 const inspectorStyle = computed(() => {
   const { width, height, top, left } = props.bounds
   return {
-    width: `${width}px`,
-    height: `${height}px`,
-    top: `${top}px`,
-    left: `${left}px`,
+    width: `${Math.round(width)}px`,
+    height: `${Math.round(height)}px`,
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
   }
 })
 const inspectorCardStyle = computed(() => ({ top: props.bounds.top < 35 ? 0 : '-35px' }))
@@ -27,14 +27,14 @@ const inspectorCardStyle = computed(() => ({ top: props.bounds.top < 35 ? 0 : '-
   <div class="vue-devtools-component-inspector" :style="inspectorStyle">
     <span class="vue-devtools-component-inspector-card" :style="inspectorCardStyle">
       &lt;{{ name }}&gt;
-      <i>{{ bounds.width }} x {{ bounds.height }}</i>
+      <i>{{ Math.round(bounds.width * 100) / 100 }} x {{ Math.round(bounds.height * 100) / 100 }}</i>
     </span>
   </div>
 </template>
 
 <style scoped>
 .vue-devtools-component-inspector {
-  z-index: 2147483646;
+  z-index: 2147483640;
   position: fixed;
   background-color:#42b88325;
   border: 1px solid #42b88350;

package/src/{node/views → views}/Main.vue

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
 
 // @ts-expect-error virtual module
 import vueDevToolsOptions from 'virtual:vue-devtools-options'
+import { DevToolsHooks, collectDevToolsHookBuffer } from '@vite-plugin-vue-devtools/core'
 import Frame from './FrameBox.vue'
 import ComponentInspector from './ComponentInspector.vue'
 import { useHighlightComponent, useIframe, useInspector, usePanelVisible, usePiPMode, usePosition } from './composables'
@@ -17,19 +18,7 @@ const props = defineProps({
 
 const hook = props.hook
 
-const DevToolsHooks = {
-  APP_INIT: 'app:init',
-  COMPONENT_UPDATED: 'component:updated',
-  COMPONENT_ADDED: 'component:added',
-  COMPONENT_REMOVED: 'component:removed',
-  COMPONENT_EMIT: 'component:emit',
-  PERF_START: 'perf:start',
-  PERF_END: 'perf:end',
-  ADD_ROUTE: 'router:add-route',
-  REMOVE_ROUTE: 'router:remove-route',
-}
-
-const hookBuffer: [string, { args: any[] }][] = []
+const { hookBuffer, collect } = collectDevToolsHookBuffer()
 
 let isAppCreated = false
 const panelState = ref<{
@@ -68,7 +57,7 @@ function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout =
       }
       else if (retry-- <= 0) {
         clearInterval(interval)
-        reject(Error('Vue Devtools client injection failed'))
+        reject(Error('Vue DevTools client injection failed'))
       }
     }, timeout)
   })
@@ -119,14 +108,25 @@ async function setupClient(iframe: HTMLIFrameElement) {
     componentInspector: {
       highlight,
       unHighlight,
+      scrollToComponent(bounds) {
+        const scrollTarget = document.createElement('div')
+        scrollTarget.style.position = 'absolute'
+        scrollTarget.style.width = `${Math.round(bounds.width * 100) / 100}px`
+        scrollTarget.style.height = `${Math.round(bounds.height * 100) / 100}px`
+        scrollTarget.style.top = `${Math.round(bounds.top * 100) / 100}px`
+        scrollTarget.style.left = `${Math.round(bounds.left * 100) / 100}px`
+        document.body.appendChild(scrollTarget)
+        scrollTarget.scrollIntoView({
+          behavior: 'smooth',
+        })
+        setTimeout(() => {
+          document.body.removeChild(scrollTarget)
+        }, 2000)
+      },
     },
   })
 }
 
-function updateHookBuffer(type, args) {
-  hookBuffer.push([type, args])
-}
-
 function collectDynamicRoute(app) {
   const router = app?.config?.globalProperties?.$router
   if (!router)
@@ -137,7 +137,7 @@ function collectDynamicRoute(app) {
     const res = _addRoute(...args)
 
     if (!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded) {
-      updateHookBuffer(DevToolsHooks.ADD_ROUTE, {
+      collect(DevToolsHooks.ADD_ROUTE, {
         args: [...args],
       })
     }
@@ -150,7 +150,7 @@ function collectDynamicRoute(app) {
     const res = _removeRoute(...args)
 
     if (!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded) {
-      updateHookBuffer(DevToolsHooks.REMOVE_ROUTE, {
+      collect(DevToolsHooks.REMOVE_ROUTE, {
         args: [...args],
       })
     }
@@ -171,7 +171,7 @@ function collectHookBuffer() {
       return
 
     collectDynamicRoute(app)
-    updateHookBuffer(DevToolsHooks.APP_INIT, {
+    collect(DevToolsHooks.APP_INIT, {
       app,
     })
     setTimeout(() => {
@@ -184,7 +184,7 @@ function collectHookBuffer() {
   //   if (stopCollect(component))
   //     return
 
-  //   updateHookBuffer(DevToolsHooks.COMPONENT_EMIT, {
+  //   collect(DevToolsHooks.COMPONENT_EMIT, {
   //     now: Date.now(),
   //     app,
   //     uid,
@@ -198,7 +198,7 @@ function collectHookBuffer() {
   //   if (stopCollect(component))
   //     return
 
-  //   updateHookBuffer(DevToolsHooks.PERF_END, {
+  //   collect(DevToolsHooks.PERF_END, {
   //     now: Date.now(),
   //     app,
   //     uid,
@@ -219,7 +219,7 @@ function collectHookBuffer() {
       if (!app || (typeof uid !== 'number' && !uid) || !component || stopCollect(component))
         return
 
-      updateHookBuffer(item, {
+      collect(item, {
         app, uid, parentUid, component,
       })
     })
@@ -392,4 +392,10 @@ collectHookBuffer()
     opacity: 0.2;
   }
 }
+
+@media print {
+  #vue-devtools-anchor {
+    display: none;
+  }
+}
 </style>