vite-plugin-vue-devtools 0.0.10 → 0.0.12

package/dist/client/assets/{timeline-7c8f87a4.js → timeline-9da4ec07.js}

@@ -1,9 +1,10 @@
-import { g, M, _ as _sfc_main$2 } from './splitpanes.es-f1d0c1c1.js';
-import { _ as __unplugin_components_0 } from './VPanelGrids-3484ea9d.js';
-import { _ as __unplugin_components_7 } from './VCard-c441f774.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, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-359dd67c.js';
-import './VIcon.vue_vue_type_script_setup_true_lang-4c2278af.js';
-import './index-9285098c.js';
+import { g, M, _ as _sfc_main$2 } from './splitpanes.es-09f32a7b.js';
+import { _ as __unplugin_components_0 } from './VPanelGrids-733278d6.js';
+import { _ as __unplugin_components_7 } from './VCard-7914da83.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, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-d7f947d1.js';
+import './VIcon.vue_vue_type_script_setup_true_lang-26cb9d64.js';
+import './index-7930cd83.js';
+import './VIconButton.vue_vue_type_script_setup_true_lang-dab4dc71.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/client/assets/vue-5d4e674c.svg

@@ -0,0 +1 @@
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>

package/dist/client/assets/vueuse-995374f6.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.a{fill:#35495e;}.b{fill:#41b883;}</style></defs><path class="a" d="M735.07,67.05V531.58c0,129.83-105.24,235.07-235.07,235.07S264.93,661.41,264.93,531.58V67.05h166.3V531.58a68.77,68.77,0,1,0,137.54,0V67.05Z"/><path class="b" d="M901.36,67.05V531.58C901.36,753.25,721.67,933,500,933S98.64,753.25,98.64,531.58V67.05H264.93V531.58c0,129.83,105.25,235.07,235.07,235.07S735.07,661.41,735.07,531.58V67.05Z"/></svg>

package/dist/client/index.html

@@ -4,9 +4,9 @@
   <meta charset="UTF-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-359dd67c.js"></script>
-  <link rel="stylesheet" href="./assets/index-62a10721.css">
+  <title>Vue DevTools</title>
+  <script type="module" crossorigin src="./assets/index-d7f947d1.js"></script>
+  <link rel="stylesheet" href="./assets/index-ea632118.css">
 </head>
 <body>
   <div id="app"></div>

package/dist/index.cjs

@@ -13,6 +13,7 @@ const require$$0$1 = require('util');
 const require$$0$2 = require('stream');
 const require$$0$4 = require('events');
 const require$$0$3 = require('fs');
+const node_fs = require('node:fs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -7690,6 +7691,27 @@ async function getTextAssetContent(filepath, limit = 300) {
   }
 }
 
+async function getPackages(root) {
+  const pkgPath = resolve(root, "package.json");
+  const data = JSON.parse(await node_fs.promises.readFile(pkgPath, "utf-8").catch(() => "{}"));
+  const categorizedPackages = {};
+  const packages = {};
+  for (const type of ["dependencies", "devDependencies", "optionalDependencies", "peerDependencies"]) {
+    if (!data[type])
+      continue;
+    categorizedPackages[type] = data[type];
+  }
+  for (const type in categorizedPackages) {
+    for (const name in categorizedPackages[type]) {
+      const version = categorizedPackages[type][name];
+      packages[name] = version;
+    }
+  }
+  return {
+    packages
+  };
+}
+
 const NAME = "vite-plugin-vue-devtools";
 function getVueDevtoolsPath() {
   const pluginPath = vite.normalizePath(p__default.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)))));
