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

vuejs · Mar 16, 2024 · 611af04 · 611af04
1 parent 35918fe
commit 611af04
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 3 deletions.
diff --git a/packages/core/src/bridge-events/devtools-actions.ts b/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)
+})
diff --git a/packages/devtools-kit/src/core/high-perf-mode/index.ts b/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
+}
diff --git a/packages/devtools-kit/src/index.ts b/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,
 }
diff --git a/packages/devtools-kit/src/plugins/component.ts b/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
 

diff --git a/packages/devtools-kit/src/state/state.ts b/packages/devtools-kit/src/state/state.ts
@@ -19,6 +19,7 @@ function initStateFactory() {
  commands: [],
  vitePluginDetected: false,
  activeAppRecordId: null,
+ highPerfModeEnabled: false,
  }
 }
 

diff --git a/packages/devtools-kit/src/types/state.ts b/packages/devtools-kit/src/types/state.ts
@@ -13,4 +13,5 @@ export interface DevToolsState {
  tabs: CustomTab[]
  commands: CustomCommand[]
  activeAppRecordId: string | null
+ highPerfModeEnabled: boolean
 }
diff --git a/packages/vite/src/overlay.js b/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)