feat: migrate to vite-plugin-vue-tracer (#803)

antfu · web-flow · commit faa08d394913 · 2025-03-05T14:09:47.000+08:00
diff --git a/packages/devtools-kit/build.config.ts b/packages/devtools-kit/build.config.ts
@@ -22,7 +22,6 @@ export default defineBuildConfig({
     'nuxt/dist/app/nuxt',
     'birpc',
     'hookable',
-    'vite-plugin-vue-inspector',
     'error-stack-parser-es',
     'shiki',
   ],
diff --git a/packages/devtools-kit/package.json b/packages/devtools-kit/package.json
@@ -57,7 +57,6 @@
     "hookable": "catalog:",
     "unbuild": "catalog:",
     "unimport": "catalog:",
-    "vite-plugin-vue-inspector": "catalog:",
     "vue-router": "catalog:"
   }
 }
diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts
@@ -6,7 +6,7 @@ import type { AppConfig } from 'nuxt/schema'
 import type { $Fetch } from 'ofetch'
 import type { BuiltinLanguage } from 'shiki'
 import type { Ref } from 'vue'
-import type { HookInfo, LoadingTimeMetric, PluginMetric, VueInspectorClient, VueInspectorData } from './integrations'
+import type { HookInfo, LoadingTimeMetric, PluginMetric } from './integrations'
 import type { ClientFunctions, ServerFunctions } from './rpc'
 import type { TimelineMetrics } from './timeline-metrics'
 
