fix(v3): change inject for composable to get component promise (#324)

* fix(v3): change inject for composable to get component promise

The inject key can only be used on descendants not in siblings. Composables on mounted hook are more accurate.

Solve: #323

* test(v3): update cluster test to use the new key feature

* chore(root): update package-manager y package.json and gh workflows

.github/workflows/documentation.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           node-version: 20
       - name: Install pnpm
-        run: npm install --location=global pnpm
+        run: npm install --location=global pnpm@9.0.6
       - name: Remove pnpm-workspace.yaml
         run: rm -rf ./pnpm-workspace.yaml
       - name: Install dependencies

.github/workflows/publish.yml

@@ -23,7 +23,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install pnpm
-        run: npm install -g pnpm
+        run: npm install -g pnpm@9.0.6
       - name: Install dependencies
         run: pnpm install
       - name: Create env file

package.json

@@ -5,7 +5,7 @@
   "repository": "git@github.com:diegoazh/gmap-vue.git",
   "author": "\"Daniel Sim, Guillaume Leclerc\",",
   "license": "MIT",
-  "packageManager": "pnpm@9.0.5",
+  "packageManager": "pnpm@9.0.6",
   "scripts": {
     "serve:docs": "pnpm run --filter docs start",
     "build:all": "pnpm run --recursive build",

packages/v3/cypress/runner/components/ClusterTest.vue

@@ -6,13 +6,15 @@
       style="width: 100%; height: 500px"
       mapId="DEMO_MAP_ID"
     >
-      <gmv-cluster>
+      <gmv-cluster clusterKey="myCluster">
         <gmv-marker
           v-for="(m, index) in markers"
           :key="index"
           :clickable="true"
           :draggable="true"
           :position="m.position"
+          :marker-key="`marker-${index}`"
+          clusterKey="myCluster"
           @click="center = m.position"
         ></gmv-marker>
       </gmv-cluster>

packages/v3/src/components/info-window.vue

@@ -18,11 +18,12 @@ import {
   getPropsValuesWithoutOptionsProp,
   useComponentPromiseFactory,
   useDestroyPromisesOnUnmounted,
+  useMarkerPromise,
   usePluginOptions,
 } from '@/composables';
 import type { IInfoWindowVueComponentProps } from '@/interfaces';
 import { $infoWindowPromise } from '@/keys';
-import { inject, onMounted, provide, ref, watch } from 'vue';
+import { computed, inject, onMounted, provide, ref, watch } from 'vue';
 
 /**
  * InfoWindow component
@@ -80,12 +81,6 @@ const mapPromise = props.mapKey
       google.maps.Map | undefined
     >);
 
-const markerPromise = props.markerKey
-  ? inject<Promise<google.maps.marker.AdvancedMarkerElement | undefined>>(
-      props.markerKey,
-    )
-  : undefined;
-
 if (!mapPromise) {
   throw new Error('The map promise was not built');
 }
@@ -102,16 +97,17 @@ provide(props.infoWindowKey || $infoWindowPromise, promise);
  ******************************************************************************/
 defineOptions({ name: 'info-window' });
 const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.();
-let map: google.maps.Map | undefined;
-let markerOwner: google.maps.marker.AdvancedMarkerElement | undefined;
+let rawMap: google.maps.Map | undefined;
+let rawMarkerOwner: google.maps.marker.AdvancedMarkerElement | undefined;
 mapPromise
   ?.then(async (mapInstance) => {
     if (!mapInstance) {
       throw new Error('the map instance is not defined');
     }
 
-    map = mapInstance;
+    rawMap = mapInstance;
 
+    const markerPromise = useMarkerPromise(props.markerKey);
     const infoWindowOptions: Partial<IInfoWindowVueComponentProps> & {
       map: google.maps.Map | undefined;
       [key: string]: any;
@@ -123,14 +119,14 @@ mapPromise
 
     if (markerPromise) {
       markerPromise.then((markerInstance) => {
-        markerOwner = markerInstance;
+        rawMarkerOwner = markerInstance;
       });
     }
 
     const { InfoWindow } = (await google.maps.importLibrary(
       'maps',
     )) as google.maps.MapsLibrary;
-    const infoWindowInstance = new InfoWindow({
+    const infoWindow = new InfoWindow({
       ...infoWindowOptions,
       content: gmvInfoWindow.value,
     });
@@ -143,14 +139,14 @@ mapPromise
 
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       infoWindowPropsConfig,
-      infoWindowInstance,
+      infoWindow,
       emits as any,
       props,
     );
 
     bindGoogleMapsEventsToVueEventsOnSetup(
       infoWindowEventsConfig,
-      infoWindowInstance,
+      infoWindow,
       emits as any,
       excludedEvents,
     );
@@ -161,7 +157,7 @@ mapPromise
       throw new Error('infoWindowPromiseDeferred.resolve is undefined');
     }
 
-    infoWindowPromiseDeferred.resolve(infoWindowInstance);
+    infoWindowPromiseDeferred.resolve(infoWindow);
   })
   .catch((error) => {
     throw error;
@@ -170,6 +166,8 @@ mapPromise
 /*******************************************************************************
  * COMPUTED
  ******************************************************************************/
+const map = computed(() => rawMap);
+const markerOwner = computed(() => rawMarkerOwner);
 
 /*******************************************************************************
  * METHODS
@@ -178,16 +176,16 @@ const openInfoWindow = async (): Promise<void> => {
   const infoWindow = await promise;
 
   if (!infoWindow) {
-    return console.error('the info window is not defined');
+    return console.error('the info window instance is not defined');
   }
 
   if (props.opened) {
-    if (markerOwner) {
-      infoWindow.open(map, markerOwner);
+    if (markerOwner.value) {
+      infoWindow.open(map.value, markerOwner.value);
     } else if (props.marker) {
-      infoWindow.open(map, props.marker);
+      infoWindow.open(map.value, props.marker);
     } else {
-      infoWindow.open(map);
+      infoWindow.open(map.value);
     }
   } else {
     infoWindow.close();

packages/v3/src/components/marker-icon.vue

@@ -6,14 +6,15 @@ import {
   getComponentEventsConfig,
   getComponentPropsConfig,
   getPropsValuesWithoutOptionsProp,
+  useClusterPromise,
   useComponentPromiseFactory,
   useDestroyPromisesOnUnmounted,
   usePluginOptions,
 } from '@/composables';
 import type { IMarkerIconVueComponentProps } from '@/interfaces';
 import { $markerPromise } from '@/keys';
 import type { MarkerClusterer } from '@googlemaps/markerclusterer';
-import { h, inject, onUnmounted, provide, useSlots } from 'vue';
+import { computed, h, inject, onUnmounted, provide, useSlots } from 'vue';
 
 /**
  * Marker component
@@ -72,20 +73,20 @@ const mapPromise = props.mapKey
       google.maps.Map | undefined
     >);
 
-const clusterPromise = props.clusterKey
-  ? inject<Promise<MarkerClusterer | undefined>>(props.clusterKey)
-  : (findParentInstanceByName('cluster-icon')?.exposed
-      ?.clusterPromise as Promise<MarkerClusterer | undefined>);
-
-let clusterOwner: MarkerClusterer | undefined;
-
 if (!mapPromise) {
   throw new Error('The map promise was not built');
 }
 
+const clusterPromise = props.clusterKey
+  ? useClusterPromise(props.clusterKey)
+  : (findParentInstanceByName('cluster-icon')?.exposed?.clusterPromise as
+      | Promise<MarkerClusterer | undefined>
+      | undefined);
+
 /*******************************************************************************
  * PROVIDE
  ******************************************************************************/
+let rawClusterOwner: MarkerClusterer | undefined;
 const { promiseDeferred: markerPromiseDeferred, promise } =
   useComponentPromiseFactory(props.markerKey || $markerPromise);
 provide(props.markerKey || $markerPromise, promise);
@@ -163,7 +164,7 @@ mapPromise
     if (clusterPromise) {
       clusterPromise.then((clusterInstance) => {
         clusterInstance?.addMarker(marker);
-        clusterOwner = clusterInstance;
+        rawClusterOwner = clusterInstance;
       });
     }
 
@@ -180,6 +181,12 @@ mapPromise
 /*******************************************************************************
  * COMPUTED
  ******************************************************************************/
+const clusterOwner = computed({
+  get: () => rawClusterOwner,
+  set: (val) => {
+    rawClusterOwner = val;
+  },
+});
 
 /*******************************************************************************
  * METHODS
@@ -199,11 +206,11 @@ onUnmounted(async () => {
     return console.error('the marker instance is not defined');
   }
 
-  if (clusterOwner) {
+  if (clusterOwner.value) {
     // Repaint will be performed in `updated()` of cluster
-    clusterOwner.removeMarker(marker, true);
+    clusterOwner.value.removeMarker(marker, true);
     /* Performance optimization when destroying a large number of markers */
-    clusterOwner = undefined;
+    clusterOwner.value = undefined;
   } else if (marker) {
     marker.map = null;
   }