feat(core): use shared state for docks entries

antfu · antfu · commit 69892181ca1b · 2025-12-25T13:52:15.000+09:00
diff --git a/docs/kit/index.md b/docs/kit/index.md
@@ -396,30 +396,6 @@ export default function myPlugin(): Plugin {
 
 The `broadcast` method returns a promise that resolves to an array of results from all clients (some may be `undefined` if the client doesn't implement the function).
 
-**Example: Broadcasting dock updates**
-
-Here's a real-world example of how the built-in docks system broadcasts updates:
-
-```ts
-// When a dock entry is updated, broadcast to all clients
-docksHost.events.on('dock:entry:updated', () => {
-  rpcHost.broadcast('vite:internal:docks:updated')
-})
-```
-
-And on the client side:
-
-```ts
-rpc.client.register({
-  name: 'vite:internal:docks:updated' satisfies keyof DevToolsRpcClientFunctions,
-  type: 'action',
-  handler: async () => {
-    // Refresh the dock entries list
-    await updateDocksEntries()
-  },
-})
-```
-
 ### Shared State
 
 The DevTools Kit provides a built-in shared state system that enables you to share data between the server and client with automatic synchronization.
diff --git a/packages/core/src/client/webcomponents/state/docks.ts b/packages/core/src/client/webcomponents/state/docks.ts
@@ -1,5 +1,6 @@
-import type { DevToolsDockEntry, DevToolsRpcClientFunctions } from '@vitejs/devtools-kit'
+import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DevToolsRpcClient, DockEntryState, DockEntryStateEvents, DockPanelStorage } from '@vitejs/devtools-kit/client'
+import type { SharedState } from '@vitejs/devtools-kit/utils/shared-state'
 import type { Ref, ShallowRef } from 'vue'
 import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
 import { markRaw, reactive, shallowRef, watch } from 'vue'
@@ -64,31 +65,20 @@ export function createDockEntryState(
   return state
 }
 
+function sharedStateToRef<T>(sharedState: SharedState<T>): ShallowRef<T> {
+  const ref = shallowRef<T>(sharedState.value() as T)
+  sharedState.on('updated', (newState: T) => {
+    ref.value = newState
+  })
+  return ref
+}
+
 let _docksEntriesRef: ShallowRef<DevToolsDockEntry[]> | undefined
 export async function useDocksEntries(rpc: DevToolsRpcClient): Promise<Ref<DevToolsDockEntry[]>> {
   if (_docksEntriesRef) {
     return _docksEntriesRef
   }
-  const dockEntries = _docksEntriesRef = shallowRef<DevToolsDockEntry[]>([])
-  async function updateDocksEntries() {
-    if (!rpc.isTrusted) {
-      console.warn('[VITE DEVTOOLS] Untrusted client, skipping docks entries update')
-      return
-    }
-    dockEntries.value = (await rpc.call('vite:internal:docks:list'))
-      .map(entry => Object.freeze(entry))
-    // eslint-disable-next-line no-console
-    console.log('[VITE DEVTOOLS] Docks Entries Updated', [...dockEntries.value])
-  }
-  rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
-    if (isTrusted)
-      updateDocksEntries()
-  })
-  rpc.client.register({
-    name: 'vite:internal:docks:updated' satisfies keyof DevToolsRpcClientFunctions,
-    type: 'action',
-    handler: () => updateDocksEntries(),
-  })
-  await updateDocksEntries()
-  return dockEntries
+  const state = await rpc.sharedState.get('vite:internal:docks', { initialValue: [] })
+  _docksEntriesRef = sharedStateToRef(state)
+  return _docksEntriesRef
 }
diff --git a/packages/core/src/node/context.ts b/packages/core/src/node/context.ts
@@ -44,23 +44,19 @@ export async function createDevToolsContext(
     rpcHost.register(fn)
   }
 
+  const docksSharedState = await rpcHost.sharedState.get('vite:internal:docks', { initialValue: [] })
+
   // Register hosts side effects
   docksHost.events.on('dock:entry:updated', debounce(() => {
-    rpcHost.broadcast({
-      method: 'vite:internal:docks:updated',
-      args: [],
-    })
+    docksSharedState.mutate(() => context.docks.values())
   }, 10))
