wip:

Author: antfu

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

@@ -3,20 +3,29 @@ import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { onMounted, shallowRef } from 'vue'
 
 const stateRef = shallowRef<any>(undefined)
+const isTrustedRef = shallowRef<boolean | null>(null)
 
 onMounted(async () => {
   const client = await getDevToolsRpcClient()
+  isTrustedRef.value = client.isTrusted
   const state = await client.sharedState.get('counter')
 
-  stateRef.value = state.get()
-  state.on('updated', () => {
-    stateRef.value = state.get()
+  client.events.on('rpc:is-trusted:updated', (isTrusted) => {
+    isTrustedRef.value = isTrusted
+  })
+
+  stateRef.value = state.value()
+  state.on('updated', (newState) => {
+    console.log('updated', newState)
+    stateRef.value = newState
   })
 })
 </script>
 
 <template>
   <div>
-    <h1>DevTools {{ stateRef }}</h1>
+    <h1>DevTools </h1>
+    <div>{{ isTrustedRef }}</div>
+    <pre>{{ stateRef }}</pre>
   </div>
 </template>

packages/core/playground/vite.config.ts

@@ -142,7 +142,7 @@ export default defineConfig({
             counterState.mutate((current) => {
               current.count = (current.count + 1) % 5
             })
-            const count = counterState.get().count
+            const count = counterState.value().count
             ctx.docks.update({
               id: 'counter',
               type: 'action',

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

@@ -10,14 +10,16 @@ export function createRpcSharedStateServerHost(
   function registerSharedState<T extends object>(key: string, state: SharedState<T>) {
     const offs: (() => void)[] = []
 
-    offs.push(state.on('updated', (_fullState, patches, syncId) => {
-      if (patches) {
-        rpc.broadcast('vite:internal:rpc:client-state:patch', key, patches, syncId)
-      }
-      else {
-        rpc.broadcast('vite:internal:rpc:client-state:updated', key, syncId)
-      }
-    }))
+    offs.push(
+      state.on('updated', (_fullState, patches, syncId) => {
+        if (patches) {
+          rpc.broadcast('vite:internal:rpc:client-state:patch', key, patches, syncId)
+        }
+        else {
+          rpc.broadcast('vite:internal:rpc:client-state:updated', key, syncId)
+        }
+      }),
+    )
 
     return () => {
       for (const off of offs) {

packages/core/src/node/rpc/anonymous/auth.ts

@@ -25,7 +25,7 @@ export const anonymousAuth = defineRpcFunction({
         if (!session)
           throw new Error('Failed to retrieve the current RPC session')
 
-        if (session.meta.isTrusted || storage.get().trusted[query.authId]) {
+        if (session.meta.isTrusted || storage.value().trusted[query.authId]) {
           session.meta.clientAuthId = query.authId
           session.meta.isTrusted = true
           return {

packages/core/src/node/rpc/internal/state/get.ts

@@ -7,7 +7,8 @@ export const sharedStateGet = defineRpcFunction({
   setup: (context: DevToolsNodeContext) => {
     return {
       handler: async (key: string) => {
-        return await context.rpc.sharedState.get(key)
+        const state = await context.rpc.sharedState.get(key)
+        return state.value()
       },
     }
   },

packages/core/src/node/ws.ts

@@ -45,13 +45,13 @@ export async function createWsServer(options: CreateWsServerOptions) {
       if (isClientAuthDisabled) {
         meta.isTrusted = true
       }
-      else if (authId && contextInternal.storage.auth.get().trusted[authId]) {
+      else if (authId && contextInternal.storage.auth.value().trusted[authId]) {
         meta.isTrusted = true
         meta.clientAuthId = authId
       }
 
       wsClients.add(ws)
-      console.log(c.green`${MARK_CHECK} Websocket client [${meta.id}] connected`)
+      console.log(c.green`${MARK_CHECK} Websocket client [${meta.id}] connected [${meta.clientAuthId}] (${meta.isTrusted ? 'trusted' : 'untrusted'})`)
     },
     onDisconnected: (ws, meta) => {
       wsClients.delete(ws)

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

@@ -1,15 +1,18 @@
 import type { RpcSharedStateGetOptions, RpcSharedStateHost } from '../types'
-import type { SharedState } from '../utils/shared-state'
+import type { SharedState, SharedStatePatch } from '../utils/shared-state'
 import type { DevToolsRpcClient } from './rpc'
 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
@@ -18,6 +21,16 @@ export function createRpcSharedStateClientHost(rpc: DevToolsRpcClient): RpcShare
     },
   })
 
+  rpc.client.register({
+    name: 'vite:internal:rpc:client-state:patch',
+    type: 'event',
+    handler: async (key: string, patches: SharedStatePatch[], syncId: string) => {
+      const state = sharedState.get(key)
+      if (state)
+        state.patch(patches, syncId)
+    },
+  })
+
   function registerSharedState<T extends object>(key: string, state: SharedState<T>) {
     const offs: (() => void)[] = []
     offs.push(state.on('updated', (fullState, patches, syncId) => {
@@ -28,6 +41,7 @@ export function createRpcSharedStateClientHost(rpc: DevToolsRpcClient): RpcShare
         rpc.callEvent('vite:internal:rpc:server-state:set', key, fullState, syncId)
       }
     }))
+
     return () => {
       for (const off of offs) {
         off()