feat: Vite 8 support via vite-plugin-inspect v12 and devtools-kit RPC

skirtles-code · skirtles-code · commit df20785e3ac8 · 2026-04-04T14:24:21.000+01:00
diff --git a/package.json b/package.json
@@ -117,7 +117,7 @@
     "unocss": "^66.5.4",
     "vite": "^7.1.10",
     "vitest": "^3.2.4",
-    "vue": "^3.5.22"
+    "vue": "^3.5.32"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
diff --git a/packages/applet/package.json b/packages/applet/package.json
@@ -42,6 +42,7 @@
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "unplugin-vue": "^7.0.2",
+    "vite": "catalog:",
     "vite-plugin-dts": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
diff --git a/packages/chrome-extension/package.json b/packages/chrome-extension/package.json
@@ -16,9 +16,5 @@
     "@vue/devtools-core": "workspace:^",
     "@vue/devtools-kit": "workspace:^",
     "@vue/devtools-shared": "workspace:^"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "catalog:",
-    "vue": "catalog:"
   }
 }
diff --git a/packages/electron/package.json b/packages/electron/package.json
@@ -46,9 +46,7 @@
     "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "catalog:",
     "tsx": "^4.20.6",
-    "unbuild": "3.6.1",
-    "vue": "catalog:"
+    "unbuild": "3.6.1"
   }
 }
diff --git a/packages/firefox-extension/package.json b/packages/firefox-extension/package.json
@@ -16,9 +16,5 @@
     "@vue/devtools-core": "workspace:^",
     "@vue/devtools-kit": "workspace:^",
     "@vue/devtools-shared": "workspace:^"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "catalog:",
-    "vue": "catalog:"
   }
 }
diff --git a/packages/playground/basic/package.json b/packages/playground/basic/package.json
@@ -26,8 +26,8 @@
     "serve": "catalog:",
     "typescript": "catalog:",
     "unocss": "catalog:",
-    "vite": "catalog:",
-    "vite-plugin-inspect": "catalog:",
+    "vite": "^8.0.0",
+    "vite-plugin-inspect": "12.0.0-beta.1",
     "vite-plugin-vue-devtools": "workspace:*"
   }
 }
diff --git a/packages/playground/basic/vite.config.ts b/packages/playground/basic/vite.config.ts
@@ -4,7 +4,7 @@ import Unocss from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import { defineConfig } from 'vite'
-import inspect from 'vite-plugin-inspect'
+// import inspect from 'vite-plugin-inspect'
 import VueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
@@ -24,7 +24,7 @@ export default defineConfig({
       ],
       resolvers: [ElementPlusResolver()],
     }),
-    inspect(),
+    // inspect(),
   ],
   server: {
     port: 3000,
diff --git a/packages/playground/options-api/package.json b/packages/playground/options-api/package.json
@@ -11,6 +11,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "catalog:",
+    "vite": "catalog:",
     "vite-plugin-vue-devtools": "workspace:*"
   }
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -59,6 +59,8 @@
     "floating-vue": "catalog:",
     "histoire": "1.0.0-beta.1",
     "unocss": "catalog:",
-    "vite-plugin-dts": "catalog:"
+    "vite": "catalog:",
+    "vite-plugin-dts": "catalog:",
+    "vue": "^3.5.32"
   }
 }
diff --git a/packages/vite/package.json b/packages/vite/package.json
@@ -48,17 +48,20 @@
     "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "dependencies": {
+    "@vitejs/devtools": "0.1.13",
     "@vue/devtools-core": "workspace:^",
     "@vue/devtools-kit": "workspace:^",
     "@vue/devtools-shared": "workspace:^",
     "sirv": "^3.0.2",
-    "vite-plugin-inspect": "catalog:",
-    "vite-plugin-vue-inspector": "^5.3.2"
+    "vite-plugin-inspect": "12.0.0-beta.1",
+    "vite-plugin-vue-inspector": "^5.4.0"
   },
   "devDependencies": {
     "@types/node": "catalog:",
+    "@vitejs/devtools-kit": "0.1.13",
     "fast-glob": "^3.3.3",
     "image-meta": "^0.2.2",
-    "pathe": "catalog:"
+    "pathe": "catalog:",
+    "vite": "^8.0.0"
   }
 }
diff --git a/packages/vite/src/overlay.js b/packages/vite/src/overlay.js
@@ -29,7 +29,7 @@ addCustomTab({
   icon: 'i-carbon-ibm-watson-discovery',
   view: {
     type: 'iframe',
-    src: normalizeUrl(`__inspect/`),
+    src: normalizeUrl(`.vite-inspect/`),
   },
   category: 'advanced',
 })
