fix: switch to relevant app when inspecting component (#748)

Author: kevinluo201

packages/applet/src/modules/components/index.vue

@@ -215,21 +215,54 @@ onUnmounted(() => {
   rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
 })
 
-function inspectComponentInspector() {
+// #region toggle app
+const devtoolsState = useDevToolsState()
+const appRecords = computed(() => devtoolsState.appRecords.value.map(app => ({
+  label: app.name + (app.version ? ` (${app.version})` : ''),
+  value: app.id,
+})))
+
+const normalizedAppRecords = computed(() => appRecords.value.map(app => ({
+  label: app.label,
+  id: app.value,
+})))
+
+const activeAppRecordId = ref(devtoolsState.activeAppRecordId.value)
+watchEffect(() => {
+  activeAppRecordId.value = devtoolsState.activeAppRecordId.value
+})
+
+async function toggleApp(id: string, options: { inspectingComponent?: boolean } = {}) {
+  await rpc.value.toggleApp(id, options)
+  activeComponentId.value = ''
+  await getComponentsInspectorTree()
+}
+// #endregion
+
+async function inspectComponentInspector() {
   inspectComponentTipVisible.value = true
   emit('onInspectComponentStart')
-  rpc.value.inspectComponentInspector().then((_data) => {
-    const data = JSON.parse(_data! as unknown as string)
+
+  try {
+    const data = JSON.parse(await rpc.value.inspectComponentInspector())
+
+    const appId = data.id.split(':')[0]
+    if (activeAppRecordId.value !== data.appId) {
+      await toggleApp(appId, { inspectingComponent: true })
+    }
+
     activeComponentId.value = data.id
-    if (!expandedTreeNodes.value.includes(data.id))
+    if (!expandedTreeNodes.value.includes(data.id)) {
       expandedTreeNodes.value.push(data.id)
+    }
 
     expandedTreeNodes.value = [...new Set([...expandedTreeNodes.value, ...getTargetLinkedNodes(treeNodeLinkedList.value, data.id)])]
     scrollToActiveTreeNode()
-  }).finally(() => {
+  }
+  finally {
     inspectComponentTipVisible.value = false
     emit('onInspectComponentEnd')
-  })
+  }
 }
 
 function cancelInspectComponentInspector() {
@@ -280,32 +313,6 @@ function closeComponentRenderCode() {
   componentRenderCode.value = ''
   componentRenderCodeVisible.value = false
 }
-
-// #region toggle app
-const devtoolsState = useDevToolsState()
-const appRecords = computed(() => devtoolsState.appRecords.value.map(app => ({
-  label: app.name + (app.version ? ` (${app.version})` : ''),
-  value: app.id,
-})))
-
-const normalizedAppRecords = computed(() => appRecords.value.map(app => ({
-  label: app.label,
-  id: app.value,
-})))
-
-const activeAppRecordId = ref(devtoolsState.activeAppRecordId.value)
-watchEffect(() => {
-  activeAppRecordId.value = devtoolsState.activeAppRecordId.value
-})
-
-function toggleApp(id: string) {
-  rpc.value.toggleApp(id).then(() => {
-    activeComponentId.value = ''
-    getComponentsInspectorTree()
-  })
-}
-
-// #endregion
 </script>
 
 <template>

packages/core/src/rpc/global.ts

@@ -122,8 +122,8 @@ export const functions = {
     if (inspector)
       await inspector.enable()
   },
-  async toggleApp(id: string) {
-    return devtools.ctx.api.toggleApp(id)
+  async toggleApp(id: string, options?: { inspectingComponent?: boolean }) {
+    return devtools.ctx.api.toggleApp(id, options)
   },
   updatePluginSettings(pluginId: string, key: string, value: string) {
     return devtools.ctx.api.updatePluginSettings(pluginId, key, value)

packages/devtools-kit/src/core/component-highlighter/index.ts

@@ -3,7 +3,7 @@ import type { ComponentHighLighterOptions, ScrollToComponentOptions } from './ty
 import { activeAppRecord } from '../../ctx'
 import { getComponentBoundingRect } from '../component/state/bounding-rect'
 import { getRootElementsFromComponentInstance } from '../component/tree/el'
-import { getComponentId, getComponentInstance, getInstanceName } from '../component/utils'
+import { getComponentInstance, getInstanceName, getUniqueComponentId } from '../component/utils'
 
 export type * from './types'
 
@@ -180,14 +180,8 @@ function selectComponentFn(e: MouseEvent, cb) {
   e.preventDefault()
   e.stopPropagation()
   if (inspectInstance) {
-    const app = activeAppRecord.value?.app as unknown as VueAppInstance
-    getComponentId({
-      app,
-      uid: app.uid,
-      instance: inspectInstance,
-    }).then((id) => {
-      cb(id)
-    })
+    const uniqueComponentId = getUniqueComponentId(inspectInstance)
+    cb(uniqueComponentId)
   }
 }
 

packages/devtools-kit/src/core/plugin/index.ts

@@ -40,9 +40,13 @@ export function removeRegisteredPluginApp(app: App) {
   target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.delete(app)
 }
 
-export function registerDevToolsPlugin(app: App) {
-  if (target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.has(app) || devtoolsState.highPerfModeEnabled)
+export function registerDevToolsPlugin(app: App, options?: { inspectingComponent?: boolean }) {
+  if (target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.has(app)) {
     return
+  }
+  if (devtoolsState.highPerfModeEnabled && !options?.inspectingComponent) {
+    return
+  }
 
   target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.add(app)
 

packages/devtools-kit/src/ctx/api.ts

@@ -102,15 +102,15 @@ export function createDevToolsApi(hooks: Hookable<DevToolsContextHooks & DevTool
     // get vue inspector
     getVueInspector: getComponentInspector,
     // toggle app
-    toggleApp(id: string) {
+    toggleApp(id: string, options?: { inspectingComponent?: boolean }) {
       const appRecord = devtoolsAppRecords.value.find(record => record.id === id)
 
       if (appRecord) {
         setActiveAppRecordId(id)
         setActiveAppRecord(appRecord)
         normalizeRouterInfo(appRecord, activeAppRecord)
         callInspectorUpdatedHook()
-        registerDevToolsPlugin(appRecord.app)
+        registerDevToolsPlugin(appRecord.app, options)
       }
     },
     // inspect dom

packages/playground/multi-app/src/App.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import Number from './components/Number.vue'
+
 const count = ref(0)
 </script>
 
 <template>
   <div class="m-auto mt-3 h-30 w-60 flex flex-col items-center justify-center rounded bg-[#363636]">
     App
-    <div>Count: {{ count }}</div>
+    <div>Count: <Number :num="count" /></div>
     <button @click="count++">
       ++
     </button>

packages/playground/multi-app/src/App2.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import Number from './components/Number.vue'
+
 const count = ref(0)
 </script>
 
 <template>
   <div class="m-auto mt-3 h-30 w-60 flex flex-col items-center justify-center rounded bg-[#363636]">
     App2
-    <div>Count: {{ count }}</div>
+    <div>Count: <Number :num="count" /></div>
     <button @click="count++">
       ++
     </button>

packages/playground/multi-app/src/components/Number.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{ num: number }>()
+</script>
+
+<template>
+  <span>
+    {{ num }}
+  </span>
+</template>