Merge branch 'master' into snyk-upgrade-83de132a3fb21e8729fa414ff4ab925c

.github/workflows/documentation.yml

@@ -11,10 +11,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js 20
+      - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22.x
       - name: Install pnpm
         run: npm install --location=global [email protected]
       - name: Remove pnpm-workspace.yaml

.github/workflows/publish.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 21.x]
+        node-version: [18.x, 20.x, 22.x]
         os: [ubuntu-latest, windows-latest]
 
     steps:
@@ -23,7 +23,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install pnpm
-        run: npm install -g pnpm@9.0.6
+        run: npm install -g pnpm@9.13.2
       - name: Install dependencies
         run: pnpm install
       - name: Create env file
@@ -46,7 +46,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: "22.x"
       - name: Install pnpm
         run: npm install --location=global pnpm
       - name: Install dependencies

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx commitlint --edit "$1"

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 pnpm run --recursive lint-staged #&& pnpm run gen:api:docs

.husky/pre-push

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-pnpm run lint && pnpm run test && pnpm run test:e2e;
+pnpm run lint && pnpm run test && pnpm run test:e2e

.vscode/settings.json

@@ -8,12 +8,14 @@
   "cSpell.words": [
     "closeclick",
     "Clusterer",
+    "commitlint",
     "composables",
     "gmap",
     "markerclusterer",
     "Midx",
     "pano",
     "rightclick",
+    "VITE",
     "zindex"
   ]
 }

package.json

@@ -5,7 +5,7 @@
   "repository": "[email protected]:diegoazh/gmap-vue.git",
   "author": "\"Daniel Sim, Guillaume Leclerc\",",
   "license": "MIT",
-  "packageManager": "pnpm@9.0.6",
+  "packageManager": "pnpm@9.13.2",
   "scripts": {
     "serve:docs": "pnpm run --filter docs start",
     "build:all": "pnpm run --recursive build",
@@ -16,10 +16,10 @@
     "prepare": "husky install"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.3",
-    "@commitlint/config-conventional": "^17.6.3",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "rimraf": "^5.0.1"
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "rimraf": "^6.0.1"
   }
 }

packages/documentation/docs/vue-3-version/api/components/autocomplete.md

