chore: trying to make hmr work

Author: posva

playground/src/pages/[name].vue

@@ -106,7 +106,6 @@ definePage({
   meta: {
     [dummy_id]: 'id',
     fixed: dummy_number,
-    // hello: 'there',
     mySymbol: Symbol(),
     ['hello' + 'expr']: true,
     test: (to: RouteLocationNormalized) => {
@@ -144,13 +143,16 @@ definePage({
     <pre>{{ one }}</pre>
     <p>two</p>
     <pre>{{ two }}</pre>
+    <p>meta:</p>
+    <pre>{{ route.meta }}</pre>
   </main>
 </template>
 
 <route lang="json">
 {
   "meta": {
-    "hello": "there"
+    "hello": "there",
+    "n": 1
   }
 }
 </route>

playground/src/router.ts

@@ -7,15 +7,47 @@ export const router = createRouter({
   routes,
 })
 
+// let removeRoutes: Array<() => void> = []
+// for (const route of routes) {
+//   removeRoutes.push(router.addRoute(route))
+// }
+
 if (import.meta.hot) {
   // How to trigger this? tried virtual: /@id/
-  import.meta.hot.accept('vue-router/auto-routes', (mod) => {
-    console.log('✨ got new routes', mod)
-  })
-  import.meta.hot.accept((mod) => {
-    console.log('🔁 reloading routes from router...', mod)
-    console.log(mod!.router.getRoutes())
-  })
+  const id = 'vue-router/auto-routes'
+  // import.meta.hot.accept('vue-router/auto-routes', (mod) => {
+  //   console.log('✨ got new routes', mod)
+  // })
+  // import.meta.hot.accept(id, (mod) => {
+  //   console.log('✨ got new routes', mod)
+  // })
+  // import.meta.hot.accept((mod) => {
+  //   console.log('🔁 reloading routes from router...', mod)
+  //   console.log(mod!.router.getRoutes())
+  // })
+
+  // NOTE: this approach doesn't make sense and doesn't work anyway: it seems to fetch an outdated version of the file
+  // import.meta.hot.on('vite:beforeUpdate', async (payload) => {
+  //   console.log('🔁 vite:beforeUpdate', payload)
+  //   const routesUpdate = payload.updates.find(
+  //     (update) => update.path === 'virtual:vue-router/auto-routes'
+  //   )
+  //   if (routesUpdate) {
+  //     console.log('🔁 reloading routes from router...')
+  //     const { routes } = await import(
+  //       '/@id/' + routesUpdate.path + `?t=${routesUpdate.timestamp}`
+  //     )
+  //     for (const removeRoute of removeRoutes) {
+  //       console.log('Removing route...')
+  //       removeRoute()
+  //     }
+  //     removeRoutes = []
+  //     for (const route of routes) {
+  //       removeRoutes.push(router.addRoute(route))
+  //     }
+  //     router.replace('')
+  //   }
+  // })
 }
 
 // manual extension of route types

src/core/context.ts

@@ -3,7 +3,11 @@ import { TreeNode, PrefixTree } from './tree'
 import { promises as fs } from 'fs'
 import { asRoutePath, ImportsMap, logTree, throttle } from './utils'
 import { generateRouteNamedMap } from '../codegen/generateRouteMap'
-import { MODULE_ROUTES_PATH, MODULE_VUE_ROUTER_AUTO } from './moduleConstants'
+import {
+  MODULE_ROUTES_PATH,
+  MODULE_VUE_ROUTER_AUTO,
+  asVirtualId,
+} from './moduleConstants'
 import { generateRouteRecord } from '../codegen/generateRouteRecords'
 import fg from 'fast-glob'
 import { relative, resolve } from 'pathe'
@@ -116,6 +120,13 @@ export function createRoutesContext(options: ResolvedOptions) {
       ...routeBlock,
       ...definedPageNameAndPath,
     })
+
+    // TODO: if definePage changed
+    server?.invalidate(filePath + '?definePage&vue&lang.tsx')
+    server?.invalidate(asVirtualId(MODULE_ROUTES_PATH))
+
+    // TODO: only if needed
+    // server?.updateRoutes()
   }
 
   async function addPage(
@@ -162,8 +173,8 @@ export function createRoutesContext(options: ResolvedOptions) {
         await addPage(ctx, true)
         writeConfigFiles()
       })
-      .on('unlink', async (ctx) => {
-        await removePage(ctx)
+      .on('unlink', (ctx) => {
+        removePage(ctx)
         writeConfigFiles()
       })
 

src/core/vite/index.ts

@@ -5,9 +5,29 @@ import { MODULE_ROUTES_PATH, asVirtualId } from '../moduleConstants'
 export function createViteContext(server: ViteDevServer): ServerContext {
   function invalidate(path: string) {
     const { moduleGraph } = server
-    const foundModule = moduleGraph.getModuleById(asVirtualId(path))
+    const foundModule = moduleGraph.getModuleById(path)
     if (foundModule) {
       moduleGraph.invalidateModule(foundModule)
+      // for (const mod of foundModule.importers) {
+      //   console.log(`Invalidating ${mod.url}`)
+      //   moduleGraph.invalidateModule(mod)
+      // }
+      setTimeout(() => {
+        console.log(`Sending update for ${foundModule.url}`)
+        server.ws.send({
+          type: 'update',
+          updates: [
+            {
+              acceptedPath: path,
+              path: path,
+              // NOTE: this was in the
+              // timestamp: ROUTES_LAST_LOAD_TIME.value,
+              timestamp: Date.now(),
+              type: 'js-update',
+            },
+          ],
+        })
+      }, 100)
     }
     return !!foundModule
   }