feat!: restructure client rpc object, remove clientRpc

antfu · antfu · commit c415cfc198ec · 2025-12-10T13:35:10.000+09:00
diff --git a/packages/core/src/client/inject/index.ts b/packages/core/src/client/inject/index.ts
@@ -11,14 +11,6 @@ export async function init(): Promise<void> {
   console.log('[VITE DEVTOOLS] Client injected')
 
   const rpcReturn = await getDevToolsRpcClient()
-  const { rpc } = rpcReturn
-
-  // eslint-disable-next-line no-console
-  console.log('[VITE DEVTOOLS] RPC', rpc)
-
-  const rpcFunctions = await rpc.$call('vite:internal:rpc:server:list')
-  // eslint-disable-next-line no-console
-  console.log('[VITE DEVTOOLS] RPC Functions', rpcFunctions)
 
   const state = useLocalStorage<DockPanelStorage>(
     'vite-devtools-dock-state',
diff --git a/packages/core/src/client/standalone/App.vue b/packages/core/src/client/standalone/App.vue
@@ -8,8 +8,7 @@ import ViewEntry from '../webcomponents/components/ViewEntry.vue'
 import { createDocksContext } from '../webcomponents/state/context'
 import { PersistedDomViewsManager } from '../webcomponents/utils/PersistedDomViewsManager'
 
-const rpcReturn = await getDevToolsRpcClient()
-const { rpc } = rpcReturn
+const rpc = await getDevToolsRpcClient()
 
 // eslint-disable-next-line no-console
 console.log('[VITE DEVTOOLS] RPC', rpc)
@@ -19,7 +18,7 @@ const persistedDoms = markRaw(new PersistedDomViewsManager(viewsContainer))
 
 const context: DocksContext = await createDocksContext(
   'standalone',
-  rpcReturn,
+  rpc,
 )
 
 context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
diff --git a/packages/core/src/client/webcomponents/.generated/css.ts b/packages/core/src/client/webcomponents/.generated/css.ts
diff --git a/packages/core/src/client/webcomponents/components/Dock.vue b/packages/core/src/client/webcomponents/components/Dock.vue
@@ -220,7 +220,8 @@ const panelStyle = computed(() => {
 })
 
 onMounted(() => {
-  bringUp()
+  if (context.rpc.isTrusted)
+    bringUp()
   recalculateCounter.value++
 })
 </script>
@@ -268,6 +269,9 @@ onMounted(() => {
           class="w-3 h-3 absolute left-1/2 top-1/2 translate-x--1/2 translate-y--1/2 transition-opacity duration-300"
           :class="isMinimized ? 'op100' : 'op0'"
         />
+        <div v-if="!context.rpc.isTrusted" class="p2">
+          IS NOT TRUSTED
+        </div>
         <DockEntries
           :entries="context.docks.entries"
           class="transition duration-200 flex items-center w-full h-full justify-center"
diff --git a/packages/core/src/client/webcomponents/components/ViewBuiltinTerminalPanel.vue b/packages/core/src/client/webcomponents/components/ViewBuiltinTerminalPanel.vue
@@ -37,7 +37,7 @@ onMounted(async () => {
   props.terminal.terminal = term
 
   if (props.terminal.buffer == null) {
-    const { buffer } = await props.context.rpc.$call('vite:internal:terminals:read', props.terminal.info.id)
+    const { buffer } = await props.context.rpc.call('vite:internal:terminals:read', props.terminal.info.id)
     props.terminal.buffer = markRaw(buffer)
   }
 
diff --git a/packages/core/src/client/webcomponents/components/ViewLauncher.vue b/packages/core/src/client/webcomponents/components/ViewLauncher.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 function onLaunch() {
-  props.context.rpc.$call('vite:internal:docks:on-launch', props.entry.id)
+  props.context.rpc.call('vite:internal:docks:on-launch', props.entry.id)
 }
 
 const status = computed(() => props.entry.launcher.status || 'idle')
diff --git a/packages/core/src/client/webcomponents/state/context.ts b/packages/core/src/client/webcomponents/state/context.ts
@@ -1,4 +1,4 @@
-import type { ClientRpcReturn, DockClientScriptContext, DockEntryState, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
+import type { DevToolsRpcClient, DockClientScriptContext, DockEntryState, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
 import type { Ref } from 'vue'
 import { computed, markRaw, reactive, ref, toRefs, watchEffect } from 'vue'
 import { createDockEntryState, DEFAULT_DOCK_PANEL_STORE, useDocksEntries } from './docks'
@@ -7,15 +7,15 @@ import { executeSetupScript } from './setup-script'
 let _docksContext: DocksContext | undefined
 export async function createDocksContext(
   clientType: 'embedded' | 'standalone',
-  rpcReturn: ClientRpcReturn,
+  rpc: DevToolsRpcClient,
   panelStore?: Ref<DockPanelStorage>,
 ): Promise<DocksContext> {
   if (_docksContext) {
     return _docksContext
   }
 
   const selectedId = ref<string | null>(null)
-  const dockEntries = await useDocksEntries(rpcReturn)
+  const dockEntries = await useDocksEntries(rpc)
   const selected = computed(() => dockEntries.value.find(entry => entry.id === selectedId.value) ?? null)
 
   const dockEntryStateMap: Map<string, DockEntryState> = reactive(new Map())
@@ -76,8 +76,7 @@ export async function createDocksContext(
         return true
       },
     },
-    rpc: rpcReturn.rpc,
-    clientRpc: rpcReturn.clientRpc,
+    rpc,
     clientType,
   })
 
diff --git a/packages/core/src/client/webcomponents/state/docks.ts b/packages/core/src/client/webcomponents/state/docks.ts
@@ -1,5 +1,5 @@
 import type { DevToolsDockEntry, DevToolsRpcClientFunctions } from '@vitejs/devtools-kit'
-import type { ClientRpcReturn, DockEntryState, DockEntryStateEvents, DockPanelStorage } from '@vitejs/devtools-kit/client'
+import type { DevToolsRpcClient, DockEntryState, DockEntryStateEvents, DockPanelStorage } from '@vitejs/devtools-kit/client'
 import type { Ref, ShallowRef } from 'vue'
 import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
 import { markRaw, reactive, shallowRef, watch } from 'vue'
@@ -53,18 +53,22 @@ export function createDockEntryState(
 }
 
 let _docksEntriesRef: ShallowRef<DevToolsDockEntry[]> | undefined
-export async function useDocksEntries(rpcReturn: ClientRpcReturn): Promise<Ref<DevToolsDockEntry[]>> {
+export async function useDocksEntries(rpc: DevToolsRpcClient): Promise<Ref<DevToolsDockEntry[]>> {
   if (_docksEntriesRef) {
     return _docksEntriesRef
   }
   const dockEntries = _docksEntriesRef = shallowRef<DevToolsDockEntry[]>([])
   async function updateDocksEntries() {
-    dockEntries.value = (await rpcReturn.rpc.$call('vite:internal:docks:list'))
+    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])
   }
-  rpcReturn.clientRpc.register({
+  rpc.client.register({
     name: 'vite:internal:docks:updated' satisfies keyof DevToolsRpcClientFunctions,
     type: 'action',
     handler: () => updateDocksEntries(),
diff --git a/packages/core/src/client/webcomponents/state/terminals.ts b/packages/core/src/client/webcomponents/state/terminals.ts
@@ -17,7 +17,7 @@ export function useTerminals(context: DocksContext): Reactive<Map<string, Termin
   }
   const map: Reactive<Map<string, TerminalState>> = _terminalsMap = reactive(new Map())
   async function updateTerminals() {
-    const terminals = await context.rpc.$call('vite:internal:terminals:list')
+    const terminals = await context.rpc.call('vite:internal:terminals:list')
 
     for (const terminal of terminals) {
       if (map.has(terminal.id)) {
@@ -34,12 +34,12 @@ export function useTerminals(context: DocksContext): Reactive<Map<string, Termin
     // eslint-disable-next-line no-console
     console.log('[VITE DEVTOOLS] Terminals Updated', [...map.values()])
   }
-  context.clientRpc.register({
+  context.rpc.client.register({
     name: 'vite:internal:terminals:updated' satisfies keyof DevToolsRpcClientFunctions,
     type: 'action',
     handler: () => updateTerminals(),
   })
-  context.clientRpc.register({
+  context.rpc.client.register({
     name: 'vite:internal:terminals:stream-chunk' satisfies keyof DevToolsRpcClientFunctions,
     type: 'action',
     handler: (data: DevToolsTerminalSessionStreamChunkEvent) => {
diff --git a/packages/kit/package.json b/packages/kit/package.json
@@ -22,6 +22,7 @@
     ".": "./dist/index.mjs",
     "./client": "./dist/client.mjs",
     "./utils/events": "./dist/utils/events.mjs",
+    "./utils/nanoid": "./dist/utils/nanoid.mjs",
     "./package.json": "./package.json"
   },
   "main": "./dist/index.mjs",
@@ -44,7 +45,6 @@
     "birpc-x": "catalog:deps"
   },
   "devDependencies": {
-    "nanoid": "^5.1.6",
     "tsdown": "catalog:build",
     "vite": "catalog:build"
   }
diff --git a/packages/kit/src/client/docks.ts b/packages/kit/src/client/docks.ts
@@ -38,10 +38,6 @@ export interface DocksContext extends DevToolsClientContext {
    * The docks entries context
    */
   readonly docks: DocksEntriesContext
-  /**
-   * The client-side RPC functions to be called from the server
-   */
-  readonly clientRpc: DevToolsClientRpcHost
 }
 
 export type DevToolsClientRpcHost = RpcFunctionsCollector<DevToolsRpcClientFunctions, DevToolsClientContext>
diff --git a/packages/kit/src/client/rpc.ts b/packages/kit/src/client/rpc.ts
@@ -5,7 +5,8 @@ import type { DevToolsClientContext, DevToolsClientRpcHost } from './docks'
 import { createRpcClient } from '@vitejs/devtools-rpc'
 import { createWsRpcPreset } from '@vitejs/devtools-rpc/presets/ws/client'
 import { RpcFunctionsCollectorBase } from 'birpc-x'
-import { nanoid } from 'nanoid'
+import { nanoid } from '../utils/nanoid'
+import { promiseWithResolver } from '../utils/promise'
 
 const CONNECTION_META_KEY = '__VITE_DEVTOOLS_CONNECTION_META__'
 const CONNECTION_AUTH_ID_KEY = '__VITE_DEVTOOLS_CONNECTION_AUTH_ID__'
@@ -23,13 +24,40 @@ export interface DevToolsRpcClientOptions {
   rpcOptions?: EventOptions<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>
 }
 
-export type DevToolsRpcClient = BirpcReturn<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>
-
-export interface ClientRpcReturn {
-  connectionMeta: ConnectionMeta
-  rpc: DevToolsRpcClient
-  clientRpc: DevToolsClientRpcHost
+export interface DevToolsRpcClient {
+  /**
+   * Whether the client is trusted
+   */
   readonly isTrusted: boolean
+  /**
+   * The connection meta
+   */
+  readonly connectionMeta: ConnectionMeta
+  /**
+   * Return a promise that resolves when the client is trusted
+   *
+   * Rejects with an error if the timeout is reached
+   *
+   * @param timeout - The timeout in milliseconds, default to 60 seconds
+   */
+  ensureTrusted: (timeout?: number) => Promise<void>
+
+  /**
+   * Call a RPC function on the server
+   */
+  call: BirpcReturn<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>['$call']
+  /**
+   * Call a RPC event on the server, and does not expect a response
+   */
+  callEvent: BirpcReturn<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>['$callEvent']
+  /**
+   * Call a RPC optional function on the server
+   */
+  callOptional: BirpcReturn<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>['$callOptional']
+  /**
+   * The client RPC host
+   */
+  client: DevToolsClientRpcHost
 }
 
 function getConnectionAuthIdFromWindows(): string {
@@ -76,7 +104,7 @@ function findConnectionMetaFromWindows(): ConnectionMeta | undefined {
 
 export async function getDevToolsRpcClient(
   options: DevToolsRpcClientOptions = {},
-): Promise<ClientRpcReturn> {
+): Promise<DevToolsRpcClient> {
   const {
     baseURL = '/.devtools/',
     rpcOptions = {},
@@ -114,6 +142,8 @@ export async function getDevToolsRpcClient(
   const authId = getConnectionAuthIdFromWindows()
 
   let isTrusted = false
+  const trustedPromise = promiseWithResolver<void>()
+
   const clientRpc: DevToolsClientRpcHost = new RpcFunctionsCollectorBase<DevToolsRpcClientFunctions, DevToolsClientContext>(context)
 
   // Builtin rpc functions
@@ -122,44 +152,71 @@ export async function getDevToolsRpcClient(
     type: 'event',
     handler: () => {
       isTrusted = true
+      trustedPromise.resolve()
       return true
     },
   })
 
   // Create the RPC client
-  const rpc = createRpcClient<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>(
+  const serverRpc = createRpcClient<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>(
     clientRpc.functions,
     {
       preset: createWsRpcPreset({
         url,
         ...options.wsOptions,
       }),
-      rpcOptions: {
-        ...rpcOptions,
-        meta: {
-          authId,
-          get isTrusted() {
-            return isTrusted
-          },
-        },
-      },
+      rpcOptions,
     },
   )
-  // @ts-expect-error assign to readonly property
-  context.rpc = rpc
 
   // TODO: implement the trust logic
-  rpc.$call('vite:anonymous:auth', {
+  serverRpc.$call('vite:anonymous:auth', {
     authId,
     ua: navigator.userAgent,
   })
 
-  return {
-    connectionMeta,
+  async function ensureTrusted(timeout = 60_000): Promise<void> {
+    if (isTrusted)
+      trustedPromise.resolve()
+
+    if (timeout <= 0)
+      return trustedPromise.promise
+
+    let clear = () => {}
+    await Promise.race([
+      trustedPromise.promise.then(clear),
+      new Promise((resolve, reject) => {
+        const id = setTimeout(() => {
+          reject(new Error('[Vite DevTools] Timeout waiting for rpc to be trusted'))
+        }, timeout)
+        clear = () => clearTimeout(id)
+      }),
+    ])
+  }
+
+  const rpc: DevToolsRpcClient = {
     get isTrusted() {
       return isTrusted
     },
-    rpc,
-    clientRpc,
+    connectionMeta,
+    ensureTrusted,
+    call: (...args: any): any => {
+      // @ts-expect-error casting
+      return serverRpc.call(...args)
+    },
+    callEvent: (...args: any): any => {
+      // @ts-expect-error casting
+      return serverRpc.callEvent(...args)
+    },
+    callOptional: (...args: any): any => {
+      // @ts-expect-error casting
+      return serverRpc.callOptional(...args)
+    },
+    client: clientRpc,
   }
+
+  // @ts-expect-error assign to readonly property
+  context.rpc = rpc
+
+  return rpc
 }
diff --git a/packages/kit/src/utils/nanoid.ts b/packages/kit/src/utils/nanoid.ts
@@ -0,0 +1,10 @@
+// port from nanoid
+// https://github.com/ai/nanoid
+const urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
+export function nanoid(size = 21) {
+  let id = ''
+  let i = size
+  while (i--)
+    id += urlAlphabet[(Math.random() * 64) | 0]
+  return id
+}
diff --git a/packages/kit/src/utils/promise.ts b/packages/kit/src/utils/promise.ts
@@ -0,0 +1,17 @@
+export function promiseWithResolver<T>(): {
+  promise: Promise<T>
+  resolve: (value: T) => void
+  reject: (error: Error) => void
+} {
+  let resolve: (value: T) => void | undefined
+  let reject: (error: Error) => void | undefined
+  const promise = new Promise<T>((_resolve, _reject) => {
+    resolve = _resolve
+    reject = _reject
+  })
+  return {
+    promise,
+    resolve: resolve!,
+    reject: reject!,
+  }
+}
diff --git a/packages/kit/tsdown.config.ts b/packages/kit/tsdown.config.ts
@@ -4,6 +4,7 @@ export default defineConfig({
   entry: {
     'index': 'src/index.ts',
     'utils/events': 'src/utils/events.ts',
+    'utils/nanoid': 'src/utils/nanoid.ts',
     'client': 'src/client/index.ts',
   },
   exports: true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ onMounted(async () => {`
`37`	`37`	`props.terminal.terminal = term`
`38`	`38`
`39`	`39`	`if (props.terminal.buffer == null) {`
`40`		`- const { buffer } = await props.context.rpc.$call('vite:internal:terminals:read', props.terminal.info.id)`
	`40`	`+ const { buffer } = await props.context.rpc.call('vite:internal:terminals:read', props.terminal.info.id)`
`41`	`41`	`props.terminal.buffer = markRaw(buffer)`
`42`	`42`	`}`
`43`	`43`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ const props = defineProps<{`
`10`	`10`	`}>()`
`11`	`11`
`12`	`12`	`function onLaunch() {`
`13`		`- props.context.rpc.$call('vite:internal:docks:on-launch', props.entry.id)`
	`13`	`+ props.context.rpc.call('vite:internal:docks:on-launch', props.entry.id)`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`const status = computed(() => props.entry.launcher.status \|\| 'idle')`