feat: make it working

Author: antfu

packages/core/playground/src/pages/devtools.vue

@@ -5,18 +5,26 @@ import { onMounted, shallowRef } from 'vue'
 const stateRef = shallowRef<any>(undefined)
 const isTrustedRef = shallowRef<boolean | null>(null)
 
+let increment = () => {}
+
 onMounted(async () => {
   const client = await getDevToolsRpcClient()
-  isTrustedRef.value = client.isTrusted
-  const state = await client.sharedState.get('counter')
 
+  isTrustedRef.value = client.isTrusted
   client.events.on('rpc:is-trusted:updated', (isTrusted) => {
     isTrustedRef.value = isTrusted
   })
 
+  const state = await client.sharedState.get<{ count: number }>('counter')
+
+  increment = () => {
+    state.mutate((state) => {
+      state.count++
+    })
+  }
+
   stateRef.value = state.value()
   state.on('updated', (newState) => {
-    console.log('updated', newState)
     stateRef.value = newState
   })
 })
@@ -27,5 +35,8 @@ onMounted(async () => {
     <h1>DevTools </h1>
     <div>{{ isTrustedRef }}</div>
     <pre>{{ stateRef }}</pre>
+    <button @click="increment">
+      Increment
+    </button>
   </div>
 </template>

packages/core/playground/vite.config.ts

@@ -4,6 +4,7 @@ import UnoCSS from 'unocss/vite'
 import VueRouter from 'unplugin-vue-router/vite'
 import { defineConfig } from 'vite'
 import Tracer from 'vite-plugin-vue-tracer'
+import { alias } from '../../../alias'
 // eslint-disable-next-line ts/ban-ts-comment
 // @ts-ignore ignore the type error
 import { DevToolsViteUI } from '../../vite/src/node'
@@ -16,6 +17,9 @@ export default defineConfig({
     'import.meta.env.VITE_DEVTOOLS_LOCAL_DEV': JSON.stringify(process.env.VITE_DEVTOOLS_LOCAL_DEV),
   },
   base: './',
+  resolve: {
+    alias,
+  },
   plugins: [
     VueRouter(),
     Vue(),

packages/core/src/node/context.ts

@@ -46,15 +46,27 @@ export async function createDevToolsContext(
 
   // Register hosts side effects
   docksHost.events.on('dock:entry:updated', debounce(() => {
-    rpcHost.broadcast('vite:internal:docks:updated')
+    rpcHost.broadcast({
+      method: 'vite:internal:docks:updated',
+      args: [],
+    })
   }, 10))
   terminalsHost.events.on('terminal:session:updated', debounce(() => {
-    rpcHost.broadcast('vite:internal:terminals:updated')
+    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('vite:internal:docks:updated')
+    rpcHost.broadcast({
+      method: 'vite:internal:docks:updated',
+      args: [],
+    })
   }, 10))
   terminalsHost.events.on('terminal:session:stream-chunk', (data) => {
-    rpcHost.broadcast('vite:internal:terminals:stream-chunk', data)
+    rpcHost.broadcast({
+      method: 'vite:internal:terminals:stream-chunk',
+      args: [data],
+    })
   })
 
   // Register plugins

packages/core/src/node/host-functions.ts

@@ -1,4 +1,4 @@
-import type { DevToolsNodeContext, DevToolsNodeRpcSession, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, RpcFunctionsHost as RpcFunctionsHostType, RpcSharedStateHost } from '@vitejs/devtools-kit'
+import type { DevToolsNodeContext, DevToolsNodeRpcSession, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, RpcBroadcastOptions, RpcFunctionsHost as RpcFunctionsHostType, RpcSharedStateHost } from '@vitejs/devtools-kit'
 import type { BirpcGroup } from 'birpc'
 import type { AsyncLocalStorage } from 'node:async_hooks'
 import { RpcFunctionsCollectorBase } from 'birpc-x'
@@ -19,22 +19,26 @@ export class RpcFunctionsHost extends RpcFunctionsCollectorBase<DevToolsRpcServe
 
   sharedState: RpcSharedStateHost
 
-  broadcast<
+  async broadcast<
     T extends keyof DevToolsRpcClientFunctions,
     Args extends Parameters<DevToolsRpcClientFunctions[T]>,
   >(
-    name: T,
-    ...args: Args
-  ): Promise<(Awaited<ReturnType<DevToolsRpcClientFunctions[T]>> | undefined)[]> {
+    options: RpcBroadcastOptions<T, Args>,
+  ): Promise<void> {
     if (!this._rpcGroup)
       throw new Error('RpcFunctionsHost] RpcGroup is not set, it likely to be an internal bug of Vite DevTools')
-    // @ts-expect-error - BirpcGroup.broadcast.$callOptional is not typed correctly
-    return this._rpcGroup.broadcast.$callRaw<T>({
-      name,
-      args,
-      optional: true,
-      event: true,
-    })
+
+    await Promise.all(
+      this._rpcGroup.clients.map((client) => {
+        if (options.filter?.(client) === false)
+          return undefined
+        return client.$callRaw({
+          optional: true,
+          event: true,
+          ...options,
+        })
+      }),
+    )
   }
 
   getCurrentRpcSession(): DevToolsNodeRpcSession | undefined {

packages/core/src/node/rpc-shared-state.ts

@@ -13,10 +13,16 @@ export function createRpcSharedStateServerHost(
     offs.push(
       state.on('updated', (_fullState, patches, syncId) => {
         if (patches) {
-          rpc.broadcast('vite:internal:rpc:client-state:patch', key, patches, syncId)
+          rpc.broadcast({
+            method: 'vite:internal:rpc:client-state:patch',
+            args: [key, patches, syncId],
+          })
         }
         else {
-          rpc.broadcast('vite:internal:rpc:client-state:updated', key, syncId)
+          rpc.broadcast({
+            method: 'vite:internal:rpc:client-state:updated',
+            args: [key, syncId],
+          })
         }
       }),
     )

packages/core/src/node/ws.ts

@@ -8,7 +8,7 @@ import { createRpcServer } from '@vitejs/devtools-rpc'
 import { createWsRpcPreset } from '@vitejs/devtools-rpc/presets/ws/server'
 import c from 'ansis'
 import { getPort } from 'get-port-please'
-import { MARK_CHECK } from './constants'
+import { MARK_INFO } from './constants'
 import { getInternalContext } from './context-internal'
 
 export interface CreateWsServerOptions {
@@ -51,11 +51,12 @@ export async function createWsServer(options: CreateWsServerOptions) {
       }
 
       wsClients.add(ws)
-      console.log(c.green`${MARK_CHECK} Websocket client [${meta.id}] connected [${meta.clientAuthId}] (${meta.isTrusted ? 'trusted' : 'untrusted'})`)
+      const color = meta.isTrusted ? c.green : c.yellow
+      console.log(color`${MARK_INFO} Websocket client connected. [${meta.id}] [${meta.clientAuthId}] (${meta.isTrusted ? 'trusted' : 'untrusted'})`)
     },
     onDisconnected: (ws, meta) => {
       wsClients.delete(ws)
-      console.log(c.red`${MARK_CHECK} Websocket client [${meta.id}] disconnected`)
+      console.log(c.red`${MARK_INFO} Websocket client disconnected. [${meta.id}]`)
     },
   })
 

packages/kit/src/client/rpc-shared-state.ts

@@ -6,13 +6,10 @@ import { createSharedState } from '../utils/shared-state'
 export function createRpcSharedStateClientHost(rpc: DevToolsRpcClient): RpcSharedStateHost {
   const sharedState = new Map<string, SharedState<any>>()
 
-  console.log('createRpcSharedStateClientHost', { rpc })
-
   rpc.client.register({
     name: 'vite:internal:rpc:client-state:updated',
     type: 'event',
     handler: async (key: string, syncId: string) => {
-      console.log('vite:internal:rpc:client-state:updated', { key, syncId })
       const state = sharedState.get(key)
       if (!state || state.syncIds.has(syncId))
         return

packages/kit/src/types/rpc.ts

@@ -12,6 +12,14 @@ export interface DevToolsNodeRpcSession {
   rpc: BirpcReturn<DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, false>
 }
 
+export interface RpcBroadcastOptions<METHOD, Args extends any[]> {
+  method: METHOD
+  args: Args
+  optional?: boolean
+  event?: boolean
+  filter?: (client: BirpcReturn<DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, false>) => boolean | void
+}
+
 export type RpcFunctionsHost = RpcFunctionsCollectorBase<DevToolsRpcServerFunctions, DevToolsNodeContext> & {
   /**
    * Broadcast a message to all connected clients
@@ -20,9 +28,8 @@ export type RpcFunctionsHost = RpcFunctionsCollectorBase<DevToolsRpcServerFuncti
     T extends keyof DevToolsRpcClientFunctions,
     Args extends Parameters<DevToolsRpcClientFunctions[T]>,
   >(
-    name: T,
-    ...args: Args
-  ) => Promise<(Awaited<ReturnType<DevToolsRpcClientFunctions[T]>> | undefined)[]>
+    options: RpcBroadcastOptions<T, Args>,
+  ) => Promise<void>
 
   /**
    * Get the current RPC client