npm - @nuxt/scripts - Versions diffs - 1.0.0-beta.25 → 1.0.0-beta.26 - Mend

@nuxt/scripts 1.0.0-beta.25 → 1.0.0-beta.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/dist/client/200.html CHANGED Viewed

	@@ -1 +1 @@
1	- <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt-scripts/_nuxt/entry.C5SUNdim.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/DjhmCJlE.js"><script type="module" src="/__nuxt-scripts/_nuxt/DjhmCJlE.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{"nuxt-scripts":{version:"",defaultScriptOptions:{trigger:"onNuxtReady"},googleStaticMapsProxy:"",endpoints:{}}},app:{baseURL:"/__nuxt-scripts",buildId:"~~2ec0342e~~-~~5e00~~-~~4781~~-~~82aa~~-~~c3c0f9154516~~",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},~~1773850004188~~,false]</script></body></html>
1	+ <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt-scripts/_nuxt/entry.C5SUNdim.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/DjhmCJlE.js"><script type="module" src="/__nuxt-scripts/_nuxt/DjhmCJlE.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{"nuxt-scripts":{version:"",defaultScriptOptions:{trigger:"onNuxtReady"},googleStaticMapsProxy:"",endpoints:{}}},app:{baseURL:"/__nuxt-scripts",buildId:"33e1ac0e-aba1-4856-8beb-775c426be236",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1773896533676,false]</script></body></html>

package/dist/client/404.html CHANGED Viewed

	@@ -1 +1 @@
1	- <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt-scripts/_nuxt/entry.C5SUNdim.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/DjhmCJlE.js"><script type="module" src="/__nuxt-scripts/_nuxt/DjhmCJlE.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{"nuxt-scripts":{version:"",defaultScriptOptions:{trigger:"onNuxtReady"},googleStaticMapsProxy:"",endpoints:{}}},app:{baseURL:"/__nuxt-scripts",buildId:"~~2ec0342e~~-~~5e00~~-~~4781~~-~~82aa~~-~~c3c0f9154516~~",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},~~1773850004189~~,false]</script></body></html>
1	+ <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt-scripts/_nuxt/entry.C5SUNdim.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/DjhmCJlE.js"><script type="module" src="/__nuxt-scripts/_nuxt/DjhmCJlE.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{"nuxt-scripts":{version:"",defaultScriptOptions:{trigger:"onNuxtReady"},googleStaticMapsProxy:"",endpoints:{}}},app:{baseURL:"/__nuxt-scripts",buildId:"33e1ac0e-aba1-4856-8beb-775c426be236",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1773896533677,false]</script></body></html>

package/dist/client/_nuxt/builds/latest.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"id":"~~2ec0342e~~-~~5e00~~-~~4781~~-~~82aa~~-~~c3c0f9154516~~","timestamp":~~1773849998807~~}
1	+ {"id":"33e1ac0e-aba1-4856-8beb-775c426be236","timestamp":1773896528219}

package/dist/client/_nuxt/builds/meta/33e1ac0e-aba1-4856-8beb-775c426be236.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"id":"33e1ac0e-aba1-4856-8beb-775c426be236","timestamp":1773896528219,"prerendered":[]}

package/dist/client/index.html CHANGED Viewed

	@@ -1 +1 @@
1	- <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt-scripts/_nuxt/entry.C5SUNdim.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/DjhmCJlE.js"><script type="module" src="/__nuxt-scripts/_nuxt/DjhmCJlE.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{"nuxt-scripts":{version:"",defaultScriptOptions:{trigger:"onNuxtReady"},googleStaticMapsProxy:"",endpoints:{}}},app:{baseURL:"/__nuxt-scripts",buildId:"~~2ec0342e~~-~~5e00~~-~~4781~~-~~82aa~~-~~c3c0f9154516~~",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},~~1773850004189~~,false]</script></body></html>
1	+ <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt-scripts/_nuxt/entry.C5SUNdim.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/DjhmCJlE.js"><script type="module" src="/__nuxt-scripts/_nuxt/DjhmCJlE.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{"nuxt-scripts":{version:"",defaultScriptOptions:{trigger:"onNuxtReady"},googleStaticMapsProxy:"",endpoints:{}}},app:{baseURL:"/__nuxt-scripts",buildId:"33e1ac0e-aba1-4856-8beb-775c426be236",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1773896533677,false]</script></body></html>

