feat: reactive dock entries

antfu · antfu · commit 827a1700c3fd · 2025-11-11T14:07:37.000+09:00
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -65,6 +65,7 @@
     "nanoevents": "catalog:deps",
     "open": "catalog:deps",
     "pathe": "catalog:deps",
+    "perfect-debounce": "catalog:deps",
     "sirv": "catalog:deps",
     "ws": "catalog:deps"
   },
diff --git a/packages/core/playground/vite.config.ts b/packages/core/playground/vite.config.ts
@@ -84,6 +84,32 @@ export default defineConfig({
             title: 'Custom',
             icon: 'ph:newspaper-clipping-duotone',
           })
+
+          ctx.docks.register({
+            id: 'counter',
+            type: 'action',
+            icon: 'material-symbols:counter-1',
+            title: 'Counter',
+            // TODO: HMR
+            action: ctx.utils.createSimpleClientScript(() => {}),
+          })
+
+          let count = 1
+          // eslint-disable-next-line unimport/auto-insert
+          setInterval(() => {
+            count = (count + 1) % 5
+            ctx.docks.update({
+              id: 'counter',
+              type: 'action',
+              icon: `material-symbols:counter-${count}`,
+              title: `Counter ${count}`,
+              // TODO: HMR
+              action: ctx.utils.createSimpleClientScript(() => {
+                // eslint-disable-next-line no-alert
+                alert(`Counter ${count}`)
+              }),
+            })
+          }, 1000)
         },
       },
     },
