feat(hmr): improve Vite HMR implementation (#502)

Co-authored-by: Eduardo San Martin Morote <[email protected]>

playground/src/main.ts

@@ -31,3 +31,10 @@ app.use(DataLoaderPlugin, { router })
 app.use(router)
 
 app.mount('#app')
+
+// small logger for navigations, useful to check HMR
+router.isReady().then(() => {
+  router.beforeEach((to, from) => {
+    console.log('🧭', from.fullPath, '->', to.fullPath)
+  })
+})

src/core/vite/index.ts

@@ -1,5 +1,5 @@
 import { type ViteDevServer } from 'vite'
-import { ServerContext } from '../../options'
+import { type ServerContext } from '../../options'
 import { MODULE_ROUTES_PATH, asVirtualId } from '../moduleConstants'
 
 export function createViteContext(server: ViteDevServer): ServerContext {
@@ -39,28 +39,15 @@ export function createViteContext(server: ViteDevServer): ServerContext {
     })
   }
 
-  // NOTE: still not working
-  // based on https://github.com/vuejs/vitepress/blob/1188951785fd2a72f9242d46dc55abb1effd212a/src/node/plugins/localSearchPlugin.ts#L90
-  // https://github.com/unocss/unocss/blob/f375524d9bca3f2f8b445b322ec0fc3eb124ec3c/packages/vite/src/modes/global/dev.ts#L47-L66
-
+  /**
+   * Triggers HMR for the vue-router/auto-routes module.
+   */
   async function updateRoutes() {
     const modId = asVirtualId(MODULE_ROUTES_PATH)
     const mod = server.moduleGraph.getModuleById(modId)
-    if (!mod) {
-      return
+    if (mod) {
+      return server.reloadModule(mod)
     }
-    server.moduleGraph.invalidateModule(mod)
-    server.ws.send({
-      type: 'update',
-      updates: [
-        {
-          acceptedPath: mod.url,
-          path: mod.url,
-          timestamp: Date.now(),
-          type: 'js-update',
-        },
-      ],
-    })
   }
 
   return {

src/options.ts

@@ -246,7 +246,7 @@ export const DEFAULT_OPTIONS = {
 
 export interface ServerContext {
   invalidate: (module: string) => void
-  updateRoutes: () => void
+  updateRoutes: () => Promise<void>
   reload: () => void
 }