+
   terminalsHost.events.on('terminal:session:updated', debounce(() => {
     rpcHost.broadcast({
       method: 'vite:internal:terminals:updated',
       args: [],
     })
-    // New terminals might affect the visibility of the terminals dock entry, we trigger it here as well
-    rpcHost.broadcast({
-      method: 'vite:internal:docks:updated',
-      args: [],
-    })
+    docksSharedState.mutate(() => context.docks.values())
   }, 10))
   terminalsHost.events.on('terminal:session:stream-chunk', (data) => {
     rpcHost.broadcast({
diff --git a/packages/core/src/node/host-docks.ts b/packages/core/src/node/host-docks.ts
@@ -1,4 +1,4 @@
-import type { DevToolsDockHost as DevToolsDockHostType, DevToolsDockUserEntry, DevToolsNodeContext } from '@vitejs/devtools-kit'
+import type { DevToolsDockEntry, DevToolsDockHost as DevToolsDockHostType, DevToolsDockUserEntry, DevToolsNodeContext, DevToolsViewBuiltin } from '@vitejs/devtools-kit'
 import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
 
 export class DevToolsDockHost implements DevToolsDockHostType {
@@ -10,8 +10,24 @@ export class DevToolsDockHost implements DevToolsDockHostType {
   ) {
   }
 
-  values(): DevToolsDockUserEntry[] {
-    return Array.from(this.views.values())
+  values(): DevToolsDockEntry[] {
+    const context = this.context
+    const builtinDocksEntries: DevToolsViewBuiltin[] = [
+      {
+        type: '~builtin',
+        id: '~terminals',
+        title: 'Terminals',
+        icon: 'ph:terminal-duotone',
+        get isHidden() {
+          return context.terminals.sessions.size === 0
+        },
+      },
+    ]
+
+    return [
+      ...Array.from(this.views.values()),
+      ...builtinDocksEntries,
+    ]
   }
 
   register<T extends DevToolsDockUserEntry>(view: T, force?: boolean): {
diff --git a/packages/core/src/node/rpc-shared-state.ts b/packages/core/src/node/rpc-shared-state.ts
@@ -51,7 +51,7 @@ export function createRpcSharedStateServerHost(
       }
       debug('new-state', key)
       const state = createSharedState<T>({
-        initialState: options.initialValue,
+        initialValue: options.initialValue,
         enablePatches: false,
       })
       registerSharedState(key, state)
diff --git a/packages/core/src/node/rpc/index.ts b/packages/core/src/node/rpc/index.ts
@@ -1,7 +1,6 @@
-import type { DevToolsTerminalSessionStreamChunkEvent, RpcDefinitionsFilter, RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
+import type { DevToolsDockEntry, DevToolsTerminalSessionStreamChunkEvent, RpcDefinitionsFilter, RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
 import type { SharedStatePatch } from '@vitejs/devtools-kit/utils/shared-state'
 import { anonymousAuth } from './anonymous/auth'
-import { docksList } from './internal/docks-list'
 import { docksOnLaunch } from './internal/docks-on-launch'
 import { rpcServerList } from './internal/rpc-server-list'
 import { sharedStateGet } from './internal/state/get'
@@ -25,7 +24,6 @@ export const builtinAnonymousRpcDeclarations = [
 
 // @keep-sorted
 export const builtinInternalRpcDeclarations = [
-  docksList,
   docksOnLaunch,
   rpcServerList,
   sharedStateGet,
@@ -57,12 +55,15 @@ declare module '@vitejs/devtools-kit' {
 
   // @keep-sorted
   export interface DevToolsRpcClientFunctions {
-    'vite:internal:docks:updated': () => Promise<void>
-
     'vite:internal:rpc:client-state:patch': (key: string, patches: SharedStatePatch[], syncId: string) => Promise<void>
     'vite:internal:rpc:client-state:updated': (key: string, fullState: any, syncId: string) => Promise<void>
 
     'vite:internal:terminals:stream-chunk': (data: DevToolsTerminalSessionStreamChunkEvent) => Promise<void>
     'vite:internal:terminals:updated': () => Promise<void>
   }
+
+  // @keep-sorted
+  export interface DevToolsRpcSharedStates {
+    'vite:internal:docks': DevToolsDockEntry[]
+  }
 }
diff --git a/packages/core/src/node/rpc/internal/docks-list.ts b/packages/core/src/node/rpc/internal/docks-list.ts
diff --git a/packages/core/src/node/storage.ts b/packages/core/src/node/storage.ts
@@ -8,16 +8,16 @@ export interface CreateStorageOptions<T extends object> {
 }
 
 export function createStorage<T extends object>(options: CreateStorageOptions<T>) {
-  let initialState: T
+  let initialValue: T
   if (fs.existsSync(options.filepath)) {
-    initialState = JSON.parse(fs.readFileSync(options.filepath, 'utf-8')) as T
+    initialValue = JSON.parse(fs.readFileSync(options.filepath, 'utf-8')) as T
   }
   else {
-    initialState = options.initialValue
+    initialValue = options.initialValue
   }
 
   const state = createSharedState<T>({
-    initialState,
+    initialValue,
     enablePatches: false,
   })
 
diff --git a/packages/kit/src/client/rpc-shared-state.ts b/packages/kit/src/client/rpc-shared-state.ts
@@ -51,20 +51,27 @@ export function createRpcSharedStateClientHost(rpc: DevToolsRpcClient): RpcShare
       if (sharedState.has(key)) {
         return sharedState.get(key)!
       }
+      rpc.callEvent('vite:internal:rpc:server-state:subscribe', key)
       if (options?.initialValue !== undefined) {
         const state = createSharedState<T>({
-          initialState: options.initialValue,
+          initialValue: options.initialValue,
           enablePatches: false,
         })
         sharedState.set(key, state)
+        rpc.call('vite:internal:rpc:server-state:get', key)
+          .then((serverState) => {
+            state.mutate(() => serverState)
+          })
+          .catch((error) => {
+            console.error('Error getting server state', error)
+          })
         registerSharedState(key, state)
         return state
       }
       else {
-        rpc.callEvent('vite:internal:rpc:server-state:subscribe', key)
-        const initialState = await rpc.call('vite:internal:rpc:server-state:get', key) as T
+        const initialValue = await rpc.call('vite:internal:rpc:server-state:get', key) as T
         const state = createSharedState<T>({
-          initialState,
+          initialValue,
           enablePatches: false,
         })
         sharedState.set(key, state)
diff --git a/packages/kit/src/types/docks.ts b/packages/kit/src/types/docks.ts
@@ -10,7 +10,7 @@ export interface DevToolsDockHost {
     update: (patch: Partial<T>) => void
   }
   update: (entry: DevToolsDockUserEntry) => void
-  values: () => DevToolsDockUserEntry[]
+  values: () => DevToolsDockEntry[]
 }
 
 // TODO: refine categories more clearly
diff --git a/packages/kit/src/utils/shared-state.test.ts b/packages/kit/src/utils/shared-state.test.ts
diff --git a/packages/kit/src/utils/shared-state.ts b/packages/kit/src/utils/shared-state.ts

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ export function createRpcSharedStateServerHost(`
`51`	`51`	`}`
`52`	`52`	`debug('new-state', key)`
`53`	`53`	`const state = createSharedState<T>({`
`54`		`- initialState: options.initialValue,`
	`54`	`+ initialValue: options.initialValue,`
`55`	`55`	`enablePatches: false,`
`56`	`56`	`})`
`57`	`57`	`registerSharedState(key, state)`
Original file line number	Diff line number	Diff line change
`@@ -8,16 +8,16 @@ export interface CreateStorageOptions<T extends object> {`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`export function createStorage<T extends object>(options: CreateStorageOptions<T>) {`
`11`		`- let initialState: T`
	`11`	`+ let initialValue: T`
`12`	`12`	`if (fs.existsSync(options.filepath)) {`
`13`		`- initialState = JSON.parse(fs.readFileSync(options.filepath, 'utf-8')) as T`
	`13`	`+ initialValue = JSON.parse(fs.readFileSync(options.filepath, 'utf-8')) as T`
`14`	`14`	`}`
`15`	`15`	`else {`
`16`		`- initialState = options.initialValue`
	`16`	`+ initialValue = options.initialValue`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`const state = createSharedState<T>({`
`20`		`- initialState,`
	`20`	`+ initialValue,`
`21`	`21`	`enablePatches: false,`
`22`	`22`	`})`
`23`	`23`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export interface DevToolsDockHost {`
`10`	`10`	`update: (patch: Partial<T>) => void`
`11`	`11`	`}`
`12`	`12`	`update: (entry: DevToolsDockUserEntry) => void`
`13`		`- values: () => DevToolsDockUserEntry[]`
	`13`	`+ values: () => DevToolsDockEntry[]`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`// TODO: refine categories more clearly`