@@ -27,14 +27,10 @@ export interface NuxtDevtoolsClientHooks {
    * When the DevTools navigates, used for persisting the current tab
    */
   'devtools:navigate': (path: string) => void
-  /**
-   * Event emitted when the component inspector is updated
-   */
-  'host:inspector:update': (data: VueInspectorData) => void
   /**
    * Event emitted when the component inspector is clicked
    */
-  'host:inspector:click': (url: URL) => void
+  'host:inspector:click': (path: string) => void
   /**
    * Event to close the component inspector
    */
@@ -63,11 +59,11 @@ export interface NuxtDevtoolsHostClient {
   getIframe: () => HTMLIFrameElement | undefined
 
   inspector?: {
-    instance?: VueInspectorClient
     enable: () => void
     disable: () => void
     toggle: () => void
     isEnabled: Ref<boolean>
+    isAvailable: Ref<boolean>
   }
 
   devtools: {
diff --git a/packages/devtools-kit/src/_types/integrations.ts b/packages/devtools-kit/src/_types/integrations.ts
@@ -195,7 +195,7 @@ export interface VueInspectorClient {
   onUpdated: () => void
 }
 
-export type VueInspectorData = VueInspectorClient['linkParams'] & VueInspectorClient['position']
+export type VueInspectorData = VueInspectorClient['linkParams'] & Partial<VueInspectorClient['position']>
 
 export type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'json' | 'other'
 
diff --git a/packages/devtools-kit/src/_types/options.ts b/packages/devtools-kit/src/_types/options.ts
@@ -1,5 +1,4 @@
 import type { Import } from 'unimport'
-import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
 import type { ModuleCustomTab } from './custom-tabs'
 import type { ServerRouteInfo, ServerRouteInput, ServerTaskInfo } from './integrations'
 
@@ -30,7 +29,7 @@ export interface ModuleOptions {
    *
    * @default true
    */
-  componentInspector?: boolean | VitePluginInspectorOptions
+  componentInspector?: boolean
 
   /**
    * Enable Vue DevTools integration
diff --git a/packages/devtools/client/composables/client.ts b/packages/devtools/client/composables/client.ts
@@ -1,5 +1,5 @@
 import type { useRoute, useRouter } from '#imports'
-import type { NuxtDevtoolsClient, NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, VueInspectorData } from '@nuxt/devtools-kit/types'
+import type { NuxtDevtoolsClient, NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit/types'
 import type { Unhead } from '@unhead/schema'
 import type { ComputedRef } from 'vue'
 import { useState } from '#imports'
@@ -28,10 +28,6 @@ export function useClientHead() {
   return computed(() => client.value?.nuxt.vueApp.config.globalProperties?.$head as Unhead)
 }
 
-export function useComponentInspectorData() {
-  return useState<VueInspectorData>('devtools-component-inspector-data')
-}
-
 const connectionTimeout = ref(false)
 setTimeout(() => {
   connectionTimeout.value = true
diff --git a/packages/devtools/client/pages/modules/components.vue b/packages/devtools/client/pages/modules/components.vue
@@ -19,9 +19,7 @@ const relationships = useComponentsRelationships()
 const { componentsView: view } = useDevToolsOptions('ui')
 
 function openComponentInspector() {
-  if (!client.value?.inspector?.instance)
-    return
-  client.value.inspector.enable()
+  client.value?.inspector?.enable()
 }
 
 function toggleView() {
@@ -45,7 +43,7 @@ function toggleView() {
           @click="toggleView"
         />
         <NButton
-          v-if="client?.inspector?.instance"
+          v-if="client?.inspector?.isAvailable"
           v-tooltip.bottom-end="'Inspect Vue components'"
           text-lg :border="false"
           icon="i-tabler-focus-2"
diff --git a/packages/devtools/client/plugins/global.ts b/packages/devtools/client/plugins/global.ts
@@ -1,28 +1,19 @@
 import { defineNuxtPlugin, useRouter } from '#imports'
 import { triggerRef } from 'vue'
-import { useClient, useComponentInspectorData } from '../composables/client'
+import { useClient } from '../composables/client'
 import { rpc } from '../composables/rpc'
 
 export default defineNuxtPlugin(() => {
   const client = useClient()
-  const inspectorData = useComponentInspectorData()
   const router = useRouter()
 
   function onUpdateReactivity() {
     triggerRef(client)
     client.value.revision.value += 1
   }
 
-  function onInspectorUpdate(data: any) {
-    inspectorData.value = data
-  }
-
-  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)
+  function onInspectorClick(path: string) {
+    rpc.openInEditor(path)
   }
 
   Object.defineProperty(window, '__NUXT_DEVTOOLS_VIEW__', {
@@ -34,7 +25,6 @@ export default defineNuxtPlugin(() => {
         client.value = _client
 
         _client.hooks.hook('host:update:reactivity', onUpdateReactivity)
-        _client.hooks.hook('host:inspector:update', onInspectorUpdate)
         _client.hooks.hook('host:inspector:click', onInspectorClick)
         _client.hooks.hook('host:action:reload', () => location.reload())
         _client.hooks.hook('host:action:navigate', (path: string) => router.push(path))
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
@@ -74,7 +74,7 @@
     "structured-clone-es": "catalog:",
     "tinyglobby": "catalog:",
     "vite-plugin-inspect": "catalog:",
-    "vite-plugin-vue-inspector": "catalog:",
+    "vite-plugin-vue-tracer": "catalog:",
     "which": "catalog:",
     "ws": "catalog:"
   },
diff --git a/packages/devtools/src/integrations/vue-inspector.ts b/packages/devtools/src/integrations/vue-inspector.ts
diff --git a/packages/devtools/src/integrations/vue-tracer.ts b/packages/devtools/src/integrations/vue-tracer.ts
@@ -0,0 +1,15 @@
+import type { NuxtDevtoolsServerContext } from '../types'
+import { addVitePlugin } from '@nuxt/kit'
+import { VueTracer } from 'vite-plugin-vue-tracer'
+
+export function setup({ nuxt, options }: NuxtDevtoolsServerContext) {
+  if (!nuxt.options.dev || nuxt.options.test)
+    return
+
+  if (!options.componentInspector)
+    return
+
+  const plugin = VueTracer()
+  if (plugin)
+    addVitePlugin(plugin)
+}
diff --git a/packages/devtools/src/module-main.ts b/packages/devtools/src/module-main.ts
@@ -199,7 +199,7 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
     await import('./integrations/vite-inspect').then(({ setup }) => setup(ctx))
 
   if (options.componentInspector !== false)
-    await import('./integrations/vue-inspector').then(({ setup }) => setup(ctx))
+    await import('./integrations/vue-tracer').then(({ setup }) => setup(ctx))
 
   const integrations = [
     options.vscode?.enabled
diff --git a/packages/devtools/src/runtime/plugins/view/Main.vue b/packages/devtools/src/runtime/plugins/view/Main.vue
@@ -254,7 +254,7 @@ const iframeStyle = computed(() => {
   const style: CSSProperties = {
     position: 'fixed',
     zIndex: -1,
-    pointerEvents: isDragging.value || !state.value.open ? 'none' : 'auto',
+    pointerEvents: (isDragging.value || !state.value.open || props.client.inspector?.isEnabled.value) ? 'none' : 'auto',
     width: `min(${state.value.width}vw, calc(100vw - ${marginHorizontal}px))`,
     height: `min(${state.value.height}vh, calc(100vh - ${marginVertical}px))`,
   }
@@ -303,6 +303,10 @@ const iframeStyle = computed(() => {
       break
   }
 
+  if (props.client.inspector?.isEnabled.value) {
+    style.opacity = 0
+  }
+
   return style
 })
 
@@ -324,6 +328,20 @@ const time = computed(() => {
   return [type, ...millisecondToHumanreadable(time)]
 })
 
+function toggleInspector() {
+  const isDevToolsOpen = state.value.open
+  if (!isDevToolsOpen)
+    props.client.devtools.open()
+
+  props.client.inspector?.enable()
+
+  if (!isDevToolsOpen) {
+    setTimeout(() => {
+      props.client.devtools.close()
+    }, 500)
+  }
+}
+
 onMounted(() => {
   bringUp()
 })
@@ -379,12 +397,12 @@ onMounted(() => {
           {{ time[2] }}
         </span>
       </div>
-      <template v-if="client.inspector?.instance">
+      <template v-if="client.inspector?.isAvailable">
         <div
           style="border-left: 1px solid #8883;width:1px;height:10px;"
           class="nuxt-devtools-panel-content"
         />
-        <button class="nuxt-devtools-icon-button nuxt-devtools-panel-content" title="Toggle Component Inspector" @click="client.inspector.toggle">
+        <button class="nuxt-devtools-icon-button nuxt-devtools-panel-content" title="Toggle Component Inspector" @click.prevent.stop="toggleInspector">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             style="height: 1.2em; width: 1.2em; opacity:0.5;"
@@ -398,7 +416,6 @@ onMounted(() => {
     </div>
 
     <div
-      v-show="!client.inspector?.isEnabled.value"
       ref="frameBox"
       :style="iframeStyle"
     >
diff --git a/packages/devtools/src/runtime/plugins/view/client.ts b/packages/devtools/src/runtime/plugins/view/client.ts
@@ -10,6 +10,7 @@ import { setIframeServerContext } from '@vue/devtools-kit'
 import { createHooks } from 'hookable'
 import { debounce } from 'perfect-debounce'
 
+import { events as inspectorEvents, hasData as inspectorHasData, state as inspectorState } from 'vite-plugin-vue-tracer/client/overlay'
 import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, watch } from 'vue'
 import { initTimelineMetrics } from '../../function-metrics-helpers'
 import Main from './Main.vue'
@@ -33,7 +34,6 @@ export async function setupDevToolsClient({
   timeMetric: any
   router: Router
 }) {
-  const isInspecting = ref(false)
   const colorMode = useClientColorMode()
   const timeline = initTimelineMetrics()
 
@@ -182,52 +182,38 @@ export async function setupDevToolsClient({
     })
   }
 
-  function getInspector() {
-    return window.__NUXT_INSPECTOR__ || window.__VUE_INSPECTOR__
-  }
-
-  function enableComponentInspector() {
-    getInspector()?.enable()
-    isInspecting.value = true
-  }
-
-  function disableComponentInspector() {
-    if (!getInspector()?.enabled)
-      return
-
-    getInspector()?.disable()
-    client?.hooks.callHook('host:inspector:close')
-    isInspecting.value = false
-  }
-
   function getInspectorInstance(): NuxtDevtoolsHostClient['inspector'] {
-    const componentInspector = getInspector()
-    if (componentInspector) {
-      componentInspector.openInEditor = async (url) => {
-        disableComponentInspector()
-        await client.hooks.callHook('host:inspector:click', url)
-      }
-      componentInspector.onUpdated = () => {
-        client.hooks.callHook('host:inspector:update', {
-          ...componentInspector.linkParams,
-          ...componentInspector.position,
-        })
-      }
+    const isAvailable = ref(inspectorHasData())
+
+    inspectorEvents.on('disabled', () => {
+      inspectorState.isVisible = false
+      client?.hooks.callHook('host:inspector:close')
+    })
+    inspectorEvents.on('enabled', () => {
+      inspectorState.isVisible = true
+    })
+    inspectorEvents.on('click', async (info) => {
+      inspectorState.isEnabled = false
+      await client.hooks.callHook('host:inspector:click', info.fullpath)
+    })
+    if (!isAvailable.value) {
+      inspectorEvents.on('hover', async () => {
+        isAvailable.value = inspectorHasData()
+      })
     }
 
     return markRaw({
-      isEnabled: isInspecting,
-      enable: enableComponentInspector,
-      disable: disableComponentInspector,
+      isAvailable,
+      isEnabled: toRef(inspectorState, 'isEnabled'),
+      enable: () => {
+        inspectorState.isEnabled = true
+      },
+      disable: () => {
+        inspectorState.isEnabled = false
+      },
       toggle: () => {
-        if (!state.value.open)
-          client.devtools.open()
-        if (getInspector()?.enabled)
-          disableComponentInspector()
-        else
-          enableComponentInspector()
+        inspectorState.isEnabled = !inspectorState.isEnabled
       },
-      instance: componentInspector,
     })
   }
 
diff --git a/packages/devtools/src/types/global.ts b/packages/devtools/src/types/global.ts
@@ -1,4 +1,3 @@
-import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
 import type { LoadingTimeMetric, NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, NuxtDevtoolsGlobal as NuxtDevtoolsViewGlobal, PluginMetric, TimelineMetrics } from '.'
 
 declare global {
@@ -56,16 +55,6 @@ declare global {
      */
     __NUXT_DEVTOOLS_IS_POPUP__?: boolean
 
-    /**
-     * Vue Inspector client
-     */
-    __VUE_INSPECTOR__?: VueInspectorClient
-
-    /**
-     * Vue Inspector client
-     */
-    __NUXT_INSPECTOR__?: VueInspectorClient
-
     /**
      * Experimental API: Picture-in-Picture mode
      *
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,6 @@`
`57`	`57`	`"hookable": "catalog:",`
`58`	`58`	`"unbuild": "catalog:",`
`59`	`59`	`"unimport": "catalog:",`
`60`		`- "vite-plugin-vue-inspector": "catalog:",`
`61`	`60`	`"vue-router": "catalog:"`
`62`	`61`	`}`
`63`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -195,7 +195,7 @@ export interface VueInspectorClient {`
`195`	`195`	`onUpdated: () => void`
`196`	`196`	`}`
`197`	`197`
`198`		`-export type VueInspectorData = VueInspectorClient['linkParams'] & VueInspectorClient['position']`
	`198`	`+export type VueInspectorData = VueInspectorClient['linkParams'] & Partial<VueInspectorClient['position']>`
`199`	`199`
`200`	`200`	`export type AssetType = 'image' \| 'font' \| 'video' \| 'audio' \| 'text' \| 'json' \| 'other'`
`201`	`201`