feat(kit): support ctx.clientRpc registration

Author: antfu

packages/core/src/client/inject/index.ts

@@ -10,7 +10,8 @@ export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] Client injected')
 
-  const { rpc } = await getDevToolsRpcClient()
+  const rpcReturn = await getDevToolsRpcClient()
+  const { rpc } = rpcReturn
 
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] RPC', rpc)
@@ -35,7 +36,7 @@ export async function init(): Promise<void> {
 
   const context = await createDocksContext(
     'embedded',
-    rpc,
+    rpcReturn,
     state,
   )
 

packages/core/src/client/standalone/App.vue

@@ -9,7 +9,8 @@ import { createDocksContext } from '../webcomponents/state/dock'
 import { useStateHandlers } from '../webcomponents/state/state'
 import { PresistedDomViewsManager } from '../webcomponents/utils/PresistedDomViewsManager'
 
-const { rpc } = await getDevToolsRpcClient()
+const rpcReturn = await getDevToolsRpcClient()
+const { rpc } = rpcReturn
 
 // eslint-disable-next-line no-console
 console.log('[VITE DEVTOOLS] RPC', rpc)
@@ -19,7 +20,7 @@ const presistedDoms = markRaw(new PresistedDomViewsManager(viewsContainer))
 
 const context: DocksContext = await createDocksContext(
   'standalone',
-  rpc,
+  rpcReturn,
 )
 
 context.docks.selected ||= context.docks.entries[0] || null

packages/core/src/client/webcomponents/state/dock.ts

@@ -1,5 +1,5 @@
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
-import type { DevToolsRpcClient, DockEntryState, DockEntryStateEvents, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
+import type { ClientRpcReturn, DockEntryState, DockEntryStateEvents, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
 import type { Ref } from 'vue'
 import { createNanoEvents } from 'nanoevents'
 import { computed, markRaw, reactive, ref, shallowRef, watch } from 'vue'
@@ -54,11 +54,11 @@ function createDockEntryState(
 
 export async function createDocksContext(
   clientType: 'embedded' | 'standalone',
-  rpc: DevToolsRpcClient,
+  rpcReturn: ClientRpcReturn,
   panelStore?: Ref<DockPanelStorage>,
 ): Promise<DocksContext> {
   const selected = ref<DevToolsDockEntry | null>(null)
-  const dockEntries = shallowRef((await rpc.$call('vite:core:list-dock-entries')).map(entry => Object.freeze(entry)))
+  const dockEntries = shallowRef((await rpcReturn.rpc.$call('vite:core:list-dock-entries')).map(entry => Object.freeze(entry)))
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] Docks Entries', [...dockEntries.value])
   // TODO: get board case from rpc when entries updates
@@ -98,7 +98,8 @@ export async function createDocksContext(
         return true
       },
     },
-    rpc,
+    rpc: rpcReturn.rpc,
+    clientRpc: rpcReturn.clientRpc,
     clientType,
   })
 }

packages/kit/src/client/docks.ts

@@ -1,6 +1,7 @@
+import type { RpcFunctionsCollector } from 'birpc-x'
 import type { Emitter as EventsEmitter } from 'nanoevents'
 import type { Raw } from 'vue'