diff --git a/packages/core/src/client/webcomponents/state/dock.ts b/packages/core/src/client/webcomponents/state/dock.ts
@@ -1,8 +1,8 @@
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { ClientRpcReturn, DockEntryState, DockEntryStateEvents, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 import { createNanoEvents } from 'nanoevents'
-import { computed, markRaw, reactive, ref, shallowRef, watch } from 'vue'
+import { computed, markRaw, reactive, ref, shallowRef, watch, watchEffect } from 'vue'
 
 export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
   return {
@@ -52,28 +52,56 @@ function createDockEntryState(
   return state
 }
 
+let _docksEntriesRef: ShallowRef<DevToolsDockEntry[]> | undefined
+export async function useDocksEntries(rpcReturn: ClientRpcReturn): Promise<Ref<DevToolsDockEntry[]>> {
+  if (_docksEntriesRef) {
+    return _docksEntriesRef
+  }
+  const dockEntries = _docksEntriesRef = shallowRef<DevToolsDockEntry[]>([])
+  async function updateDocksEntries() {
+    dockEntries.value = (await rpcReturn.rpc.$call('vite:core:list-dock-entries')).map(entry => Object.freeze(entry))
+    // eslint-disable-next-line no-console
+    console.log('[VITE DEVTOOLS] Docks Entries Updated', [...dockEntries.value])
+  }
+  rpcReturn.clientRpc.register({
+    name: 'vite:core:list-dock-entries:updated',
+    type: 'action',
+    handler: () => updateDocksEntries(),
+  })
+  await updateDocksEntries()
+  return dockEntries
+}
+
+let _docksContext: DocksContext | undefined
 export async function createDocksContext(
   clientType: 'embedded' | 'standalone',
   rpcReturn: ClientRpcReturn,
   panelStore?: Ref<DockPanelStorage>,
 ): Promise<DocksContext> {
+  if (_docksContext) {
+    return _docksContext
+  }
+
   const selected = ref<DevToolsDockEntry | null>(null)
-  const dockEntries = shallowRef((await rpcReturn.rpc.$call('vite:core:list-dock-entries')).map(entry => Object.freeze(entry)))
-  // eslint-disable-next-line no-console
-  console.log('[VITE DEVTOOLS] Docks Entries', [...dockEntries.value])
-  // TODO: get board case from rpc when entries updates
+  const dockEntries = await useDocksEntries(rpcReturn)
+
   const dockEntryStateMap: Map<string, DockEntryState> = reactive(new Map())
-  for (const entry of dockEntries.value) {
-    // TODO: handle update
-    dockEntryStateMap.set(
-      entry.id,
-      createDockEntryState(entry, selected),
-    )
-  }
+  watchEffect(() => {
+    for (const entry of dockEntries.value) {
+      if (dockEntryStateMap.has(entry.id)) {
+        dockEntryStateMap.get(entry.id)!.entryMeta = entry
+        continue
+      }
+      dockEntryStateMap.set(
+        entry.id,
+        createDockEntryState(entry, selected),
+      )
+    }
+  })
 
   panelStore ||= ref(DEFAULT_DOCK_PANEL_STORE())
 
-  return reactive({
+  _docksContext = reactive({
     panel: {
       store: panelStore,
       isDragging: false,
@@ -82,7 +110,7 @@ export async function createDocksContext(
     },
     docks: {
       selected,
-      entries: dockEntries.value,
+      entries: dockEntries,
       entryToStateMap: markRaw(dockEntryStateMap),
       getStateById: (id: string) => dockEntryStateMap.get(id),
       switchEntry: async (id: string | null) => {
@@ -102,4 +130,6 @@ export async function createDocksContext(
     clientRpc: rpcReturn.clientRpc,
     clientType,
   })
+
+  return _docksContext
 }
diff --git a/packages/core/src/node/host-docks.ts b/packages/core/src/node/host-docks.ts
@@ -1,28 +1,35 @@
 import type { DevToolsDockEntry, DevToolsDockHost as DevToolsDockHostType, DevToolsNodeContext } from '@vitejs/devtools-kit'
+import { debounce } from 'perfect-debounce'
 
 export class DevToolsDockHost implements DevToolsDockHostType {
   public readonly views: Map<string, DevToolsDockEntry> = new Map()
+  private _sendOnChange: (() => void)
 
   constructor(
     public readonly context: DevToolsNodeContext,
   ) {
+    this._sendOnChange = debounce(() => {
+      context.rpc.boardcast?.$callOptional('vite:core:list-dock-entries:updated')
+    }, 10)
   }
 
   values(): DevToolsDockEntry[] {
     return Array.from(this.views.values())
   }
 
-  register(view: DevToolsDockEntry): void {
-    if (this.views.has(view.id)) {
+  register(view: DevToolsDockEntry, force?: boolean): void {
+    if (this.views.has(view.id) && !force) {
       throw new Error(`Dock with id "${view.id}" is already registered`)
     }
     this.views.set(view.id, view)
+    this._sendOnChange()
   }
 
   update(view: DevToolsDockEntry): void {
     if (!this.views.has(view.id)) {
       throw new Error(`Dock with id "${view.id}" is not registered. Use register() to add new docks.`)
     }
     this.views.set(view.id, view)
+    this._sendOnChange()
   }
 }
diff --git a/packages/core/src/node/host-functions.ts b/packages/core/src/node/host-functions.ts
@@ -1,7 +1,10 @@
-import type { DevToolsNodeContext, DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+import type { DevToolsNodeContext, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+import type { BirpcGroup } from 'birpc'
 import { RpcFunctionsCollectorBase } from 'birpc-x'
 
 export class RpcFunctionsHost extends RpcFunctionsCollectorBase<DevToolsRpcServerFunctions, DevToolsNodeContext> {
+  boardcast: BirpcGroup<DevToolsRpcClientFunctions, DevToolsRpcServerFunctions>['broadcast'] = undefined!
+
   constructor(
     context: DevToolsNodeContext,
   ) {
diff --git a/packages/core/src/node/rpc/index.ts b/packages/core/src/node/rpc/index.ts
@@ -23,4 +23,8 @@ export type ServerFunctionsDump = {
 
 declare module '@vitejs/devtools-kit' {
   export interface DevToolsRpcServerFunctions extends ServerFunctions {}
+
+  export interface DevToolsRpcClientFunctions {
+    'vite:core:list-dock-entries:updated': () => Promise<void>
+  }
 }
diff --git a/packages/core/src/node/server.ts b/packages/core/src/node/server.ts
@@ -7,7 +7,7 @@ import { createWsServer } from './ws'
 export async function createDevToolsMiddleware(options: CreateWsServerOptions) {
   const app = createApp()
 
-  const { rpc, getMetadata } = await createWsServer(options)
+  const { rpc, getConnectionMeta: getMetadata } = await createWsServer(options)
 
   app.use('/.vdt-connection.json', eventHandler(async (event) => {
     event.node.res.setHeader('Content-Type', 'application/json')
diff --git a/packages/core/src/node/ws.ts b/packages/core/src/node/ws.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import type { ConnectionMeta, DevToolsNodeContext } from '@vitejs/devtools-kit'
+import type { ConnectionMeta, DevToolsNodeContext, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
 import type { WebSocket } from 'ws'
 import { createRpcServer } from '@vitejs/devtools-rpc'
 import { createWsRpcPreset } from '@vitejs/devtools-rpc/presets/ws/server'
@@ -32,7 +32,7 @@ export async function createWsServer(options: CreateWsServerOptions) {
     },
   })
 
-  const rpc = createRpcServer<any, any>(
+  const rpc = createRpcServer<DevToolsRpcClientFunctions, DevToolsRpcServerFunctions>(
     rpcHost.functions,
     {
       preset,
@@ -46,7 +46,9 @@ export async function createWsServer(options: CreateWsServerOptions) {
     },
   )
 
-  const getMetadata = async (): Promise<ConnectionMeta> => {
+  rpcHost.boardcast = rpc.broadcast
+
+  const getConnectionMeta = async (): Promise<ConnectionMeta> => {
     return {
       backend: 'websocket',
       websocket: port,
@@ -56,7 +58,7 @@ export async function createWsServer(options: CreateWsServerOptions) {
   return {
     port,
     rpc,
-    functions: rpcHost,
-    getMetadata,
+    rpcHost,
+    getConnectionMeta,
   }
 }
diff --git a/packages/kit/src/types/rpc.ts b/packages/kit/src/types/rpc.ts
@@ -1,5 +1,8 @@
+import type { BirpcGroup } from 'birpc'
 import type { RpcFunctionsCollectorBase } from 'birpc-x'
-import type { DevToolsRpcServerFunctions } from './rpc-augments'
+import type { DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from './rpc-augments'
 import type { DevToolsNodeContext } from './vite-plugin'
 
-export type RpcFunctionsHost = RpcFunctionsCollectorBase<DevToolsRpcServerFunctions, DevToolsNodeContext>
+export type RpcFunctionsHost = RpcFunctionsCollectorBase<DevToolsRpcServerFunctions, DevToolsNodeContext> & {
+  boardcast: BirpcGroup<DevToolsRpcClientFunctions, DevToolsRpcServerFunctions>['broadcast']
+}
diff --git a/packages/vite/src/app/state/data.ts b/packages/vite/src/app/state/data.ts
diff --git a/packages/vite/src/node/rpc/functions/get-payload.ts b/packages/vite/src/node/rpc/functions/get-payload.ts
diff --git a/packages/vite/src/node/rpc/index.ts b/packages/vite/src/node/rpc/index.ts
@@ -1,5 +1,4 @@
 import type { RpcDefinitionsFilter, RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
-import { getPayload } from './functions/get-payload'
 import { rolldownGetAssetDetails } from './functions/rolldown-get-asset-details'
 import { rolldownGetAssetsList } from './functions/rolldown-get-assets-list'
 import { rolldownGetChunkInfo } from './functions/rolldown-get-chunk-info'
@@ -17,7 +16,6 @@ import { rolldownListSessions } from './functions/rolldown-list-sessions'
 import '@vitejs/devtools-kit'
 
 export const rpcFunctions = [
-  getPayload,
   rolldownListSessions,
   rolldownGetRawEvents,
   rolldownGetSessionSummary,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -28,7 +28,7 @@ catalogs:
     ansis: ^4.2.0
     birpc: ^2.8.0
     # Unstable API, lock the version
-    birpc-x: 0.0.3
+    birpc-x: 0.0.5
     cac: ^6.7.14
     debug: ^4.4.3
     diff: ^8.0.2
@@ -42,6 +42,7 @@ catalogs:
     open: ^10.2.0
     p-limit: ^7.2.0
     pathe: ^2.0.3
+    perfect-debounce: ^2.0.0
     publint: ^0.3.15
     sirv: ^3.0.2
     split2: ^4.2.0

Original file line number	Diff line number	Diff line change
`@@ -1,28 +1,35 @@`
`1`	`1`	`import type { DevToolsDockEntry, DevToolsDockHost as DevToolsDockHostType, DevToolsNodeContext } from '@vitejs/devtools-kit'`
	`2`	`+import { debounce } from 'perfect-debounce'`
`2`	`3`
`3`	`4`	`export class DevToolsDockHost implements DevToolsDockHostType {`
`4`	`5`	`public readonly views: Map<string, DevToolsDockEntry> = new Map()`
	`6`	`+ private _sendOnChange: (() => void)`
`5`	`7`
`6`	`8`	`constructor(`
`7`	`9`	`public readonly context: DevToolsNodeContext,`
`8`	`10`	`) {`
	`11`	`+ this._sendOnChange = debounce(() => {`
	`12`	`+ context.rpc.boardcast?.$callOptional('vite:core:list-dock-entries:updated')`
	`13`	`+ }, 10)`
`9`	`14`	`}`
`10`	`15`
`11`	`16`	`values(): DevToolsDockEntry[] {`
`12`	`17`	`return Array.from(this.views.values())`
`13`	`18`	`}`
`14`	`19`
`15`		`- register(view: DevToolsDockEntry): void {`
`16`		`- if (this.views.has(view.id)) {`
	`20`	`+ register(view: DevToolsDockEntry, force?: boolean): void {`
	`21`	`+ if (this.views.has(view.id) && !force) {`
`17`	`22`	throw new Error(`Dock with id "${view.id}" is already registered`)
`18`	`23`	`}`
`19`	`24`	`this.views.set(view.id, view)`
	`25`	`+ this._sendOnChange()`
`20`	`26`	`}`
`21`	`27`
`22`	`28`	`update(view: DevToolsDockEntry): void {`
`23`	`29`	`if (!this.views.has(view.id)) {`
`24`	`30`	throw new Error(`Dock with id "${view.id}" is not registered. Use register() to add new docks.`)
`25`	`31`	`}`
`26`	`32`	`this.views.set(view.id, view)`
	`33`	`+ this._sendOnChange()`
`27`	`34`	`}`
`28`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23,4 +23,8 @@ export type ServerFunctionsDump = {`
`23`	`23`
`24`	`24`	`declare module '@vitejs/devtools-kit' {`
`25`	`25`	`export interface DevToolsRpcServerFunctions extends ServerFunctions {}`
	`26`	`+`
	`27`	`+ export interface DevToolsRpcClientFunctions {`
	`28`	`+ 'vite:core:list-dock-entries:updated': () => Promise<void>`
	`29`	`+ }`
`26`	`30`	`}`