feat!(core): restructure client side rpc object (#146)

Author: antfu

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/.generated/css.ts

@@ -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/ViewBuiltinTerminalPanel.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/components/ViewLauncher.vue

@@ -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/context.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/docks.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) => {