@@ -7712,7 +7734,8 @@ function PluginVueDevtools() {
       inspectClientUrl: () => `${config.base || "/"}__inspect/`,
       staticAssets: () => getStaticAssets(config),
       getImageMeta,
-      getTextAssetContent
+      getTextAssetContent,
+      getPackages: () => getPackages(config.root)
     });
   }
   const plugin = {

package/dist/index.mjs

@@ -11,6 +11,7 @@ import require$$0$1 from 'util';
 import require$$0$2 from 'stream';
 import require$$0$4 from 'events';
 import require$$0$3 from 'fs';
+import { promises } from 'node:fs';
 
 const DEFAULT_TIMEOUT = 6e4;
 function defaultSerialize(i) {
@@ -7674,6 +7675,27 @@ async function getTextAssetContent(filepath, limit = 300) {
   }
 }
 
+async function getPackages(root) {
+  const pkgPath = resolve(root, "package.json");
+  const data = JSON.parse(await promises.readFile(pkgPath, "utf-8").catch(() => "{}"));
+  const categorizedPackages = {};
+  const packages = {};
+  for (const type of ["dependencies", "devDependencies", "optionalDependencies", "peerDependencies"]) {
+    if (!data[type])
+      continue;
+    categorizedPackages[type] = data[type];
+  }
+  for (const type in categorizedPackages) {
+    for (const name in categorizedPackages[type]) {
+      const version = categorizedPackages[type][name];
+      packages[name] = version;
+    }
+  }
+  return {
+    packages
+  };
+}
+
 const NAME = "vite-plugin-vue-devtools";
 function getVueDevtoolsPath() {
   const pluginPath = normalizePath(p.dirname(fileURLToPath(import.meta.url)));
@@ -7696,7 +7718,8 @@ function PluginVueDevtools() {
       inspectClientUrl: () => `${config.base || "/"}__inspect/`,
       staticAssets: () => getStaticAssets(config),
       getImageMeta,
-      getTextAssetContent
+      getTextAssetContent,
+      getPackages: () => getPackages(config.root)
     });
   }
   const plugin = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "packageManager": "pnpm@8.4.0",
   "description": "A vite plugin for Vue Devtools",
   "author": "webfansplz",
@@ -84,12 +84,14 @@
     "floating-vue": "2.0.0-beta.20",
     "fuse.js": "^6.6.2",
     "image-meta": "^0.1.1",
+    "lint-staged": "^13.2.2",
     "npm-run-all": "^4.1.5",
     "ohash": "^1.1.2",
     "pathe": "^1.1.0",
     "pinia": "^2.0.35",
     "pnpm": "^8.4.0",
     "rimraf": "^5.0.0",
+    "simple-git-hooks": "^2.8.1",
     "typescript": "^5.0.4",
     "unbuild": "^1.2.1",
     "unocss": "^0.51.12",
@@ -102,5 +104,11 @@
     "vite-plugin-pages": "^0.29.0",
     "vue": "^3.2.47",
     "vue-virtual-scroller": "2.0.0-beta.8"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
   }
 }

package/src/node/Container.vue

@@ -1,14 +1,23 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
-import vueDevtoolsOptions from 'virtual:vue-devtools-options'
+import vueDevToolsOptions from 'virtual:vue-devtools-options'
 
