From 74cb353e3643ddb0602449f171f2a5663c16db21 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 24 Jun 2022 23:41:44 +0200
Subject: [PATCH] fix: use virtual modules for @vue-router

---
 @vue-router/index.js             | 18 ------------------
 @vue-router/routes.js            |  4 ----
 package.json                     |  1 -
 playground/src/routes/[name].vue | 17 ++++++++++-------
 src/core/context.ts              | 23 +++++++++++++++++++++++
 src/core/moduleConstants.ts      |  2 --
 src/index.ts                     | 19 +++++++++++++++----
 7 files changed, 48 insertions(+), 36 deletions(-)
 delete mode 100644 @vue-router/index.js
 delete mode 100644 @vue-router/routes.js

diff --git a/@vue-router/index.js b/@vue-router/index.js
deleted file mode 100644
index 3a903fc1a..000000000
--- a/@vue-router/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// @ts-nocheck
-/**
- * This allows us to override imports from 'vue-router'
- */
-import { routes } from './routes'
-import { createRouter as _createRouter } from 'vue-router'
-
-export * from 'vue-router'
-
-export function createRouter(options) {
-  return _createRouter({
-    routes,
-    ...options,
-  })
-}
-
-// TODO: is there any case where this is necessary?
-export { createRouter as createSmartRouter }
diff --git a/@vue-router/routes.js b/@vue-router/routes.js
deleted file mode 100644
index aaab2bf91..000000000
--- a/@vue-router/routes.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// @ts-nocheck
-export { routes } from '@vue-router~routes'
-
-// we use a flat id that can be resolved by vite
diff --git a/package.json b/package.json
index 555c28004..91908bf6e 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
   },
   "files": [
     "dist",
-    "@vue-router",
     "*.d.ts"
   ],
   "scripts": {
diff --git a/playground/src/routes/[name].vue b/playground/src/routes/[name].vue
index 3116e6500..ef5fe74f8 100644
--- a/playground/src/routes/[name].vue
+++ b/playground/src/routes/[name].vue
@@ -1,8 +1,12 @@
 <script lang="ts" setup>
-import { useRoute, useRouter, onBeforeRouteLeave, onBeforeRouteUpdate } from '@vue-router'
+import {
+  useRoute,
+  useRouter,
+  onBeforeRouteLeave,
+  onBeforeRouteUpdate,
+} from '@vue-router'
 import type { RouterTyped } from '@vue-router'
 
-
 const router = useRouter()
 if (router.currentRoute.value.name === '/[name]') {
   router.currentRoute.value.params.name
@@ -10,16 +14,15 @@ if (router.currentRoute.value.name === '/[name]') {
   router.currentRoute.value.params.id
 }
 
-onBeforeRouteUpdate(to => {
+onBeforeRouteUpdate((to) => {
   if (to.name === '/articles/[id]' && to.params.id === '2') {
     to.params.id
   }
 })
 
-
-router.resolve({ path: ''})
+router.resolve({ path: '' })
 router.resolve({ path: '/articles/:id' })
-router.resolve({name: '/[name]', params: {name: 2}}).params.name
+router.resolve({ name: '/[name]', params: { name: 2 } }).params.name
 const routeLocation = router.resolve('/articles/id')
 if (routeLocation.name === '/[name]') {
   routeLocation.params.name
@@ -34,7 +37,7 @@ if (route.name == '/articles/[id]') {
 useRoute('/multiple-[a]-[b]-params').params
 useRoute<'/[name]'>().params.name
 // @ts-expect-error: /about doesn't have params
-useRoute<'/about'>('/about').params.never}
+useRoute<'/about'>('/about').params.never
 </script>
 
 <template>
diff --git a/src/core/context.ts b/src/core/context.ts
index 7be8b7f59..1c3219eca 100644
--- a/src/core/context.ts
+++ b/src/core/context.ts
@@ -152,6 +152,22 @@ declare module 'vue' {
 `
   }
 
+  function generateVueRouterProxy() {
+    return `
+import { routes } from '@vue-router/routes'
+import { createRouter as _createRouter } from 'vue-router'
+
+export * from 'vue-router'
+
+export function createRouter(options) {
+  return _createRouter({
+    routes,
+    ...options,
+  })
+}
+`
+  }
+
   let lastDTS: string | undefined
   async function _writeConfigFiles() {
     console.log('writing')
@@ -172,10 +188,17 @@ declare module 'vue' {
 
   setupWatcher()
 
+  function stopWatcher() {
+    serverWatcher.close()
+  }
+
   return {
     scanPages,
     writeConfigFiles,
 
+    stopWatcher,
+
     generateRoutes,
+    generateVueRouterProxy,
   }
 }
diff --git a/src/core/moduleConstants.ts b/src/core/moduleConstants.ts
index be8667930..538b1799c 100644
--- a/src/core/moduleConstants.ts
+++ b/src/core/moduleConstants.ts
@@ -1,6 +1,4 @@
 export const MODULE_VUE_ROUTER = '@vue-router'
-// the id is used internally and cannot contain slashes
-export const MODULE_ROUTES_ID = `${MODULE_VUE_ROUTER}~routes`
 // the path is used by the user and having slashes is just more natural
 export const MODULE_ROUTES_PATH = `${MODULE_VUE_ROUTER}/routes`
 
diff --git a/src/index.ts b/src/index.ts
index 8432b0e7b..5861c7fb0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,7 @@
 import { createUnplugin } from 'unplugin'
 import { createRoutesContext } from './core/context'
 import {
-  MODULE_ROUTES_ID,
+  MODULE_ROUTES_PATH,
   MODULE_VUE_ROUTER,
   VIRTUAL_PREFIX,
 } from './core/moduleConstants'
@@ -30,13 +30,14 @@ export default createUnplugin<Options>((opt) => {
     enforce: 'pre',
 
     resolveId(id) {
-      if (id === MODULE_ROUTES_ID) {
+      if (id === MODULE_ROUTES_PATH) {
         // virtual module
         return asVirtualId(id)
       }
       // NOTE: it wasn't possible to override or add new exports to vue-router
+      // so we need to override it with a different package name
       if (id === MODULE_VUE_ROUTER) {
-        return 'unplugin-vue-router/@vue-router/index.js'
+        return asVirtualId(id)
       }
       return null
     },
@@ -45,12 +46,22 @@ export default createUnplugin<Options>((opt) => {
       return ctx.scanPages()
     },
 
+    buildEnd() {
+      ctx.stopWatcher()
+    },
+
     load(id) {
       const resolvedId = getVirtualId(id)
-      if (resolvedId === MODULE_ROUTES_ID) {
+      if (resolvedId === MODULE_ROUTES_PATH) {
         return ctx.generateRoutes()
       }
 
+      // we need to use a virtual module so that vite resolves the @vue-router/routes
+      // dependency correctly
+      if (resolvedId === MODULE_VUE_ROUTER) {
+        return ctx.generateVueRouterProxy()
+      }
+
       // fallback
       return null
     },