From 72518212dac590f024ba3dd2d19d21adf0d35784 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 20 Aug 2021 15:17:19 +0200
Subject: [PATCH] feat: use vue-router 4 for vue3

---
 package.json                          |  2 +-
 src/components/home/contentAuth.vue   |  8 +++--
 src/components/home/navigation.vue    | 49 +++++++++++++++------------
 src/router/index.js                   | 41 +++++++++++++++-------
 src/views/list/views/Gantt.vue        |  8 +++--
 src/views/list/views/Kanban.vue       |  8 +++--
 src/views/list/views/List.vue         |  8 +++--
 src/views/list/views/Table.vue        |  8 +++--
 src/views/migrator/MigrateService.vue |  2 +-
 vite.config.js                        | 22 ++----------
 yarn.lock                             | 15 +++++---
 11 files changed, 97 insertions(+), 74 deletions(-)

diff --git a/package.json b/package.json
index b621472ac..f08ad4117 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "vue-easymde": "1.4.0",
     "vue-flatpickr-component": "9.0.4",
     "vue-i18n": "8.26.3",
+    "vue-router": "4.0.11",
     "vue-shortkey": "3.1.7",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.2",
@@ -70,7 +71,6 @@
     "vite": "2.6.1",
     "vite-plugin-pwa": "0.11.2",
     "vue-notification": "1.3.20",
-    "vue-router": "3.5.2",
     "wait-on": "6.0.0",
     "workbox-cli": "6.3.0"
   },
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index a8972d428..4ee8ba461 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -22,9 +22,11 @@
 
 				<router-view/>
 
-				<transition name="modal">
-					<router-view name="popup"/>
-				</transition>
+				<router-view name="popup" v-slot="{ Component }">
+					<transition name="modal">
+						<component :is="Component" />
+					</transition>
+				</router-view>
 
 				<a
 					class="keyboard-shortcuts-button"
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index b3ea51911..db2a067d8 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -106,29 +106,36 @@
 								:class="{'is-loading': listUpdating[l.id]}"
 							>
 								<router-link
-									class="list-menu-link"
-									:class="{'router-link-exact-active': currentList.id === l.id}"
 									:to="{ name: 'list.index', params: { listId: l.id} }"
-									tag="span"
+									v-slot="{ href, navigate, isActive }"
+									custom
 								>
-									<span class="icon handle">
-										<icon icon="grip-lines"/>
-									</span>
-									<span
-										:style="{ backgroundColor: l.hexColor }"
-										class="color-bubble"
-										v-if="l.hexColor !== ''">
-									</span>
-									<span class="list-menu-title">
-										{{ getListTitle(l) }}
-									</span>
-									<span
-										:class="{'is-favorite': l.isFavorite}"
-										@click.stop="toggleFavoriteList(l)"
-										class="favorite">
-										<icon icon="star" v-if="l.isFavorite"/>
-										<icon :icon="['far', 'star']" v-else/>
-									</span>
+									<a
+										@click="navigate"
+										:href="href"
+										:active="isActive"
+										class="list-menu-link"
+										:class="{'router-link-exact-active': currentList.id === l.id}"
+									>
+										<span class="icon handle">
+											<icon icon="grip-lines"/>
+										</span>
+										<span
+											:style="{ backgroundColor: l.hexColor }"
+											class="color-bubble"
+											v-if="l.hexColor !== ''">
+										</span>
+										<span class="list-menu-title">
+											{{ getListTitle(l) }}
+										</span>
+										<span
+											:class="{'is-favorite': l.isFavorite}"
+											@click.stop="toggleFavoriteList(l)"
+											class="favorite">
+											<icon icon="star" v-if="l.isFavorite"/>
+											<icon :icon="['far', 'star']" v-else/>
+										</span>
+									</a>
 								</router-link>
 								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 								<span class="list-setting-spacer" v-else></span>
diff --git a/src/router/index.js b/src/router/index.js
index 5f95fa232..215e29640 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,4 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 import HomeComponent from '../views/Home'
 import NotFoundComponent from '../views/404'
@@ -59,10 +58,8 @@ const NewNamespaceComponent = () => import('../views/namespaces/NewNamespace')
 const EditTeamComponent = () => import('../views/teams/EditTeam')
 const NewTeamComponent = () =>  import('../views/teams/NewTeam')
 
