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

[skirtles-code]

Related issue: #1068

Background

Creating a project with create-vue will use Vite 8. While everything appears to work, we get warnings when installing packages.

npm:

npm warn ERESOLVE overriding peer dependency

pnpm:

 WARN  Issues with peer dependencies found
.
└─┬ vite-plugin-vue-devtools 8.1.1
  └─┬ vite-plugin-inspect 11.3.3
    ├── ✕ unmet peer vite@"^6.0.0 || ^7.0.0-0": found 8.0.3
    └─┬ vite-dev-rpc 1.1.0
      ├── ✕ unmet peer vite@"^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0": found 8.0.3
      └─┬ vite-hot-client 2.1.0
        └── ✕ unmet peer vite@"^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0": found 8.0.3

The 3 packages vite-plugin-inspect@11, vite-dev-rpc and vite-hot-client don't officially support Vite 8 in their version ranges. They do appear to work correctly, so it isn't clear to me whether there's a good technical reason why new releases of those packages couldn't be made with Vite 8 added to the peerDependencies.

This PR

Of those 3 dependencies, vite-plugin-inspect is the only one we depend on directly. There is currently a 12.0.0-beta.1 release, which does support Vite 8. This PR attempts some initial work to migrate to 12.0.0-beta.1, but it isn't complete and I don't currently see a way to get where we need to be.

It is based on the equivalent migration of the Nuxt DevTools. See antfu-collective/vite-plugin-inspect#167 (comment) for more information.

Major version

Migrating to vite-plugin-inspect v12 is going to require a major version release of Vue DevTools, as vite-plugin-vue-devtools will only support Vite 8. It isn't clear to me that a major version, with the downstream pain that will cause, is actually the right way forward.

But without a version of vite-plugin-inspect that supports Vite 6, 7 & 8, I think we're going to be forced into a major version release.

Remaining problems

I'll add some inline review comments to explain some of the remaining problems.

Testing with pkg-pr-new suggests that this PR does resolve the peer dependency warnings. While all functionality is 'working' to some extent, there are several significant blockers to getting this merged.

The two biggest problems currently are:

1. The Vite DevTools are now showing up in the UI.
2. The client authentication requirements in Vite DevTools carry across to 'Vite Inspect' tab in Vue DevTools (which is essentially vite-plugin-inspect in an iframe).

[netlify]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	df20785
🔍 Latest deploy log	https://app.netlify.com/projects/vue-devtools-docs/deploys/69d11121d1ecff0008a1bc21

[pkg-pr-new]

Open in StackBlitz

@vue/devtools-applet

npm i https://pkg.pr.new/@vue/devtools-applet@1085

@vue/devtools-core

npm i https://pkg.pr.new/@vue/devtools-core@1085

@vue/devtools

npm i https://pkg.pr.new/@vue/devtools@1085

@vue/devtools-api

npm i https://pkg.pr.new/@vue/devtools-api@1085

@vue/devtools-kit

npm i https://pkg.pr.new/@vue/devtools-kit@1085

@vue/devtools-electron

npm i https://pkg.pr.new/@vue/devtools-electron@1085

@vue/devtools-shared

npm i https://pkg.pr.new/@vue/devtools-shared@1085

@vue/devtools-ui

npm i https://pkg.pr.new/@vue/devtools-ui@1085

vite-plugin-vue-devtools

npm i https://pkg.pr.new/vite-plugin-vue-devtools@1085

commit: df20785

[skirtles-code]

Some of the current problems with this PR (which I don't know how to fix)...

[skirtles-code]

I used this playground to test my changes.

I had to remove vite-plugin-inspect from the plugins because it caused an error:

[Vite DevTools] Error setting up plugin vite-plugin-inspect: Error: RPC function "vite-plugin-inspect:clear-module-transform" is already registered

We're already adding another copy of vite-plugin-inspect inside Vue DevTools, and it seems that v12.0.0-beta.1 isn't happy with that duplication.

---

As a side note, running the playground using pnpm run play from the project root proved problematic because turbo didn't play nicely with the authentication stuff in Vite DevTools. I had to run pnpm run dev from packages/playground/basic instead.

[skirtles-code]

I'm not aware of a good way to type these calls to invokeLocal. I've used as any as that's what Nuxt DevTools does.

[skirtles-code]

This is a hack and definitely not right.

I'm using devtools.setup to get rpc, but that function isn't called by default. I've not been able to figure out what the correct way to trigger that function is. Adding the Vite DevTools plugin here does the job, but that also adds the UI widget, which we don't want.

It'll also fail if something else adds another copy of the Vite DevTools plugin.