From 8302124dc4b3d86e2e44a43062f91228e2184258 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Jos=C3=A9=20Pereira?= <patrickelectric@gmail.com>
Date: Wed, 27 Mar 2024 09:18:08 -0300
Subject: [PATCH 1/2] components: MiniWidgetInstantiator: Move to
 AsyncComponentLoader
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/components/MiniWidgetInstantiator.vue | 70 +++++------------------
 1 file changed, 15 insertions(+), 55 deletions(-)

diff --git a/src/components/MiniWidgetInstantiator.vue b/src/components/MiniWidgetInstantiator.vue
index 028363dd8..a1a936dde 100644
--- a/src/components/MiniWidgetInstantiator.vue
+++ b/src/components/MiniWidgetInstantiator.vue
@@ -1,63 +1,11 @@
 <template>
-  <template v-if="miniWidget.component === MiniWidgetType.RelativeAltitudeIndicator">
-    <RelativeAltitudeIndicator :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.ChangeAltitudeCommander">
-    <ChangeAltitudeCommander :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.TakeoffLandCommander">
-    <TakeoffLandCommander :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.ArmerButton">
-    <ArmerButton :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.BaseCommIndicator">
-    <BaseCommIndicator :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.BatteryIndicator">
-    <BatteryIndicator :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.DepthIndicator">
-    <DepthIndicator :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.VeryGenericIndicator">
-    <VeryGenericIndicator :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.JoystickCommIndicator">
-    <JoystickCommIndicator :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.MiniVideoRecorder">
-    <MiniVideoRecorder :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.ModeSelector">
-    <ModeSelector :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.SatelliteIndicator">
-    <SatelliteIndicator :mini-widget="miniWidget" />
-  </template>
-  <template v-if="miniWidget.component === MiniWidgetType.ViewSelector">
-    <ViewSelector :mini-widget="miniWidget" />
-  </template>
+  <component :is="componentFromType(miniWidget.component)" :mini-widget="miniWidget" />
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { type AsyncComponentLoader, defineAsyncComponent, toRefs } from 'vue'
 
-import { type MiniWidget, MiniWidgetType } from '@/types/miniWidgets'
-
-import ArmerButton from './mini-widgets/ArmerButton.vue'
-import BaseCommIndicator from './mini-widgets/BaseCommIndicator.vue'
-import BatteryIndicator from './mini-widgets/BatteryIndicator.vue'
-import ChangeAltitudeCommander from './mini-widgets/ChangeAltitudeCommander.vue'
-import DepthIndicator from './mini-widgets/DepthIndicator.vue'
-import JoystickCommIndicator from './mini-widgets/JoystickCommIndicator.vue'
-import MiniVideoRecorder from './mini-widgets/MiniVideoRecorder.vue'
-import ModeSelector from './mini-widgets/ModeSelector.vue'
-import RelativeAltitudeIndicator from './mini-widgets/RelativeAltitudeIndicator.vue'
-import SatelliteIndicator from './mini-widgets/SatelliteIndicator.vue'
-import TakeoffLandCommander from './mini-widgets/TakeoffLandCommander.vue'
-import VeryGenericIndicator from './mini-widgets/VeryGenericIndicator.vue'
-import ViewSelector from './mini-widgets/ViewSelector.vue'
+import type { MiniWidget, MiniWidgetType } from '@/types/miniWidgets'
 
 const props = defineProps<{
   /**
@@ -67,4 +15,16 @@ const props = defineProps<{
 }>()
 
 const miniWidget = toRefs(props).miniWidget
+
+const componentCache: Record<string, AsyncComponentLoader> = {}
+
+const componentFromType = (componentType: MiniWidgetType): AsyncComponentLoader => {
+  if (componentCache[componentType] === undefined) {
+    componentCache[componentType] = defineAsyncComponent(
+      () => import(`../components/mini-widgets/${componentType}.vue`)
+    )
+  }
+
+  return componentCache[componentType]
+}
 </script>

From 3a0680a1fa1b1f5294b5859660550bea476ccdaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Jos=C3=A9=20Pereira?= <patrickelectric@gmail.com>
Date: Wed, 27 Mar 2024 09:30:52 -0300
Subject: [PATCH 2/2] tests: widgets-loader: Update to add mini-widgets 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/tests/libs/widgets-loader.test.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/tests/libs/widgets-loader.test.ts b/src/tests/libs/widgets-loader.test.ts
index cdcf83c59..a15671ee1 100644
--- a/src/tests/libs/widgets-loader.test.ts
+++ b/src/tests/libs/widgets-loader.test.ts
@@ -1,10 +1,25 @@
 import { expect, test } from 'vitest'
 
+import { MiniWidgetType } from '@/types/miniWidgets'
 import { WidgetType } from '@/types/widgets'
 
 test('Test widgets exist', async () => {
+  await enum_to_files_checker(WidgetType, '@/components/widgets/${name}.vue')
+})
+
+test('Test mini-widgets exist', async () => {
+  await enum_to_files_checker(MiniWidgetType, '@/components/mini-widgets/${name}.vue')
+})
+
+/**
+ * Test helper to verify if all enums names matches with a file list in a path
+ * @param {T} enum_type Enum type with values as filenames
+ * @param {string} path_template Path template as string, where name should be used as filename
+ */
+async function enum_to_files_checker<T>(enum_type: T, path_template: string): Promise<void> {
   const loader = await Promise.allSettled(
-    Object.values(WidgetType).map((name) => import(`@/components/widgets/${name}.vue`))
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    Object.values(enum_type).map((name) => import(eval('`' + path_template + '`'))) // Please, have marcy of my soul
   )
   const found_all_files = loader.every((file) => {
     if (file.status == 'fulfilled') {
@@ -17,4 +32,4 @@ test('Test widgets exist', async () => {
     return !failed_to_find
   })
   expect(found_all_files).toBe(true)
-})
+}