fix(v3): remove undefined instances and fix watchers

Solve: #318 #319
diegoazh · Apr 24, 2024 · 000f1ef · 000f1ef
1 parent 0ff83fe
commit 000f1ef
Show file tree

Hide file tree

Showing 15 changed files with 368 additions and 312 deletions.
diff --git a/packages/v3/src/components/autocomplete-input.vue b/packages/v3/src/components/autocomplete-input.vue
@@ -91,7 +91,6 @@ const emits = defineEmits<{
  ******************************************************************************/
 defineOptions({ inheritAttrs: false, name: 'autocomplete-input' });
 const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.();
-let autocompleteInstance: google.maps.places.Autocomplete | undefined;
 
 /*******************************************************************************
  * PROVIDE
@@ -115,9 +114,15 @@ provide(props.autocompleteKey || $autocompletePromise, promise);
  ******************************************************************************/
 watch(
   () => props.componentRestrictions,
-  (newValue, oldValue) => {
+  async (newValue, oldValue) => {
+    const autocomplete = await promise;
+
+    if (!autocomplete) {
+      return console.error('the autocomplete instance is not defined');
+    }
+
     if (newValue && newValue !== oldValue) {
-      autocompleteInstance?.setComponentRestrictions(newValue);
+      autocomplete.setComponentRestrictions(newValue);
     }
   },
 );
@@ -159,7 +164,7 @@ onMounted(() => {
         );
       }
 
-      autocompleteInstance = new Autocomplete(scopedInput, autocompleteOptions);
+      const autocomplete = new Autocomplete(scopedInput, autocompleteOptions);
 
       const autocompletePropsConfig =
         getComponentPropsConfig('GmvAutocomplete');
@@ -170,43 +175,43 @@ onMounted(() => {
 
       bindPropsWithGoogleMapsSettersAndGettersOnSetup(
         autocompletePropsConfig,
-        autocompleteInstance,
+        autocomplete,
         emits as any,
         props,
       );
 
       bindGoogleMapsEventsToVueEventsOnSetup(
         autocompleteEventsConfig,
-        autocompleteInstance,
+        autocomplete,
         emits as any,
         excludedEvents,
       );
 
       if (props.setFieldsTo) {
-        autocompleteInstance.setFields(props.setFieldsTo);
+        autocomplete.setFields(props.setFieldsTo);
       }
 
       /**
        * Not using `bindEvents` because we also want
        * to return the result of `getPlace()`
        */
-      autocompleteInstance.addListener('place_changed', () => {
-        if (autocompleteInstance) {
+      autocomplete.addListener('place_changed', () => {
+        if (autocomplete) {
           /**
            * Place change event
            * @event place_changed
            * @property {object} place `this.$autocomplete.getPlace()`
            * @see [Get place information](https://developers.google.com/maps/documentation/javascript/places-autocomplete#get-place-information)
            */
-          emits('place_changed', autocompleteInstance.getPlace());
+          emits('place_changed', autocomplete.getPlace());
         }
       });
 
       if (!autocompletePromiseDeferred.resolve) {
         throw new Error('autocompletePromiseDeferred.resolve is undefined');
       }
 
-      autocompletePromiseDeferred.resolve(autocompleteInstance);
+      autocompletePromiseDeferred.resolve(autocomplete);
     })
     .catch((error) => {
       throw error;

diff --git a/packages/v3/src/components/circle-shape.vue b/packages/v3/src/components/circle-shape.vue
@@ -99,12 +99,11 @@ provide(props.circleKey || $circleShapePromise, promise);
  ******************************************************************************/
 defineOptions({ name: 'circle-shape' });
 const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.();
-let circleShapeInstance: google.maps.Circle | undefined;
 
 mapPromise
   ?.then(async (mapInstance) => {
     if (!mapInstance) {
-      throw new Error('The map instance was not created');
+      throw new Error('The map instance is not defined');
     }
 
     const circleShapeOptions: ICircleShapeVueComponentProps & {
@@ -119,7 +118,7 @@ mapPromise
     const { Circle } = (await google.maps.importLibrary(
       'maps',
     )) as google.maps.MapsLibrary;
-    circleShapeInstance = new Circle(circleShapeOptions);
+    const circleShape = new Circle(circleShapeOptions);
 
     const circleShapePropsConfig = getComponentPropsConfig('GmvCircle');
     const circleShapeEventsConfig = getComponentEventsConfig(
@@ -129,13 +128,13 @@ mapPromise
 
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       circleShapePropsConfig,
-      circleShapeInstance,
+      circleShape,
       emits as any,
       props,
     );
     bindGoogleMapsEventsToVueEventsOnSetup(
       circleShapeEventsConfig,
-      circleShapeInstance,
+      circleShape,
       emits as any,
       excludedEvents,
     );
@@ -144,7 +143,7 @@ mapPromise
       throw new Error('circlePromiseDeferred.resolve is undefined');
     }
 
-    circlePromiseDeferred.resolve(circleShapeInstance);
+    circlePromiseDeferred.resolve(circleShape);
   })
   .catch((error) => {
     throw error;
@@ -165,9 +164,11 @@ mapPromise
 /*******************************************************************************
  * HOOKS
  ******************************************************************************/
-onUnmounted(() => {
-  if (circleShapeInstance) {
-    circleShapeInstance.setMap(null);
+onUnmounted(async () => {
+  const circleShape = await promise;
+
+  if (circleShape) {
+    circleShape.setMap(null);
   }
 
   useDestroyPromisesOnUnmounted(props.circleKey || $circleShapePromise);

diff --git a/packages/v3/src/components/cluster-icon.vue b/packages/v3/src/components/cluster-icon.vue
@@ -97,11 +97,10 @@ provide(props?.clusterKey || $clusterPromise, promise);
  ******************************************************************************/
 defineOptions({ name: 'cluster-icon' });
 const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.();
-let clusterInstance: MarkerClusterer | undefined;
 mapPromise
   ?.then((mapInstance) => {
     if (!mapInstance) {
-      throw new Error('the map instance was not created');
+      throw new Error('the map instance is not defined');
     }
 
     // Initialize the maps with the given options
@@ -121,7 +120,7 @@ mapPromise
       );
     }
 
-    clusterInstance = new MarkerClusterer({
+    const cluster = new MarkerClusterer({
       map: mapInstance,
       markers,
       onClusterClick,
@@ -137,14 +136,14 @@ mapPromise
 
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       clusterIconPropsConfig,
-      clusterInstance,
+      cluster,
       emits as any,
       props,
     );
 
     bindGoogleMapsEventsToVueEventsOnSetup(
       clusterIconEventsConfig,
-      clusterInstance,
+      cluster,
       emits as any,
       excludedEvents,
     );
@@ -153,7 +152,7 @@ mapPromise
       throw new Error('clusterPromiseDeferred.resolve is undefined');
     }
 
-    clusterPromiseDeferred.resolve(clusterInstance);
+    clusterPromiseDeferred.resolve(cluster);
   })
   .catch((error) => {
     throw error;
@@ -174,23 +173,29 @@ mapPromise
 /*******************************************************************************
  * HOOKS
  ******************************************************************************/
-onBeforeUnmount(() => {
-  if (clusterInstance) {
-    clusterInstance.clearMarkers();
+onBeforeUnmount(async () => {
+  const cluster = await promise;
+
+  if (cluster) {
+    cluster.clearMarkers();
   }
 });
 
-onUnmounted(() => {
-  if (clusterInstance) {
-    clusterInstance.setMap(null);
+onUnmounted(async () => {
+  const cluster = await promise;
+
+  if (cluster) {
+    cluster.setMap(null);
   }
 
   useDestroyPromisesOnUnmounted(props.clusterKey || $clusterPromise);
 });
 
-onUpdated(() => {
-  if (clusterInstance) {
-    clusterInstance.render();
+onUpdated(async () => {
+  const cluster = await promise;
+
+  if (cluster) {
+    cluster.render();
   }
 });