-const props = defineProps({
-  hook: {
-    type: Object,
+// Reuse @vuejs/devtools instance first
+const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__ ??= {
+  events: new Map(),
+  on(event, fn) {
+    if (!this.events.has(event))
+      this.events.set(event, [])
+
+    this.events.get(event).push(fn)
   },
-})
+  emit(event, ...payload) {
+    if (this.events.has(event))
+      this.events.get(event).forEach(fn => fn(...payload))
+  },
+}
 
-const DevtoolsHooks = {
+const DevToolsHooks = {
   APP_INIT: 'app:init',
   COMPONENT_UPDATED: 'component:updated',
   COMPONENT_ADDED: 'component:added',
@@ -20,40 +29,27 @@ const DevtoolsHooks = {
   REMOVE_ROUTE: 'router:remove-route',
 }
 
-window.__VUE_DEVTOOLS_GLOBAL_HOOKS__ = function () {
-  return props.hook
-}
-
-const isDragging = ref(false)
-
-document.addEventListener('mouseup', () => {
-  isDragging.value = false
-})
-
-document.addEventListener('mouseleave', () => {
-  isDragging.value = false
-})
-
 const PANEL_MIN = 15
 const PANEL_MAX = 100
 const PANEL_PADDING = 10
 
-const clientUrl = `${vueDevtoolsOptions.base || '/'}__devtools/`
+const clientUrl = `${vueDevToolsOptions.base || '/'}__devtools/`
 const iframe = ref()
+
+const hookBuffer = []
+let isAppCreated = false
+
+/** -----panel start-----**/
+const panelVisible = ref(false)
 const panelState = ref({
   position: 'bottom',
   viewMode: 'default',
+  width: 80,
+  height: 60,
 })
-const panelVisible = ref(false)
-const hookBuffer = []
-let isAppCreated = false
-
-const panelHight = ref(60)
-const panelWidth = ref(80)
-
 const panelStyle = computed(() => {
-  const height = `calc(${panelHight.value}vh - ${PANEL_PADDING}px)`
-  const width = `calc(${panelWidth.value}vw - ${PANEL_PADDING}px)`
+  const height = `calc(${panelState.value.height}vh - ${PANEL_PADDING}px)`
+  const width = `calc(${panelState.value.width}vw - ${PANEL_PADDING}px)`
   if (panelState.value.viewMode === 'component-inspector') {
     return {
       bottom: `${PANEL_PADDING}px`,
@@ -147,6 +143,33 @@ const panelPosition = computed(() =>
     : { zIndex: -100000, left: '-9999px', top: '-9999px' },
 )
 
+function togglePanel() {
+  panelVisible.value = !panelVisible.value
+}
+
+function initPanelPosition() {
+  const frameState = localStorage.getItem('__vue-devtools-frame-state__')
+  if (frameState) {
+    const parsedFrameState = JSON.parse(frameState)
+    panelState.value.position = parsedFrameState.position
+  }
+}
+
+/** -----resize start-----**/
+const isDragging = ref(false)
+const resizeBaseClassName = 'vue-devtools-resize-handle'
+const resizeVerticalClassName = [resizeBaseClassName, `${resizeBaseClassName}-vertical`]
+const resizeHorizontalClassName = [resizeBaseClassName, `${resizeBaseClassName}-horizontal`]
+const resizeCornerClassName = [resizeBaseClassName, `${resizeBaseClassName}-corner`]
+function toggleDragging(direction) {
+  isDragging.value = direction
+}
+document.addEventListener('mouseup', () => {
+  isDragging.value = false
+})
+document.addEventListener('mouseleave', () => {
+  isDragging.value = false
+})
 document.addEventListener('mousemove', (e) => {
   if (!isDragging.value)
     return
@@ -161,7 +184,7 @@ document.addEventListener('mousemove', (e) => {
     const value = alignSide
       ? (Math.abs(y - (window.innerHeight / 2))) / boxHeight * 100 * 2
       : (window.innerHeight - y) / boxHeight * 100
-    panelHight.value = Math.min(PANEL_MAX, Math.max(PANEL_MIN, value))
+    panelState.value.height = Math.min(PANEL_MAX, Math.max(PANEL_MIN, value))
   }
 
   if (isDragging.value === 'vertical' || isDragging.value === 'both') {
@@ -172,13 +195,14 @@ document.addEventListener('mousemove', (e) => {
     const value = alignSide
       ? (window.innerWidth - x) / boxWidth * 100
       : (Math.abs(x - (window.innerWidth / 2))) / boxWidth * 100 * 2
-    panelWidth.value = Math.min(PANEL_MAX, Math.max(PANEL_MIN, value))
+    panelState.value.width = Math.min(PANEL_MAX, Math.max(PANEL_MIN, value))
   }
 })
+/** -----resize end-----**/
 
-function togglePanel() {
-  panelVisible.value = !panelVisible.value
-}
+/** -----panel end-----**/
+
+/** -----inspector end-----**/
 
 function enableComponentInspector() {
   window.__VUE_INSPECTOR__?.enable()
@@ -187,11 +211,13 @@ function enableComponentInspector() {
 
 function disableComponentInspector() {
   window.__VUE_INSPECTOR__?.disable()
-  props.hook.emit('host:inspector:close')
+  hook.emit('host:inspector:close')
   if (panelState.value.viewMode === 'component-inspector')
     panelState.value.viewMode = 'default'
 }
+/** -----inspector end-----**/
 
+/** -----client start-----**/
 function waitForClientInjection(retry = 50, timeout = 200) {
   const test = () => !!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__ && isAppCreated
 
@@ -206,18 +232,12 @@ function waitForClientInjection(retry = 50, timeout = 200) {
       }
       else if (retry-- <= 0) {
         clearInterval(interval)
-        // eslint-disable-next-line prefer-promise-reject-errors
-        reject('Vue Devtools client injection failed')
+        reject(Error('Vue Devtools client injection failed'))
       }
     }, timeout)
   })
 }
 
-async function onLoad() {
-  await waitForClientInjection()
-  setupClient()
-}
-
 function setupClient() {
   const injection = iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__
   const componentInspector = window.__VUE_INSPECTOR__
@@ -229,7 +249,7 @@ function setupClient() {
     }
   }
   injection.setClient({
-    hook: props.hook,
+    hook,
     hookBuffer,
     inspector: {
       enable: enableComponentInspector,
@@ -243,16 +263,13 @@ function setupClient() {
     },
   })
 }
+/** -----client end-----**/
 
-function initPanelPosition() {
-  const frameState = localStorage.getItem('__vue-devtools-frame-state__')
-  if (frameState) {
-    const parsedFrameState = JSON.parse(frameState)
-    panelState.value.position = parsedFrameState.position
-  }
+function updateHookBuffer(type, args) {
+  hookBuffer.push([type, args])
 }
 
-function captureDynamicRoute(app) {
+function collectDynamicRoute(app) {
   const router = app?.config?.globalProperties?.$router
   if (!router)
     return
@@ -262,9 +279,9 @@ function captureDynamicRoute(app) {
     const res = _addRoute(...args)
 
     if (!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded) {
-      hookBuffer.push([DevtoolsHooks.ADD_ROUTE, {
+      updateHookBuffer(DevToolsHooks.ADD_ROUTE, {
         args: [...args],
-      }])
+      })
     }
 
     return res
@@ -275,9 +292,9 @@ function captureDynamicRoute(app) {
     const res = _removeRoute(...args)
 
     if (!iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded) {
-      hookBuffer.push([DevtoolsHooks.REMOVE_ROUTE, {
+      updateHookBuffer(DevToolsHooks.REMOVE_ROUTE, {
         args: [...args],
-      }])
+      })
     }
 
     return res
@@ -285,110 +302,121 @@ function captureDynamicRoute(app) {
 }
 
 function collectHookBuffer() {
-  let sortId = 0
+  // const sortId = 0
 
   function stopCollect(component) {
     return component?.root?.type?.devtools?.hide || iframe.value?.contentWindow?.__VUE_DEVTOOLS_VIEW__?.loaded
   }
 
-  props.hook.on(DevtoolsHooks.APP_INIT, (app) => {
+  hook.on(DevToolsHooks.APP_INIT, (app) => {
     if (!app || app._instance.type?.devtools?.hide)
       return
 
-    captureDynamicRoute(app)
-    hookBuffer.push([DevtoolsHooks.APP_INIT, {
+    collectDynamicRoute(app)
+    updateHookBuffer(DevToolsHooks.APP_INIT, {
       app,
-    }])
+    })
     setTimeout(() => {
       isAppCreated = true
     }, 80)
-  })
-
-  props.hook.on(DevtoolsHooks.PERF_START, (app, uid, component, type, time) => {
-    if (stopCollect(component))
-      return
-
-    hookBuffer.push([DevtoolsHooks.PERF_START, {
-      now: Date.now(),
-      app,
-      uid,
-      component,
-      type,
-      time,
-      sortId: sortId++,
-    }])
-  })
-  props.hook.on(DevtoolsHooks.PERF_END, (app, uid, component, type, time) => {
-    if (stopCollect(component))
-      return
-
-    hookBuffer.push([DevtoolsHooks.PERF_END, {
-      now: Date.now(),
-      app,
-      uid,
-      component,
-      type,
-      time,
-      sortId: sortId++,
-    }])
   });
 
+  // close perf to avoid performance issue (#9)
+  // hook.on(DevToolsHooks.PERF_START, (app, uid, component, type, time) => {
+  //   if (stopCollect(component))
+  //     return
+
+  //   updateHookBuffer(DevToolsHooks.COMPONENT_EMIT, {
+  //     now: Date.now(),
+  //     app,
+  //     uid,
+  //     component,
+  //     type,
+  //     time,
+  //     sortId: sortId++,
+  //   })
+  // })
+  // hook.on(DevToolsHooks.PERF_END, (app, uid, component, type, time) => {
+  //   if (stopCollect(component))
+  //     return
+
+  //   updateHookBuffer(DevToolsHooks.PERF_END, {
+  //     now: Date.now(),
+  //     app,
+  //     uid,
+  //     component,
+  //     type,
+  //     time,
+  //     sortId: sortId++,
+  //   })
+  // })
+
   [
-    DevtoolsHooks.COMPONENT_UPDATED,
-    DevtoolsHooks.COMPONENT_ADDED,
-    DevtoolsHooks.COMPONENT_REMOVED,
-    DevtoolsHooks.COMPONENT_EMIT,
+    DevToolsHooks.COMPONENT_UPDATED,
+    DevToolsHooks.COMPONENT_ADDED,
+    DevToolsHooks.COMPONENT_REMOVED,
+    DevToolsHooks.COMPONENT_EMIT,
   ].forEach((item) => {
-    props.hook.on(item, (app, uid, parentUid, component) => {
+    hook.on(item, (app, uid, parentUid, component) => {
       if (!app || (typeof uid !== 'number' && !uid) || !component || stopCollect(component))
         return
-      hookBuffer.push([item, {
+
+      updateHookBuffer(item, {
         app, uid, parentUid, component,
-      }])
+      })
     })
   })
 }
 
+// init
+collectHookBuffer()
+initPanelPosition()
+
+async function onLoad() {
+  await waitForClientInjection()
+  setupClient()
+}
+
 onMounted(() => {
   window.addEventListener('keydown', (e) => {
     if (e.code === 'KeyD' && e.altKey && e.shiftKey)
       togglePanel()
   })
 })
-
-collectHookBuffer()
-initPanelPosition()
 </script>
 
 <template>
   <div class="vue-devtools-panel" :style="panelPosition">
+    <!-- client -->
     <iframe ref="iframe" :src="clientUrl" :style="{
       'pointer-events': isDragging ? 'none' : 'auto',
     }" @load="onLoad" />
+    <!-- resize -->
     <template v-if="panelState.viewMode === 'default'">
-      <div v-if="panelState.position !== 'top'" class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal"
-        :style="{ top: 0 }" @mousedown.prevent="() => isDragging = 'horizontal'" />
-      <div v-if="panelState.position !== 'bottom'"
-        class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal" :style="{ bottom: 0 }"
-        @mousedown.prevent="() => isDragging = 'horizontal'" />
-      <div v-if="panelState.position !== 'left'" class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
-        :style="{ left: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
-      <div v-if="panelState.position !== 'right'" class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
-        :style="{ right: 0 }" @mousedown.prevent="() => isDragging = 'vertical'" />
-      <div v-if="panelState.position !== 'top' && panelState.position !== 'left'"
-        class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
-        :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
-      <div v-if="panelState.position !== 'top' && panelState.position !== 'right'"
-        class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
-        :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
-      <div v-if="panelState.position !== 'bottom' && panelState.position !== 'right'"
-        class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
-        :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
-      <div v-if="panelState.position !== 'bottom' && panelState.position !== 'left'"
-        class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
-        :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="() => isDragging = 'both'" />
+      <template v-if="panelState.position !== 'top'">
+        <div :class="resizeHorizontalClassName" :style="{ top: 0 }" @mousedown.prevent="toggleDragging('horizontal')" />
+        <div v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
+          :style="{ top: 0, left: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')" />
+        <div v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
+          :style="{ top: 0, right: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')" />
+      </template>
+
+      <template v-if="panelState.position !== 'bottom'">
+        <div :class="resizeHorizontalClassName" :style="{ bottom: 0 }"
+          @mousedown.prevent="toggleDragging('horizontal')" />
+        <div v-if="panelState.position !== 'right'" :class="resizeCornerClassName"
+          :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }" @mousedown.prevent="toggleDragging('both')" />
+        <div v-if="panelState.position !== 'left'" :class="resizeCornerClassName"
+          :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }" @mousedown.prevent="toggleDragging('both')" />
+      </template>
+
+      <div v-if="panelState.position !== 'left'" :class="resizeVerticalClassName" :style="{ left: 0 }"
+        @mousedown.prevent="toggleDragging('vertical')" />
+      <div v-if="panelState.position !== 'right'" :class="resizeVerticalClassName" :style="{ right: 0 }"
+        @mousedown.prevent="toggleDragging('vertical')" />
     </template>
   </div>
+  <!-- toggle button -->
   <button class="vue-devtools-toggle" aria-label="Toggle devtools panel" :style="toggleButtonPosition"
     @click.prevent="togglePanel">
     <svg viewBox="0 0 256 198" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -402,7 +430,7 @@ initPanelPosition()
 <style scoped>
 .vue-devtools-panel {
   position: fixed;
-  z-index: 2147483647;
+  z-index: 2147483645;
   width: calc(80vw - 20px);
   height: calc(60vh - 20px);
 }
@@ -420,11 +448,10 @@ initPanelPosition()
   background: #0C0C0C;
   border: 1px solid rgba(125, 125, 125, 0.2);
   box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.1);
-  z-index: 2147483647;
+  z-index: 2147483645;
   cursor: pointer;
   opacity: 0.8;
   padding: 0;
-  align-items: center;
   transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
   outline: 0;
 }

package/src/node/app.js

@@ -1,21 +1,6 @@
 import { createApp, h } from 'vue'
 import App from 'virtual:vue-devtools-path:Container.vue'
 
-// reuse __VUE_DEVTOOLS_ (@vuejs/devtools) instance first
-const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__ ??= {
-  events: new Map(),
-  on(event, fn) {
-    if (!this.events.has(event))
-      this.events.set(event, [])
-
-    this.events.get(event).push(fn)
-  },
-  emit(event, ...payload) {
-    if (this.events.has(event))
-      this.events.get(event).forEach(fn => fn(...payload))
-  },
-}
-
 function load() {
   const CONTAINER_ID = '__vue-devtools-container__'
   const el = document.createElement('div')
@@ -23,19 +8,10 @@ function load() {
   el.setAttribute('data-v-inspector-ignore', 'true')
   document.getElementsByTagName('body')[0].appendChild(el)
   createApp({
-    render: () => h(App, { hook }),
+    render: () => h(App),
     devtools: {
       hide: true,
     },
   }).mount(el)
 }
 load()
-
-// print for iframe console
-window.print = (...s) => {
-  console.log('print', ...s)
-}
-
-// hook.on('app:init', (app) => {
-//   console.log('init', app)
-// })