Issue 15 vue 3 (#298)

* fix(gmap-vue-next): fix types, composables, and map-layer component

* fix(gmap-vue-next): fix rollup and typescript build and improve its configurations

* fix(gmap-vue-next): change to typescript and vite, map layer withoout errors

* fix(gmap-vue-next): start adding unit test for composables and preparing all for e2e tests with cypress

* fix(gmap-vue-next): fix e2e server and render warnings

* fix(gmap-vue-next): fix map-test component example

* fix(gmap-vue-next): add e2e test for map-layer component

* fix(gmap-vue-next): fix broken unit tests

* test(gmap-vue-next): add unit test for promise-lazy-builder and google-maps-promise

* fix(gmap-vue-next): fix test:e2e:ci script

* chore(gmap-vue): reorganize code inside the map layer component

* fix(gmap-vue-next): remove keys from beging exported and update typings on package.json

* feat(gmap-vue-next): migrate marker-icon component to composition api using script setup

* fix(gmap-vue-next): fix map-layer and marker-icon components and improve the old mapped props

* feat(gmap-vue-next): migrate cluster-icon component

* feat(gmap-vue-next): migrate cluster-icon component

* feat(gmap-vue-next): migrate info-window component

* fix(gmap-vue-next): fix ts(7056) on setup script

I solved removing from the defineExports function the template ref
variable defined inside the setup script. I also fix the ts(4082)
error moving the props interface to its own script[lang=ts] tag,
this change is needed because I am using the interface on hooks and
not only inside script setup but it looks like very ugly. The Vue
documentation only said that the interface should be in the same file
not in the same script tag.

* fix(gmap-vue-next): spread options prop at the end when buid the options

In this way we allow users to be able to override some values or pass new ones
when the required options to build any google maps object changes.

 #15

* fix(gmap-vue-next): makes options prop optional

 #15

* fix(gmap-vue-next): remove unnecesary unmounted hook

Now using typescript we can know which components has the setMap
function and use it only in that components

 #15

* fix(gmap-vue-next): small fixes on watch functions

 #15

* feat(gmap-vue-next): migrate the autocomplete component

 #15

* chore(gmap-vue): improve component and function names

I added the prefix gmv to all components and refs, it means GMapVue

 #15

* feat(gmap-vue-next): migrate kml-layer component

 #15

* fix(gmap-vue-next): rename google-maps-promise to map-promise to be more explicit about its content

 #15

* chore(gmap-vue-next): enable explicitly an option enabled implicitly by other option

 #15

* fix(gmap-vue-next): update test file name to match with the target tested file

 #15

* feat(gmap-vue-next): migrate street view panorama

I also improve the map-layer component and its composables to match
with street-view-panorama component because they are related in some
parts.

 #15

* chore(all): update all dependencies

* chore(docs): update api documentation

* chore(docs): update api documentation

* chore(all): update all dependencies

* docs(docs): update api documentation

* docs(docs): update api documentation

* chore(root): update commitlint rules

 #15

* fix(gmap-vue-next): update all clases to use the gmv prefix

 #15

* feat(gmap-vue-next): migrate heatmap-layer component

 #15

* fix(gmap-vue-next): unify error messages on map-promise

 #15

* feat(gmap-vue-next): migrate circle-shape componet

 #15

* fix(gmap-vue-next): remove unnecesary variables and fix typos

 #15

* feat(gmap-vue-next): migrate polygon-shape component

 #15

* fix(gmap-vue-next): remove unnecesary macro imports

 #15

* feat(gmap-vue-next): migrate polilyne shape component

 #15

* feat(gmap-vue-next): migrate rectangle shape component

 #15

* feat(gmap-vue-next): migrate drawing manager component

 #15

* fix(gmap-vue-next): reorder function params to be more consistent

 #15

* fix(gmap-vue-next): last fixes on types and structures over composables

* test(gmap-vue-next): add test files and start writing unit tests

* fix(gmap-vue-next): fix final options merge to have always default options

* fix(gmap-vue-next): fix components, helpers and composables

 #15

* test(gmap-vue-next): fix tests after last name changes

* chore(gmap-vue-next): remove unused dependencies and unused files

* fix(gmap-vue-next): rewrite components to define props with an object instead of an interface

* test(gmap-vue-next): fix e2e and unit tests

* chore(gmap-vue-next): update file name on types and related imports

* chore(gmap-vue-next): update imports of all files

* chore(gmap-vue-next): update typings path and dependency versions

* chore(gmap-vue-next): update typescript and vite configuration

* chore(gmap-vue-next): update dependencies, scripts and pnpm-lock file

* chore(root): update dependency versions

* chore(gmap-vue-v2): rename gmap-vue to gmap-vue-v2

* chore(gmap-vue-v3): rename gmap-vue-next to gmap-vue-v3

* chore(v2): rename folder gmap-vue-v2 to v2

* chore(v3): rename folder gmap-vue-v3 to v3

* chore(root): update configuration files accordingly to the new repository structure

* chore(v3): update plugin verstion to 4.0.0 to support vue v3

* test(v3): update import path on test

* chore(v3): update pnpm-lock file, package names on every package.json file and cypress config on v3 path

* test(v3): add e2e tests for autocomplete cluster and marker components

* chore(v3): remove unused dependencies and update tests

* fix(v3): update exports and imports to optimize it

* chore(v3): fix typos and e2e runner erros

* chore(v3): remove path-exist-cli and update scripts

* test(v3): e2e test for info-window added

* test(v3): update e2e test for info-window and add tests for circle, rectangle and polyline

* fix(v3): update imports and exports and others small fixes

* test(v3): update all e2e tests

* chore(v3): update gitignore file

* chore(v3): update them main readme

* chore(v2): updates vue version on package v2

* chore(v2): update scripts on package.json and configuration useful for debug

* fix(v3): fix types and exported members from this plugin

* chore(v2): update readme with deprecation note

* chore(v2): update package name

* chore(v3): update package name

* chore(v2): add publish config to package

* chore(v3): add publish config to package

* chore(v3): update all e2e tests with the new plugin structure

* chore(root): add test:e2e to the main package and udpate github actions to run e2e tests

* chore(v2): udpate readme file

* chore(v3): udpate readme file

* chore(root): update github actions fixing a typo

* chore(root): update github actions to confirm .env file was created

* test(v3): improve e2e test using within instead to use should be.visible.

---------

Co-authored-by: Diego Alberto Zapata Hantsch <diegoalbertozapatahantsch@Diegos-MacBook-Pro.local>

.github/workflows/publish.yml

@@ -4,11 +4,10 @@ on:
     branches:
       - master
   pull_request:
-    branches: '*'
+    branches: "*"
 
 jobs:
   build:
-
     runs-on: ${{ matrix.os }}
 
     strategy:
@@ -26,11 +25,16 @@ jobs:
         run: npm install -g pnpm
       - name: Install dependencies
         run: pnpm install
+      - name: Create env file
+        run: |
+          touch ./packages/v3/cypress/runner/.env
+          echo VITE_GOOGLE_API_KEY=${{ secrets.VITE_GOOGLE_API_KEY }} >> ./packages/v3/cypress/runner/.env
       - name: Run tests
         run: pnpm run test
+      - name: Run e2e tests
+        run: pnpm run test:e2e
 
   publish:
-
     name: npm publish
     runs-on: ubuntu-latest
     if: ${{ github.ref == 'refs/heads/master'}}
@@ -47,22 +51,22 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Build package
-        working-directory: ./packages/gmap-vue
+        working-directory: ./packages/v3
         run: pnpm run build
       - name: Configure git credentials
         uses: OleksiyRudenko/gha-git-credentials@v2-latest
         with:
           global: true
-          name: '${{ secrets.GH_USER }}'
-          email: '${{ secrets.GH_EMAIL }}'
-          actor: '${{ secrets.GH_FULL_NAME }}'
-          token: '${{ secrets.GITHUB_TOKEN }}'
+          name: "${{ secrets.GH_USER }}"
+          email: "${{ secrets.GH_EMAIL }}"
+          actor: "${{ secrets.GH_FULL_NAME }}"
+          token: "${{ secrets.GITHUB_TOKEN }}"
       - name: Update origin push URI
         run: |
           git remote set-url origin "https://${{ secrets.GH_TOKEN_LERNA }}@github.com/${{ secrets.GH_USER }}/${{ secrets.GH_REPOSITORY }}.git" > /dev/null 2>&1
           git checkout master
       - name: Semantic Release
-        working-directory: ./packages/gmap-vue
+        working-directory: ./packages/v3
         run: pnpm run release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -71,4 +75,4 @@ jobs:
         uses: JS-DevTools/npm-publish@v2
         with:
           token: ${{ secrets.NPM_AUTH_TOKEN }}
-          package: ./packages/gmap-vue/package.json
+          package: ./packages/v3/package.json

.lintstagedrc.yml

@@ -1,2 +1,2 @@
 "*.{vue,js,vue,html,js}":
-  - "npm run lint"
+  - "pnpm run lint"

.vscode/launch.json

@@ -5,8 +5,8 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "command": "npm run gen:docs",
-      "name": "Run npm gen:docs",
+      "command": "npm run gen:api:docs",
+      "name": "Run npm gen:api:docs",
       "request": "launch",
       "type": "node-terminal"
     },

