refactor: optimize reactivity with shallowRef and enhance map lifecycle management

Author: danhnguyen

libs/components/FillLayer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, inject, watch, computed, onUnmounted } from 'vue';
+import { inject, watch, computed, onUnmounted, shallowRef } from 'vue';
 import {
   MapProvideKey,
   SourceProvideKey,
@@ -93,8 +93,8 @@ const props = withDefaults(defineProps<Partial<LayerProps>>(), {
 const emits = defineEmits<Emits>();
 
 // Injected dependencies
-const sourceData = inject(SourceProvideKey, ref(null));
-const mapInstance = inject(MapProvideKey, ref(null));
+const sourceData = inject(SourceProvideKey, shallowRef(null));
+const mapInstance = inject(MapProvideKey, shallowRef(null));
 
 // Computed properties for better performance and reactivity
 const effectiveSource = computed(() => props.source || sourceData.value);

libs/components/GeoJsonSource.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, ref, provide, computed, onUnmounted } from 'vue';
+import { inject, ref, provide, computed, onUnmounted, shallowRef } from 'vue';
 import { MapProvideKey, SourceProvideKey } from '@libs/enums';
 import {
   useCreateGeoJsonSource,
@@ -62,9 +62,9 @@ const emits = defineEmits<Emits>();
 const { logError } = useLogger(props.debug);
 
 // Reactive state management
-const mapInstance = inject(MapProvideKey, ref(null));
+const mapInstance = inject(MapProvideKey, shallowRef(null));
 const isSourceRegistered = ref(false);
-const lastDataUpdate = ref<GeoJSONSourceSpecification['data']>();
+const lastDataUpdate = shallowRef<GeoJSONSourceSpecification['data']>();
 
 // Computed properties for better reactivity and performance
 const isDataValid = computed(() => {

libs/components/GeolocateControls.vue

@@ -1,5 +1,12 @@
 <script lang="ts" setup>
-import { inject, ref, watchEffect, computed, onUnmounted } from 'vue';
+import {
+  inject,
+  ref,
+  watchEffect,
+  computed,
+  onUnmounted,
+  shallowRef,
+} from 'vue';
 import { MapProvideKey, GeolocateEvents } from '@libs/enums';
 import {
   useGeolocateControl,
@@ -66,7 +73,7 @@ const emits = defineEmits<Emits>();
 const { logError } = useLogger(props.debug);
 
 // Reactive state management
-const mapInstance = inject(MapProvideKey, ref(null));
+const mapInstance = inject(MapProvideKey, shallowRef(null));
 const isControlRegistered = ref(false);
 const controlError = ref<any>(null);
 

libs/components/Mapbox.vue

@@ -9,6 +9,7 @@ import {
   onBeforeMount,
   onUnmounted,
   watchEffect,
+  shallowRef,
 } from 'vue';
 import { MapProvideKey, MapboxEvents, MapCreationStatus } from '@libs/enums';
 import {
@@ -146,7 +147,7 @@ const { logError } = useLogger(props.debug);
 
 // Reactive state management
 const innerOptions = ref<Partial<MapOptions>>();
-const maplibreElRef = ref<HTMLElement>();
+const mapContainerRef = shallowRef<HTMLElement | null>(null);
 const styleRef = ref(props.options.style as string);
 
 const isComponentMounted = ref(false);
@@ -159,12 +160,6 @@ const mapOptions = useOptimizedComputed(
   () => {
     const baseOptions = { ...props.options };
     const mergedOptions = { ...baseOptions, ...innerOptions.value };
-
-    // Ensure container is properly set
-    if (!mergedOptions.container) {
-      mergedOptions.container = props.containerId;
-    }
-
     return mergedOptions;
   },
   {
@@ -197,37 +192,6 @@ function setMapOptions(options: Partial<MapOptions>): void {
   }
 }
 
-/**
- * Enhanced container creation with error handling and validation
- */
-function createMapContainer(): HTMLElement | null {
-  try {
-    const wrapper = document.getElementById('maplibre_container');
-    if (!wrapper) {
-      logError('Map container wrapper not found');
-      return null;
-    }
-
-    // Remove existing container if present
-    const existingContainer = document.getElementById(props.containerId);
-    if (existingContainer) {
-      existingContainer.remove();
-    }
-
-    const container = document.createElement('div');
-    container.id = props.containerId;
-    container.className = props.containerClass;
-    container.style.width = '100%';
-    container.style.height = '100%';
-
-    wrapper.appendChild(container);
-    return container;
-  } catch (error) {
-    logError('Error creating map container:', error);
-    return null;
-  }
-}
-
 // Enhanced map creation with comprehensive error handling and performance monitoring
 const {
   mapInstance,
@@ -243,7 +207,7 @@ const {
   setMinPitch,
   setMinZoom,
   setRenderWorldCopies,
-} = useCreateMapbox(maplibreElRef, styleRef, {
+} = useCreateMapbox(mapContainerRef, styleRef, {
   ...unref(mapOptions),
   register: (actions: CreateMaplibreActions) => {
     try {
@@ -367,14 +331,12 @@ watchEffect(async () => {
   try {
     await nextTick();
 
-    const container = createMapContainer();
-    if (container) {
-      maplibreElRef.value = container;
+    if (mapContainerRef.value) {
       isComponentMounted.value = true;
       mapCreationStatus.value = MapCreationStatus.Initializing;
     } else {
-      logError('Failed to create map container');
-      mapCreationStatus.value = MapCreationStatus.Error;
+      // Wait for next tick if container is not ready yet
+      return;
     }
   } catch (error) {
     logError('Error in container creation watchEffect:', error);
@@ -389,9 +351,6 @@ function cleanup(): void {
     // Stop all watchers
     watchers.forEach((stopWatcher) => stopWatcher?.());
 
-    // Remove container
-    maplibreElRef.value?.remove();
-
     // Reset state
     isComponentMounted.value = false;
     mapCreationStatus.value = MapCreationStatus.Destroyed;
@@ -414,7 +373,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div id="maplibre_container">
+  <div
+    :id="containerId"
+    ref="mapContainerRef"
+    :class="['maplibre-container', containerClass]"
+  >
     <!-- Loading state -->
     <div v-if="isMapLoading">
       <slot name="loading"> </slot>
@@ -437,9 +400,4 @@ onUnmounted(() => {
   height: 100%;
   overflow: hidden;
 }
-
-// Legacy support
-#maplibre_container {
-  @extend .maplibre-container;
-}
 </style>

libs/components/Marker.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, ref, useSlots, watch, computed } from 'vue';
+import { inject, ref, useSlots, watch, computed, shallowRef } from 'vue';
 import { MapProvideKey } from '@libs/enums';
 import { useCreateMarker } from '@libs/composables';
 import type { Anchor } from '@libs/types';
@@ -71,7 +71,7 @@ const emits = defineEmits<Emits>();
 const slots = useSlots();
 
 // Injected dependencies
-const mapInstance = inject(MapProvideKey, ref(null));
+const mapInstance = inject(MapProvideKey, shallowRef(null));
 const markerElRef = ref<HTMLElement>();
 
 // Computed properties for better performance

libs/components/Popup.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, ref, watch, computed } from 'vue';
+import { inject, ref, watch, computed, shallowRef } from 'vue';
 import { MapProvideKey } from '@libs/enums';
 import { useCreatePopup } from '@libs/composables';
 import type { LngLatLike, PopupOptions } from 'maplibre-gl';
@@ -57,7 +57,7 @@ const props = withDefaults(defineProps<Partial<PopupProps>>(), {
 const emits = defineEmits<Emits>();
 
 // Injected dependencies
-const mapInstance = inject(MapProvideKey, ref(null));
+const mapInstance = inject(MapProvideKey, shallowRef(null));
 const popupElRef = ref<HTMLElement>();
 
 // Computed properties for better performance

libs/composables/map/useCreateMapbox.ts

@@ -52,7 +52,7 @@ interface SimplifiedCreateMaplibreActions extends CreateMaplibreActions {
  * @returns Enhanced actions and state for map management
  */
 export function useCreateMapbox(
-  elRef: MaybeRef<HTMLElement | undefined>,
+  elRef: MaybeRef<HTMLElement | undefined | null>,
   styleRef: MaybeRef<StyleSpecification | string>,
   props: Omit<CreateMapboxProps, 'container' | 'style'> = {},
 ) {
@@ -64,9 +64,10 @@ export function useCreateMapbox(
   const mapCreationStatus = ref<MapCreationStatus>(
     MapCreationStatus.NotInitialized,
   );
-  const mapOptions = ref<Omit<MapOptions, 'container' | 'style'>>(options);
+  const mapOptions =
+    shallowRef<Omit<MapOptions, 'container' | 'style'>>(options);
   const retryCount = ref<number>(0);
-  const currentStyle = ref<StyleSpecification | string | null>(null);
+  const currentStyle = shallowRef<StyleSpecification | string | null>(null);
 
   // Computed properties for better reactivity and performance
   const mapInstanceComputed = computed(() => mapInstance.value);
@@ -135,7 +136,7 @@ export function useCreateMapbox(
     const style = unref(styleRef);
 
     if (!el) {
-      mapCreationStatus.value = MapCreationStatus.Error;
+      // Don't set error here, just wait for element to be available
       return;
     }
 
@@ -144,6 +145,9 @@ export function useCreateMapbox(
       return;
     }
 
+    // Prevent double initialization
+    if (mapInstance.value) return;
+
     mapCreationStatus.value = MapCreationStatus.Initializing;
 
     try {
@@ -236,7 +240,11 @@ export function useCreateMapbox(
 
     try {
       mapInstance.value!.setCenter(centerVal);
-      mapOptions.value.center = centerVal;
+      // Update local state but avoid triggering watchers if possible
+      const currentOpts = mapOptions.value;
+      if (currentOpts.center !== centerVal) {
+        mapOptions.value.center = centerVal;
+      }
     } catch (error) {
       logError('Error setting map center:', error, { center: centerVal });
     }
@@ -458,15 +466,17 @@ export function useCreateMapbox(
 
   // Watch effect for automatic map initialization
   const stopWatchEffect = watchEffect(() => {
-    removeMap();
-    if (!unref(mapInstance) && unref(elRef)) {
+    const el = unref(elRef);
+    if (el && !mapInstance.value) {
       initMap();
-      stopWatchEffect();
+    } else if (!el && mapInstance.value) {
+      removeMap();
     }
   });
 
   // Cleanup on unmount
   onUnmounted(() => {
+    stopWatchEffect();
     destroyMap();
   });
 

libs/composables/map/useGeoJsonSource.ts

@@ -59,7 +59,7 @@ export function useGeoJsonSource(
   const { logError } = useLogger(debug);
 
   // State management with better typing and performance
-  const instanceRef = ref<CreateGeoJsonSourceActions>();
+  const instanceRef = shallowRef<CreateGeoJsonSourceActions>();
   const sourceRef = shallowRef<Nullable<GeoJSONSource>>(null);
   const sourceIdRef = ref<string>();
   const sourceStatus = ref<GeoJsonSourceStatus>(

libs/composables/map/useLayer.ts

@@ -77,7 +77,7 @@ export function useLayer<T extends LayerSpecification>(
   const { debug = false, autoCleanup = true } = props;
   const { logError } = useLogger(debug);
 
-  const instanceRef = ref<CreateLayerActions<T>>();
+  const instanceRef = shallowRef<CreateLayerActions<T>>();
   const layerStatus = ref<LayerManagementStatus>(
     LayerManagementStatus.NotRegistered,
   );