-import type { DevToolsDockEntry } from '../types'
+import type { DevToolsDockEntry, DevToolsRpcClientFunctions } from '../types'
 import type { DevToolsRpcClient } from './rpc'
 
 export interface DockPanelStorage {
@@ -15,28 +16,37 @@ export interface DockPanelStorage {
 
 export type DockClientType = 'embedded' | 'standalone'
 
-export interface DocksContext {
+export interface DevToolsClientContext {
+  /**
+   * The RPC client to interact with the server
+   */
+  readonly rpc: DevToolsRpcClient
+}
+
+export interface DocksContext extends DevToolsClientContext {
   /**
    * Type of the client environment
    *
    * 'embedded' - running inside an embedded floating panel
    * 'standalone' - running inside a standlone window (no user app)
    */
   readonly clientType: 'embedded' | 'standalone'
-  /**
-   * The RPC client to interact with the server
-   */
-  readonly rpc: DevToolsRpcClient
   /**
    * The panel context
    */
-  panel: DocksPanelContext
+  readonly panel: DocksPanelContext
   /**
    * The docks entries context
    */
-  docks: DocksEntriesContext
+  readonly docks: DocksEntriesContext
+  /**
+   * The client-side RPC functions to be called from the server
+   */
+  readonly clientRpc: DevToolsClientRpcHost
 }
 
+export type DevToolsClientRpcHost = RpcFunctionsCollector<DevToolsRpcClientFunctions, DevToolsClientContext>
+
 export interface DocksPanelContext {
   store: DockPanelStorage
   isDragging: boolean

packages/kit/src/client/rpc.ts

@@ -1,8 +1,10 @@
 import type { WebSocketRpcClientOptions } from '@vitejs/devtools-rpc/presets/ws/client'
 import type { BirpcOptions, BirpcReturn } from 'birpc'
 import type { ConnectionMeta, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from '../types'
+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'
 
 function isNumeric(str: string | number | undefined) {
   if (str == null)
@@ -19,12 +21,15 @@ export interface DevToolsRpcClientOptions {
 
 export type DevToolsRpcClient = BirpcReturn<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>
 
-export async function getDevToolsRpcClient(
-  options: DevToolsRpcClientOptions = {},
-): Promise<{
+export interface ClientRpcReturn {
   connectionMeta: ConnectionMeta
   rpc: DevToolsRpcClient
-}> {
+  clientRpc: DevToolsClientRpcHost
+}
+
+export async function getDevToolsRpcClient(
+  options: DevToolsRpcClientOptions = {},
+): Promise<ClientRpcReturn> {
   const {
     baseURL = '/.devtools/',
     rpcOptions = {},
@@ -55,16 +60,26 @@ export async function getDevToolsRpcClient(
     ? `${location.protocol.replace('http', 'ws')}//${location.hostname}:${connectionMeta.websocket}`
     : connectionMeta.websocket as string
 
-  const rpc = createRpcClient<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>({}, {
-    preset: createWsRpcPreset({
-      url,
-      ...options.wsOptions,
-    }),
-    rpcOptions,
-  })
+  const context: DevToolsClientContext = {
+    rpc: undefined!,
+  }
+  const clientRpc: DevToolsClientRpcHost = new RpcFunctionsCollectorBase<DevToolsRpcClientFunctions, DevToolsClientContext>(context)
+  const rpc = createRpcClient<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>(
+    clientRpc.functions,
+    {
+      preset: createWsRpcPreset({
+        url,
+        ...options.wsOptions,
+      }),
+      rpcOptions,
+    },
+  )
+  // @ts-expect-error assign to readonly property
+  context.rpc = rpc
 
   return {
     connectionMeta,
     rpc,
+    clientRpc,
   }
 }

packages/kit/src/types/index.ts

@@ -4,3 +4,5 @@ export * from './utils'
 export * from './views'
 export * from './vite-augment'
 export * from './vite-plugin'
+
+export type { RpcDefinitionsFilter, RpcDefinitionsToFunctions } from 'birpc-x'

packages/kit/src/types/rpc.ts

@@ -1,50 +1,5 @@
 import type { RpcFunctionsCollectorBase } from 'birpc-x'
 import type { DevToolsRpcServerFunctions } from './rpc-augments'
-import type { EntriesToObject, Thenable } from './utils'
 import type { DevToolsNodeContext } from './vite-plugin'
 
-export type { BirpcFn, BirpcReturn } from 'birpc'
-
-/**
- * Type of the RPC function,
- * - static: A function that returns a static data (can be cached and dumped)
- * - action: A function that performs an action (no data returned)
- * - query: A function that queries a resource
- */
-export type RpcFunctionType = 'static' | 'action' | 'query'
-
 export type RpcFunctionsHost = RpcFunctionsCollectorBase<DevToolsRpcServerFunctions, DevToolsNodeContext>
-
-export interface RpcFunctionSetupResult<
-  ARGS extends any[],
-  RETURN = void,
-> {
-  handler: (...args: ARGS) => RETURN
-}
-
-// TODO: maybe we should introduce schema system with valibot
-
-export interface RpcFunctionDefinition<
-  NAME extends string,
-  TYPE extends RpcFunctionType,
-  ARGS extends any[] = [],
-  RETURN = void,
-> {
-  name: NAME
-  type: TYPE
-  setup: (context: DevToolsNodeContext) => Thenable<RpcFunctionSetupResult<ARGS, RETURN>>
-  handler?: (...args: ARGS) => RETURN
-  __resolved?: RpcFunctionSetupResult<ARGS, RETURN>
-  __promise?: Thenable<RpcFunctionSetupResult<ARGS, RETURN>>
-}
-
-export type RpcDefinitionsToFunctions<T extends readonly RpcFunctionDefinition<any, any, any>[]> = EntriesToObject<{
-  [K in keyof T]: [T[K]['name'], Awaited<ReturnType<T[K]['setup']>>['handler']]
-}>
-
-export type RpcDefinitionsFilter<
-  T extends readonly RpcFunctionDefinition<any, any, any>[],
-  Type extends RpcFunctionType,
-> = {
-  [K in keyof T]: T[K] extends { type: Type } ? T[K] : never
-}

packages/vite/src/app/composables/rpc.ts

@@ -1,5 +1,5 @@
 import type {} from '@vitejs/devtools'
-import type { BirpcReturn, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+import type { ClientRpcReturn } from '@vitejs/devtools-kit/client'
 import type {} from '../../node/rpc'
 import { useRuntimeConfig } from '#app/nuxt'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
@@ -13,7 +13,7 @@ export const connectionState = reactive<{
   error: null,
 })
 
-const rpc = shallowRef<BirpcReturn<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>>(undefined!)
+const rpc = shallowRef<ClientRpcReturn['rpc']>(undefined!)
 
 export async function connect() {
   const runtimeConfig = useRuntimeConfig()