feat: upgrade vite-plugin-inspect to v12, use devtools-kit RPC (#966)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

packages/devtools-kit/build.config.ts

@@ -24,6 +24,8 @@ export default defineBuildConfig({
     'hookable',
     'error-stack-parser-es',
     'shiki',
+    '@vitejs/devtools-kit',
+    '@vitejs/devtools-rpc',
   ],
   declaration: true,
   rollup: {

packages/devtools-kit/src/_types/server-ctx.ts

@@ -1,3 +1,4 @@
+import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
 import type { BirpcGroup } from 'birpc'
 import type { Nuxt, NuxtDebugModuleMutationRecord } from 'nuxt/schema'
 import type { ModuleOptions } from './options'
@@ -31,6 +32,11 @@ export interface NuxtDevtoolsServerContext {
 
   rpc: NuxtDevtoolsRpc
 
+  /**
+   * The Vite DevTools Kit context, available after connection.
+   */
+  devtoolsKit: DevToolsNodeContext | undefined
+
   /**
    * Hook to open file in editor
    */

packages/devtools/src/integrations/vite-inspect.ts

@@ -1,67 +1,53 @@
 import type { Plugin } from 'vite'
-import type { ViteInspectAPI, ViteInspectOptions } from 'vite-plugin-inspect'
+import type { ViteInspectOptions } from 'vite-plugin-inspect'
 import type { NuxtDevtoolsServerContext } from '../types'
-import { addCustomTab } from '@nuxt/devtools-kit'
-import { addVitePlugin } from '@nuxt/kit'
+import { addVitePlugin, logger } from '@nuxt/kit'
 
-const DOUBLE_SLASH_RE = /\/\//g
 const VERSION_QUERY_RE = /\?v=\w+$/
 const VUE_EXT_RE = /\.vue($|\?v=)/
 
 export async function createVitePluginInspect(options?: ViteInspectOptions): Promise<Plugin> {
   return await import('vite-plugin-inspect').then(r => r.default(options))
 }
 
-export async function setup({ nuxt, rpc }: NuxtDevtoolsServerContext) {
+export async function setup({ rpc, devtoolsKit }: NuxtDevtoolsServerContext) {
   const plugin = await createVitePluginInspect()
   addVitePlugin(plugin)
 
-  let api: ViteInspectAPI | undefined
-
-  nuxt.hook('vite:serverCreated', () => {
-    api = plugin.api
-  })
-
-  addCustomTab(() => ({
-    name: 'builtin-vite-inspect',
-    title: 'Inspect',
-    icon: 'carbon-ibm-watson-discovery',
-    category: 'advanced',
-    view: {
-      type: 'iframe',
-      src: `${nuxt.options.app.baseURL}${nuxt.options.app.buildAssetsDir}/__inspect/`.replace(DOUBLE_SLASH_RE, '/'),
-    },
-  }), nuxt)
-
   async function getComponentsRelationships() {
-    const meta = await api?.rpc.getMetadata()
+    if (!devtoolsKit?.rpc.has('vite-plugin-inspect:get-metadata')) {
+      logger.warn('[nuxt-devtools] vite-plugin-inspect RPC functions not registered, component relationships unavailable')
+      return []
+    }
+
+    const meta = await devtoolsKit.rpc.invokeLocal('vite-plugin-inspect:get-metadata' as any)
     const modules = (
       meta && meta.instances[0]
-        ? await api?.rpc.getModulesList({
+        ? await devtoolsKit.rpc.invokeLocal('vite-plugin-inspect:get-modules-list' as any, {
             vite: meta.instances[0].vite,
             env: meta.instances[0].environments[0]!,
           })
         : null
     ) || []
 
     const components = await rpc.functions.getComponents() || []
-    const vueModules = modules.filter((m) => {
+    const vueModules = modules.filter((m: any) => {
       const plainId = m.id.replace(VERSION_QUERY_RE, '')
       if (components.some(c => c.filePath === plainId))
         return true
       return m.id.match(VUE_EXT_RE)
     })
 
-    const graph = vueModules.map((i) => {
+    const graph = vueModules.map((i: any) => {
       function searchForVueDeps(id: string, seen = new Set<string>()): string[] {
         if (seen.has(id))
           return []
         seen.add(id)
-        const module = modules.find(m => m.id === id)
+        const module = modules.find((m: any) => m.id === id)
         if (!module)
           return []
-        return module.deps.flatMap((i) => {
-          if (vueModules.some(m => m.id === i))
+        return module.deps.flatMap((i: string) => {
+          if (vueModules.some((m: any) => m.id === i))
             return [i]
           return searchForVueDeps(i, seen)
         })

packages/devtools/src/module-main.ts

@@ -64,7 +64,7 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
   addVitePlugin(DevTools)
 
   // Deferred: will be set when Vite DevTools plugin setup runs
-  let connectRpcHost: ((host: any) => void) | undefined
+  let connectDevToolsKit: ((ctx: any) => void) | undefined
 
   addVitePlugin(defineViteDevToolsPlugin({
     name: 'nuxt:devtools',
@@ -78,8 +78,8 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
           url: '/__nuxt_devtools__/client/',
         })
 
-        // Connect Nuxt DevTools RPC to Vite DevTools Kit's RPC host
-        connectRpcHost?.(ctx.rpc)
+        // Connect Nuxt DevTools to Vite DevTools Kit context
+        connectDevToolsKit?.(ctx)
       },
     },
   }))
@@ -130,11 +130,11 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
   })
 
   const {
-    connectRpcHost: _connectRpcHost,
+    connectDevToolsKit: _connectDevToolsKit,
     ...ctx
   } = setupRPC(nuxt, options)
 
-  connectRpcHost = _connectRpcHost
+  connectDevToolsKit = _connectDevToolsKit
 
   const clientDirExists = existsSync(clientDir)
 

packages/devtools/src/server-rpc/index.ts

@@ -1,4 +1,4 @@
-import type { RpcFunctionsHost } from '@vitejs/devtools-kit'
+import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
 import type { Nuxt } from 'nuxt/schema'
 
 import type { ModuleOptions, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
@@ -21,15 +21,15 @@ import { setupTimelineRPC } from './timeline'
 export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
   const serverFunctions = {} as ServerFunctions
   const extendedRpcMap = new Map<string, Record<string, (...args: any[]) => any>>()
-  let rpcHost: RpcFunctionsHost | undefined
+  let devtoolsKitCtx: DevToolsNodeContext | undefined
   const pendingBroadcasts: { method: string, args: any[] }[] = []
 
   function broadcast(method: string, ...args: any[]) {
-    if (!rpcHost) {
+    if (!devtoolsKitCtx) {
       pendingBroadcasts.push({ method, args })
       return
     }
-    rpcHost.broadcast({
+    devtoolsKitCtx.rpc.broadcast({
       method: method as any,
       args: args as any,
       event: true,
@@ -61,12 +61,12 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     set(target, prop, value) {
       (target as any)[prop] = value
       // Also update on RpcFunctionsHost if available
-      if (rpcHost && typeof prop === 'string') {
-        if (rpcHost.has(prop)) {
-          rpcHost.update({ name: prop, handler: value })
+      if (devtoolsKitCtx && typeof prop === 'string') {
+        if (devtoolsKitCtx.rpc.has(prop)) {
+          devtoolsKitCtx.rpc.update({ name: prop, handler: value })
         }
         else {
-          rpcHost.register({ name: prop, handler: value })
+          devtoolsKitCtx.rpc.register({ name: prop, handler: value })
         }
       }
       return true
@@ -86,10 +86,10 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     extendedRpcMap.set(namespace, functions)
 
     // Register on RpcFunctionsHost if already available
-    if (rpcHost) {
+    if (devtoolsKitCtx) {
       for (const [fnName, handler] of Object.entries(functions)) {
         if (typeof handler === 'function') {
-          rpcHost.register({ name: `${namespace}:${fnName}`, handler: handler as any })
+          devtoolsKitCtx.rpc.register({ name: `${namespace}:${fnName}`, handler: handler as any })
         }
       }
     }
@@ -106,6 +106,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     nuxt,
     options,
     rpc: rpc as any,
+    get devtoolsKit() { return devtoolsKitCtx },
     refresh,
     extendServerRpc,
     openInEditorHooks: [],
@@ -131,11 +132,12 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
   } as ServerFunctions)
 
   /**
-   * Connect to Vite DevTools Kit's RPC host.
+   * Connect to Vite DevTools Kit context.
    * Called from the Vite DevTools plugin setup callback.
    */
-  function connectRpcHost(host: RpcFunctionsHost) {
-    rpcHost = host
+  function connectDevToolsKit(ctx: DevToolsNodeContext) {
+    devtoolsKitCtx = ctx
+    const host = ctx.rpc
 
     // Flush any broadcasts that were queued before connection
     for (const { method, args } of pendingBroadcasts) {
@@ -183,7 +185,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
   }
 
   return {
-    connectRpcHost,
+    connectDevToolsKit,
     ...ctx,
   }
 }