feat: introducing onDevToolsClientConnected hook

vuejs · Dec 26, 2023 · d2d6f7a · d2d6f7a
1 parent 392de9f
commit d2d6f7a
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 5 deletions.
diff --git a/packages/devtools-api/src/index.ts b/packages/devtools-api/src/index.ts
@@ -1,5 +1,6 @@
 export {
   onDevToolsConnected,
+  onDevToolsClientConnected,
   setupDevToolsPlugin,
   addCustomTab,
   addCustomCommand,

diff --git a/packages/devtools-kit/src/core/general/index.ts b/packages/devtools-kit/src/core/general/index.ts
@@ -77,7 +77,7 @@ export function onDevToolsClientConnected(fn: () => void) {
     }
 
     apiHooks.hook(DevToolsEvents.DEVTOOLS_STATE_UPDATED, (state) => {
-      if (state.connected && devtoolsState.clientConnected) {
+      if (state.connected && state.clientConnected) {
         fn()
         resolve()
       }

diff --git a/packages/devtools-kit/src/core/general/state.ts b/packages/devtools-kit/src/core/general/state.ts
@@ -1,5 +1,6 @@
-import type { AppRecord } from '@vue-devtools-next/schema'
+import type { AppRecord, DevToolsState } from '@vue-devtools-next/schema'
 import { deepClone, target as global } from '@vue-devtools-next/shared'
+import { debounce } from 'perfect-debounce'
 import type { DevToolsPluginApi } from '../../api'
 import { DevToolsEvents, apiHooks } from '../../api'
 import type { Router, RouterInfo } from '../router'
@@ -33,6 +34,10 @@ global[StateKey] ??= {
 
 global[ContextKey] ??= deepClone(DefaultContext)
 
+const callStateUpdatedHook = debounce((state: DevToolsState, oldState: DevToolsState) => {
+  apiHooks.callHook(DevToolsEvents.DEVTOOLS_STATE_UPDATED, state, oldState)
+}, 80)
+
 export const devtoolsState = new Proxy(global[StateKey], {
   get(target, property) {
     return global[StateKey][property]
@@ -51,7 +56,7 @@ export const devtoolsState = new Proxy(global[StateKey], {
       global[ContextKey].routerInfo = devtoolsRouterInfo
     }
 
-    apiHooks.callHook(DevToolsEvents.DEVTOOLS_STATE_UPDATED, global[StateKey], oldState)
+    callStateUpdatedHook(global[StateKey], oldState)
     return true
   },
   deleteProperty(target, property) {

diff --git a/packages/devtools-kit/src/index.ts b/packages/devtools-kit/src/index.ts
@@ -1,4 +1,4 @@
-import { devtoolsContext, devtoolsState, hook, initDevTools, onDevToolsConnected } from './core/general'
+import { devtoolsContext, devtoolsState, hook, initDevTools, onDevToolsClientConnected, onDevToolsConnected } from './core/general'
 import { addCustomTab } from './core/custom-tab'
 import { addCustomCommand, removeCustomCommand } from './core/custom-command'
 import { setupDevToolsPlugin } from './api/plugin'
@@ -25,6 +25,7 @@ export const devtools = {
 }
 
 export {
+  onDevToolsClientConnected,
   onDevToolsConnected,
   addCustomTab,
   addCustomCommand,

diff --git a/packages/devtools/src/index.ts b/packages/devtools/src/index.ts
@@ -1,4 +1,4 @@
-import { devtools as _devtools, addCustomTab, onDevToolsConnected } from '@vue-devtools-next/kit'
+import { devtools as _devtools, addCustomCommand, addCustomTab, onDevToolsClientConnected, onDevToolsConnected, removeCustomCommand } from '@vue-devtools-next/kit'
 import { connect } from '@vue-devtools-next/electron'
 
 export type * from '@vue-devtools-next/kit'
@@ -11,5 +11,8 @@ const devtools = {
 export {
   devtools,
   onDevToolsConnected,
+  onDevToolsClientConnected,
   addCustomTab,
+  addCustomCommand,
+  removeCustomCommand,
 }
diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
@@ -97,6 +97,10 @@ app.use(pinia)
 
 app.mount('#app')
 
+// onDevToolsClientConnected(() => {
+//   console.log('devtools client connected')
+// })
+
 // app2.use(router2)
 // app2.use(pinia2)
 // app2.mount('#app2')