feat(core): sharedState subscribe system

antfu · antfu · commit c6df7aafbf83 · 2025-12-25T13:51:52.000+09:00
diff --git a/alias.ts b/alias.ts
@@ -8,6 +8,7 @@ const r = (path: string) => fileURLToPath(new URL(`./packages/${path}`, import.m
 export const alias = {
   '@vitejs/devtools-rpc/presets/ws/server': r('rpc/src/presets/ws/server.ts'),
   '@vitejs/devtools-rpc/presets/ws/client': r('rpc/src/presets/ws/client.ts'),
+  '@vitejs/devtools-rpc/presets': r('rpc/src/presets/index.ts'),
   '@vitejs/devtools-rpc': r('rpc/src'),
   '@vitejs/devtools-kit/client': r('kit/src/client/index.ts'),
   '@vitejs/devtools-kit/utils/events': r('kit/src/utils/events.ts'),
diff --git a/packages/core/src/node/rpc-shared-state.ts b/packages/core/src/node/rpc-shared-state.ts
@@ -3,7 +3,7 @@ import type { SharedState } from '@vitejs/devtools-kit/utils/shared-state'
 import { createSharedState } from '@vitejs/devtools-kit/utils/shared-state'
 import { createDebug } from 'obug'
 
-const debug = createDebug('vite:devtools:rpc:shared-state')
+const debug = createDebug('vite:devtools:rpc:state:changed')
 
 export function createRpcSharedStateServerHost(
   rpc: RpcFunctionsHost,
@@ -14,21 +14,21 @@ export function createRpcSharedStateServerHost(
     const offs: (() => void)[] = []
 
     offs.push(
-      state.on('updated', (_fullState, patches, syncId) => {
+      state.on('updated', (fullState, patches, syncId) => {
         if (patches) {
           debug('patch', { key, syncId })
           rpc.broadcast({
             method: 'vite:internal:rpc:client-state:patch',
             args: [key, patches, syncId],
-            // TODO: filter: broadcast to clients only subscribed to its
+            filter: client => client.$meta.subscribedStates.has(key),
           })
         }
         else {
           debug('updated', { key, syncId })
           rpc.broadcast({
             method: 'vite:internal:rpc:client-state:updated',
-            args: [key, syncId],
-            // TODO: filter: broadcast to clients only subscribed to its
+            args: [key, fullState, syncId],
+            filter: client => client.$meta.subscribedStates.has(key),
           })
         }
       }),
diff --git a/packages/core/src/node/rpc/index.ts b/packages/core/src/node/rpc/index.ts
@@ -7,6 +7,7 @@ import { rpcServerList } from './internal/rpc-server-list'
 import { sharedStateGet } from './internal/state/get'
 import { sharedStatePatch } from './internal/state/patch'
 import { sharedStateSet } from './internal/state/set'
+import { sharedStateSubscribe } from './internal/state/subscribe'
 import { terminalsList } from './internal/terminals-list'
 import { terminalsRead } from './internal/terminals-read'
 import { openInEditor } from './public/open-in-editor'
@@ -30,6 +31,7 @@ export const builtinInternalRpcDeclarations = [
   sharedStateGet,
   sharedStatePatch,
   sharedStateSet,
+  sharedStateSubscribe,
   terminalsList,
   terminalsRead,
 ] as const
@@ -58,7 +60,7 @@ declare module '@vitejs/devtools-kit' {
     '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, 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>
diff --git a/packages/core/src/node/rpc/internal/state/subscribe.ts b/packages/core/src/node/rpc/internal/state/subscribe.ts
@@ -0,0 +1,21 @@
+import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { createDebug } from 'obug'
+
+const debug = createDebug('vite:devtools:rpc:state:subscribe')
+
+export const sharedStateSubscribe = defineRpcFunction({
+  name: 'vite:internal:rpc:server-state:subscribe',
+  type: 'event',
+  setup: (context: DevToolsNodeContext) => {
+    return {
+      handler: async (key: string): Promise<void> => {
+        const session = context.rpc.getCurrentRpcSession()
+        if (!session)
+          return
+        debug('subscribe', { key, session: session.meta.id })
+        session.meta.subscribedStates.add(key)
+      },
+    }
+  },
+})
diff --git a/packages/kit/src/client/rpc-shared-state.ts b/packages/kit/src/client/rpc-shared-state.ts
@@ -9,22 +9,22 @@ export function createRpcSharedStateClientHost(rpc: DevToolsRpcClient): RpcShare
   rpc.client.register({
     name: 'vite:internal:rpc:client-state:updated',
     type: 'event',
-    handler: async (key: string, syncId: string) => {
+    handler: (key: string, fullState: any, syncId: string) => {
       const state = sharedState.get(key)
       if (!state || state.syncIds.has(syncId))
         return
-      const newState = await rpc.call('vite:internal:rpc:server-state:get', key)
-      state.mutate(() => newState, syncId)
+      state.mutate(() => fullState, syncId)
     },
   })
 
   rpc.client.register({
     name: 'vite:internal:rpc:client-state:patch',
     type: 'event',
-    handler: async (key: string, patches: SharedStatePatch[], syncId: string) => {
+    handler: (key: string, patches: SharedStatePatch[], syncId: string) => {
       const state = sharedState.get(key)
-      if (state)
-        state.patch(patches, syncId)
+      if (!state || state.syncIds.has(syncId))
+        return
+      state.patch(patches, syncId)
     },
   })
 
@@ -61,6 +61,7 @@ export function createRpcSharedStateClientHost(rpc: DevToolsRpcClient): RpcShare
         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 state = createSharedState<T>({
           initialState,
diff --git a/packages/rpc/src/presets/ws/server.ts b/packages/rpc/src/presets/ws/server.ts
@@ -11,6 +11,7 @@ export interface DevToolsNodeRpcSessionMeta {
   ws?: WebSocket
   clientAuthId?: string
   isTrusted?: boolean
+  subscribedStates: Set<string>
 }
 
 export interface WebSocketRpcServerOptions {
@@ -59,6 +60,7 @@ export const createWsRpcPreset: RpcServerPreset<
       const meta: DevToolsNodeRpcSessionMeta = {
         id: id++,
         ws,
+        subscribedStates: new Set(),
       }
 
       const channel: ChannelOptions = {
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -15,6 +15,9 @@
       "@vitejs/devtools-rpc/presets/ws/client": [
         "./packages/rpc/src/presets/ws/client.ts"
       ],
+      "@vitejs/devtools-rpc/presets": [
+        "./packages/rpc/src/presets/index.ts"
+      ],
       "@vitejs/devtools-rpc": [
         "./packages/rpc/src"
       ],

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ export interface DevToolsNodeRpcSessionMeta {`
`11`	`11`	`ws?: WebSocket`
`12`	`12`	`clientAuthId?: string`
`13`	`13`	`isTrusted?: boolean`
	`14`	`+ subscribedStates: Set<string>`
`14`	`15`	`}`
`15`	`16`
`16`	`17`	`export interface WebSocketRpcServerOptions {`
`@@ -59,6 +60,7 @@ export const createWsRpcPreset: RpcServerPreset<`
`59`	`60`	`const meta: DevToolsNodeRpcSessionMeta = {`
`60`	`61`	`id: id++,`
`61`	`62`	`ws,`
	`63`	`+ subscribedStates: new Set(),`
`62`	`64`	`}`
`63`	`65`
`64`	`66`	`const channel: ChannelOptions = {`