feat: migrate vue-devtools to v7.3 (#675)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: webfansplz

packages/devtools/client/composables/vue-devtools.ts

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ComponentsasVueComponents } from'@vue/devtools-applet'
+import { useDevToolsStateasuseVueDevToolsState } from'@vue/devtools-core'
 
 const { connected } =useVueDevToolsState()
 const client =useClient()

packages/devtools/client/pages/modules/components-tree.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Pinia } from'@vue/devtools-applet'
+import { useDevToolsStateasuseVueDevToolsState } from'@vue/devtools-core'
 
 const { connected } =useVueDevToolsState()
 

packages/devtools/client/pages/modules/pinia.vue

@@ -0,0 +1,5 @@
+import{VueDevToolsVuePlugin}from'@vue/devtools-core'
+
+exportdefaultdefineNuxtPlugin((nuxtApp)=>{
+nuxtApp.vueApp.use(VueDevToolsVuePlugin())
+})

packages/devtools/client/plugins/vue-devtools.ts

@@ -1,40 +1,5 @@
-import{HandShakeServer,getDevToolsState,initDevToolsSeparateWindow,initDevToolsSeparateWindowBridge,onDevToolsStateUpdated,setupDevToolsBridge}from'@vue/devtools-core'
-importtype{AppRecord}from'@vue/devtools-kit'
-import{toggleHighPerfMode}from'@vue/devtools-kit'
-
-exporttypeDevtoolsBridgeAppRecord=Pick<AppRecord,'name'|'id'|'version'|'routerId'|'moduleDetectives'>
-
-constappConnected=ref(false)
-constclientConnected=ref(false)
-constappRecords=ref<Array<DevtoolsBridgeAppRecord>>([])
-constactiveAppRecordId=ref<string|null>(null)
-exportconstconnected=computed(()=>appConnected.value&&clientConnected.value)
-exportconstactiveAppRecord=computed(()=>appRecords.value.find(r=>r.id===activeAppRecordId.value))
-
-exportfunctioninitVueDevToolsState(){
-getDevToolsState().then((data)=>{
-if(!data)
-return
-appConnected.value=data.connected
-clientConnected.value=data.clientConnected
-appRecords.value=data.appRecords
-activeAppRecordId.value=data.activeAppRecordId
-})
-
-onDevToolsStateUpdated((data)=>{
-if(!data)
-return
-appConnected.value=data.connected
-clientConnected.value=data.clientConnected
-appRecords.value=data.appRecords
-activeAppRecordId.value=data.activeAppRecordId
-})
-
-return{
- appRecords,
- activeAppRecord,
-}
-}
+import{functions,onRpcConnected,rpc}from'@vue/devtools-core'
+import{createRpcClient,toggleHighPerfMode}from'@vue/devtools-kit'
 
 exportfunctionsetupVueDevTools(){
 conststate=useDevToolsFrameState()
@@ -48,18 +13,10 @@ export function setupVueDevTools() {
 toggleHighPerfMode(!state.value?.open)
 })
 
-initDevToolsSeparateWindow({
-onConnected(channel){
-constbridge=initDevToolsSeparateWindowBridge(channel)
-setupDevToolsBridge(bridge)
-newHandShakeServer(bridge).onnConnect().then(()=>{
-bridge.emit('devtools:client-ready')
-initVueDevToolsState()
-})
-bridge.on('disconnect',()=>{
-channel.close()
-initDevToolsSeparateWindow()
-})
-},
+createRpcClient(functions,{
+preset: 'iframe',
+})
+onRpcConnected(()=>{
+rpc.value.initDevToolsServerListener()
 })
 }

packages/devtools/client/setup/vue-devtools.ts

@@ -46,6 +46,8 @@
 "@nuxt/devtools-kit": "workspace:*",
 "@nuxt/devtools-wizard": "workspace:*",
 "@nuxt/kit": "^3.12.2",
+"@vue/devtools-core": "7.3.3",
+"@vue/devtools-kit": "7.3.3",
 "birpc": "^0.2.17",
 "consola": "^3.2.3",
 "cronstrue": "^2.50.0",
@@ -96,9 +98,7 @@
 "@unocss/preset-uno": "^0.61.0",
 "@unocss/runtime": "^0.61.0",
 "@vitest/ui": "^1.6.0",
-"@vue/devtools-applet": "7.1.3",
-"@vue/devtools-core": "7.1.3",
-"@vue/devtools-kit": "7.1.3",
+"@vue/devtools-applet": "7.3.3",
 "@vueuse/nuxt": "^10.11.0",
 "esno": "^4.7.0",
 "floating-vue": "5.0.2",

packages/devtools/package.json

@@ -4,6 +4,7 @@ import { createHooks } from 'hookable'
 import{debounce}from'perfect-debounce'
 importtype{Router}from'vue-router'
 importtype{$Fetch}from'ofetch'
+import{setIframeServerContext}from'@vue/devtools-kit'
 importtype{NuxtDevtoolsHostClient,TimelineEventRoute,TimelineMetrics}from'../../../types'
 import{initTimelineMetrics}from'../../function-metrics-helpers'
 importMainfrom'./Main.vue'
@@ -133,6 +134,7 @@ export async function setupDevToolsClient({
 iframe.src=initialUrl
 iframe.onload=async()=>{
 try{
+setIframeServerContext(iframe!)
 awaitwaitForClientInjection()
 client.syncClient()
 }

packages/devtools/src/runtime/plugins/view/client.ts

@@ -1,6 +1,8 @@
-import{devtools}from'@vue/devtools-kit'
-import{initAppSeparateWindow}from'@vue/devtools-core'
+import{createRpcServer,devtools}from'@vue/devtools-kit'
+import{functions}from'@vue/devtools-core'
 
 devtools.init()
 
-initAppSeparateWindow()
+createRpcServer(functions,{
+preset: 'iframe',
+})