feat!(core): restructure client side rpc object

package.json

@@ -69,6 +69,7 @@
     "@jridgewell/sourcemap-codec": "catalog:resolutions",
     "@nuxt/devtools": "catalog:devtools",
     "@nuxt/kit": "catalog:build",
+    "@nuxt/vite-builder": "catalog:build",
     "@rolldown/debug": "catalog:deps",
     "chokidar": "catalog:resolutions",
     "esbuild": "catalog:build",

packages/core/package.json

@@ -70,6 +70,7 @@
     "ws": "catalog:deps"
   },
   "devDependencies": {
+    "@clack/prompts": "catalog:inlined",
     "@vitejs/devtools": "workspace:*",
     "@vitejs/devtools-vite": "workspace:*",
     "@vitejs/plugin-vue": "catalog:build",

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

@@ -10,15 +10,7 @@ export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
   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 rpc = await getDevToolsRpcClient()
 
   const state = useLocalStorage<DockPanelStorage>(
     'vite-devtools-dock-state',
@@ -36,7 +28,7 @@ export async function init(): Promise<void> {
 
   const context = await createDocksContext(
     'embedded',
-    rpcReturn,
+    rpc,
     state,
   )
 

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

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)
   }
 

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')

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,
   })
 

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,18 @@ 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'))
+    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(),

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) => {

packages/core/src/node/context.ts

@@ -44,15 +44,15 @@ export async function createDevToolsContext(
 
   // Register hosts side effects
   docksHost.events.on('dock:entry:updated', debounce(() => {
-    rpcHost.boardcast?.$callOptional('vite:internal:docks:updated')
+    rpcHost.boardcast('vite:internal:docks:updated')
   }, 10))
   terminalsHost.events.on('terminal:session:updated', debounce(() => {
-    rpcHost.boardcast?.$callOptional('vite:internal:terminals:updated')
+    rpcHost.boardcast('vite:internal:terminals:updated')
     // New terminals might affect the visibility of the terminals dock entry, we trigger it here as well
-    rpcHost.boardcast?.$callOptional('vite:internal:docks:updated')
+    rpcHost.boardcast('vite:internal:docks:updated')
   }, 10))
   terminalsHost.events.on('terminal:session:stream-chunk', (data) => {
-    rpcHost.boardcast?.$callOptional('vite:internal:terminals:stream-chunk', data)
+    rpcHost.boardcast('vite:internal:terminals:stream-chunk', data)
   })
 
   // Register plugins

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

@@ -1,13 +1,27 @@
-import type { DevToolsNodeContext, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+import type { DevToolsNodeContext, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, RpcFunctionsHost as RpcFunctionsHostType } from '@vitejs/devtools-kit'
 import type { BirpcGroup } from 'birpc'
 import { RpcFunctionsCollectorBase } from 'birpc-x'
 
-export class RpcFunctionsHost extends RpcFunctionsCollectorBase<DevToolsRpcServerFunctions, DevToolsNodeContext> {
-  boardcast: BirpcGroup<DevToolsRpcClientFunctions, DevToolsRpcServerFunctions>['broadcast'] = undefined!
+export class RpcFunctionsHost extends RpcFunctionsCollectorBase<DevToolsRpcServerFunctions, DevToolsNodeContext> implements RpcFunctionsHostType {
+  /**
+   * @internal
+   */
+  rpcGroup: BirpcGroup<DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, false> = undefined!
 
-  constructor(
-    context: DevToolsNodeContext,
-  ) {
+  constructor(context: DevToolsNodeContext) {
     super(context)
   }
+
+  boardcast<
+    T extends keyof DevToolsRpcClientFunctions,
+    Args extends Parameters<DevToolsRpcClientFunctions[T]>,
+  >(
+    name: T,
+    ...args: Args
+  ): Promise<(Awaited<ReturnType<DevToolsRpcClientFunctions[T]>> | undefined)[]> {
+    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.$callOptional<T>(name, ...args)
+  }
 }

packages/core/src/node/ws.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import type { ConnectionMeta, DevToolsNodeContext, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
 import type { WebSocket } from 'ws'
+import type { RpcFunctionsHost } from './host-functions'
 import { createRpcServer } from '@vitejs/devtools-rpc'
 import { createWsRpcPreset } from '@vitejs/devtools-rpc/presets/ws/server'
 import c from 'ansis'
@@ -15,7 +16,7 @@ export interface CreateWsServerOptions {
 }
 
 export async function createWsServer(options: CreateWsServerOptions) {
-  const rpcHost = options.context.rpc
+  const rpcHost = options.context.rpc as unknown as RpcFunctionsHost
   const port = options.portWebSocket ?? await getPort({ port: 7812, random: true })
 
   const wsClients = new Set<WebSocket>()
@@ -32,21 +33,24 @@ export async function createWsServer(options: CreateWsServerOptions) {
     },
   })
 
-  const rpc = createRpcServer<DevToolsRpcClientFunctions, DevToolsRpcServerFunctions>(
+  const rpcGroup = createRpcServer<DevToolsRpcClientFunctions, DevToolsRpcServerFunctions>(
     rpcHost.functions,
     {
       preset,
       rpcOptions: {
-        onGeneralError(error, name) {
+        onFunctionError(error, name) {
           console.error(c.red`⬢ RPC error on executing "${c.bold(name)}":`)
           console.error(error)
-          throw error
+        },
+        onGeneralError(error) {
+          console.error(c.red`⬢ RPC error on executing rpc`)
+          console.error(error)
         },
       },
     },
   )
 
-  rpcHost.boardcast = rpc.broadcast
+  rpcHost.rpcGroup = rpcGroup
 
   const getConnectionMeta = async (): Promise<ConnectionMeta> => {
     return {
@@ -57,7 +61,7 @@ export async function createWsServer(options: CreateWsServerOptions) {
 
   return {
     port,
-    rpc,
+    rpc: rpcGroup,
     rpcHost,
     getConnectionMeta,
   }

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,6 +45,7 @@
     "birpc-x": "catalog:deps"
   },
   "devDependencies": {
+    "my-ua-parser": "catalog:frontend",
     "tsdown": "catalog:build",
     "vite": "catalog:build"
   }

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>
@@ -87,3 +83,6 @@ export interface DockEntryStateEvents {
   'dom:panel:mounted': (panel: HTMLDivElement) => void
   'dom:iframe:mounted': (iframe: HTMLIFrameElement) => void
 }
+
+export interface RpcClientEvents {
+}