add inspectingComponent option to toggleApp

vuejs · Dec 24, 2024 · efd964f · efd964f
1 parent 9e0746c
commit efd964f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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