feat(v3): improve exports, types and remove deprecated options

- Improve exports of the package - Improve typescript and vite config - Improve extend vue declarations - Remove deprecated options - Remove install-components option - Add new load options to the plugin - Improve types, interfaces and keys - Add interface for expose object of components - Implement dynamic load of Google Maps API BREAKING CHANGE
diegoazh · Mar 31, 2024 · 9947ce6 · 9947ce6
1 parent 072f661
commit 9947ce6
Show file tree

Hide file tree

Showing 13 changed files with 2,070 additions and 921 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@
 node_modules
 packages/**/dist
 packages/**/gmap-vue.js
+.pack
diff --git a/packages/v3/package.json b/packages/v3/package.json
@@ -4,7 +4,7 @@
   "description": "This is a google map component for Vue.js, updated for Vue 2 compatibility",
   "main": "dist/main.umd.js",
   "module": "dist/main.es.js",
-  "typings": "dist/types",
+  "types": "dist/types/src/main.d.ts",
   "unpkg": "dist/main.umd.js",
   "jsdelivr": "dist/main.umd.js",
   "browser": {
@@ -23,15 +23,61 @@
       "require": {
         "types": "./dist/types/src/main.d.ts",
         "default": "./dist/main.umd.js"
+      }
+    },
+    "./types": {
+      "import": {
+        "types": "./dist/types/src/types/index.d.ts"
       },
-      "default": {
-        "types": "./dist/types/src/main.d.ts",
-        "default": "./dist/main.es.js"
+      "require": {
+        "types": "./dist/types/src/types/index.d.ts"
+      }
+    },
+    "./keys": {
+      "import": {
+        "types": "./dist/types/src/keys/index.d.ts",
+        "default": "./dist/keys.es.js"
+      },
+      "require": {
+        "types": "./dist/types/src/keys/index.d.ts",
+        "default": "./dist/keys.cjs.js"
+      }
+    },
+    "./interfaces": {
+      "import": {
+        "types": "./dist/types/src/interfaces/index.d.ts"
+      },
+      "require": {
+        "types": "./dist/types/src/interfaces/index.d.ts"
+      }
+    },
+    "./composables": {
+      "import": {
+        "types": "./dist/types/src/composables/index.d.ts",
+        "default": "./dist/composables.es.js"
+      },
+      "require": {
+        "types": "./dist/types/src/composables/index.d.ts",
+        "default": "./dist/composables.cjs.js"
+      }
+    },
+    "./components": {
+      "import": {
+        "types": "./dist/types/src/components/index.d.ts"
+
+      },
+      "require": {
+        "types": "./dist/types/src/components/index.d.ts"
       }
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "dist/*.css"
   ],
   "publishConfig": {
     "access": "public"
@@ -41,10 +87,11 @@
     "dev": "cpx ./cypress/runner/.env ./ --verbose && vite",
     "dev:e2e": "pnpm run build && vite --config cypress/runner/vite.config.js",
     "preview": "vite preview --port 4173",
-    "build": "vite build && pnpm run copy:components",
+    "build": "vite build",
     "tsc:build": "tsc --project tsconfig.app.json",
     "vite:build": "run-p type-check build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "type-gen": "vue-tsc -p tsconfig.app.json --declaration --emitDeclarationOnly",
     "test": "vitest",
     "test:unit": "vitest --environment jsdom",
     "coverage": "vitest run --coverage",
@@ -56,7 +103,7 @@
     "test:e2e:node:server": "pnpm run test:e2e:build && node cypress/runner/runner.cjs",
     "lint": "prettier --write ./src && eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "lint-staged": "lint-staged",
-    "copy:components": "cpx \"./src/components/*.vue\" \"./dist/components\" --verbose",
+    "emulate:package": "rimraf ./.pack && pnpm run build && cpx './dist/**/*.{js,mjs,css,ts,vue}' './.pack/dist' --verbose && cpx './CHANGELOG.md' './.pack' --verbose && cpx './LICENSE.md' './.pack' --verbose && cpx './package.json' './.pack' --verbose",
     "release": "semantic-release"
   },
   "repository": {
@@ -74,44 +121,44 @@
     "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.0",
+    "@rushstack/eslint-patch": "^1.9.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@types/google.maps": "^3.53.2",
-    "@types/jsdom": "^21.1.1",
-    "@types/lodash.isequal": "^4.5.6",
-    "@types/lodash.throttle": "^4.1.7",
-    "@types/node": "^20.2.5",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-c8": "^0.31.1",
-    "@vitest/coverage-istanbul": "^0.31.1",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/tsconfig": "^0.4.0",
+    "@types/google.maps": "^3.55.5",
+    "@types/jsdom": "^21.1.6",
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/lodash.throttle": "^4.1.9",
+    "@types/node": "^20.11.30",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-c8": "^0.33.0",
+    "@vitest/coverage-istanbul": "^1.4.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
     "cpx": "^1.5.0",
-    "cypress": "^12.13.0",
+    "cypress": "^13.7.1",
     "cypress-plugin-tab": "^1.0.5",
-    "dotenv": "^16.0.3",
-    "eslint": "^8.41.0",
-    "eslint-plugin-cypress": "^2.13.3",
+    "dotenv": "^16.4.5",
+    "eslint": "^8.57.0",
+    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "gh-pages": "^5.0.0",
-    "happy-dom": "^9.20.3",
-    "jsdom": "^22.0.0",
-    "lint-staged": "^13.2.2",
+    "gh-pages": "^6.1.1",
+    "happy-dom": "^14.3.9",
+    "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.2",
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "rimraf": "^5.0.1",
-    "semantic-release": "^21.0.2",
-    "semantic-release-cli": "^5.4.4",
-    "start-server-and-test": "^2.0.0",
-    "stylus": "^0.59.0",
-    "typescript": "~5.0.4",
-    "vite": "^4.3.9",
-    "vite-plugin-dts": "^2.3.0",
-    "vitest": "^0.31.1",
-    "vue-tsc": "^1.6.5"
+    "prettier": "^3.2.5",
+    "rimraf": "^5.0.5",
+    "semantic-release": "^23.0.6",
+    "semantic-release-cli": "^5.4.6",
+    "start-server-and-test": "^2.0.3",
+    "stylus": "^0.63.0",
+    "typescript": "~5.4.3",
+    "vite": "^5.2.6",
+    "vite-plugin-dts": "^3.8.0",
+    "vitest": "^1.4.0",
+    "vue-tsc": "^2.0.7"
   },
   "author": "Diego A. Zapata Häntsch, Daniel Sim, Guillaume Leclerc",
   "license": "MIT"

diff --git a/packages/v3/src/components/index.ts b/packages/v3/src/components/index.ts
@@ -1,16 +1,16 @@
-import Autocomplete from '@/components/autocomplete-input.vue';
-import Circle from '@/components/circle-shape.vue';
-import Cluster from '@/components/cluster-icon.vue';
-import DrawingManager from '@/components/drawing-manager.vue';
-import HeatmapLayer from '@/components/heatmap-layer.vue';
-import InfoWindow from '@/components/info-window.vue';
-import KmlLayer from '@/components/kml-layer.vue';
-import MapLayer from '@/components/map-layer.vue';
-import Marker from '@/components/marker-icon.vue';
-import Polygon from '@/components/polygon-shape.vue';
-import Polyline from '@/components/polyline-shape.vue';
-import Rectangle from '@/components/rectangle-shape.vue';
-import StreetViewPanorama from '@/components/street-view-panorama.vue';
+import Autocomplete from '../components/autocomplete-input.vue';
+import Circle from '../components/circle-shape.vue';
+import Cluster from '../components/cluster-icon.vue';
+import DrawingManager from '../components/drawing-manager.vue';
+import HeatmapLayer from '../components/heatmap-layer.vue';
+import InfoWindow from '../components/info-window.vue';
+import KmlLayer from '../components/kml-layer.vue';
+import MapLayer from '../components/map-layer.vue';
+import Marker from '../components/marker-icon.vue';
+import Polygon from '../components/polygon-shape.vue';
+import Polyline from '../components/polyline-shape.vue';
+import Rectangle from '../components/rectangle-shape.vue';
+import StreetViewPanorama from '../components/street-view-panorama.vue';
 
 export {
   Autocomplete,

diff --git a/packages/v3/src/composables/google-maps-api-initializer.ts b/packages/v3/src/composables/google-maps-api-initializer.ts
@@ -16,7 +16,7 @@ import type { GoogleMapsAPIInitializerFn } from '@/types';
 function googleMapsAPIInitializerFactory(): GoogleMapsAPIInitializerFn {
   let isApiSetUp = false;
 
-  return (options: ILoadPluginOptions, loadCn = false): void => {
+  return (options: ILoadPluginOptions): void => {
     /**
      * Allow options to be an object.
      * This is to support more esoteric means of loading Google Maps,
@@ -34,41 +34,54 @@ function googleMapsAPIInitializerFactory(): GoogleMapsAPIInitializerFn {
 
     const finalOptions = { ...options };
     const { libraries } = finalOptions;
+    finalOptions.callback = 'GoogleMapsCallback';
+
+    // libraries
+    if (Array.isArray(libraries)) {
+      finalOptions.libraries = libraries.join(',');
+    }
 
     if (!isApiSetUp) {
       isApiSetUp = true;
-      const baseUrl = loadCn
-        ? 'https://maps.google.cn'
-        : 'https://maps.googleapis.com';
-
-      const googleMapScript = document.createElement('SCRIPT');
-
-      // libraries
-      if (Array.isArray(libraries)) {
-        finalOptions.libraries = libraries.join(',');
-      }
-
-      finalOptions.callback = 'GoogleMapsCallback';
-
-      const query = (
-        Object.keys(finalOptions) as Array<keyof ILoadPluginOptions>
-      )
-        .map((key) => {
-          if (finalOptions[key]) {
-            return `${encodeURIComponent(key)}=${encodeURIComponent(
-              finalOptions[key] as string
-            )}`;
-          }
-
-          return '';
-        })
-        .join('&');
-
-      const url = `${baseUrl}/maps/api/js?${query}`;
 
-      googleMapScript.setAttribute('src', url);
-      googleMapScript.setAttribute('async', '');
-      googleMapScript.setAttribute('defer', '');
+      const googleMapScript = document.createElement('script');
+      googleMapScript.setAttribute('type', 'text/javascript');
+      googleMapScript.innerHTML = `
+      ((g) => {
+        var h,
+          a,
+          k,
+          p = 'The Google Maps JavaScript API',
+          c = 'google',
+          l = 'importLibrary',
+          q = '__ib__',
+          m = document,
+          b = window;
+        b = b[c] || (b[c] = {});
+        var d = b.maps || (b.maps = {}),
+          r = new Set(),
+          e = new URLSearchParams(),
+          u = () =>
+            h ||
+            (h = new Promise(async (f, n) => {
+              await (a = m.createElement('script'));
+              e.set('libraries', [...r] + '');
+              for (k in g)
+                e.set(
+                  k.replace(/[A-Z]/g, (t) => '_' + t[0].toLowerCase()),
+                  g[k]
+                );
+              e.set('callback', c + '.maps.' + q);
+              a.src = \`https://maps.\${c}apis.com/maps/api/js?\` + e;
+              d[q] = f;
+              a.onerror = () => (h = n(Error(p + ' could not load.')));
+              a.nonce = m.querySelector('script[nonce]')?.nonce || '';
+              m.head.append(a);
+            }));
+        d[l]
+          ? console.warn(p + ' only loads once. Ignoring:', g)
+          : (d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)));
+      })(${JSON.stringify(finalOptions)});`;
       document.head.appendChild(googleMapScript);
     } else {
       window.console.info('You already started the loading of google maps');

diff --git a/packages/v3/src/composables/index.ts b/packages/v3/src/composables/index.ts
@@ -1,12 +1,3 @@
-import type { GmvSharedComposables } from '../types';
-import { useMapPromise } from './map-promise';
-import {
-  useGoogleMapsApiPromiseLazy,
-  usePluginOptions,
-} from './promise-lazy-builder';
-import { useResizeBus } from './resize-bus';
-import { useStreetViewPanoramaPromise } from './street-view-panorama-promise';
-
 export * from './google-maps-api-initializer';
 export * from './helpers';
 export * from './map-promise';
@@ -16,20 +7,3 @@ export * from './promise-lazy-builder';
 export * from './resize-bus';
 export * from './shapes-helper';
 export * from './street-view-panorama-promise';
-
-/**
- * Export all shared composables
- *
- * @type  {Object} Composables
- * @property  {Function}  useMapPromise - Function that returns a promise when is resolved returns the map-layer component object
- * @property  {Function}  useResizeBus - Function that returns an object with the default resize buz and two helper functions
- * @property  {Function}  useGoogleMapsApiPromiseLazy - Function that returns a promise when is resolve returns the original Google Maps API
- * @property  {Function}  useStreetViewPanoramaPromise - Function that returns a promise when is resolved returns the street-view-panorama component object
- */
-export const sharedComposables: GmvSharedComposables = {
-  useMapPromise,
-  useResizeBus,
-  useGoogleMapsApiPromiseLazy,
-  useStreetViewPanoramaPromise,
-  usePluginOptions,
-};
diff --git a/packages/v3/src/composables/promise-lazy-builder.ts b/packages/v3/src/composables/promise-lazy-builder.ts
@@ -23,10 +23,10 @@ let $googleMapsApiPromiseLazy: LazyValueGetterFn<GlobalGoogleObject>;
  */
 export function usePromiseLazyBuilderFn(
   googleMapsApiInitializer: GoogleMapsAPIInitializerFn,
-  GoogleMapsApi: IGoogleMapsApiObject
+  GoogleMapsApi: IGoogleMapsApiObject,
 ): PromiseLazyCreatorFn {
   return (
-    options: IGmapVuePluginOptions
+    options: IGmapVuePluginOptions,
   ): LazyValueGetterFn<GlobalGoogleObject> => {
     /**
      * Things to do once the API is loaded
@@ -39,7 +39,7 @@ export function usePromiseLazyBuilderFn(
     }
 
     return getLazyValue(() =>
-      createFinalPromise(options, googleMapsApiInitializer, onMapsReady)
+      createFinalPromise(options, googleMapsApiInitializer, onMapsReady),
     );
   };
 }
@@ -98,7 +98,7 @@ function createCallbackAndChecksIfMapIsLoaded(resolveFn: Function): void {
 function createFinalPromise(
   options: IGmapVuePluginOptions,
   googleMapsApiInitializer: GoogleMapsAPIInitializerFn,
-  onMapsReady: () => GlobalGoogleObject
+  onMapsReady: () => GlobalGoogleObject,
 ): Promise<GlobalGoogleObject> {
   return new Promise((resolve, reject) => {
     if (typeof window === 'undefined') {
@@ -110,7 +110,7 @@ function createFinalPromise(
       createCallbackAndChecksIfMapIsLoaded(resolve);
 
       if (!options.dynamicLoad && options.load) {
-        googleMapsApiInitializer(options.load, options?.loadCn);
+        googleMapsApiInitializer(options.load);
       }
     } catch (err) {
       reject(err);
@@ -131,7 +131,7 @@ function createFinalPromise(
  */
 export function saveLazyPromiseAndFinalOptions(
   finalOptions: IGmapVuePluginOptions,
-  googleMapsApiPromiseLazy: LazyValueGetterFn<GlobalGoogleObject>
+  googleMapsApiPromiseLazy: LazyValueGetterFn<GlobalGoogleObject>,
 ): void {
   if (!$finalOptions) {
     $finalOptions = finalOptions;