components: MiniWidgetInstantiator: Move to AsyncComponentLoader

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>

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,14 @@ 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>