chore: update

packages/client/src/pages/graph.vue

@@ -1,31 +1,38 @@
 <script setup lang="ts">
 import { useDevToolsBridgeRpc } from '@vue/devtools-core'
 import { Network } from 'vis-network'
-import { createRPCClient } from 'vite-dev-rpc'
-import { getViteHotContext } from '~/main'
 
 const bridgeRpc = useDevToolsBridgeRpc()
 
-onDevToolsClientConnected(async () => {
+async function fetch() {
   const root = await bridgeRpc.root()
   bridgeRpc.getGraph().then((res) => {
     parseGraphRawData(res, root)
   })
+}
+
+let cleanupModuleUpdatedEffect: Function
 
-  createRPCClient('vite-plugin-inspect', (await getViteHotContext())!, {
-    async moduleUpdated() {
-      console.log('love from vite-plugin-inspect')
-      try {
-        const root = await bridgeRpc.root()
-        console.log('root => ', root)
-      }
-      catch (error) {
-        console.log('root error => ', error)
-      }
-    },
-  }, {
-    timeout: -1,
+onDevToolsClientConnected(() => {
+  fetch()
+  cleanupModuleUpdatedEffect = bridgeRpc.graphModuleUpdated(() => {
+    fetch()
   })
+
+  // createRPCClient('vite-plugin-inspect', (await getViteHotContext())!, {
+  //   async moduleUpdated() {
+  //     console.log('love from vite-plugin-inspect')
+  //     try {
+  //       const root = await bridgeRpc.root()
+  //       console.log('root => ', root)
+  //     }
+  //     catch (error) {
+  //       console.log('root error => ', error)
+  //     }
+  //   },
+  // }, {
+  //   timeout: -1,
+  // })
 })
 
 const container = ref<HTMLDivElement>()
@@ -62,6 +69,7 @@ onMounted(() => {
 onUnmounted(() => {
   cleanupGraphRelatedStates()
   networkRef.value?.destroy()
+  cleanupModuleUpdatedEffect?.()
 })
 
 const navbarRef = ref<HTMLElement>()

packages/core/package.json

@@ -35,6 +35,7 @@
     "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.3"

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/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/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,
       }),
     })