diff --git a/packages/vite/src/rpc/graph.ts b/packages/vite/src/rpc/graph.ts
@@ -4,7 +4,7 @@ import { debounce } from 'perfect-debounce'
 import { RpcFunctionCtx } from './types'
 
 export function getGraphFunctions(ctx: RpcFunctionCtx) {
-  const { rpc, server } = ctx
+  const { getRpc, server } = ctx
   const debouncedModuleUpdated = debounce(() => {
     getViteRpcServer<ViteRPCFunctions>?.()?.broadcast?.emit('graphModuleUpdated')
   }, 100)
@@ -15,10 +15,11 @@ export function getGraphFunctions(ctx: RpcFunctionCtx) {
   })
   return {
     async getGraphModules(): Promise<ModuleInfo[]> {
-      const meta = await rpc.getMetadata()
+      const rpc = getRpc()
+      const meta = await rpc?.invokeLocal('vite-plugin-inspect:get-metadata' as any)
       const modules = (
         meta
-          ? await rpc.getModulesList({
+          ? await rpc?.invokeLocal('vite-plugin-inspect:get-modules-list' as any, {
               vite: meta?.instances[0].vite,
               env: meta?.instances[0].environments[0],
             })
diff --git a/packages/vite/src/rpc/types.ts b/packages/vite/src/rpc/types.ts
@@ -1,8 +1,8 @@
+import type { RpcFunctionsHost } from '@vitejs/devtools-kit'
 import { ResolvedConfig, ViteDevServer } from 'vite'
-import { ViteInspectAPI } from 'vite-plugin-inspect/index'
 
 export interface RpcFunctionCtx {
-  rpc: ViteInspectAPI['rpc']
+  getRpc: () => RpcFunctionsHost | undefined
   server: ViteDevServer
   config: ResolvedConfig
 }
diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts
@@ -1,8 +1,10 @@
+import type { DevToolsNodeContext, RpcFunctionsHost } from '@vitejs/devtools-kit'
 import type { PluginOption, ResolvedConfig, ViteDevServer } from 'vite'
 import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { DevTools as ViteDevTools } from '@vitejs/devtools'
 import { createViteServerRpc } from '@vue/devtools-core'
 import { setViteServerContext } from '@vue/devtools-kit'
 import { bold, cyan, dim, green, yellow } from 'kolorist'
@@ -89,6 +91,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
   const pluginOptions = mergeOptions(options ?? {})
 
   let config: ResolvedConfig
+  let rpc: RpcFunctionsHost | undefined
 
   function configureServer(server: ViteDevServer) {
     const base = (server.config.base) || '/'
@@ -110,9 +113,11 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
     setViteServerContext(server)
 
     const rpcFunctions = getRpcFunctions({
-      rpc: inspect.api.rpc,
       server,
       config,
+      getRpc() {
+        return rpc
+      },
     })
     createViteServerRpc(rpcFunctions)
 
@@ -145,6 +150,11 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
     configureServer(server) {
       configureServer(server)
     },
+    devtools: {
+      setup(ctx: DevToolsNodeContext) {
+        rpc = ctx.rpc
+      },
+    },
     async resolveId(importee: string) {
       if (importee === devtoolsOptionsImportee) {
         return resolvedDevtoolsOptions
@@ -216,6 +226,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
   }
 
   return [
+    ViteDevTools(),
     inspect as PluginOption,
     pluginOptions.componentInspector && VueInspector({
       toggleComboKey: '',
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
`@@ -16,9 +16,5 @@`
`16`	`16`	`"@vue/devtools-core": "workspace:^",`
`17`	`17`	`"@vue/devtools-kit": "workspace:^",`
`18`	`18`	`"@vue/devtools-shared": "workspace:^"`
`19`		`- },`
`20`		`- "devDependencies": {`
`21`		`- "@vitejs/plugin-vue": "catalog:",`
`22`		`- "vue": "catalog:"`
`23`	`19`	`}`
`24`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,9 +46,7 @@`
`46`	`46`	`"socket.io-client": "^4.8.1"`
`47`	`47`	`},`
`48`	`48`	`"devDependencies": {`
`49`		`- "@vitejs/plugin-vue": "catalog:",`
`50`	`49`	`"tsx": "^4.20.6",`
`51`		`- "unbuild": "3.6.1",`
`52`		`- "vue": "catalog:"`
	`50`	`+ "unbuild": "3.6.1"`
`53`	`51`	`}`
`54`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,8 +26,8 @@`
`26`	`26`	`"serve": "catalog:",`
`27`	`27`	`"typescript": "catalog:",`
`28`	`28`	`"unocss": "catalog:",`
`29`		`- "vite": "catalog:",`
`30`		`- "vite-plugin-inspect": "catalog:",`
	`29`	`+ "vite": "^8.0.0",`
	`30`	`+ "vite-plugin-inspect": "12.0.0-beta.1",`
`31`	`31`	`"vite-plugin-vue-devtools": "workspace:*"`
`32`	`32`	`}`
`33`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@`
`11`	`11`	`},`
`12`	`12`	`"devDependencies": {`
`13`	`13`	`"@vitejs/plugin-vue": "catalog:",`
	`14`	`+ "vite": "catalog:",`
`14`	`15`	`"vite-plugin-vue-devtools": "workspace:*"`
`15`	`16`	`}`
`16`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,8 @@`
`59`	`59`	`"floating-vue": "catalog:",`
`60`	`60`	`"histoire": "1.0.0-beta.1",`
`61`	`61`	`"unocss": "catalog:",`
`62`		`- "vite-plugin-dts": "catalog:"`
	`62`	`+ "vite": "catalog:",`
	`63`	`+ "vite-plugin-dts": "catalog:",`
	`64`	`+ "vue": "^3.5.32"`
`63`	`65`	`}`
`64`	`66`	`}`