vite-plugin-vue-devtools 0.4.10 → 0.4.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.4.10",
-  "packageManager": "pnpm@8.4.0",
+  "version": "0.4.11",
+  "packageManager": "pnpm@8.6.5",
   "description": "A vite plugin for Vue Devtools",
   "author": "webfansplz",
   "license": "MIT",
@@ -50,70 +50,74 @@
     "stub": "unbuild --stub",
     "lint": "eslint .",
     "prepublishOnly": "npm run build",
-    "release": "bumpp && npm publish"
+    "release": "bumpp && npm publish",
+    "dep:up": "taze -I major"
   },
   "peerDependencies": {
     "vite": "^3.0.0-0 || ^4.0.0-0"
   },
   "dependencies": {
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/integrations": "^10.2.0",
+    "@vueuse/core": "^10.2.1",
+    "@vueuse/integrations": "^10.2.1",
     "@webfansplz/vuedoc-parser": "^0.0.3",
-    "algoliasearch": "^4.17.1",
+    "algoliasearch": "^4.18.0",
     "birpc": "^0.2.12",
     "execa": "^7.1.1",
     "json-editor-vue": "^0.10.6",
+    "minimatch": "^9.0.2",
     "nanoid": "^4.0.2",
     "sirv": "^2.0.3",
     "splitpanes": "^3.1.5",
-    "vanilla-jsoneditor": "^0.17.5",
+    "vanilla-jsoneditor": "^0.17.8",
     "vite-hot-client": "^0.2.1",
-    "vite-plugin-inspect": "^0.7.28",
+    "vite-plugin-inspect": "^0.7.32",
     "vite-plugin-vue-inspector": "^3.4.2",
     "vue-router": "^4.2.2",
     "vuedraggable": "^4.1.0",
-    "xterm": "^5.1.0",
+    "xterm": "^5.2.1",
     "xterm-addon-fit": "^0.7.0"
   },
   "devDependencies": {
-    "@algolia/client-search": "^4.17.1",
-    "@antfu/eslint-config": "^0.38.5",
-    "@antfu/ni": "^0.21.3",
-    "@iconify/json": "^2.2.71",
-    "@nuxt/devtools-ui-kit": "^0.5.5",
-    "@types/codemirror": "^5.60.7",
-    "@types/node": "^20.2.5",
+    "@algolia/client-search": "^4.18.0",
+    "@antfu/eslint-config": "^0.39.6",
+    "@antfu/ni": "^0.21.4",
+    "@iconify/json": "^2.2.85",
+    "@nuxt/devtools-ui-kit": "^0.6.6",
+    "@types/codemirror": "^5.60.8",
+    "@types/node": "^20.3.3",
     "@types/splitpanes": "^2.2.1",
-    "@unocss/eslint-config": "^0.52.5",
-    "@unocss/reset": "^0.52.5",
+    "@unocss/eslint-config": "^0.53.4",
+    "@unocss/reset": "^0.53.4",
     "@vitejs/plugin-vue": "^4.2.3",
-    "bumpp": "^9.1.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "bumpp": "^9.1.1",
     "codemirror": "^6.0.1",
     "codemirror-theme-vars": "^0.1.2",
-    "dayjs": "^1.11.7",
-    "eslint": "8.38.0",
-    "fast-glob": "^3.2.12",
-    "floating-vue": "2.0.0-beta.20",
+    "dayjs": "^1.11.9",
+    "eslint": "8.44.0",
+    "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.2",
+    "lint-staged": "^13.2.3",
     "npm-run-all": "^4.1.5",
     "ohash": "^1.1.2",
-    "pathe": "^1.1.0",
-    "pinia": "^2.1.3",
-    "pnpm": "^8.6.0",
+    "pathe": "^1.1.1",
+    "pinia": "^2.1.4",
+    "pnpm": "^8.6.5",
     "rimraf": "^5.0.1",
     "simple-git-hooks": "^2.8.1",
-    "typescript": "^5.0.4",
+    "taze": "^0.11.2",
+    "typescript": "^5.1.6",
     "unbuild": "^1.2.1",
-    "unocss": "^0.52.5",
+    "unocss": "^0.53.4",
     "unplugin-auto-import": "^0.16.4",
-    "unplugin-vue-components": "^0.25.0",
+    "unplugin-vue-components": "^0.25.1",
     "vis-data": "^7.1.6",
     "vis-network": "^9.1.6",
     "vite": "^4.3.9",
     "vite-dev-rpc": "^0.1.2",
-    "vite-plugin-pages": "^0.30.1",
+    "vite-plugin-pages": "^0.31.0",
     "vue": "^3.3.4",
     "vue-virtual-scroller": "2.0.0-beta.8"
   },

