Replaced vue-portal with Teleports.

Refs #156
The4thLaw · Mar 26, 2024 · 1c5d92b · 1c5d92b
1 parent 8361e55
commit 1c5d92b
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 36 deletions.
diff --git a/source/demyo-vue-frontend/package-lock.json b/source/demyo-vue-frontend/package-lock.json
diff --git a/source/demyo-vue-frontend/package.json b/source/demyo-vue-frontend/package.json
@@ -26,7 +26,6 @@
     "filepond-plugin-image-preview": "^4.6.11",
     "lodash": "^4.17.20",
     "pinia": "^2.1.7",
-    "portal-vue": "^3.0.0",
     "roboto-fontface": "^0.10.0",
     "tiny-async-pool": "^2.1.0",
     "vue": "^3.4.21",

diff --git a/source/demyo-vue-frontend/src/components/AppTasks.vue b/source/demyo-vue-frontend/src/components/AppTasks.vue
@@ -1,5 +1,5 @@
 <template>
-	<portal to="appTasks">
+	<Teleport to="#teleport-appTasks">
 		<v-menu v-model="inputVal">
 			<template #activator="{ props }">
 				<v-btn variant="text" icon="mdi-dots-vertical" v-bind="props" />
@@ -8,7 +8,7 @@
 				<slot />
 			</v-list>
 		</v-menu>
-	</portal>
+	</Teleport>
 </template>
 
 <script>

diff --git a/source/demyo-vue-frontend/src/layouts/DefaultLayout.vue b/source/demyo-vue-frontend/src/layouts/DefaultLayout.vue
@@ -6,7 +6,7 @@
 			width="33vw" mobile-breakpoint="sm"
 			:disable-resize-watcher="true"
 		>
-			<portal-target name="appSidePane" />
+			<div id="teleport-appSidePane" />
 		</v-navigation-drawer>
 
 		<!-- Once https://github.com/vuetifyjs/vuetify/issues/16150 is resolved, switch back to 20em -->
@@ -94,15 +94,15 @@
 					</div>
 				</v-expand-x-transition>
 			</template>
-			<portal-target name="appBarAddons" />
-			<portal-target name="appTasks" />
+			<div id="teleport-appBarAddons" />
+			<div id="teleport-appTasks" />
 		</v-app-bar>
 
 		<v-main id="l-DefaultLayout__mainContent">
 			<!-- First part of the details pane management -->
 			<v-dialog v-if="$vuetify.display.smAndDown" v-model="displayDetailsPane">
 				<v-card>
-					<portal-target name="appSidePane" />
+					<div id="teleport-appSidePane" />
 				</v-card>
 			</v-dialog>
 			<v-container id="l-DefaultLayout__mainContainer" fluid>

diff --git a/source/demyo-vue-frontend/src/main.js b/source/demyo-vue-frontend/src/main.js
@@ -1,5 +1,4 @@
 import '@mdi/font/css/materialdesignicons.css'
-import portalVue from 'portal-vue'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import { createApp } from 'vue'
 // From https://gitlab.com/totol.toolsuite/vue-3-fullscreen-image
@@ -27,8 +26,6 @@ app.mixin({
 
 app.use(router)
 app.use(i18n)
-// TODO: Vue 3: migrate to teleport (?)
-app.use(portalVue)
 app.use(vuetify)
 app.use(fullscreenImagePlugin)
 

diff --git a/source/demyo-vue-frontend/src/pages/albums/AlbumView.vue b/source/demyo-vue-frontend/src/pages/albums/AlbumView.vue
@@ -1,8 +1,8 @@
 <template>
 	<v-container fluid>
-		<portal v-if="!loading" to="appBarAddons">
+		<Teleport v-if="!loading" to="#teleport-appBarAddons">
 			<FavouriteButton :model-id="album.id" type="Album" />
-		</portal>
+		</Teleport>
 
 		<AppTasks v-if="!loading" v-model="appTasksMenu">
 			<AppTask

diff --git a/source/demyo-vue-frontend/src/pages/series/SeriesView.vue b/source/demyo-vue-frontend/src/pages/series/SeriesView.vue
@@ -1,8 +1,8 @@
 <template>
 	<v-container fluid>
-		<portal v-if="!loading" to="appBarAddons">
+		<Teleport v-if="!loading" to="#teleport-appBarAddons">
 			<FavouriteButton :model-id="series.id" type="Series" />
-		</portal>
+		</Teleport>
 
 		<AppTasks v-if="!loading" v-model="appTasksMenu">
 			<AppTask
@@ -373,15 +373,14 @@ export default {
 				})
 			}
 
-			// This is intentionnally async
-			this.loadAlbums()
+			void this.loadAlbums()
 
 			this.derivativeCount = await dcPromise
 
 			if (this.albumCount === 0 && this.derivativeCount > 0) {
 				// If there are no albums but there are derivatives, load the derivatives
 				this.currentTab = 1
-				this.loadDerivatives()
+				void this.loadDerivatives()
 			}
 		},
 

diff --git a/source/demyo-vue-frontend/tests/unit/pages/albums/AlbumView.spec.js b/source/demyo-vue-frontend/tests/unit/pages/albums/AlbumView.spec.js
@@ -1,6 +1,5 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import PortalVue from 'portal-vue'
 import VueRouter from 'vue-router'
 
 jest.mock('@/i18n', () => ({
@@ -22,9 +21,9 @@ jest.mock('@/services/album-service', () => ({
 // eslint-disable-next-line import/first
 import AlbumView from '@/pages/albums/AlbumView.vue'
 
+// TODO: Vue 3: fix unit tests. See https://vitest.dev/guide/migration.html#migrating-from-jest maybe
 const localVue = createLocalVue()
 localVue.use(VueRouter)
-localVue.use(PortalVue)
 const router = new VueRouter()
 
 describe('FormActions.vue', () => {