feat: cache rpc responses for cacheable functions (#290)

Author: webfansplz

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

@@ -244,7 +244,7 @@ export async function createDocksContext(
         return getWhenContext()
       },
     },
-    rpc,
+    rpc: markRaw(rpc),
     clientType,
   })
 

packages/core/src/node/rpc/internal/rpc-server-list.ts

@@ -11,6 +11,7 @@ export const rpcServerList = defineRpcFunction({
           Array.from(context.rpc.definitions.entries())
             .map(([name, fn]) => [name, {
               type: fn.type,
+              cacheable: fn.cacheable || false,
             }]),
         )
       },

packages/kit/src/client/rpc.ts

@@ -1,8 +1,9 @@
+import type { RpcCacheOptions } from '@vitejs/devtools-rpc'
 import type { WebSocketRpcClientOptions } from '@vitejs/devtools-rpc/presets/ws/client'
 import type { BirpcOptions, BirpcReturn } from 'birpc'
 import type { ConnectionMeta, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, EventEmitter, RpcSharedStateHost } from '../types'
 import type { DevToolsClientRpcHost, DevToolsRpcContext, RpcClientEvents } from './docks'
-import { RpcFunctionsCollectorBase } from '@vitejs/devtools-rpc'
+import { RpcCacheManager, RpcFunctionsCollectorBase } from '@vitejs/devtools-rpc'
 import {
   DEVTOOLS_CONNECTION_META_FILENAME,
   DEVTOOLS_MOUNT_PATH,
@@ -25,6 +26,7 @@ export interface DevToolsRpcClientOptions {
   authToken?: string
   wsOptions?: Partial<WebSocketRpcClientOptions>
   rpcOptions?: Partial<BirpcOptions<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions, boolean>>
+  cacheOptions?: boolean | Partial<RpcCacheOptions>
 }
 
 export type DevToolsRpcClientCall = BirpcReturn<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>['$call']
@@ -86,6 +88,10 @@ export interface DevToolsRpcClient {
    * The shared state host
    */
   sharedState: RpcSharedStateHost
+  /**
+   * The RPC cache manager
+   */
+  cacheManager: RpcCacheManager
 }
 
 export interface DevToolsRpcClientMode {
@@ -149,6 +155,7 @@ export async function getDevToolsRpcClient(
   const {
     baseURL = DEVTOOLS_MOUNT_PATH,
     rpcOptions = {},
+    cacheOptions = false,
   } = options
   const events = createEventEmitter<RpcClientEvents>()
   const bases = Array.isArray(baseURL) ? baseURL : [baseURL]
@@ -188,6 +195,7 @@ export async function getDevToolsRpcClient(
     }
   }
 
+  const cacheManager = new RpcCacheManager({ functions: [], ...(typeof options.cacheOptions === 'object' ? options.cacheOptions : {}) })
   const context: DevToolsRpcContext = {
     rpc: undefined!,
   }
@@ -229,7 +237,25 @@ export async function getDevToolsRpcClient(
         connectionMeta,
         events,
         clientRpc,
-        rpcOptions,
+        rpcOptions: {
+          ...rpcOptions,
+          async onRequest(req, next, resolve) {
+            await rpcOptions.onRequest?.call(this, req, next, resolve)
+            if (cacheOptions && cacheManager?.validate(req.m)) {
+              const cached = cacheManager.cached(req.m, req.a)
+              if (cached) {
+                return resolve(cached)
+              }
+              else {
+                const res = await next(req)
+                cacheManager?.apply(req, res)
+              }
+            }
+            else {
+              await next(req)
+            }
+          },
+        },
         wsOptions: options.wsOptions,
       })
 
@@ -252,6 +278,7 @@ export async function getDevToolsRpcClient(
     callOptional: mode.callOptional,
     client: clientRpc,
     sharedState: undefined!,
+    cacheManager,
   }
 
   rpc.sharedState = createRpcSharedStateClientHost(rpc)

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

@@ -24,6 +24,7 @@ export async function connect() {
         DEVTOOLS_MOUNT_PATH,
         runtimeConfig.app.baseURL,
       ],
+      cacheOptions: true,
       connectionMeta: runtimeConfig.app.connection,
       wsOptions: {
         onConnected: () => {
@@ -48,6 +49,13 @@ export async function connect() {
       },
     })
 
+    const functions = await rpc.value.call('devtoolskit:internal:rpc:server:list')
+    const cacheableFunctions = Object.keys(functions).filter(name => functions[name]?.cacheable)
+
+    rpc.value.cacheManager.updateOptions({
+      functions: [...cacheableFunctions],
+    })
+
     connectionState.connected = true
   }
   catch (e) {

packages/rolldown/src/node/rpc/functions/rolldown-get-asset-details.ts

@@ -4,6 +4,7 @@ import { getLogsManager } from '../utils'
 export const rolldownGetAssetDetails = defineRpcFunction({
   name: 'vite:rolldown:get-asset-details',
   type: 'query',
+  cacheable: true,
   setup: (context) => {
     const manager = getLogsManager(context)
     return {

packages/rolldown/src/node/rpc/functions/rolldown-get-assets-list.ts

@@ -4,6 +4,7 @@ import { getLogsManager } from '../utils'
 export const rolldownGetAssetsList = defineRpcFunction({
   name: 'vite:rolldown:get-assets-list',
   type: 'query',
+  cacheable: true,
   setup: (context) => {
     const manager = getLogsManager(context)
     return {

packages/rolldown/src/node/rpc/functions/rolldown-get-chunk-info.ts

@@ -4,6 +4,7 @@ import { getLogsManager } from '../utils'
 export const rolldownGetChunkInfo = defineRpcFunction({
   name: 'vite:rolldown:get-chunk-info',
   type: 'query',
+  cacheable: true,
   setup: (context) => {
     const manager = getLogsManager(context)
     return {

packages/rolldown/src/node/rpc/functions/rolldown-get-chunks-graph.ts

@@ -4,6 +4,7 @@ import { getLogsManager } from '../utils'
 export const rolldownGetChunksGraph = defineRpcFunction({
   name: 'vite:rolldown:get-chunks-graph',
   type: 'query',
+  cacheable: true,
   setup: (context) => {
     const manager = getLogsManager(context)
     return {

packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts

@@ -5,6 +5,7 @@ import { getLogsManager } from '../utils'
 export const rolldownGetModuleInfo = defineRpcFunction({
   name: 'vite:rolldown:get-module-info',
   type: 'query',
+  cacheable: true,
   setup: (context) => {
     const manager = getLogsManager(context)
     return {

packages/rolldown/src/node/rpc/functions/rolldown-get-package-details.ts

@@ -5,6 +5,7 @@ import { getPackagesManifest } from './rolldown-get-packages'
 export const rolldownGetPackageDetails = defineRpcFunction({
   name: 'vite:rolldown:get-package-details',
   type: 'query',
+  cacheable: true,
   setup: (context) => {
     const manager = getLogsManager(context)
     return {