From 2b807704f85ad4fff488ecea4061016de91ea4da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Jos=C3=A9=20Pereira?= <patrickelectric@gmail.com>
Date: Thu, 21 Mar 2024 22:21:00 -0300
Subject: [PATCH] views: WidgetsView: Use AsyncComponentLoader over if test
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>
---
 src/views/WidgetsView.vue | 69 ++++++++-------------------------------
 1 file changed, 13 insertions(+), 56 deletions(-)

diff --git a/src/views/WidgetsView.vue b/src/views/WidgetsView.vue
index 807bfdc47..dbf2e336c 100644
--- a/src/views/WidgetsView.vue
+++ b/src/views/WidgetsView.vue
@@ -9,41 +9,7 @@
           :allow-moving="widget.managerVars.allowMoving"
           :allow-resizing="store.editingMode"
         >
-          <template v-if="widget.component === WidgetType.Attitude">
-            <Attitude :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.Compass">
-            <Compass :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.DepthHUD">
-            <DepthHUD :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.CompassHUD">
-            <CompassHUD :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.IFrame">
-            <IFrame :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.ImageViewer">
-            <ImageView :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.Map">
-            <Map :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.MiniWidgetsBar">
-            <MiniWidgetsBar :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.URLVideoPlayer">
-            <URLVideoPlayer :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.VideoPlayer">
-            <VideoPlayer :widget="widget" />
-          </template>
-          <template v-if="widget.component === WidgetType.VirtualHorizon">
-            <VirtualHorizon :widget="widget" />
-          </template>
-          <!-- TODO: Use the line below instead of the 12 lines above -->
-          <!-- <component :is="componentFromType(widget.component)"></component> -->
+          <component :is="componentFromType(widget.component)" :widget="widget" />
         </WidgetHugger>
       </template>
       <div class="w-full h-full bg-slate-500" />
@@ -52,36 +18,27 @@
 </template>
 
 <script setup lang="ts">
-// import { type AsyncComponentLoader, defineAsyncComponent } from 'vue'
+import { type AsyncComponentLoader, defineAsyncComponent } from 'vue'
 
-import ImageView from '@/components/widgets/ImageView.vue'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { WidgetType } from '@/types/widgets'
 
 import SnappingGrid from '../components/SnappingGrid.vue'
 import WidgetHugger from '../components/WidgetHugger.vue'
-import Attitude from '../components/widgets/Attitude.vue'
-import Compass from '../components/widgets/Compass.vue'
-import CompassHUD from '../components/widgets/CompassHUD.vue'
-import DepthHUD from '../components/widgets/DepthHUD.vue'
-import IFrame from '../components/widgets/IFrame.vue'
-import Map from '../components/widgets/Map.vue'
-import MiniWidgetsBar from '../components/widgets/MiniWidgetsBar.vue'
-import URLVideoPlayer from '../components/widgets/URLVideoPlayer.vue'
-import VideoPlayer from '../components/widgets/VideoPlayer.vue'
-import VirtualHorizon from '../components/widgets/VirtualHorizon.vue'
 
 const store = useWidgetManagerStore()
 
-// TODO: Make this work
-// This function allows us to load any component without declaring it in the template, just
-// adding it to the WidgetType enum, but it's currently buggy as it re-mounts the component
-// anytime a HTML property of it is changes (when someone hovers the element, for example).
-// const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
-//   return defineAsyncComponent(
-//     () => import(`../components/widgets/${componentType}.vue`)
-//   )
-// }
+const componentCache: Record<string, AsyncComponentLoader> = {}
+
+const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
+  if (componentCache[componentType] === undefined) {
+    componentCache[componentType] = defineAsyncComponent(
+      () => import(`../components/widgets/${componentType}.vue`)
+    )
+  }
+
+  return componentCache[componentType]
+}
 </script>
 
 <style scoped>