-Vue.use(Router)
-
-export default new Router({
-	mode: 'history',
+const router = createRouter({
+	history: createWebHistory(),
 	scrollBehavior(to, from, savedPosition) {
 		// If the user is using their forward/backward keys to navigate, we want to restore the scroll view
 		if (savedPosition) {
@@ -71,13 +68,11 @@ export default new Router({
 
 		// Scroll to anchor should still work
 		if (to.hash) {
-			return {
-				selector: to.hash,
-			}
+			return {el: document.getElementById(to.hash.slice(1))}
 		}
 
 		// Otherwise just scroll to the top
-		return {x: 0, y: 0}
+		return {left: 0, top: 0}
 	},
 	routes: [
 		{
@@ -86,8 +81,14 @@ export default new Router({
 			component: HomeComponent,
 		},
 		{
-			path: '*',
-			name: '404',
+			path: '/:pathMatch(.*)*',
+			name: 'not-found',
+			component: NotFoundComponent,
+		},
+		// if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing
+		{
+			path: '/:pathMatch(.*)',
+			name: 'bad-not-found',
 			component: NotFoundComponent,
 		},
 		{
@@ -505,4 +506,18 @@ export default new Router({
 			component: About,
 		},
 	],
-})
\ No newline at end of file
+})
+
+// bad example if using named routes:
+router.resolve({
+	name: 'bad-not-found',
+	params: { pathMatch: 'not/found' },
+}).href // '/not%2Ffound'
+
+// good example:
+router.resolve({
+	name: 'not-found',
+	params: { pathMatch: ['not', 'found'] },
+}).href // '/not/found'
+
+export default router
\ No newline at end of file
diff --git a/src/views/list/views/Gantt.vue b/src/views/list/views/Gantt.vue
index b05ae2cf3..f5eab4967 100644
--- a/src/views/list/views/Gantt.vue
+++ b/src/views/list/views/Gantt.vue
@@ -53,9 +53,11 @@
 		/>
 
 		<!-- This router view is used to show the task popup while keeping the gantt chart itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 
 		</card>
 	</div>
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 6885e33bb..7e9d5f986 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -212,9 +212,11 @@
 		</div>
 
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 
 		<transition name="modal">
 			<modal
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index e3dd37758..21744029a 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -128,9 +128,11 @@
 		</card>
 
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 	</div>
 </template>
 
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 0ab5c68b4..37adfff03 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -179,9 +179,11 @@
 		</card>
 
 		<!-- This router view is used to show the task popup while keeping the table view itself -->
-		<transition name="modal">
-			<router-view/>
-		</transition>
+		<router-view v-slot="{ Component }">
+			<transition name="modal">
+				<component :is="Component" />
+			</transition>
+		</router-view>
 
 	</div>
 </template>
diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue
index 05f057e28..fddf901e1 100644
--- a/src/views/migrator/MigrateService.vue
+++ b/src/views/migrator/MigrateService.vue
@@ -32,7 +32,7 @@ export default {
 			this.identifier = identifier
 			this.isFileMigrator = isFileMigrator
 		} catch (e) {
-			this.$router.push({name: '404'})
+			this.$router.push({name: 'not-found'})
 		}
 	},
 }
diff --git a/vite.config.js b/vite.config.js
index 87ce60315..3b7f7c032 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -106,26 +106,10 @@ module.exports = {
 		target: 'es2015',
 		rollupOptions: {
 			plugins: [
-				visualizer(),
+				visualizer({
+					filename: 'stats.html',
+				}),
 			],
-			output: {
-				manualChunks: {
-					'user-settings': [
-						'./src/views/user/PasswordReset',
-						'./src/views/user/RequestPasswordReset',
-						'./src/views/user/Settings',
-					],
-					'settings': [
-						'./src/views/list/NewList',
-						'./src/views/namespaces/NewNamespace',
-						'./src/views/teams/EditTeam',
-						'./src/views/teams/NewTeam',
-					],
-					'highlight': [
-						'highlight.js',
-					],
-				},
-			},
 		},
 	},
 }
diff --git a/yarn.lock b/yarn.lock
index d462c4605..b4c0adf7a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1785,6 +1785,11 @@
     "@vue/compiler-dom" "3.2.14"
     "@vue/shared" "3.2.14"
 
+"@vue/devtools-api@^6.0.0-beta.14":
+  version "6.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
+  integrity sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==
+
 "@vue/eslint-config-typescript@7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-7.0.0.tgz#220c70c2edf7a253e739298525f4d401b8ef0038"
@@ -6913,10 +6918,12 @@ vue-notification@1.3.20:
   resolved "https://registry.yarnpkg.com/vue-notification/-/vue-notification-1.3.20.tgz#d85618127763b46f3e25b8962b857947d5a97cbe"
   integrity sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==
 
-vue-router@3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
-  integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
+vue-router@4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed"
+  integrity sha512-sha6I8fx9HWtvTrFZfxZkiQQBpqSeT+UCwauYjkdOQYRvwsGwimlQQE2ayqUwuuXGzquFpCPoXzYKWlzL4OuXg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.14"
 
 vue-shortkey@3.1.7:
   version "3.1.7"