package/src/node/views/Main.vue

@@ -5,7 +5,7 @@ import { computed, ref } from 'vue'
 import vueDevToolsOptions from 'virtual:vue-devtools-options'
 import Frame from './FrameBox.vue'
 import { useIframe, useInspector, usePanelVisible, usePiPMode, usePosition } from './composables'
-import { checkIsSafari, useColorScheme, usePreferredColorScheme } from './utils'
+import { checkIsSafari, useColorScheme, usePreferredColorScheme, warn } from './utils'
 
 const props = defineProps({
   hook: {
@@ -76,6 +76,7 @@ function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout =
 const {
   toggleInspector, inspectorLoaded,
   inspectorEnabled, disableInspector,
+  openInEditor, waitForInspectorInit,
 } = useInspector()
 
 const clientUrl = `${vueDevToolsOptions.base || '/'}__devtools__/`
@@ -88,8 +89,11 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
 // Picture-in-Picture mode
 const { popup } = usePiPMode(getIframe, hook)
 
-function setupClient(iframe: HTMLIFrameElement) {
+async function setupClient(iframe: HTMLIFrameElement) {
   const injection: any = iframe?.contentWindow?.__VUE_DEVTOOLS_VIEW__
+  if (!inspectorLoaded.value)
+    waitForInspectorInit()
+
   injection.setClient({
     hook,
     hookBuffer,
@@ -110,6 +114,9 @@ function setupClient(iframe: HTMLIFrameElement) {
           popup()
       },
     },
+    openInEditor: openInEditor.value ?? (() => {
+      warn('Unable to load inspector, open-in-editor is not available.')
+    }),
   })
 }
 

package/src/node/views/composables.ts

@@ -1,6 +1,7 @@
 import { computed, onMounted, reactive, ref, shallowRef, watchEffect } from 'vue'
 import type { CSSProperties, Ref } from 'vue'
-import { clamp, useObjectStorage, useScreenSafeArea, useWindowEventListener } from './utils'
+import type { OpenInEditorFn } from '../../types'
+import { clamp, useObjectStorage, useScreenSafeArea, useWindowEventListener, warn } from './utils'
 
 interface DevToolsFrameState {
   width: number
@@ -54,6 +55,8 @@ export function useIframe(clientUrl: string, onLoad: () => void) {
 }
 
 // ---- useInspector ----
+type OpenInEditorFnFromPlugin = (baseUrl: string, filePath: string, line?: number, column?: number) => any
+
 export function useInspector() {
   const inspectorEnabled = ref(false)
   const inspectorLoaded = ref(false)
@@ -68,6 +71,19 @@ export function useInspector() {
     inspectorEnabled.value = false
   }
 
+  const openInEditor = ref<OpenInEditorFn>()
+
+  const getBaseUrl = () => {
+    const { protocol, hostname, port } = window.location
+    return `${protocol}//${hostname}:${port}`
+  }
+
+  const registerOpenInEditor = (openInEditorFn: OpenInEditorFnFromPlugin) => {
+    openInEditor.value = (filePath: string, line?: number, column?: number) => {
+      openInEditorFn(getBaseUrl(), filePath, line ?? 1, column ?? 1)
+    }
+  }
+
   const setupInspector = () => {
     const componentInspector = window.__VUE_INSPECTOR__
     if (componentInspector) {
@@ -76,15 +92,22 @@ export function useInspector() {
         disable()
         _openInEditor(...params)
       }
+      registerOpenInEditor(_openInEditor)
     }
   }
 
   const waitForInspectorInit = () => {
+    let total = 0
     const timer = setInterval(() => {
       if (window.__VUE_INSPECTOR__) {
         clearInterval(timer)
         inspectorLoaded.value = true
         setupInspector()
+        total += 30
+      }
+      if (total >=/* 2s */ 2000) {
+        clearInterval(timer)
+        warn('Unable to load inspector')
       }
     }, 30)
   }
@@ -109,6 +132,8 @@ export function useInspector() {
     disableInspector: disable,
     setupInspector,
     inspectorLoaded,
+    openInEditor,
+    waitForInspectorInit,
   }
 }
 

package/src/node/views/utils.ts

@@ -9,6 +9,10 @@ export function tryOnScopeDispose(fn: () => void) {
     onScopeDispose(fn)
 }
 
+export function warn(message: string) {
+  console.warn(`[vite-plugin-vue-devtools] ${message}`)
+}
+
 // ---- storage ----
 export function useObjectStorage<T>(key: string, initial: T, readonly = false): Ref<T> {
   const raw = localStorage.getItem(key)