From f667ffbfddb917dca74636c10f94679f2b1df4ab Mon Sep 17 00:00:00 2001
From: Kevin Luo <kevin.luo@telus.com>
Date: Wed, 18 Dec 2024 23:23:22 -0500
Subject: [PATCH 1/5] move up the toggle app region

---
 .../applet/src/modules/components/index.vue   | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/packages/applet/src/modules/components/index.vue b/packages/applet/src/modules/components/index.vue
index 865540304..b5a0a7672 100644
--- a/packages/applet/src/modules/components/index.vue
+++ b/packages/applet/src/modules/components/index.vue
@@ -215,6 +215,30 @@ onUnmounted(() => {
   rpc.functions.off(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, onInspectorTreeUpdated)
 })
 
+// #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) {
+  await rpc.value.toggleApp(id)
+  activeComponentId.value = ''
+  await getComponentsInspectorTree()
+}
+// #endregion
+
 function inspectComponentInspector() {
   inspectComponentTipVisible.value = true
   emit('onInspectComponentStart')
@@ -280,32 +304,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>

From 4867f352431a937b9c7647fccff3d5f3a1b70977 Mon Sep 17 00:00:00 2001
From: Kevin Luo <kevin.luo@telus.com>
Date: Wed, 18 Dec 2024 23:43:52 -0500
Subject: [PATCH 2/5] add Number in App and App2 to have a better test
 situation

---
 packages/playground/multi-app/src/App.vue               | 4 +++-
 packages/playground/multi-app/src/App2.vue              | 4 +++-
 packages/playground/multi-app/src/components/Number.vue | 9 +++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 packages/playground/multi-app/src/components/Number.vue

diff --git a/packages/playground/multi-app/src/App.vue b/packages/playground/multi-app/src/App.vue
index f031aa881..d07a55fff 100644
--- a/packages/playground/multi-app/src/App.vue
+++ b/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>
diff --git a/packages/playground/multi-app/src/App2.vue b/packages/playground/multi-app/src/App2.vue
index 68d705f18..8122481e5 100644
--- a/packages/playground/multi-app/src/App2.vue
+++ b/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>
diff --git a/packages/playground/multi-app/src/components/Number.vue b/packages/playground/multi-app/src/components/Number.vue
new file mode 100644
index 000000000..2b1ddedef
--- /dev/null
+++ b/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>

From da5a86c7f163960983f8d663ada0a7cda2c4d96f Mon Sep 17 00:00:00 2001
From: Kevin Luo <kevin.luo@telus.com>
Date: Wed, 18 Dec 2024 23:45:22 -0500
Subject: [PATCH 3/5] change the inspectComponentInspector to async and
 toggleApp if the AppId is different from the activeAppRecordId

---
 .../applet/src/modules/components/index.vue   | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/applet/src/modules/components/index.vue b/packages/applet/src/modules/components/index.vue
index b5a0a7672..5b6607b70 100644
--- a/packages/applet/src/modules/components/index.vue
+++ b/packages/applet/src/modules/components/index.vue
@@ -239,21 +239,30 @@ async function toggleApp(id: string) {
 }
 // #endregion
 
-function inspectComponentInspector() {
+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)
+    }
+
     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() {

From 9e0746c79b6be1965491b1b4da40a092e5ca53de Mon Sep 17 00:00:00 2001
From: Kevin Luo <kevin.luo@telus.com>
Date: Thu, 19 Dec 2024 21:55:14 -0500
Subject: [PATCH 4/5] call getUniqueComponentId for the inspectInstance

---
 .../src/core/component-highlighter/index.ts          | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/devtools-kit/src/core/component-highlighter/index.ts b/packages/devtools-kit/src/core/component-highlighter/index.ts
index 8b8a89c5b..4c027611f 100644
--- a/packages/devtools-kit/src/core/component-highlighter/index.ts
+++ b/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)
   }
 }
 

From efd964f14ed135666503a35e629689401c387cb2 Mon Sep 17 00:00:00 2001
From: Kevin Luo <kevin.luo@telus.com>
Date: Mon, 23 Dec 2024 23:41:36 -0500
Subject: [PATCH 5/5] add inspectingComponent option to toggleApp

---
 packages/applet/src/modules/components/index.vue | 6 +++---
 packages/core/src/rpc/global.ts                  | 4 ++--
 packages/devtools-kit/src/core/plugin/index.ts   | 8 ++++++--
 packages/devtools-kit/src/ctx/api.ts             | 4 ++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/applet/src/modules/components/index.vue b/packages/applet/src/modules/components/index.vue
index 5b6607b70..929245e52 100644
--- a/packages/applet/src/modules/components/index.vue
+++ b/packages/applet/src/modules/components/index.vue
@@ -232,8 +232,8 @@ watchEffect(() => {
   activeAppRecordId.value = devtoolsState.activeAppRecordId.value
 })
 
-async function toggleApp(id: string) {
-  await rpc.value.toggleApp(id)
+async function toggleApp(id: string, options: { inspectingComponent?: boolean } = {}) {
+  await rpc.value.toggleApp(id, options)
   activeComponentId.value = ''
   await getComponentsInspectorTree()
 }
@@ -248,7 +248,7 @@ async function inspectComponentInspector() {
 
     const appId = data.id.split(':')[0]
     if (activeAppRecordId.value !== data.appId) {
-      await toggleApp(appId)
+      await toggleApp(appId, { inspectingComponent: true })
     }
 
     activeComponentId.value = data.id
diff --git a/packages/core/src/rpc/global.ts b/packages/core/src/rpc/global.ts
index 5b39a36de..8fa6af68c 100644
--- a/packages/core/src/rpc/global.ts
+++ b/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)
diff --git a/packages/devtools-kit/src/core/plugin/index.ts b/packages/devtools-kit/src/core/plugin/index.ts
index a37428446..2677e91c5 100644
--- a/packages/devtools-kit/src/core/plugin/index.ts
+++ b/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)
 
diff --git a/packages/devtools-kit/src/ctx/api.ts b/packages/devtools-kit/src/ctx/api.ts
index 485d67d1d..2bdfdbe3d 100644
--- a/packages/devtools-kit/src/ctx/api.ts
+++ b/packages/devtools-kit/src/ctx/api.ts
@@ -102,7 +102,7 @@ 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) {
@@ -110,7 +110,7 @@ export function createDevToolsApi(hooks: Hookable<DevToolsContextHooks & DevTool
         setActiveAppRecord(appRecord)
         normalizeRouterInfo(appRecord, activeAppRecord)
         callInspectorUpdatedHook()
-        registerDevToolsPlugin(appRecord.app)
+        registerDevToolsPlugin(appRecord.app, options)
       }
     },
     // inspect dom