@@ -62,6 +62,7 @@ export interface IAutoCompleteInputVueComponentProps {
    * @see [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult)
    */
   setFieldsTo?: string[];
+  autocompleteKey?: string;
   options?: Record<string, unknown>;
 }
 ```
@@ -73,6 +74,7 @@ export interface IAutoCompleteInputVueComponentProps {
   - _type_: `HTMLInputElement`
   - _description_: the unique ref set to the component passed in the slot input
 - **setFieldsTo**: To avoid paying for data that you don't need, be sure to use Autocomplete.setFields() to specify only the place data that you will use.
+- **autocompleteKey**: This is used to identify every instance of the Google Maps Autocomplete class. If it's not provided it always use the `$autocompletePromise` key as its default value, but take care about it because if you use it in many places you will use always the same instance.
 - **options**:
   - _type_: `Record<string, unknown>`
   - _description_: We use this prop as a fallback option. If the official API changes and add new props to the class you can use the options prop to use and populate these new props until we update our API to use it explicitly.
@@ -83,21 +85,9 @@ export interface IAutoCompleteInputVueComponentProps {
 We only document the exposed methods of the component
 :::
 
-- **autoCompleteInstance**:
-  - _type_: [`InstanceType<google.maps.places.Autocomplete>`](https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete)
-  - _description_: Is an instance of the Autocomplete class.
-
-  ```ts showLineNumbers {8}
-  //...
-    const { Autocomplete } = (await google.maps.importLibrary(
-    'places',
-  )) as google.maps.PlacesLibrary;
-
-  // ...
-
-  autoCompleteInstance = new Autocomplete(scopedInput, autocompleteOptions);
-  //...
-  ```
+- **autoCompletePromise**:
+  - _type_: [`Promise<InstanceType<google.maps.places.Autocomplete> | undefined>`](https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete)
+  - _description_: This is a promise that resolves the instance of the Google Maps Autocomplete class.
 
 ## Events
 
@@ -129,10 +119,9 @@ If the user enters the name of a Place that was not suggested by the control and
 <template>
   <div>
     <!--
-				@slot Used to set your custom component for the input, eg: v-text-field.<br>
-        It has two binding properties:<br>
+				@slot Used to set your custom component for the input, eg: v-text-field.
+        It has two binding properties:
         - `attrs`, it's type is `object`, it's all attributes passed to the component ([vm.$attrs](https://vuejs.org/v2/api/?#vm-attrs))<br>
-        - `listeners`, it's type is `object`, it's all events passed to the component ([vm.$listeners](https://vuejs.org/v2/api/?#vm-listeners))
 			-->
     <slot :attrs="$attrs">
       <input ref="gmvAutoCompleteInput" v-bind="$attrs" />
@@ -148,11 +137,14 @@ import {
   getComponentEventsConfig,
   getComponentPropsConfig,
   getPropsValuesWithoutOptionsProp,
+  useComponentPromiseFactory,
+  useDestroyPromisesOnUnmounted,
   useGoogleMapsApiPromiseLazy,
   usePluginOptions,
 } from '@/composables';
 import type { IAutoCompleteInputVueComponentProps } from '@/interfaces';
-import { onMounted, ref, watch } from 'vue';
+import { $autocompletePromise } from '@/keys';
+import { onMounted, onUnmounted, provide, ref, watch } from 'vue';
 
 /**
  * Autocomplete component
@@ -191,6 +183,7 @@ const props = withDefaults(
      * @see [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult)
      */
     setFieldsTo?: string[];
+    autocompleteKey?: string;
     options?: Record<string, unknown>;
   }>(),
   {
@@ -213,8 +206,15 @@ const emits = defineEmits<{
 /*******************************************************************************
  * AUTOCOMPLETE
  ******************************************************************************/
+defineOptions({ inheritAttrs: false, name: 'autocomplete-input' });
 const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.();
-let autoCompleteInstance: google.maps.places.Autocomplete | undefined;
+
+/*******************************************************************************
+ * PROVIDE
+ ******************************************************************************/
+const { promiseDeferred: autocompletePromiseDeferred, promise } =
+  useComponentPromiseFactory(props.autocompleteKey || $autocompletePromise);
+provide(props.autocompleteKey || $autocompletePromise, promise);
 
 /*******************************************************************************
  * COMPUTED
@@ -229,9 +229,15 @@ let autoCompleteInstance: google.maps.places.Autocomplete | undefined;
  ******************************************************************************/
 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);
     }
   },
 );
@@ -273,62 +279,74 @@ onMounted(() => {
         );
       }
 
-      autoCompleteInstance = new Autocomplete(scopedInput, autocompleteOptions);
+      const autocomplete = new Autocomplete(scopedInput, autocompleteOptions);
 
-      const autoCompletePropsConfig =
+      const autocompletePropsConfig =
         getComponentPropsConfig('GmvAutocomplete');
-      const autoCompleteEventsConfig = getComponentEventsConfig(
+      const autocompleteEventsConfig = getComponentEventsConfig(
         'GmvAutocomplete',
         'auto',
       );
 
       bindPropsWithGoogleMapsSettersAndGettersOnSetup(
-        autoCompletePropsConfig,
-        autoCompleteInstance,
+        autocompletePropsConfig,
+        autocomplete,
         emits as any,
         props,
       );
 
       bindGoogleMapsEventsToVueEventsOnSetup(
-        autoCompleteEventsConfig,
-        autoCompleteInstance,
+        autocompleteEventsConfig,
+        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(autocomplete);
     })
     .catch((error) => {
       throw error;
     });
 });
 
+onUnmounted(() => {
+  useDestroyPromisesOnUnmounted(props.autocompleteKey || $autocompletePromise);
+});
+
 /*******************************************************************************
  * RENDERS
  ******************************************************************************/
 
 /*******************************************************************************
  * EXPOSE
  ******************************************************************************/
-defineExpose({ autoCompleteInstance });
+defineExpose({
+  autocompletePromise: promise,
+});
 </script>
 ```