feat: make module update reactive by rpc functions (#104)

Author: LoTwT

package.json

@@ -85,6 +85,7 @@
     "debug": "^4.3.4",
     "error-stack-parser-es": "^0.1.1",
     "fs-extra": "^11.1.1",
+    "lodash-es": "^4.17.21",
     "open": "^9.1.0",
     "picocolors": "^1.0.0",
     "sirv": "^2.0.3"
@@ -98,6 +99,7 @@
     "@types/debug": "^4.1.12",
     "@types/diff-match-patch": "^1.0.36",
     "@types/fs-extra": "^11.0.4",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.10.0",
     "@unocss/eslint-config": "^0.57.7",
     "@unocss/eslint-plugin": "^0.57.7",

playground/package.json

@@ -10,7 +10,8 @@
     "build-inspect": "serve .vite-inspect"
   },
   "dependencies": {
-    "vue": "^3.3.8"
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",

playground/src/App.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
+import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
-  <HelloWorld msg="Vite + Vue" />
+  <main>
+    <nav>
+      <RouterLink to="/">
+        Home
+      </RouterLink>
+      <RouterLink to="/other">
+        Other
+      </RouterLink>
+    </nav>
+
+    <RouterView />
+  </main>
 </template>

playground/src/main.ts

@@ -1,5 +1,8 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

playground/src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      name: 'home',
+      path: '/',
+      component: Home,
+    },
+    {
+      name: 'other',
+      path: '/other',
+      component: () => import('../views/Other.vue'),
+    },
+  ],
+})
+
+export default router

playground/src/views/Home.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import HelloWorld from '../components/HelloWorld.vue'
+</script>
+
+<template>
+  <HelloWorld msg="Vite + Vue" />
+</template>

playground/src/views/Other.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Other</div>
+</template>

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import { createRPCClient } from 'vite-dev-rpc'
 import type { BirpcReturn } from 'birpc'
 import { createHotContext } from 'vite-hot-client'
 import type { ModuleTransformInfo, RPCFunctions } from '../../types'
+import { refetch } from './state'
 
 export const isStaticMode = document.body.getAttribute('data-vite-inspect-mode') === 'BUILD'
 
@@ -31,9 +32,14 @@ function createStaticRpcClient(): RPCFunctions {
       return {}
     },
     getIdInfo,
+    moduleUpdated() {},
   }
 }
 
 export const rpc = isStaticMode
   ? createStaticRpcClient() as BirpcReturn<RPCFunctions>
-  : createRPCClient<RPCFunctions>('vite-plugin-inspect', (await createHotContext('/___', `${location.pathname.split('/__inspect')[0] || ''}/`.replace(/\/\//g, '/')))!)
+  : createRPCClient<RPCFunctions, Pick<RPCFunctions, 'moduleUpdated'>>('vite-plugin-inspect', (await createHotContext('/___', `${location.pathname.split('/__inspect')[0] || ''}/`.replace(/\/\//g, '/')))!, {
+    moduleUpdated() {
+      refetch()
+    },
+  })

src/client/logic/rpc.ts

@@ -3,6 +3,7 @@ import type { Connect, Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 import sirv from 'sirv'
 import { createRPCServer } from 'vite-dev-rpc'
 import c from 'picocolors'
+import { debounce } from 'lodash-es'
 import type { HMRData, RPCFunctions } from '../types'
 import { DIR_CLIENT } from '../dir'
 import type { Options } from './options'
@@ -121,16 +122,26 @@ export default function PluginInspect(options: Options = {}): Plugin {
       dev: true,
     }))
 
-    const rpcFunctions = {
+    const rpcFunctions: RPCFunctions = {
       list: () => ctx.getList(server),
       getIdInfo,
       getPluginMetrics: (ssr = false) => ctx.getPluginMetrics(ssr),
       getServerMetrics,
       resolveId: (id: string, ssr = false) => ctx.resolveId(id, ssr),
       clear: clearId,
+      moduleUpdated: () => {},
     }
 
-    createRPCServer<RPCFunctions>('vite-plugin-inspect', server.ws, rpcFunctions)
+    const rpcServer = createRPCServer<RPCFunctions>('vite-plugin-inspect', server.ws, rpcFunctions)
+
+    const debouncedModuleUpdated = debounce(() => {
+      rpcServer.moduleUpdated.asEvent()
+    }, 100)
+
+    server.middlewares.use((req, res, next) => {
+      debouncedModuleUpdated()
+      next()
+    })
 
     function getServerMetrics() {
       return serverPerf || {}

src/node/index.ts

@@ -68,6 +68,7 @@ export interface RPCFunctions {
   clear(id: string, ssr: boolean): Awaitable<void>
   getPluginMetrics(ssr: boolean): Awaitable<PluginMetricInfo[]>
   getServerMetrics(): Awaitable<Record<string, Record<string, { name: string, self: number, total: number }[]>>>
+  moduleUpdated(): void
 }
 
 export interface HMRData {