.vscode/settings.json

@@ -3,6 +3,17 @@
   "files.trimTrailingWhitespace": true,
   "workbench.colorCustomizations": {
     "titleBar.activeBackground": "#bd3232",
-    "titleBar.inactiveBackground": "#7c7c7c",
-  }
+    "titleBar.inactiveBackground": "#7c7c7c"
+  },
+  "cSpell.words": [
+    "closeclick",
+    "Clusterer",
+    "composables",
+    "gmap",
+    "markerclusterer",
+    "Midx",
+    "pano",
+    "rightclick",
+    "zindex"
+  ]
 }

UPGRADING.md

@@ -1,3 +1,5 @@
+# Upgrade from plugin for Vue v1 to plugin for Vue v2
+
 By and large, unless you are using two-way binding,
 you should be able to re-use the code you wrote for Vue 1.x.
 The main exceptions is markers' click events triggering info windows.
@@ -10,7 +12,7 @@ usually, `mapInstance.center` (vue-google-maps property) and
 (Google Maps API method) were be returning different values, and some
 hackery was needed to avoid endless update loops.
 
-# Important changes
+## Important changes
 
 1. (v0.4.0) The installation method for gmap-vue has changed.
 You use the library by calling:

commitlint.config.js

@@ -1,18 +1,34 @@
 module.exports = {
   rules: {
-    'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore', 'revert']],
-    'type-case': [2, 'always', 'lowerCase'],
-    'type-empty': [2, 'never'],
-    'scope-enum': [2, 'always', ['gmap-vue', 'docs', 'root', 'all']],
-    'scope-case': [2, 'always', 'lowerCase'],
-    'scope-empty': [2, 'never'],
-    'subject-case': [2, 'always', 'lowerCase'],
-    'subject-min-length': [2, 'always', 15],
-    'subject-max-length': [2, 'always', 100],
-    'header-case': [2, 'always', 'lowerCase'],
-    'body-leading-blank': [2, 'always'],
-    'body-max-length': [2, 'always', 1000],
-    'footer-leading-blank': [2, 'always'],
-    'footer-max-length': [2, 'always', 300],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "feat",
+        "fix",
+        "docs",
+        "style",
+        "refactor",
+        "perf",
+        "test",
+        "build",
+        "ci",
+        "chore",
+        "revert",
+      ],
+    ],
+    "type-case": [2, "always", "lowerCase"],
+    "type-empty": [2, "never"],
+    "scope-enum": [2, "always", ["v2", "v3", "next", "docs", "root", "all"]],
+    "scope-case": [2, "always", "lowerCase"],
+    "scope-empty": [2, "never"],
+    "subject-case": [2, "always", "lowerCase"],
+    "subject-min-length": [2, "always", 15],
+    "subject-max-length": [2, "always", 100],
+    "header-case": [2, "always", "lowerCase"],
+    "body-leading-blank": [2, "always"],
+    "body-max-length": [2, "always", 1000],
+    "footer-leading-blank": [2, "always"],
+    "footer-max-length": [2, "always", 300],
   },
 };

