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 { Components as VueComponents } from '@vue/devtools-applet'
+import { useDevToolsState as useVueDevToolsState } 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 { useDevToolsState as useVueDevToolsState } from '@vue/devtools-core'
 
 const { connected } = useVueDevToolsState()
 

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

@@ -0,0 +1,5 @@
+import { VueDevToolsVuePlugin } from '@vue/devtools-core'
+
+export default defineNuxtPlugin((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'
-import type { AppRecord } from '@vue/devtools-kit'
-import { toggleHighPerfMode } from '@vue/devtools-kit'
-
-export type DevtoolsBridgeAppRecord = Pick<AppRecord, 'name' | 'id' | 'version' | 'routerId' | 'moduleDetectives'>
-
-const appConnected = ref(false)
-const clientConnected = ref(false)
-const appRecords = ref<Array<DevtoolsBridgeAppRecord>>([])
-const activeAppRecordId = ref<string | null>(null)
-export const connected = computed(() => appConnected.value && clientConnected.value)
-export const activeAppRecord = computed(() => appRecords.value.find(r => r.id === activeAppRecordId.value))
-
-export function initVueDevToolsState() {
-  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'
 
 export function setupVueDevTools() {
   const state = useDevToolsFrameState()
@@ -48,18 +13,10 @@ export function setupVueDevTools() {
       toggleHighPerfMode(!state.value?.open)
   })
 
-  initDevToolsSeparateWindow({
-    onConnected(channel) {
-      const bridge = initDevToolsSeparateWindowBridge(channel)
-      setupDevToolsBridge(bridge)
-      new HandShakeServer(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'
 import type { Router } from 'vue-router'
 import type { $Fetch } from 'ofetch'
+import { setIframeServerContext } from '@vue/devtools-kit'
 import type { NuxtDevtoolsHostClient, TimelineEventRoute, TimelineMetrics } from '../../../types'
 import { initTimelineMetrics } from '../../function-metrics-helpers'
 import Main from './Main.vue'
@@ -133,6 +134,7 @@ export async function setupDevToolsClient({
       iframe.src = initialUrl
       iframe.onload = async () => {
         try {
+          setIframeServerContext(iframe!)
           await waitForClientInjection()
           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',
+})