vite-plugin-vue-devtools 0.4.10 → 0.4.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-vue-devtools",
-  "version": "0.4.10",
-  "packageManager": "pnpm@8.4.0",
+  "version": "0.4.12",
+  "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)

package/dist/client/assets/__eyedropper-c3a23916.js

@@ -1,112 +0,0 @@
-import { _ as __unplugin_components_0 } from './VPanelGrids-dc69b639.js';
-import { v as defineComponent, cw as useRouter, a$ as ref, cd as useEventListener, aP as onMounted, o as openBlock, c as createBlock, h as withCtx, x as createBaseVNode, z as unref, e as createElementBlock, l as normalizeStyle, a9 as createTextVNode, y as toDisplayString, cx as useDevtoolsClient, bY as useFrameState } from './index-b8a9099c.js';
-
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = {
-  key: 1,
-  flex: "",
-  "items-center": ""
-};
-const _hoisted_3 = {
-  flex: "",
-  "items-center": ""
-};
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("i", {
-  class: "i-mdi:eyedropper",
-  "text-3": ""
-}, null, -1);
-const _hoisted_5 = [
-  _hoisted_4
-];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "__eyedropper",
-  setup(__props) {
-    const client = useDevtoolsClient();
-    const frameState = useFrameState();
-    const router = useRouter();
-    const color = ref("");
-    useEventListener("keydown", (e) => {
-      if (e.key === "Escape")
-        close();
-    });
-    function close() {
-      client.value?.panel?.toggleViewMode();
-      router.replace(frameState.route.value);
-    }
-    async function open() {
-      const eyeDropper = new EyeDropper();
-      return eyeDropper.open();
-    }
-    async function restart() {
-      color.value = "";
-      open().then((res) => {
-        color.value = res.sRGBHex;
-      });
-    }
-    onMounted(() => {
-      open().then((res) => {
-        color.value = res.sRGBHex;
-      });
-    });
-    return (_ctx, _cache) => {
-      const _component_VPanelGrids = __unplugin_components_0;
-      return openBlock(), createBlock(_component_VPanelGrids, {
-        "h-screen": "",
-        "w-screen": "",
-        px5: ""
-      }, {
-        default: withCtx(() => [
-          createBaseVNode("div", {
-            absolute: "",
-            "right-0": "",
-            "top-0": "",
-            p2: ""
-          }, [
-            createBaseVNode("button", {
-              "carbon-close": "",
-              ma: "",
-              "text-xl": "",
-              op50: "",
-              "hover:op100": "",
-              onClick: close
-            })
-          ]),
-          !unref(color) ? (openBlock(), createElementBlock("div", _hoisted_1, " Launching EyeDropper ")) : (openBlock(), createElementBlock("div", _hoisted_2, [
-            createBaseVNode("span", _hoisted_3, [
-              createBaseVNode("em", {
-                "mr-2": "",
-                "inline-block": "",
-                "h-5": "",
-                "w-5": "",
-                border: "",
-                "border-base": "",
-                rounded: "",
-                style: normalizeStyle({ backgroundColor: unref(color) })
-              }, null, 4),
-              createTextVNode(" : " + toDisplayString(unref(color)), 1)
-            ]),
-            createBaseVNode("span", {
-              "ml-2": "",
-              flex: "",
-              "cursor-pointer": "",
-              "items-center": "",
-              border: "",
-              "border-base": "",
-              "rounded-10": "",
-              "p-2": "",
-              hover: "bg-active",
-              onClick: restart
-            }, _hoisted_5)
-          ]))
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-
-/* Injected with object hook! */
-
-/* Injected with object hook! */
-
-export { _sfc_main as default };