feat(rpc): runtime type validation for rpc calls

packages/core/playground/vite.config.ts

@@ -106,6 +106,17 @@ export default defineConfig({
             action: ctx.utils.createSimpleClientScript(() => {}),
           })
 
+          ctx.docks.register({
+            id: 'test',
+            type: 'action',
+            icon: 'material-symbols:bug-report',
+            title: 'debug',
+            // TODO: HMR
+            action: ctx.utils.createSimpleClientScript(async (ctx) => {
+              console.log(await ctx.rpc.call('vite:internal:rpc:server:list'))
+            }),
+          })
+
           ctx.docks.register({
             id: 'shared-state',
             type: 'iframe',

packages/core/src/index.ts

@@ -1,3 +1,4 @@
+export { builtinRpcSchemas } from '../../core/src/node/rpc'
 export { createDevToolsContext } from './node/context'
 export { DevTools } from './node/plugins'
 export { createDevToolsMiddleware } from './node/server'

packages/core/src/node/cli-commands.ts

@@ -99,7 +99,7 @@ export async function build(options: BuildOptions) {
 
   console.log(c.cyan`${MARK_NODE} Writing RPC dump to ${resolve(devToolsRoot, '.vdt-rpc-dump.json')}`)
   const dump: Record<string, any> = {}
-  for (const [key, value] of Object.entries(devtools.context.rpc.functions)) {
+  for (const [key, value] of Object.entries(devtools.context.rpc.definitions)) {
     if (value.type === 'static')
       dump[key] = await value.handler?.()
   }

packages/core/src/node/rpc/index.ts

@@ -42,6 +42,13 @@ export const builtinRpcDeclarations = [
 
 export type BuiltinServerFunctions = RpcDefinitionsToFunctions<typeof builtinRpcDeclarations>
 
+export const builtinRpcSchemas = new Map(
+  builtinRpcDeclarations.map(d => [
+    d.name,
+    { args: d.argsSchema, returns: d.returnSchema },
+  ]),
+)
+
 export type BuiltinServerFunctionsStatic = RpcDefinitionsToFunctions<
   RpcDefinitionsFilter<typeof builtinRpcDeclarations, 'static'>
 >
@@ -51,7 +58,7 @@ export type BuiltinServerFunctionsDump = {
 }
 
 declare module '@vitejs/devtools-kit' {
-  export interface DevToolsRpcServerFunctions extends BuiltinServerFunctions {}
+  export interface DevToolsRpcServerFunctions extends BuiltinServerFunctions { }
 
   // @keep-sorted
   export interface DevToolsRpcClientFunctions {

packages/core/src/node/rpc/internal/docks-on-launch.ts

@@ -1,8 +1,11 @@
 import { defineRpcFunction } from '@vitejs/devtools-kit'
+import * as v from 'valibot'
 
 export const docksOnLaunch = defineRpcFunction({
   name: 'vite:internal:docks:on-launch',
   type: 'action',
+  args: [v.string()],
+  return: v.void(),
   setup: (context) => {
     const launchMap = new Map<string, Promise<void>>()
     return {

packages/kit/package.json

@@ -42,7 +42,8 @@
     "@vitejs/devtools-rpc": "workspace:*",
     "birpc": "catalog:deps",
     "birpc-x": "catalog:deps",
-    "immer": "catalog:deps"
+    "immer": "catalog:deps",
+    "valibot": "catalog:deps"
   },
   "devDependencies": {
     "my-ua-parser": "catalog:frontend",

packages/kit/src/client/rpc.ts

@@ -9,6 +9,7 @@ import { UAParser } from 'my-ua-parser'
 import { createEventEmitter } from '../utils/events'
 import { nanoid } from '../utils/nanoid'
 import { promiseWithResolver } from '../utils/promise'
+import { validateRpcArgs, validateRpcReturn } from '../utils/rpc-validation'
 import { createRpcSharedStateClientHost } from './rpc-shared-state'
 
 const CONNECTION_META_KEY = '__VITE_DEVTOOLS_CONNECTION_META__'
@@ -241,10 +242,12 @@ export async function getDevToolsRpcClient(
     ensureTrusted,
     requestTrust,
     call: (...args: any): any => {
-      return serverRpc.$call(
+      validateRpcArgs(args[0], args.slice(1))
+      const ret = serverRpc.$call(
         // @ts-expect-error casting
         ...args,
       )
+      validateRpcReturn(args[0], ret)
     },
     callEvent: (...args: any): any => {
       return serverRpc.$callEvent(

packages/kit/src/utils/define.ts

@@ -1,4 +1,39 @@
+import type { RpcFunctionDefinition, RpcFunctionType } from 'birpc-x'
+import type { GenericSchema } from 'valibot'
 import type { DevToolsNodeContext } from '../types'
 import { createDefineWrapperWithContext } from 'birpc-x'
 
-export const defineRpcFunction = createDefineWrapperWithContext<DevToolsNodeContext>()
+export interface RpcOptions<
+  NAME extends string,
+  TYPE extends RpcFunctionType,
+  A extends any[],
+  R,
+  AS extends GenericSchema[] | undefined = undefined,
+  RS extends GenericSchema | undefined = undefined,
+>
+  extends RpcFunctionDefinition<NAME, TYPE, A, R, DevToolsNodeContext> {
+  args?: AS
+  return?: RS
+}
+
+export function defineRpcFunction<
+  NAME extends string,
+  TYPE extends RpcFunctionType,
+  A extends any[],
+  R,
+  AS extends GenericSchema[] | undefined = undefined,
+  RS extends GenericSchema | undefined = undefined,
+>(
+  options: RpcOptions<NAME, TYPE, A, R, AS, RS>,
+) {
+  const { args, return: ret, ...rest } = options
+  const birpc = createDefineWrapperWithContext<DevToolsNodeContext>()
+
+  const fn = birpc(rest)
+
+  const augmentedFn = fn as typeof fn & { argsSchema?: AS, returnSchema?: RS }
+  augmentedFn.argsSchema = args
+  augmentedFn.returnSchema = ret
+
+  return augmentedFn
+}

packages/kit/src/utils/rpc-validation.ts

@@ -0,0 +1,57 @@
+import type { GenericSchema } from 'valibot'
+import { builtinRpcSchemas } from '@vitejs/devtools'
+import { serverRpcSchemas } from '@vitejs/devtools-vite'
+import { parse } from 'valibot'
+
+const rpcSchemas = new Map([
+  ...builtinRpcSchemas,
+  ...serverRpcSchemas,
+])
+
+export function validateSchema(schema: GenericSchema, data: any, prefix: string) {
+  try {
+    parse(schema, data)
+  }
+  catch (e) {
+    throw new Error(`${prefix}: ${(e as Error).message}`)
+  }
+}
+
+function getSchema(method: string) {
+  const schema = rpcSchemas.get(method as any)
+  if (!schema)
+    throw new Error(`RPC method "${method}" is not defined.`)
+  return schema
+}
+
+export function validateRpcArgs(method: string, args: any[]) {
+  const schema = getSchema(method)
+  if (!schema)
+    throw new Error(`RPC method "${method}" is not defined.`)
+
+  const { args: argsSchema } = schema
+  if (!argsSchema)
+    return
+
+  if (argsSchema.length !== args.length)
+    throw new Error(`Invalid number of arguments for RPC method "${method}". Expected ${argsSchema.length}, got ${args.length}.`)
+
+  for (let i = 0; i < argsSchema.length; i++) {
+    const s = argsSchema[i]
+    if (!s)
+      continue
+    validateSchema(s, args[i], `Invalid argument #${i + 1}`)
+  }
+}
+
+export function validateRpcReturn(method: string, data: any) {
+  const schema = getSchema(method)
+  if (!schema)
+    throw new Error(`RPC method "${method}" is not defined.`)
+
+  const { returns: returnSchema } = schema
+  if (!returnSchema)
+    return
+
+  validateSchema(returnSchema, data, `Invalid return value for RPC method "${method}"`)
+}

packages/vite/src/node/index.ts

@@ -1 +1,2 @@
 export * from './plugin'
+export { serverRpcSchemas } from './rpc/index'

packages/vite/src/node/rpc/index.ts

@@ -34,6 +34,13 @@ export const rpcFunctions = [
 
 export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>
 
+export const serverRpcSchemas = new Map(
+  rpcFunctions.map(d => [
+    d.name,
+    { args: d.argsSchema, returns: d.returnSchema },
+  ]),
+)
+
 export type ServerFunctionsStatic = RpcDefinitionsToFunctions<
   RpcDefinitionsFilter<typeof rpcFunctions, 'static'>
 >

packages/vite/src/nuxt.config.ts

@@ -91,6 +91,8 @@ export default defineNuxtConfig({
     build: {
       rolldownOptions: {
         devtools: {},
+        // https://github.com/parcel-bundler/lightningcss/issues/701
+        external: ['lightningcss'],
       },
       minify: NUXT_DEBUG_BUILD ? false : undefined,
       cssMinify: false,

packages/vite/tsdown.config.ts

@@ -5,6 +5,14 @@ export default defineConfig({
     index: 'src/index.ts',
     dirs: 'src/dirs.ts',
   },
+  /*
+   * Since `lightningcss` is a dependency of vite, and devtools/vite -> devtools/kit -> devtools/core, lightningcss
+   * would be bundled into the final build output, which would cause issues when used in environments where
+   * lightningcss is expected to be an external dependency. https://github.com/parcel-bundler/lightningcss/issues/701
+   */
+  external: [
+    'lightningcss',
+  ],
   tsconfig: '../../tsconfig.base.json',
   target: 'esnext',
   exports: true,

pnpm-workspace.yaml

@@ -54,6 +54,7 @@ catalogs:
     tinyglobby: ^0.2.15
     unconfig: ^7.4.2
     unstorage: ^1.17.3
+    valibot: ^1.2.0
     webext-bridge: ^6.0.1
     ws: ^8.19.0
   devtools:

test/exports/@vitejs/devtools-vite.yaml

@@ -1,4 +1,5 @@
 .:
   DevToolsViteUI: function
+  serverRpcSchemas: object
 ./dirs:
   clientPublicDir: string

test/exports/@vitejs/devtools.yaml

@@ -1,4 +1,5 @@
 .:
+  builtinRpcSchemas: object
   createDevToolsContext: function
   createDevToolsMiddleware: function
   DevTools: function