refactor: redesign rpc interface

Author: antfu

packages/devtools/src/app/backends/static.ts

@@ -1,4 +1,4 @@
-import type { ServerFunctionsDump } from '../../shared/types'
+import type { ServerFunctionsDump } from '../../node/rpc'
 import type { Backend } from '../types/backend'
 import { useRuntimeConfig } from '#app/nuxt'
 import { parse } from 'structured-clone-es'
@@ -29,8 +29,8 @@ export function createStaticBackend(): Backend {
     connectionError: error,
     connect() {},
     functions: {
-      getPayload: () => {
-        return getDump.then(dump => dump.getPayload)
+      'vite:get-payload': async () => {
+        return getDump.then(dump => dump['vite:get-payload'])
       },
     },
   }

packages/devtools/src/app/backends/websocket.ts

@@ -1,4 +1,5 @@
-import type { ClientFunctions, ServerFunctions } from '../../shared/types'
+import type { ServerFunctions } from '../../node/rpc'
+import type { ClientFunctions } from '../../shared/types'
 import type { Backend } from '../types/backend'
 import { createBirpc } from 'birpc'
 import { parse, stringify } from 'structured-clone-es'
@@ -86,17 +87,17 @@ export function createWebSocketBackend(options: WebSocketBackendOptions): Backen
     },
     isDynamic: true,
     functions: {
-      getPayload: async () => {
+      'vite:get-payload': async () => {
         try {
-          return await rpc.getPayload()
+          return await rpc['vite:get-payload']()
         }
         catch (err) {
           error.value = err
           throw err
         }
       },
-      openInEditor: (filename: string) => rpc.openInEditor.asEvent(filename),
-      openInFinder: (filename: string) => rpc.openInFinder.asEvent(filename),
+      'vite:open-in-editor': async (filename: string) => rpc['vite:open-in-editor'].asEvent(filename),
+      'vite:open-in-finder': async (filename: string) => rpc['vite:open-in-finder'].asEvent(filename),
     },
   }
 }

packages/devtools/src/app/server/api/metadata.json.ts

@@ -10,7 +10,7 @@ const ws = createWsServer({
 }).then((ws) => {
   // Warm up the payload
   setTimeout(() => {
-    ws.serverFunctions.getPayload()
+    ws.serverFunctions['vite:get-payload']()
   }, 1)
   return ws
 })

packages/devtools/src/app/state/data.ts

@@ -4,5 +4,5 @@ import { ref } from 'vue'
 export const rawEvents = ref<any>([])
 
 export async function fetchData(backend: Backend) {
-  rawEvents.value = await backend.functions.getPayload()
+  rawEvents.value = await backend.functions['vite:get-payload']()
 }

packages/devtools/src/app/types/backend.ts

@@ -1,9 +1,9 @@
 import type { Ref } from 'vue'
-import type { ServerFunctions } from '../../shared/types'
+import type { ServerFunctions } from '../../node/rpc'
 
 export type Functions =
   & Partial<ServerFunctions>
-  & Pick<ServerFunctions, 'getPayload'>
+  & Pick<ServerFunctions, 'vite:get-payload'>
 
 export interface Backend {
   name: string

packages/devtools/src/node/cli.ts

@@ -1,8 +1,8 @@
-import type { ServerFunctionsDump } from '../shared/types'
+import type { ServerFunctionsDump } from './rpc'
 import { existsSync } from 'node:fs'
+
 import fs from 'node:fs/promises'
 import process from 'node:process'
-
 import c from 'ansis'
 import cac from 'cac'
 import { getPort } from 'get-port-please'
@@ -31,13 +31,13 @@ cli
     const cwd = process.cwd()
     const outDir = resolve(cwd, options.outDir)
 
-    const rpc = await import('./rpc').then(r => r.createServerFunctions({
-      cwd,
-      configFile: options.config,
-      mode: 'build',
-    }))
+    const rpc = await import('./functions')
+      .then(async r => await r.createServerFunctions({
+        cwd,
+        mode: 'build',
+      }))
     const rpcDump: ServerFunctionsDump = {
-      getPayload: await rpc.getPayload(),
+      'vite:get-payload': await rpc['vite:get-payload'](),
     }
 
     let baseURL = options.base
@@ -89,13 +89,12 @@ cli
 
     const { server, ws } = await createHostServer({
       cwd: options.root,
-      configFile: options.config,
       mode: 'dev',
     })
 
     // Warm up the payload
     setTimeout(() => {
-      ws.serverFunctions.getPayload()
+      ws.serverFunctions['vite:get-payload']()
     }, 1)
 
     server.listen(port, host, async () => {

packages/devtools/src/node/functions.ts

@@ -0,0 +1,15 @@
+import type { ServerFunctions } from './rpc/index'
+import { rpcFunctions } from './rpc/index'
+
+export interface CreateServerFunctionsOptions {
+  cwd: string
+  mode: 'dev' | 'build'
+}
+
+export async function createServerFunctions(options: CreateServerFunctionsOptions): Promise<ServerFunctions> {
+  const functions = await Promise.all(
+    rpcFunctions
+      .map(async fn => [fn.name, (await fn.setup(options)).handler]),
+  )
+  return Object.fromEntries(functions)
+}

packages/devtools/src/node/rpc.ts

@@ -0,0 +1,11 @@
+import { defineRpcFunction } from '../types'
+
+export const getPayload = defineRpcFunction({
+  name: 'vite:get-payload',
+  type: 'static',
+  setup: () => ({
+    handler: async () => ({
+      timestamp: Date.now(),
+    }),
+  }),
+})

packages/devtools/src/node/rpc/functions/get-payload.ts

@@ -0,0 +1,11 @@
+import { defineRpcFunction } from '../types'
+
+export const openInEditor = defineRpcFunction({
+  name: 'vite:open-in-editor',
+  type: 'action',
+  setup: () => ({
+    handler: async (path: string) => {
+      await import('launch-editor').then(r => r.default(path))
+    },
+  }),
+})