refactor(App): extract common component tree

Signed-off-by: Fernando Fernández <[email protected]>
jellyfin · May 8, 2024 · 3264021 · 3264021
1 parent 231ddd8
commit 3264021
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -7,27 +7,17 @@
           :name="route.meta.layout.transition.enter ?? defaultTransition"
           :mode="defaultTransitionMode ?? route.meta.layout.transition.mode">
           <Suspense @resolve="apploaded = true">
-            <div
+            <AppComp
               :key="route.meta.layout.name ?? 'default'"
-              class="uno-h-full j-transition">
-              <component
-                :is="getLayoutComponent(route.meta.layout.name)"
-                :key="route.meta.layout.name ?? 'default'">
+              :comp="getLayoutComponent(route.meta.layout.name)">
                 <JTransition
                   :name="route.meta.layout.transition.enter ?? defaultTransition"
                   :mode="defaultTransitionMode ?? route.meta.layout.transition.mode">
                   <Suspense suspensible>
-                    <div
-                      :key="route.name ?? route.path"
-                      class="uno-h-full j-transition">
-                      <component
-                        :is="Component"
-                        :key="route.name ?? route.path" />
-                    </div>
+                    <AppComp :key="route.path" :comp="Component" />
                   </Suspense>
                 </JTransition>
-              </component>
-            </div>
+            </AppComp>
             <template v-if="!apploaded" #fallback>
               <JSplashscreen />
             </template>
@@ -50,6 +40,7 @@ import type { RouteMeta } from 'vue-router/auto';
 import DefaultLayout from '@/layouts/default.vue';
 import FullPageLayout from '@/layouts/fullpage.vue';
 import ServerLayout from '@/layouts/server.vue';
+import AppComp from '@/AppComp.vue';
 
 const apploaded = shallowRef(false);
 const defaultTransition = 'slide-x-reverse';

diff --git a/frontend/src/AppComp.vue b/frontend/src/AppComp.vue
@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="uno-h-full j-transition">
+      <component
+        :is="comp">
+        <slot />
+      </component>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+defineProps<{
+  comp: Component;
+}>();
+</script>