jsconfig.json

@@ -1,5 +1,3 @@
 {
-  "include": [
-    "./packages/gmap-vue/src/**/*"
-  ]
+  "include": ["./packages/v2/src/**/*"]
 }

package.json

@@ -7,18 +7,19 @@
   "license": "MIT",
   "scripts": {
     "serve:docs": "pnpm run --recursive gen:api:docs && pnpm run --recursive serve:docs",
-    "build:all": "pnpm run gen:api:docs && pnpm run --recursive build && pnpm run --recursive build:docs",
+    "build:all": "pnpm run --recursive gen:api:docs && pnpm run --recursive build && pnpm run --recursive build:docs",
     "test": "pnpm run --recursive test",
+    "test:e2e": "pnpm run --recursive test:e2e:ci",
     "lint": "pnpm run --recursive lint",
     "gen:api:docs": "pnpm run --recursive gen:api:docs",
     "clean": "rimraf ./packages/**/node_modules && rimraf ./packages/**/package-lock.json && rimraf ./pnpm-lock.yaml && rimraf ./node_modules",
     "prepare": "husky install"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "rimraf": "^3.0.2"
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "rimraf": "^5.0.1"
   }
 }

packages/documentation/docs/README.md

@@ -2,15 +2,19 @@
 
 GmapVue is a fork from [vue2-google-maps](https://github.com/xkjyeah/vue-google-maps).
 
-This project has all features added to `vue2-google-maps` plugin up to [v0.10.8](https://github.com/xkjyeah/vue-google-maps/releases/tag/v0.10.8), but in the case of `gmap-vue` it has **the last features** added to `vue2-google-maps` repository by the community developers in many PRs, that they can't landed in a new version of that project, for different reasons.
+This project has all features added to `vue2-google-maps` plugin up
+to [v0.10.8](https://github.com/xkjyeah/vue-google-maps/releases/tag/v0.10.8), but in the case of `gmap-vue` it has **
+the last features** added to `vue2-google-maps` repository by the community developers in many PRs, that they can't
+landed in a new version of that project, for different reasons.
 
 Because of that we fork the project and plain to continue working and adding new features to this great plugin.
 
 ## Breaking changes
 
 ::: warning
 
-We have planned to change all components names and file names to the same way that they are registered for the next major release (v4.0.0).
+We have planned to change all components names and file names to the same way that they are registered for the next
+major release (v4.0.0).
 
 :::
 
@@ -31,7 +35,8 @@ We have planned to change all components names and file names to the same way th
   - `components`: it has all components and mountable mixin)
   - `helpers`: it has promise lazy factory function, gmapApi function and map element mixin
 - The plugin now exports by default the install function, this means that you can do the following
-- From **v2.0.0** and above, the `autocomplete` component uses the `default` slot instead of the named `input` slot, from v1.5.0 the `input` slot on the autocomplete component still works.
+- From **v2.0.0** and above, the `autocomplete` component uses the `default` slot instead of the named `input` slot,
+  from v1.5.0 the `input` slot on the autocomplete component still works.
 
   ```js
   import GmapVue from 'gmap-vue';
@@ -92,7 +97,8 @@ That is, instead of writing `<GmapMap>`, you need to write `<gmap-map>`.
 
 ### Vue-CLI v4 applications
 
-For those application that use vue-cli v4 you will need to add the following dependencies and configuration to your `vue.config.js` file
+For those application that use vue-cli v4 you will need to add the following dependencies and configuration to
+your `vue.config.js` file
 
 ```bash
 npm install --save-dev babel-loader @babel/preset-env @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator
@@ -182,15 +188,19 @@ Vue.use(GmapVue, {
 
 ### v3.2.0
 
-From v3.2.0 when you load the Google Maps API externally, from an HTML file for example, now you can load the plugin without any load option, and you don't need to change anything from you Google Map script tag in the HTML file, in that sort of cases if the callback is not called after **1 second** from be initialized the plugin will be check **every 0.5 second** if the object `window.google.maps` is populated and ready to use it.
+From v3.2.0 when you load the Google Maps API externally, from an HTML file for example, now you can load the plugin
+without any load option, and you don't need to change anything from you Google Map script tag in the HTML file, in that
+sort of cases if the callback is not called after **1 second** from be initialized the plugin will be check **every 0.5
+second** if the object `window.google.maps` is populated and ready to use it.
 
 ### v3.0.0
 
 **We encourage to use the new way introduced from v3.2.0 and explained above**
 
-If you already have an script tag that loads Google Maps API and you want to use it set you callback in the `customCallback` option and our `GoogleMapsCallback` callback will execute your custom callback at the end.
+If you already have an script tag that loads Google Maps API and you want to use it set you callback in
+the `customCallback` option and our `GoogleMapsCallback` callback will execute your custom callback at the end.
 
- **It must attached to the `window` object**, is the only requirement.
+**It must attached to the `window` object**, is the only requirement.
 
 ```js
 window.MyCustomCallback = () => { console.info('MyCustomCallback was executed') }
@@ -200,7 +210,8 @@ window.MyCustomCallback = () => { console.info('MyCustomCallback was executed')
 
 ::: warning
 
-The new option `customCallback` inside the `load` object in the plugin configuration will be removed in the next major version.
+The new option `customCallback` inside the `load` object in the plugin configuration will be removed in the next major
+version.
 
 :::
 
@@ -232,7 +243,9 @@ Available from **v3.3.0** and above
 
 :::
 
-If you need to initialize the Google Maps API in a dynamic way you can use the `dynamicLoad` option of the plugin configuration, this option start the plugin but it doesn't load the Google Maps API, you need to load it manually using the `googleMapsApiInitializer` helper as we show below
+If you need to initialize the Google Maps API in a dynamic way you can use the `dynamicLoad` option of the plugin
+configuration, this option start the plugin but it doesn't load the Google Maps API, you need to load it manually using
+the `googleMapsApiInitializer` helper as we show below
 
 ```vue
 <script>
@@ -251,7 +264,9 @@ export default {
 </script>
 ```
 
-If you want to know the **`googleMapsApiInitializer` API** please check it [here](https://diegoazh.github.io/gmap-vue/code/utils/initializer/google-maps-api-initializer.html#creategooglemapsapiinitializer-googlemapsapiinitializer-options-loadcn).
+If you want to know the **`googleMapsApiInitializer` API** please check
+it [here](https://diegoazh.github.io/gmap-vue/code/utils/initializer/google-maps-api-initializer.html#creategooglemapsapiinitializer-googlemapsapiinitializer-options-loadcn)
+.
 
 ### The three main utilities
 
@@ -334,7 +349,9 @@ You will get an object with a `maps` property and inside of it you can find all
 
 ### Map Options
 
-Control the options of the map with the options property. For more information about google [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) visit the link.
+Control the options of the map with the options property. For more information about
+google [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) visit the
+link.
 
  ```vue
  <GmapMap
@@ -353,7 +370,8 @@ Control the options of the map with the options property. For more information a
 
 ### Region and language localization
 
-To add region and language localization. For more information about google [Localization](https://developers.google.com/maps/documentation/javascript/localization) visit the link.
+To add region and language localization. For more information about
+google [Localization](https://developers.google.com/maps/documentation/javascript/localization) visit the link.
 
 ```js
 Vue.use(GmapVue, {
@@ -366,7 +384,10 @@ Vue.use(GmapVue, {
 
 ### Lazy loading
 
-If you need to wait for google maps API to be ready, you can use the `this.$gmapApiPromiseLazy()` function to wait for it. This function is automatically added to your components when you use GmapVue plugin, also, you can find a reference of this function in your Vue instance if you have a reference of following common practice to assign it to `vm` variable.
+If you need to wait for google maps API to be ready, you can use the `this.$gmapApiPromiseLazy()` function to wait for
+it. This function is automatically added to your components when you use GmapVue plugin, also, you can find a reference
+of this function in your Vue instance if you have a reference of following common practice to assign it to `vm`
+variable.
 
 A simple example
 
@@ -406,19 +427,27 @@ export default {
 ### GmapMap slots
 
 GmapMap component has two slots with a different behavior.
-The default slot is wrapped in a class that sets `display: none;` so by default any component you add to your map will be invisible.
+The default slot is wrapped in a class that sets `display: none;` so by default any component you add to your map will
+be invisible.
 
-This is ok for most of the supplied components that interact directly with the Google map object, but it's not good if you want to bring up things like toolboxes, etc.
+This is ok for most of the supplied components that interact directly with the Google map object, but it's not good if
+you want to bring up things like toolboxes, etc.
 
-There is a second slot named **"visible"** that must be used if you want to display content within the responsive wrapper for the map, hence that's why you'll see this in the [drawing manager with slot example](https://diegoazh.github.io/gmap-vue/guide/drawing-manager.html). It's actually not required in the [first example](https://diegoazh.github.io/gmap-vue/guide/drawing-manager.html#html-examples) because the default toolbox is part of the Google map object.
+There is a second slot named **"visible"** that must be used if you want to display content within the responsive
+wrapper for the map, hence that's why you'll see this in
+the [drawing manager with slot example](https://diegoazh.github.io/gmap-vue/guide/drawing-manager.html). It's actually
+not required in the [first example](https://diegoazh.github.io/gmap-vue/guide/drawing-manager.html#html-examples)
+because the default toolbox is part of the Google map object.
 
 > Thanks to [@davydnorris](https://github.com/davydnorris) to document this part of GmapVue.
 
 ### Exported objects from the GmapVue plugin
 
-In previous version the plugin exports all without any organization, from version 2 the plugin exports a default object with the install function required for Vue.js to install this plugin and two objects, `helpers` and `components`.
+In previous version the plugin exports all without any organization, from version 2 the plugin exports a default object
+with the install function required for Vue.js to install this plugin and two objects, `helpers` and `components`.
 
-This two objects exports the same functions as before but in a better way, in the `main.js` file. The code below is a copy from that file.
+This two objects exports the same functions as before but in a better way, in the `main.js` file. The code below is a
+copy from that file.
 
 ```js
 
@@ -505,9 +534,11 @@ in their source code.
 ### Adding your own components
 
 It should be relatively easy to add your own components (e.g. Heatmap, GroundOverlay). please refer to the
-[source code for `mapElementFactory`](https://github.com/diegoazh/gmap-vue/blob/master/packages/gmap-vue/src/utils/factories/map-element.js).
+[source code for `mapElementFactory`](https://github.com/diegoazh/gmap-vue/blob/master/packages/gmap-vue/src/utils/factories/map-element.js)
+.
 
-Example for [DirectionsRenderer](https://developers.google.com/maps/documentation/javascript/reference/3/#DirectionsRenderer):
+Example
+for [DirectionsRenderer](https://developers.google.com/maps/documentation/javascript/reference/3/#DirectionsRenderer):
 
 ```js
 // DirectionsRenderer.js