package/dist/module.json CHANGED Viewed

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16"
   },
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.26",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/GoogleMaps/ScriptGoogleMaps.d.vue.ts CHANGED Viewed

@@ -18,11 +18,8 @@ export interface PlaceholderOptions {
     signature?: string;
 }
 import type { ElementScriptTrigger } from '#nuxt-scripts/types';
-import type { HTMLAttributes, ImgHTMLAttributes, InjectionKey, Ref, ReservedProps, ShallowRef } from 'vue';
-export declare const MAP_INJECTION_KEY: InjectionKey<{
-    map: ShallowRef<google.maps.Map | undefined>;
-    mapsApi: Ref<typeof google.maps | undefined>;
-}>;
+import type { HTMLAttributes, ImgHTMLAttributes, Ref, ReservedProps, ShallowRef } from 'vue';
+export { MAP_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/runtime/components/GoogleMaps/ScriptGoogleMaps.vue CHANGED Viewed

@@ -8,7 +8,8 @@ import { hash } from "ohash";
 import { withQuery } from "ufo";
 import { computed, onBeforeUnmount, onMounted, provide, ref, shallowRef, toRaw, watch } from "vue";
 import ScriptAriaLoadingIndicator from "../ScriptAriaLoadingIndicator.vue";
-export const MAP_INJECTION_KEY = /* @__PURE__ */ Symbol("map");
+import { MAP_INJECTION_KEY } from "./injectionKeys";
+export { MAP_INJECTION_KEY } from "./injectionKeys";
 </script>
 <script setup>
@@ -78,14 +79,11 @@ const mapMarkers = ref(/* @__PURE__ */ new Map());
 function isLocationQuery(s) {
   return typeof s === "string" && (s.split(",").length > 2 || s.includes("+"));
 }
-function resetMapMarkerMap(_marker) {
-  return new Promise(async (resolve) => {
-    const marker = _marker instanceof Promise ? await _marker : _marker;
-    if (marker) {
-      marker.setMap(null);
-    }
-    resolve();
-  });
+async function resetMapMarkerMap(_marker) {
+  const marker = _marker instanceof Promise ? await _marker : _marker;
+  if (marker) {
+    marker.setMap(null);
+  }
 }
 function normalizeAdvancedMapMarkerOptions(_options) {
   const opts = typeof _options === "string" ? {
@@ -109,13 +107,12 @@ async function createAdvancedMapMarker(_options) {
   const key = hash({ position: normalizedOptions.position });
   if (mapMarkers.value.has(key))
     return mapMarkers.value.get(key);
-  const p = new Promise(async (resolve) => {
-    const lib = await importLibrary("marker");
+  const p = importLibrary("marker").then((lib) => {
     const mapMarkerOptions = {
       ...toRaw(normalizedOptions),
       map: toRaw(map.value)
     };
-    resolve(new lib.AdvancedMarkerElement(mapMarkerOptions));
+    return new lib.AdvancedMarkerElement(mapMarkerOptions);
   });
   mapMarkers.value.set(key, p);
   return p;
@@ -367,12 +364,14 @@ const rootAttrs = computed(() => {
     ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
   });
 });
-onBeforeUnmount(async () => {
-  await Promise.all(Array.from(mapMarkers.value.entries(), ([, marker]) => resetMapMarkerMap(marker)));
-  mapMarkers.value.clear();
+onBeforeUnmount(() => {
   map.value?.unbindAll();
   map.value = void 0;
   mapEl.value?.firstChild?.remove();
+  libraries.clear();
+  queryToLatLngCache.clear();
+  Promise.all(Array.from(mapMarkers.value.entries(), ([, marker]) => resetMapMarkerMap(marker)));
+  mapMarkers.value.clear();
 });
 </script>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMaps.vue.d.ts CHANGED Viewed

@@ -18,11 +18,8 @@ export interface PlaceholderOptions {
     signature?: string;
 }
 import type { ElementScriptTrigger } from '#nuxt-scripts/types';
-import type { HTMLAttributes, ImgHTMLAttributes, InjectionKey, Ref, ReservedProps, ShallowRef } from 'vue';
-export declare const MAP_INJECTION_KEY: InjectionKey<{
-    map: ShallowRef<google.maps.Map | undefined>;
-    mapsApi: Ref<typeof google.maps | undefined>;
-}>;
+import type { HTMLAttributes, ImgHTMLAttributes, Ref, ReservedProps, ShallowRef } from 'vue';
+export { MAP_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.d.vue.ts CHANGED Viewed

@@ -1,7 +1,4 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const ADVANCED_MARKER_ELEMENT_INJECTION_KEY: InjectionKey<{
-    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
-}>;
+export { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue CHANGED Viewed

@@ -1,9 +1,9 @@
 <script>
-import { whenever } from "@vueuse/core";
-import { inject, onUnmounted, provide, ref, shallowRef } from "vue";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { inject, provide, watch } from "vue";
+import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from "./injectionKeys";
 import { MARKER_CLUSTERER_INJECTION_KEY } from "./ScriptGoogleMapsMarkerClusterer.vue";
-export const ADVANCED_MARKER_ELEMENT_INJECTION_KEY = /* @__PURE__ */ Symbol("marker");
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
+export { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from "./injectionKeys";
 </script>
 <script setup>
@@ -36,51 +36,40 @@ const eventsWithMapMouseEventPayload = [
   "mouseover",
   "mouseup"
 ];
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
 const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, void 0);
-const advancedMarkerElement = shallowRef(void 0);
-const isUnmounted = ref(false);
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, async () => {
-  await mapContext.mapsApi.value.importLibrary("marker");
-  if (isUnmounted.value)
-    return;
-  advancedMarkerElement.value = new mapContext.mapsApi.value.marker.AdvancedMarkerElement(props.options);
-  setupAdvancedMarkerElementEventListeners(advancedMarkerElement.value);
-  if (markerClustererContext?.markerClusterer.value) {
-    markerClustererContext.markerClusterer.value.addMarker(advancedMarkerElement.value);
-  } else {
-    advancedMarkerElement.value.map = mapContext.map.value;
-  }
-  whenever(() => props.options, (options) => {
-    if (advancedMarkerElement.value && options) {
-      Object.assign(advancedMarkerElement.value, options);
+const advancedMarkerElement = useGoogleMapsResource({
+  async create({ mapsApi, map }) {
+    await mapsApi.importLibrary("marker");
+    const marker = new mapsApi.marker.AdvancedMarkerElement(props.options);
+    setupEventListeners(marker);
+    if (markerClustererContext?.markerClusterer.value) {
+      markerClustererContext.markerClusterer.value.addMarker(marker);
+    } else {
+      marker.map = map;
+    }
+    return marker;
+  },
+  cleanup(marker, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(marker);
+    if (markerClustererContext?.markerClusterer.value) {
+      markerClustererContext.markerClusterer.value.removeMarker(marker);
+    } else {
+      marker.map = null;
     }
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  isUnmounted.value = true;
-  if (!advancedMarkerElement.value || !mapContext?.mapsApi.value) {
-    return;
-  }
-  mapContext.mapsApi.value.event.clearInstanceListeners(advancedMarkerElement.value);
-  if (markerClustererContext) {
-    markerClustererContext.markerClusterer.value?.removeMarker(advancedMarkerElement.value);
-  } else {
-    advancedMarkerElement.value.map = null;
   }
 });
+watch(() => props.options, (options) => {
+  if (advancedMarkerElement.value && options) {
+    Object.assign(advancedMarkerElement.value, options);
+  }
+}, { deep: true });
 provide(ADVANCED_MARKER_ELEMENT_INJECTION_KEY, { advancedMarkerElement });
-function setupAdvancedMarkerElementEventListeners(advancedMarkerElement2) {
+function setupEventListeners(marker) {
   eventsWithoutPayload.forEach((event) => {
-    advancedMarkerElement2.addListener(event, () => emit(event));
+    marker.addListener(event, () => emit(event));
   });
   eventsWithMapMouseEventPayload.forEach((event) => {
-    advancedMarkerElement2.addListener(event, (payload) => emit(event, payload));
+    marker.addListener(event, (payload) => emit(event, payload));
   });
 }
 </script>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsAdvancedMarkerElement.vue.d.ts CHANGED Viewed

@@ -1,7 +1,4 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const ADVANCED_MARKER_ELEMENT_INJECTION_KEY: InjectionKey<{
-    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
-}>;
+export { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsCircle.vue CHANGED Viewed

@@ -1,7 +1,6 @@
 <script setup>
-import { whenever } from "@vueuse/core";
-import { inject, onUnmounted } from "vue";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { watch } from "vue";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
@@ -23,36 +22,28 @@ const eventsWithMapMouseEventPayload = [
   "mouseup",
   "rightclick"
 ];
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-let circle;
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  circle = new mapContext.mapsApi.value.Circle({
-    map: mapContext.map.value,
-    ...props.options
-  });
-  setupCircleEventListeners(circle);
-  whenever(() => props.options, (options) => {
-    circle?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  if (!circle || !mapContext?.mapsApi.value) {
-    return;
+const circle = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const c = new mapsApi.Circle({ map, ...props.options });
+    setupEventListeners(c);
+    return c;
+  },
+  cleanup(c, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(c);
+    c.setMap(null);
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(circle);
-  circle.setMap(null);
 });
-function setupCircleEventListeners(circle2) {
+watch(() => props.options, (options) => {
+  if (circle.value && options) {
+    circle.value.setOptions(options);
+  }
+}, { deep: true });
+function setupEventListeners(c) {
   eventsWithoutPayload.forEach((event) => {
-    circle2.addListener(event, () => emit(event));
+    c.addListener(event, () => emit(event));
   });
   eventsWithMapMouseEventPayload.forEach((event) => {
-    circle2.addListener(event, (payload) => emit(event, payload));
+    c.addListener(event, (payload) => emit(event, payload));
   });
 }
 </script>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsHeatmapLayer.vue CHANGED Viewed

@@ -1,30 +1,26 @@
 <script setup>
-import { whenever } from "@vueuse/core";
-import { inject, onUnmounted } from "vue";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { watch } from "vue";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-let heatmapLayer;
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, async () => {
-  await mapContext.mapsApi.value.importLibrary("visualization");
-  heatmapLayer = new mapContext.mapsApi.value.visualization.HeatmapLayer({
-    map: mapContext.map.value,
-    ...props.options
-  });
-  whenever(() => props.options, (options) => {
-    heatmapLayer?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  heatmapLayer?.setMap(null);
+const heatmapLayer = useGoogleMapsResource({
+  async create({ mapsApi, map }) {
+    await mapsApi.importLibrary("visualization");
+    return new mapsApi.visualization.HeatmapLayer({
+      map,
+      ...props.options
+    });
+  },
+  cleanup(layer) {
+    layer.setMap(null);
+  }
 });
+watch(() => props.options, (options) => {
+  if (heatmapLayer.value && options) {
+    heatmapLayer.value.setOptions(options);
+  }
+}, { deep: true });
 </script>
 <template>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsInfoWindow.vue CHANGED Viewed

@@ -1,9 +1,7 @@
 <script setup>
-import { whenever } from "@vueuse/core";
-import { inject, onUnmounted, useTemplateRef } from "vue";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
-import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from "./ScriptGoogleMapsAdvancedMarkerElement.vue";
-import { MARKER_INJECTION_KEY } from "./ScriptGoogleMapsMarker.vue";
+import { inject, useTemplateRef, watch } from "vue";
+import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY, MARKER_INJECTION_KEY } from "./injectionKeys";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: null, required: false }
 });
@@ -19,58 +17,53 @@ const infoWindowEvents = [
   "visible",
   "zindex_changed"
 ];
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
 const markerContext = inject(MARKER_INJECTION_KEY, void 0);
 const advancedMarkerElementContext = inject(ADVANCED_MARKER_ELEMENT_INJECTION_KEY, void 0);
 const infoWindowContainer = useTemplateRef("info-window-container");
-let infoWindow;
-whenever(
-  () => mapContext?.map.value && mapContext.mapsApi.value && infoWindowContainer.value,
-  () => {
-    infoWindow = new mapContext.mapsApi.value.InfoWindow({
+let markerClickListener;
+const infoWindow = useGoogleMapsResource({
+  ready: () => !!infoWindowContainer.value,
+  create({ mapsApi, map }) {
+    const iw = new mapsApi.InfoWindow({
       content: infoWindowContainer.value,
       ...props.options
     });
-    setupInfoWindowEventListeners(infoWindow);
+    setupEventListeners(iw);
     if (markerContext?.marker.value) {
-      markerContext.marker.value.addListener("click", () => {
-        infoWindow.open({
+      markerClickListener = markerContext.marker.value.addListener("click", () => {
+        iw.open({
           anchor: markerContext.marker.value,
-          map: mapContext.map.value
+          map
         });
       });
     } else if (advancedMarkerElementContext?.advancedMarkerElement.value) {
-      advancedMarkerElementContext.advancedMarkerElement.value.addListener("click", () => {
-        infoWindow.open({
+      markerClickListener = advancedMarkerElementContext.advancedMarkerElement.value.addListener("click", () => {
+        iw.open({
           anchor: advancedMarkerElementContext.advancedMarkerElement.value,
-          map: mapContext.map.value
+          map
         });
       });
     } else {
-      infoWindow.setPosition(props.options?.position);
-      infoWindow.open(mapContext.map.value);
+      iw.setPosition(props.options?.position);
+      iw.open(map);
     }
-    whenever(() => props.options, (options) => {
-      infoWindow?.setOptions(options);
-    }, {
-      deep: true
-    });
+    return iw;
   },
-  {
-    immediate: true,
-    once: true
-  }
-);
-onUnmounted(() => {
-  if (!infoWindow || !mapContext?.mapsApi.value) {
-    return;
+  cleanup(iw, { mapsApi }) {
+    markerClickListener?.remove();
+    markerClickListener = void 0;
+    mapsApi.event.clearInstanceListeners(iw);
+    iw.close();
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(infoWindow);
-  infoWindow.close();
 });
-function setupInfoWindowEventListeners(infoWindow2) {
+watch(() => props.options, (options) => {
+  if (infoWindow.value && options) {
+    infoWindow.value.setOptions(options);
+  }
+}, { deep: true });
+function setupEventListeners(iw) {
   infoWindowEvents.forEach((event) => {
-    infoWindow2.addListener(event, () => emit(event));
+    iw.addListener(event, () => emit(event));
   });
 }
 </script>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.d.vue.ts CHANGED Viewed

@@ -1,7 +1,4 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const MARKER_INJECTION_KEY: InjectionKey<{
-    marker: ShallowRef<google.maps.Marker | undefined>;
-}>;
+export { MARKER_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vue CHANGED Viewed

@@ -1,9 +1,9 @@
 <script>
-import { whenever } from "@vueuse/core";
-import { inject, onUnmounted, provide, shallowRef } from "vue";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { inject, provide, watch } from "vue";
+import { MARKER_INJECTION_KEY } from "./injectionKeys";
 import { MARKER_CLUSTERER_INJECTION_KEY } from "./ScriptGoogleMapsMarkerClusterer.vue";
-export const MARKER_INJECTION_KEY = /* @__PURE__ */ Symbol("marker");
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
+export { MARKER_INJECTION_KEY } from "./injectionKeys";
 </script>
 <script setup>
@@ -36,46 +36,41 @@ const eventsWithMapMouseEventPayload = [
   "mouseover",
   "mouseup"
 ];
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
 const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, void 0);
-const marker = shallowRef(void 0);
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  marker.value = new mapContext.mapsApi.value.Marker(props.options);
-  setupMarkerEventListeners(marker.value);
-  if (markerClustererContext?.markerClusterer.value) {
-    markerClustererContext.markerClusterer.value.addMarker(marker.value, true);
-    markerClustererContext.requestRerender();
-  } else {
-    marker.value.setMap(mapContext.map.value);
+const marker = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const m = new mapsApi.Marker(props.options);
+    setupEventListeners(m);
+    if (markerClustererContext?.markerClusterer.value) {
+      markerClustererContext.markerClusterer.value.addMarker(m, true);
+      markerClustererContext.requestRerender();
+    } else {
+      m.setMap(map);
+    }
+    return m;
+  },
+  cleanup(m, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(m);
+    if (markerClustererContext?.markerClusterer.value) {
+      markerClustererContext.markerClusterer.value.removeMarker(m, true);
+      markerClustererContext.requestRerender();
+    } else {
+      m.setMap(null);
+    }
   }
-  whenever(() => props.options, (options) => {
-    marker.value?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
 });
-onUnmounted(() => {
-  if (!marker.value || !mapContext?.mapsApi.value) {
-    return;
-  }
-  mapContext.mapsApi.value.event.clearInstanceListeners(marker.value);
-  if (markerClustererContext?.markerClusterer.value) {
-    markerClustererContext.markerClusterer.value.removeMarker(marker.value, true);
-    markerClustererContext.requestRerender();
-  } else {
-    marker.value.setMap(null);
+watch(() => props.options, (options) => {
+  if (marker.value && options) {
+    marker.value.setOptions(options);
   }
-});
+}, { deep: true });
 provide(MARKER_INJECTION_KEY, { marker });
-function setupMarkerEventListeners(marker2) {
+function setupEventListeners(m) {
   eventsWithoutPayload.forEach((event) => {
-    marker2.addListener(event, () => emit(event));
+    m.addListener(event, () => emit(event));
   });
   eventsWithMapMouseEventPayload.forEach((event) => {
-    marker2.addListener(event, (payload) => emit(event, payload));
+    m.addListener(event, (payload) => emit(event, payload));
   });
 }
 </script>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vue.d.ts CHANGED Viewed

@@ -1,7 +1,4 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const MARKER_INJECTION_KEY: InjectionKey<{
-    marker: ShallowRef<google.maps.Marker | undefined>;
-}>;
+export { MARKER_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsMarkerClusterer.vue CHANGED Viewed

@@ -1,7 +1,7 @@
 <script>
 import { whenever } from "@vueuse/core";
-import { inject, onUnmounted, provide, shallowRef } from "vue";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { provide, shallowRef } from "vue";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
 export const MARKER_CLUSTERER_INJECTION_KEY = /* @__PURE__ */ Symbol("marker-clusterer");
 </script>
@@ -15,18 +15,20 @@ const markerClustererEvents = [
   "clusteringbegin",
   "clusteringend"
 ];
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-const markerClusterer = shallowRef(void 0);
-whenever(() => mapContext?.map.value, async (map) => {
-  const { MarkerClusterer } = await import("@googlemaps/markerclusterer");
-  markerClusterer.value = new MarkerClusterer({
-    map,
-    ...props.options
-  });
-  setupMarkerClustererEventListeners(markerClusterer.value);
-}, {
-  immediate: true,
-  once: true
+const markerClusterer = useGoogleMapsResource({
+  async create({ map }) {
+    const { MarkerClusterer } = await import("@googlemaps/markerclusterer");
+    const clusterer = new MarkerClusterer({
+      map,
+      ...props.options
+    });
+    setupEventListeners(clusterer);
+    return clusterer;
+  },
+  cleanup(clusterer, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(clusterer);
+    clusterer.setMap(null);
+  }
 });
 const markerClustererNeedsRerender = shallowRef(false);
 function requestRerender() {
@@ -36,13 +38,6 @@ whenever(() => markerClustererNeedsRerender.value && markerClusterer.value, () =
   markerClusterer.value.render();
   markerClustererNeedsRerender.value = false;
 });
-onUnmounted(() => {
-  if (!markerClusterer.value || !mapContext?.mapsApi.value) {
-    return;
-  }
-  mapContext.mapsApi.value.event.clearInstanceListeners(markerClusterer.value);
-  markerClusterer.value.setMap(null);
-});
 provide(
   MARKER_CLUSTERER_INJECTION_KEY,
   {
@@ -50,7 +45,7 @@ provide(
     requestRerender
   }
 );
-function setupMarkerClustererEventListeners(clusterer) {
+function setupEventListeners(clusterer) {
   markerClustererEvents.forEach((event) => {
     clusterer.addListener(event, () => emit(event, clusterer));
   });