feat(devtools,devtools-kit): expose vue-tracer state in inspector

[huang-julien]

🔗 Linked issue

❓ Type of change

This PR exposes the state from vue-tracer. It's more convenient if module integrations wants to use the overlay without triggering any hooks from devtools. Instead of creating the plugin in the main nuxt app then having the devtools retrieving the state from client.value?.host.nuxt .

• [ ] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [ ] 👌 Enhancement (improving an existing functionality)
• [ ] ✨ New feature (a non-breaking change that adds functionality)
• [ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

[antfu]

The reason I didn't do that is because I didn't want to leak the implementation details to the API, which could cause breaking changes when we upgrade vue-tracer or swap to the different implementation.

I guess maybe you can directly import the state from import type { state } from 'vite-plugin-vue-tracer/client/overlay' if the module id properly deduped?

[huang-julien]

I see. I don't want it to be deduped hence why we can't import it directly in the client for hints module. The workaround would be to add our own module to inject the state from the main NuxtApp then use it in the devtools client.

[huang-julien]

hmmm nevermind. In order to control the overlay, i also need to provide vite-plugin-vue/client/record too.

Do you think it would be possible to provide a way to control the inspector without having to close the devtools and also being able to provide which component/element should be overlayed ?