feat(client): module update track for graph page (#195)

Co-authored-by: arlo <[email protected]>

packages/client/src/pages/graph.vue

@@ -4,11 +4,20 @@ import { Network } from 'vis-network'
 
 const bridgeRpc = useDevToolsBridgeRpc()
 
-onDevToolsClientConnected(async () => {
+async function fetchGraph() {
   const root = await bridgeRpc.root()
   bridgeRpc.getGraph().then((res) => {
     parseGraphRawData(res, root)
   })
+}
+
+let cleanupModuleUpdatedEffect: Function
+
+onDevToolsClientConnected(() => {
+  fetchGraph()
+  cleanupModuleUpdatedEffect = bridgeRpc.graphModuleUpdated(() => {
+    fetchGraph()
+  })
 })
 
 const container = ref<HTMLDivElement>()
@@ -45,6 +54,7 @@ onMounted(() => {
 onUnmounted(() => {
   cleanupGraphRelatedStates()
   networkRef.value?.destroy()
+  cleanupModuleUpdatedEffect?.()
 })
 
 const navbarRef = ref<HTMLElement>()

packages/core/package.json

@@ -35,9 +35,10 @@
     "image-meta": "^0.2.0",
     "mitt": "^3.0.1",
     "pathe": "^1.1.2",
+    "perfect-debounce": "^1.0.0",
     "vite-dev-rpc": "^0.1.4",
     "vite-hot-client": "^0.2.3",
-    "vite-plugin-inspect": "^0.8.2"
+    "vite-plugin-inspect": "^0.8.3"
   },
   "devDependencies": {
     "vue": "^3.4.15"

packages/core/src/bridge/devtools.ts

@@ -12,13 +12,25 @@ const devtoolsBridge: {
   viteRpc: {
     enabled: boolean
     api: ReturnType<typeof setupViteRPCClient>
+    on: {
+      moduleUpdated: (fn: Function) => void
+    }
+    off: {
+      moduleUpdated: () => void
+    }
   }
   rpc: InstanceType<typeof BridgeRpcCore>
 } = {
   value: null!,
   viteRpc: {
     enabled: false,
     api: null!,
+    on: {
+      moduleUpdated() {},
+    },
+    off: {
+      moduleUpdated() {},
+    },
   },
   rpc: null!,
 }
@@ -28,13 +40,30 @@ export interface BridgeRpcOptions {
   bridge: BridgeInstanceType
 }
 export function registerBridgeRpc(options: BridgeRpcOptions) {
-  const rpc = setupViteRPCClient(options.viteRPCContext)
   devtoolsBridge.value = options.bridge
   devtoolsBridge.rpc = new BridgeRpcCore(options.bridge)
+
+  const moduleUpdatedFn: Function[] = []
+  const rpc = setupViteRPCClient(options.viteRPCContext, {
+    moduleUpdated: () => {
+      moduleUpdatedFn.forEach(fn => fn())
+    },
+  })
+
   if (rpc) {
     devtoolsBridge.viteRpc = {
       enabled: true,
       api: rpc,
+      on: {
+        moduleUpdated(fn: Function) {
+          moduleUpdatedFn.push(fn)
+        },
+      },
+      off: {
+        moduleUpdated() {
+          moduleUpdatedFn.length = 0
+        },
+      },
     }
   }
 }
@@ -176,4 +205,10 @@ export class BridgeRpc {
   static getGraph() {
     return devtoolsBridge.viteRpc!.api!.getGraph()
   }
+
+  // graph module udpated
+  static graphModuleUpdated(fn: Function) {
+    devtoolsBridge.viteRpc!.on.moduleUpdated(fn)
+    return () => devtoolsBridge.viteRpc!.off.moduleUpdated()
+  }
 }

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

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

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

@@ -1,17 +1,32 @@
 import type { ViteInspectAPI } from 'vite-plugin-inspect'
-import type { ModuleInfo } from './types'
+import { debounce } from 'perfect-debounce'
+import type { BirpcGroupReturn } from 'birpc'
+import type { ModuleInfo, ViteRPCFunctions } from './types'
 
 export interface SetupGraphOptions {
   rpc: ViteInspectAPI['rpc']
+  server: any
+  getRpcServer: () => BirpcGroupReturn<ViteRPCFunctions>
 }
 export function setupGraphRPC(options: SetupGraphOptions) {
-  const { rpc } = options
+  const { rpc, server, getRpcServer } = options
+
+  const debouncedModuleUpdated = debounce(() => {
+    getRpcServer().moduleUpdated()
+  }, 100)
+
+  server.middlewares.use((req, res, next) => {
+    debouncedModuleUpdated()
+    next()
+  })
+
   return {
     async getGraph(): Promise<ModuleInfo[]> {
       const list = await rpc.list()
       const modules = list?.modules || []
 
       return modules
     },
+    moduleUpdated: () => {},
   }
 }

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

@@ -3,7 +3,9 @@ import type { BirpcGroupReturn } from 'birpc'
 import { createRPCServer } from 'vite-dev-rpc'
 import type { ViteRPCFunctions } from './types'
 
-export async function setupViteRPCServer(ws: WebSocketServer, functions: ViteRPCFunctions): Promise<BirpcGroupReturn<ViteRPCFunctions>> {
-  const rpcServer = createRPCServer<ViteRPCFunctions>('vite-plugin-vue-devtools', ws, functions)
+export function setupViteRPCServer(ws: WebSocketServer, functions: ViteRPCFunctions): BirpcGroupReturn<ViteRPCFunctions> {
+  const rpcServer = createRPCServer<ViteRPCFunctions>('vite-plugin-vue-devtools', ws, functions, {
+    timeout: -1,
+  })
   return rpcServer
 }

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

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

packages/playground/package.json

@@ -25,7 +25,7 @@
     "serve": "^14.2.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vite-plugin-inspect": "^0.8.2",
+    "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-vue-devtools": "workspace:*"
   }
 }

packages/playground/src/main.ts

@@ -8,7 +8,8 @@ import { addCustomCommand, addCustomTab } from '@vue/devtools-api'
 import App2 from './App.vue'
 import App from './App.preview.vue'
 import Home from './pages/Home.vue'
-import Hello from './pages/Hello.vue'
+
+// import Hello from './pages/Hello.vue'
 import Hey from './pages/Hey.vue'
 import './style.css'
 
@@ -33,7 +34,8 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/hello',
-    component: Hello,
+    // component: Hello,
+    component: () => import('./pages/Hello.vue'),
     name: 'hello',
   },
   {

packages/vite/package.json

@@ -55,7 +55,7 @@
     "birpc": "^0.2.14",
     "execa": "^8.0.1",
     "sirv": "^2.0.4",
-    "vite-plugin-inspect": "^0.8.2",
+    "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-vue-inspector": "^4.0.2"
   },
   "devDependencies": {

packages/vite/src/vite.ts

@@ -78,14 +78,16 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
       single: true,
       dev: true,
     }))
-    setupViteRPCServer(server.ws, {
+    const rpcServer = setupViteRPCServer(server.ws, {
       root: () => config.root,
       ...setupAssetsRPC({
         root: config.root,
         base,
       }),
       ...setupGraphRPC({
         rpc: inspect.api.rpc,
+        server,
+        getRpcServer: () => rpcServer,
       }),
     })