feat: update assets in real time (#212)

Author: LoTwT

packages/client/src/pages/assets.vue

@@ -78,10 +78,19 @@ const byTree = computed(() => {
   return root.children
 })
 
-onDevToolsClientConnected(() => {
+let cleanupAssetsUpdatedEffect: Function
+
+function fetchAssets() {
   bridgeRpc.getStaticAssets().then((res) => {
     assets.value = res
   })
+}
+
+onDevToolsClientConnected(() => {
+  fetchAssets()
+  cleanupAssetsUpdatedEffect = bridgeRpc.assetsUpdated(() => {
+    fetchAssets()
+  })
 })
 function toggleView() {
   view.value = view.value === 'list' ? 'grid' : 'list'

packages/core/src/bridge/devtools.ts

@@ -14,9 +14,11 @@ const devtoolsBridge: {
     api: ReturnType<typeof setupViteRPCClient>
     on: {
       moduleUpdated: (fn: Function) => void
+      assetsUpdated: (fn: Function) => void
     }
     off: {
       moduleUpdated: () => void
+      assetsUpdated: () => void
     }
   }
   rpc: InstanceType<typeof BridgeRpcCore>
@@ -27,9 +29,11 @@ const devtoolsBridge: {
     api: null!,
     on: {
       moduleUpdated() {},
+      assetsUpdated() {},
     },
     off: {
       moduleUpdated() {},
+      assetsUpdated() {},
     },
   },
   rpc: null!,
@@ -44,10 +48,15 @@ export function registerBridgeRpc(options: BridgeRpcOptions) {
   devtoolsBridge.rpc = new BridgeRpcCore(options.bridge)
 
   const moduleUpdatedFn: Function[] = []
+  const assetsUpdatedFn: Function[] = []
+
   const rpc = setupViteRPCClient(options.viteRPCContext, {
     moduleUpdated: () => {
       moduleUpdatedFn.forEach(fn => fn())
     },
+    assetsUpdated: () => {
+      assetsUpdatedFn.forEach(fn => fn())
+    },
   })
 
   if (rpc) {
@@ -58,11 +67,17 @@ export function registerBridgeRpc(options: BridgeRpcOptions) {
         moduleUpdated(fn: Function) {
           moduleUpdatedFn.push(fn)
         },
+        assetsUpdated(fn) {
+          assetsUpdatedFn.push(fn)
+        },
       },
       off: {
         moduleUpdated() {
           moduleUpdatedFn.length = 0
         },
+        assetsUpdated() {
+          assetsUpdatedFn.length = 0
+        },
       },
     }
   }
@@ -211,4 +226,10 @@ export class BridgeRpc {
     devtoolsBridge.viteRpc!.on.moduleUpdated(fn)
     return () => devtoolsBridge.viteRpc!.off.moduleUpdated()
   }
+
+  // assets updated
+  static assetsUpdated(fn: Function) {
+    devtoolsBridge.viteRpc!.on.assetsUpdated(fn)
+    return () => devtoolsBridge.viteRpc!.off.assetsUpdated()
+  }
 }

packages/core/src/vite-rpc/assets.ts

@@ -2,6 +2,8 @@ import fsp from 'node:fs/promises'
 import fg from 'fast-glob'
 import { join, resolve } from 'pathe'
 import { imageMeta } from 'image-meta'
+import { BirpcGroupReturn } from 'birpc'
+import { debounce } from 'perfect-debounce'
 import type { AssetInfo, AssetType, ImageMeta, ViteRPCFunctions } from './types'
 
 const defaultAllowedExtensions = [
@@ -52,9 +54,14 @@ function guessType(path: string): AssetType {
 interface SetupAssetsOptions {
   root: string
   base: string
+  server: any
+  getRpcServer: () => BirpcGroupReturn<ViteRPCFunctions>
 }
 
 export function setupAssetsRPC(config: SetupAssetsOptions) {
+  const server = config.server
+  const getRpcServer = config.getRpcServer
+
   const _imageMetaCache = new Map<string, ImageMeta | undefined>()
   let cache: AssetInfo[] | null = null
 
@@ -103,6 +110,19 @@ export function setupAssetsRPC(config: SetupAssetsOptions) {
     return cache
   }
 
+  function watchAssets() {
+    const debouncedAssetsUpdated = debounce(() => {
+      getRpcServer().assetsUpdated()
+    }, 100)
+
+    server.watcher.on('all', (event) => {
+      if (event !== 'change')
+        debouncedAssetsUpdated()
+    })
+  }
+
+  watchAssets()
+
   return {
     async getStaticAssets() {
       return await scan()
@@ -131,5 +151,6 @@ export function setupAssetsRPC(config: SetupAssetsOptions) {
         return undefined
       }
     },
+    assetsUpdated() {},
   } satisfies Partial<ViteRPCFunctions>
 }

packages/core/src/vite-rpc/client.ts

@@ -5,14 +5,16 @@ import type { ViteRPCFunctions } from './types'
 
 export interface SetupViteRPCClientOptions {
   moduleUpdated?: () => void
+  assetsUpdated?: () => void
 }
 export function setupViteRPCClient(ctx: ViteHotContext | undefined, options: SetupViteRPCClientOptions = {}): BirpcReturn<ViteRPCFunctions, unknown> {
   if (!ctx)
     return null!
 
-  const { moduleUpdated = () => {} } = options
+  const { moduleUpdated = () => {}, assetsUpdated = () => {} } = options
   const rpcClient = createRPCClient<ViteRPCFunctions>('vite-plugin-vue-devtools', ctx, {
     moduleUpdated,
+    assetsUpdated,
   }, {
     timeout: -1,
   })

packages/core/src/vite-rpc/types.ts

@@ -45,4 +45,5 @@ export interface ViteRPCFunctions {
   getImageMeta(filepath: string): Promise<ImageMeta | undefined>
   getTextAssetContent(filepath: string, limit?: number): Promise<string | undefined>
   moduleUpdated: () => void
+  assetsUpdated: () => void
 }

packages/vite/src/vite.ts

@@ -83,14 +83,20 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
       ...setupAssetsRPC({
         root: config.root,
         base,
+        server,
+        getRpcServer,
       }),
       ...setupGraphRPC({
         rpc: inspect.api.rpc,
         server,
-        getRpcServer: () => rpcServer,
+        getRpcServer,
       }),
     })
 
+    function getRpcServer() {
+      return rpcServer
+    }
+
     const _printUrls = server.printUrls
     const colorUrl = (url: string) =>
       cyan(url.replace(/:(\d+)\//, (_, port) => `:${bold(port)}/`))