feat(kit): high-performance mode (#280)

Author: webfansplz

packages/core/src/bridge-events/devtools-actions.ts

@@ -1,5 +1,5 @@
 import type { InspectorStateEditorPayload } from '@vue/devtools-kit'
-import { stringify } from '@vue/devtools-kit'
+import { toggleHighPerfMode as _toggleHighPerfMode, stringify } from '@vue/devtools-kit'
 import { defineDevToolsAction } from '../bridge'
 
 export const checkVueInspectorDetected = defineDevToolsAction<boolean>('devtools:check-vue-inspector-detected', async (devtools) => {
@@ -54,7 +54,7 @@ export const updateInspectorTreeId = defineDevToolsAction('devtools:update-inspe
   devtools.context.activeInspectorTreeId = payload
 })
 
-export const unhighlightElement = defineDevToolsAction('devtools:unhighlight-element', (devtools, payload) => {
+export const unhighlightElement = defineDevToolsAction('devtools:unhighlight-element', (devtools) => {
   return devtools.api.unhighlightElement()
 })
 
@@ -98,3 +98,7 @@ export const getDevToolsState = defineDevToolsAction('devtools:get-state', (devt
     activeAppRecordId: devtools.state.activeAppRecordId,
   }
 })
+
+export const toggleHighPerfMode = defineDevToolsAction('devtools:toggle-high-perf-mode', (_, payload) => {
+  _toggleHighPerfMode(payload)
+})

packages/devtools-kit/src/core/high-perf-mode/index.ts

@@ -0,0 +1,5 @@
+import { devtoolsState } from '../../state'
+
+export function toggleHighPerfMode(state?: boolean) {
+  devtoolsState.highPerfModeEnabled = state ?? !devtoolsState.highPerfModeEnabled
+}

packages/devtools-kit/src/index.ts

@@ -5,6 +5,7 @@ import { setupDevToolsPlugin } from './api'
 import { addCustomTab } from './core/custom-tab'
 import { addCustomCommand, removeCustomCommand } from './core/custom-command'
 import { toggleComponentInspectorEnabled } from './core/component-inspector'
+import { toggleHighPerfMode } from './core/high-perf-mode'
 
 export type * from './core/custom-tab'
 export type * from './core/custom-command'
@@ -48,4 +49,5 @@ export {
   setupDevToolsPlugin,
   setDevToolsEnv,
   toggleComponentInspectorEnabled,
+  toggleHighPerfMode,
 }

packages/devtools-kit/src/plugins/component.ts

@@ -1,7 +1,7 @@
 import { debounce } from 'perfect-debounce'
 import { VueAppInstance } from '../types'
 import { DevToolsEvents, apiHooks, setupDevToolsPlugin } from '../api'
-import { devtoolsContext } from '../state'
+import { devtoolsContext, devtoolsState } from '../state'
 import { hook } from '../hook'
 import { getAppRecord, getComponentId, getComponentInstance } from '../core/component/utils'
 import { getComponentBoundingRect } from '../core/component/state/bounding-rect'
@@ -96,6 +96,9 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
     }, 120)
 
     const componentAddedCleanup = hook.on.componentAdded(async (app, uid, parentUid, component) => {
+      if (devtoolsState.highPerfModeEnabled)
+        return
+
       if (app?._instance?.type?.devtools?.hide)
         return
 
@@ -124,6 +127,9 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
     })
 
     const componentUpdatedCleanup = hook.on.componentUpdated(async (app, uid, parentUid, component) => {
+      if (devtoolsState.highPerfModeEnabled)
+        return
+
       if (app?._instance?.type?.devtools?.hide)
         return
 
@@ -152,6 +158,9 @@ export function registerComponentDevToolsPlugin(app: VueAppInstance) {
       debounceSendInspectorState()
     })
     const componentRemovedCleanup = hook.on.componentRemoved(async (app, uid, parentUid, component) => {
+      if (devtoolsState.highPerfModeEnabled)
+        return
+
       if (app?._instance?.type?.devtools?.hide)
         return
 

packages/devtools-kit/src/state/state.ts

@@ -19,6 +19,7 @@ function initStateFactory() {
     commands: [],
     vitePluginDetected: false,
     activeAppRecordId: null,
+    highPerfModeEnabled: false,
   }
 }
 

packages/devtools-kit/src/types/state.ts

@@ -13,4 +13,5 @@ export interface DevToolsState {
   tabs: CustomTab[]
   commands: CustomCommand[]
   activeAppRecordId: string | null
+  highPerfModeEnabled: boolean
 }

packages/vite/src/overlay.js

@@ -10,6 +10,7 @@ const head = document.getElementsByTagName('head')[0]
 setDevToolsEnv({
   vitePluginDetected: true,
 })
+
 const devtoolsClientUrl = `${vueDevToolsOptions.clientHost || ''}${vueDevToolsOptions.base || '/'}__devtools__/`
 setDevToolsClientUrl(devtoolsClientUrl)