feat: support vite-plugin-inspect for both Vite 5 and 6 (#757)

Author: antfu

.github/workflows/autofix.yml

@@ -13,6 +13,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: corepack enable
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 18

.github/workflows/ci.yml

@@ -17,6 +17,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: corepack enable
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 18

packages/devtools/package.json

@@ -75,6 +75,7 @@
     "tinyglobby": "catalog:",
     "unimport": "catalog:",
     "vite-plugin-inspect": "catalog:",
+    "vite-plugin-inspect-legacy": "npm:[email protected]",
     "vite-plugin-vue-inspector": "catalog:",
     "which": "catalog:",
     "ws": "catalog:"

packages/devtools/src/integrations/analyze-build.ts

@@ -2,13 +2,13 @@ import type { Nuxt } from 'nuxt/schema'
 import type { AnalyzeBuildMeta, ModuleOptions } from '../types'
 import { addVitePlugin } from '@nuxt/kit'
 import { join } from 'pathe'
-import Inspect from 'vite-plugin-inspect'
 import { getFolderSize } from '../utils/fs'
+import { createVitePluginInspect } from './vite-inspect'
 
 export async function setup(nuxt: Nuxt, options: ModuleOptions) {
   if (options.viteInspect !== false) {
     addVitePlugin(
-      Inspect({
+      await createVitePluginInspect({
         build: true,
         outputDir: join(nuxt.options.analyzeDir, '.vite-inspect'),
       }),

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

@@ -1,11 +1,23 @@
-import type { ViteInspectAPI } from 'vite-plugin-inspect'
+import type { Plugin } from 'vite'
+import type { ViteInspectAPI, ViteInspectOptions } from 'vite-plugin-inspect'
 import type { NuxtDevtoolsServerContext } from '../types'
 import { addCustomTab } from '@nuxt/devtools-kit'
 import { addVitePlugin } from '@nuxt/kit'
-import Inspect from 'vite-plugin-inspect'
 
-export function setup({ nuxt, rpc }: NuxtDevtoolsServerContext) {
-  const plugin = Inspect()
+export async function createVitePluginInspect(options?: ViteInspectOptions): Promise<Plugin> {
+  const { version } = await import('vite')
+  const major = Number.parseInt(version.split('.')[0], 10)
+
+  if (major < 6) {
+    return await import('vite-plugin-inspect-legacy').then(r => r.default(options))
+  }
+  else {
+    return await import('vite-plugin-inspect').then(r => r.default(options))
+  }
+}
+
+export async function setup({ nuxt, rpc }: NuxtDevtoolsServerContext) {
+  const plugin = await createVitePluginInspect()
   addVitePlugin(plugin)
 
   let api: ViteInspectAPI | undefined

pnpm-lock.yaml

@@ -20,7 +20,7 @@ catalog:
   '@nuxt/test-utils': ^3.14.4
   '@opentelemetry/api': ^1.9.0
   '@parcel/watcher': ^2.5.0
-  '@pinia/nuxt': ^0.7.0
+  '@pinia/nuxt': ^0.8.0
   '@types/diff': ^6.0.0
   '@types/markdown-it': ^14.1.2
   '@types/markdown-it-link-attributes': ^3.0.5
@@ -84,12 +84,12 @@ catalog:
   nitropack: ^2.10.4
   nuxt: ^3.14.1592
   nuxt-eslint-auto-explicit-import: ^0.1.1
-  nypm: ^0.4.0
+  nypm: ^0.4.1
   ofetch: ^1.4.1
   ohash: ^1.1.4
   pathe: ^1.1.2
   perfect-debounce: ^1.0.0
-  pinia: ^2.2.7
+  pinia: ^2.2.8
   pkg-types: ^1.2.1
   prompts: ^2.4.2
   quicktype-core: ^23.0.170
@@ -107,16 +107,16 @@ catalog:
   typescript: 5.6.3
   ua-parser-js: ^1.0.39
   unbuild: ^2.0.0
-  unimport: ^3.13.4
+  unimport: ^3.14.1
   unocss: ^0.64.1
   unplugin-vue-markdown: ^0.26.3
   v-lazy-show: ^0.2.4
   vanilla-jsoneditor: ^0.23.8
   vis-data: ^7.1.9
   vis-network: ^9.1.9
-  vite: ^5.4.11
+  vite: ^6.0.1
   vite-hot-client: ^0.2.4
-  vite-plugin-inspect: ^0.8.8
+  vite-plugin-inspect: ^0.10.3
   vite-plugin-vue-inspector: 5.1.3
   vitest: ^2.1.6
   vue: ^3.5.13