From 611af0453a2806327961bd09923e4798190d182c Mon Sep 17 00:00:00 2001 From: Arlo Date: Sat, 16 Mar 2024 12:30:31 +0800 Subject: [PATCH] feat(kit): high-performance mode (#280) --- packages/core/src/bridge-events/devtools-actions.ts | 8 ++++++-- .../devtools-kit/src/core/high-perf-mode/index.ts | 5 +++++ packages/devtools-kit/src/index.ts | 2 ++ packages/devtools-kit/src/plugins/component.ts | 11 ++++++++++- packages/devtools-kit/src/state/state.ts | 1 + packages/devtools-kit/src/types/state.ts | 1 + packages/vite/src/overlay.js | 1 + 7 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 packages/devtools-kit/src/core/high-perf-mode/index.ts diff --git a/packages/core/src/bridge-events/devtools-actions.ts b/packages/core/src/bridge-events/devtools-actions.ts index 42ea7572..bf0ed0ee 100644 --- 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('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 new file mode 100644 index 00000000..335a0091 --- /dev/null +++ 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 index 1640f905..0af10d18 100644 --- 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 index 62edcc9e..6f7f4057 100644 --- 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 index 135ffa96..c3265096 100644 --- 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 index 9f5ea35f..f9af3439 100644 --- 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 index b3132425..bb542213 100644 --- 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)