fix: upgrade vite-plugin-vue-inspector, fix #657

nuxt · May 10, 2024 · f67f0f2 · f67f0f2
1 parent 4dc4dda
commit f67f0f2
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 17 deletions.
diff --git a/packages/devtools-kit/package.json b/packages/devtools-kit/package.json
@@ -54,7 +54,7 @@
     "hookable": "^5.5.3",
     "unbuild": "^2.0.0",
     "unimport": "^3.7.1",
-    "vite-plugin-vue-inspector": "^4.0.2",
+    "vite-plugin-vue-inspector": "^5.1.0",
     "vue-router": "^4.3.2"
   }
 }
diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts
@@ -34,7 +34,7 @@ export interface NuxtDevtoolsClientHooks {
   /**
    * Event emitted when the component inspector is clicked
    */
-  'host:inspector:click': (baseUrl: string, file: string, line: number, column: number) => void
+  'host:inspector:click': (url: URL) => void
   /**
    * Event to close the component inspector
    */

diff --git a/packages/devtools-kit/src/_types/integrations.ts b/packages/devtools-kit/src/_types/integrations.ts
@@ -190,7 +190,7 @@ export interface VueInspectorClient {
   enable: () => void
   disable: () => void
   toggleEnabled: () => void
-  openInEditor: (baseUrl: string, file: string, line: number, column: number) => void
+  openInEditor: (url: URL) => void
   onUpdated: () => void
 }
 

diff --git a/packages/devtools/client/components/ServerTaskDetails.vue b/packages/devtools/client/components/ServerTaskDetails.vue
@@ -312,7 +312,11 @@ const copy = useCopy()
           v-model="routeInputBodyJSON"
           :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
           class="json-editor-vue of-auto text-sm outline-none"
-          v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2"
+          v-bind="$attrs"
+          :mode="('text' as any)"
+          :navigation-bar="false"
+          :indentation="2"
+          :tab-size="2"
         />
       </template>
       <UseDefaultInputs v-else />

diff --git a/packages/devtools/client/components/StorageDetails.vue b/packages/devtools/client/components/StorageDetails.vue
@@ -171,7 +171,11 @@ async function renameCurrentItem() {
           v-model="currentItem.updatedContent"
           :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
           class="json-editor-vue h-full of-auto text-sm outline-none"
-          v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2"
+          v-bind="$attrs"
+          :mode="('text' as any)"
+          :navigation-bar="false"
+          :indentation="2"
+          :tab-size="2"
         />
         <textarea
           v-else v-model="currentItem.updatedContent"

diff --git a/packages/devtools/client/plugins/global.ts b/packages/devtools/client/plugins/global.ts
@@ -11,9 +11,12 @@ export default defineNuxtPlugin(() => {
     inspectorData.value = data
   }
 
-  function onInspectorClick(_: any, file: string, line: number, column: number) {
-    const url = `./${file}:${line}:${column}`
-    rpc.openInEditor(url)
+  function onInspectorClick(url: URL) {
+    const query = url.searchParams.get('file')
+    if (query)
+      rpc.openInEditor(query)
+    else
+      console.error('[nuxt-devtools] Failed to open file from Vue Inspector', url)
   }
 
   Object.defineProperty(window, '__NUXT_DEVTOOLS_VIEW__', {

diff --git a/packages/devtools/package.json b/packages/devtools/package.json
@@ -78,7 +78,7 @@
     "sirv": "^2.0.4",
     "unimport": "^3.7.1",
     "vite-plugin-inspect": "^0.8.4",
-    "vite-plugin-vue-inspector": "^4.0.2",
+    "vite-plugin-vue-inspector": "^5.1.0",
     "which": "^3.0.1",
     "ws": "^8.17.0"
   },

diff --git a/packages/devtools/src/runtime/plugins/view/FrameBox.vue b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
@@ -21,7 +21,9 @@ watchEffect(() => {
     if (!iframe)
       return
 
-    iframe.style.pointerEvents = isResizing.value || props.isDragging ? 'none' : 'auto'
+    iframe.style.pointerEvents = (isResizing.value || props.isDragging || props.client.inspector?.isEnabled.value)
+      ? 'none'
+      : 'auto'
 
     if (!popupWindow.value) {
       if (Array.from(container.value.children).every(el => el !== iframe))

diff --git a/packages/devtools/src/runtime/plugins/view/Main.vue b/packages/devtools/src/runtime/plugins/view/Main.vue
@@ -404,7 +404,11 @@ onMounted(() => {
       </template>
     </div>
 
-    <div ref="frameBox" :style="iframeStyle">
+    <div
+      v-show="!client.inspector?.isEnabled.value"
+      ref="frameBox"
+      :style="iframeStyle"
+    >
       <FrameBox
         :client="client"
         :is-dragging="isDragging"

diff --git a/packages/devtools/src/runtime/plugins/view/client.ts b/packages/devtools/src/runtime/plugins/view/client.ts
@@ -192,9 +192,9 @@ export async function setupDevToolsClient({
   function getInspectorInstance(): NuxtDevtoolsHostClient['inspector'] {
     const componentInspector = window.__VUE_INSPECTOR__
     if (componentInspector) {
-      componentInspector.openInEditor = async (baseUrl, file, line, column) => {
+      componentInspector.openInEditor = async (url) => {
         disableComponentInspector()
-        await client.hooks.callHook('host:inspector:click', baseUrl, file, line, column)
+        await client.hooks.callHook('host:inspector:click', url)
       }
       componentInspector.onUpdated = () => {
         client.hooks.callHook('host:inspector:update', {
@@ -203,11 +203,14 @@ export async function setupDevToolsClient({
         })
       }
     }
+
     return markRaw({
       isEnabled: isInspecting,
       enable: enableComponentInspector,
       disable: disableComponentInspector,
       toggle: () => {
+        if (!state.value.open)
+          client.devtools.open()
         if (window.__VUE_INSPECTOR__?.enabled)
           disableComponentInspector()
         else

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml