@nuxt/scripts 1.0.0-beta.7 → 1.0.0-rc.10

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

@@ -1,59 +1,67 @@
 <script>
-import { computed, onBeforeUnmount, onMounted, ref, watch, toRaw, provide, shallowRef } from "vue";
-import { withQuery } from "ufo";
-import { defu } from "defu";
-import { hash } from "ohash";
-import { tryUseNuxtApp, useHead, useRuntimeConfig } from "nuxt/app";
-import { scriptRuntimeConfig } from "#nuxt-scripts/utils";
-import { useScriptTriggerElement } from "#nuxt-scripts/composables/useScriptTriggerElement";
-import { useScriptGoogleMaps } from "#nuxt-scripts/registry/google-maps";
-import ScriptAriaLoadingIndicator from "../ScriptAriaLoadingIndicator.vue";
-export const MAP_INJECTION_KEY = /* @__PURE__ */ Symbol("map");
+export { MAP_INJECTION_KEY } from "./useGoogleMapsResource";
 </script>
 
 <script setup>
+import { useScriptTriggerElement } from "#nuxt-scripts/composables/useScriptTriggerElement";
+import { useScriptGoogleMaps } from "#nuxt-scripts/registry/google-maps";
+import { scriptRuntimeConfig, scriptsPrefix } from "#nuxt-scripts/utils";
+import { defu } from "defu";
+import { tryUseNuxtApp, useHead, useRuntimeConfig } from "nuxt/app";
+import { computed, onBeforeUnmount, onMounted, provide, ref, shallowRef, toRaw, useAttrs, useTemplateRef, watch } from "vue";
+import ScriptAriaLoadingIndicator from "../ScriptAriaLoadingIndicator.vue";
+import { defineDeprecatedAlias, MAP_INJECTION_KEY, waitForMapsReady, warnDeprecatedTopLevelMapProps } from "./useGoogleMapsResource";
 const props = defineProps({
   trigger: { type: [String, Array, Boolean], required: false, default: ["mouseenter", "mouseover", "mousedown"] },
-  aboveTheFold: { type: Boolean, required: false },
   apiKey: { type: String, required: false },
   center: { type: null, required: false },
-  centerMarker: { type: Boolean, required: false, default: true },
+  zoom: { type: Number, required: false },
   mapOptions: { type: null, required: false },
   region: { type: String, required: false },
   language: { type: String, required: false },
   version: { type: String, required: false },
   width: { type: [Number, String], required: false, default: 640 },
   height: { type: [Number, String], required: false, default: 400 },
-  placeholderOptions: { type: Object, required: false },
-  placeholderAttrs: { type: Object, required: false },
   rootAttrs: { type: Object, required: false },
-  markers: { type: Array, required: false },
   mapIds: { type: Object, required: false },
   colorMode: { type: String, required: false }
 });
 const emits = defineEmits(["ready", "error"]);
+defineSlots();
+const DIGITS_ONLY_RE = /^\d+$/;
+const DIGITS_PX_RE = /^\d+px$/i;
 const apiKey = props.apiKey || scriptRuntimeConfig("googleMaps")?.apiKey;
 const runtimeConfig = useRuntimeConfig();
-const proxyConfig = runtimeConfig.public["nuxt-scripts"]?.googleStaticMapsProxy;
-const nuxtApp = tryUseNuxtApp();
-const nuxtColorMode = nuxtApp?.$colorMode;
-const currentColorMode = computed(() => {
-  if (props.colorMode)
-    return props.colorMode;
-  if (nuxtColorMode?.value)
-    return nuxtColorMode.value === "dark" ? "dark" : "light";
-  return "light";
+const nuxtColorMode = computed(() => {
+  const value = tryUseNuxtApp()?.$colorMode?.value;
+  return value === "dark" || value === "light" ? value : void 0;
 });
+const currentColorMode = computed(() => props.colorMode || nuxtColorMode.value || "light");
 const currentMapId = computed(() => {
   if (!props.mapIds)
     return props.mapOptions?.mapId;
   return props.mapIds[currentColorMode.value] || props.mapIds.light || props.mapOptions?.mapId;
 });
-const mapsApi = ref();
-if (import.meta.dev && !apiKey)
-  throw new Error("GoogleMaps requires an API key. Please provide `apiKey` on the <ScriptGoogleMaps> or globally via `runtimeConfig.public.scripts.googleMaps.apiKey`.");
-const rootEl = ref();
-const mapEl = ref();
+const mapsApi = shallowRef();
+if (import.meta.dev) {
+  if (!apiKey)
+    throw new Error("GoogleMaps requires an API key. Enable it in your nuxt.config:\n\n  scripts: {\n    registry: {\n      googleMaps: true\n    }\n  }\n\nThen set NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY in your .env file.\n\nAlternatively, pass `api-key` directly on the <ScriptGoogleMaps> component (note: this exposes the key client-side).");
+  const attrs = useAttrs();
+  const removedProps = {
+    markers: "Use child <ScriptGoogleMapsMarker> components instead.",
+    centerMarker: 'Use a child <ScriptGoogleMapsMarker :position="center" /> instead.',
+    placeholderOptions: "Use <ScriptGoogleMapsStaticMap> inside the #placeholder slot instead.",
+    placeholderAttrs: "Use <ScriptGoogleMapsStaticMap> with :img-attrs instead.",
+    aboveTheFold: 'Use <ScriptGoogleMapsStaticMap loading="eager"> inside #placeholder instead.'
+  };
+  for (const [prop, message] of Object.entries(removedProps)) {
+    if (prop in attrs)
+      console.warn(`[nuxt-scripts] <ScriptGoogleMaps> prop "${prop}" was removed in v1. ${message} See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1`);
+  }
+  warnDeprecatedTopLevelMapProps({ center: props.center, zoom: props.zoom });
+}
+const rootEl = useTemplateRef("rootEl");
+const mapEl = useTemplateRef("mapEl");
 const centerOverride = ref();
 const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const { load, status, onLoaded } = useScriptGoogleMaps({
@@ -67,89 +75,57 @@ const { load, status, onLoaded } = useScriptGoogleMaps({
 });
 const options = computed(() => {
   const mapId = props.mapOptions?.styles ? void 0 : currentMapId.value || "map";
-  return defu({ center: centerOverride.value, mapId }, props.mapOptions, {
-    center: props.center,
-    zoom: 15
-  });
+  return defu(
+    { center: centerOverride.value, mapId },
+    props.mapOptions,
+    { center: props.center, zoom: props.zoom },
+    { zoom: 15 }
+  );
 });
-const ready = ref(false);
+const isMapReady = ref(false);
 const map = shallowRef();
-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();
-  });
-}
-function normalizeAdvancedMapMarkerOptions(_options) {
-  const opts = typeof _options === "string" ? {
-    position: {
-      lat: Number.parseFloat(_options.split(",")[0] || "0"),
-      lng: Number.parseFloat(_options.split(",")[1] || "0")
-    }
-  } : _options || {};
-  if (!opts.position) {
-    opts.position = {
-      lat: 0,
-      lng: 0
-    };
-  }
-  return opts;
-}
-async function createAdvancedMapMarker(_options) {
-  if (!_options)
-    return;
-  const normalizedOptions = normalizeAdvancedMapMarkerOptions(_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 mapMarkerOptions = {
-      ...toRaw(normalizedOptions),
-      map: toRaw(map.value)
-    };
-    resolve(new lib.AdvancedMarkerElement(mapMarkerOptions));
-  });
-  mapMarkers.value.set(key, p);
-  return p;
-}
 const queryToLatLngCache = /* @__PURE__ */ new Map();
-async function resolveQueryToLatLang(query) {
+async function resolveQueryToLatLng(query) {
   if (query && typeof query === "object")
     return Promise.resolve(query);
   if (queryToLatLngCache.has(query)) {
     return Promise.resolve(queryToLatLngCache.get(query));
   }
-  return new Promise(async (resolve, reject) => {
-    if (!mapsApi.value) {
-      await load();
-      await new Promise((resolve2) => {
-        const _ = watch(mapsApi, () => {
-          _();
-          resolve2();
-        });
-      });
-    }
-    const placesService = new mapsApi.value.places.PlacesService(map.value);
-    placesService.findPlaceFromQuery({
-      query,
-      fields: ["name", "geometry"]
-    }, (results, status2) => {
-      if (status2 === "OK" && results?.[0]?.geometry?.location)
-        return resolve(results[0].geometry.location);
-      return reject(new Error(`No location found for ${query}`));
+  const endpoints = runtimeConfig.public["nuxt-scripts"]?.endpoints;
+  if (endpoints?.googleMaps) {
+    const data = await $fetch(`${scriptsPrefix()}/proxy/google-maps-geocode`, {
+      params: { address: query }
     });
-  }).then((res) => {
-    queryToLatLngCache.set(query, res);
-    return res;
+    if (data.status === "OK" && data.results?.[0]?.geometry?.location) {
+      const loc = data.results[0].geometry.location;
+      const latLng = { lat: loc.lat, lng: loc.lng };
+      queryToLatLngCache.set(query, latLng);
+      return latLng;
+    }
+    throw new Error(`No location found for ${query}`);
+  }
+  await waitForMapsReady({ mapsApi, map, status, load });
+  const placesService = new mapsApi.value.places.PlacesService(map.value);
+  const result = await new Promise((resolve, reject) => {
+    placesService.findPlaceFromQuery(
+      {
+        query,
+        fields: ["name", "geometry"]
+      },
+      (results, status2) => {
+        if (status2 === "OK" && results?.[0]?.geometry?.location) {
+          resolve(results[0].geometry.location);
+        } else {
+          reject(new Error(`No location found for ${query}`));
+        }
+      }
+    );
   });
+  queryToLatLngCache.set(query, result);
+  return result;
 }
 const libraries = /* @__PURE__ */ new Map();
 function importLibrary(key) {
@@ -171,19 +147,40 @@ function importLibrary(key) {
   libraries.set(key, cached);
   return cached;
 }
-const googleMaps = {
+const exposed = {
+  mapsApi,
+  // Plain alias for production. In dev, replaced below with a getter that
+  // emits a one-shot deprecation warning. Both forms return the same
+  // shallow ref as `mapsApi`.
   googleMaps: mapsApi,
   map,
-  createAdvancedMapMarker,
-  resolveQueryToLatLang,
+  resolveQueryToLatLng,
   importLibrary
 };
-defineExpose(googleMaps);
-provide(MAP_INJECTION_KEY, { map, mapsApi });
+if (import.meta.dev) {
+  defineDeprecatedAlias(
+    exposed,
+    "googleMaps",
+    "mapsApi",
+    '[nuxt-scripts] <ScriptGoogleMaps> expose key "googleMaps" is deprecated; use "mapsApi" instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1'
+  );
+}
+defineExpose(exposed);
+let activeInfoWindow;
+provide(MAP_INJECTION_KEY, {
+  map,
+  mapsApi,
+  activateInfoWindow(iw) {
+    if (activeInfoWindow && activeInfoWindow !== iw) {
+      activeInfoWindow.close();
+    }
+    activeInfoWindow = iw;
+  }
+});
 onMounted(() => {
-  watch(ready, (v) => {
+  watch(isMapReady, (v) => {
     if (v) {
-      emits("ready", googleMaps);
+      emits("ready", exposed);
     }
   });
   watch(status, (v) => {
@@ -192,60 +189,32 @@ onMounted(() => {
     }
   });
   watch(options, () => {
-    map.value?.setOptions(options.value);
-  });
-  watch([() => props.markers, map], async () => {
-    if (!map.value) {
+    if (!map.value)
       return;
-    }
-    const nextMap = new Map((props.markers || []).map((m) => [hash({ position: normalizeAdvancedMapMarkerOptions(m).position }), m]));
-    const toRemove = new Set([
-      ...mapMarkers.value.keys()
-    ].filter((k) => !nextMap.has(k)));
-    const toAdd = new Set([...nextMap.keys()].filter((k) => !mapMarkers.value.has(k)));
-    const centerHash = hash({ position: options.value.center });
-    for (const key of toRemove) {
-      if (props.centerMarker && key === centerHash) {
-        continue;
-      }
-      const marker = await mapMarkers.value.get(key);
-      if (marker) {
-        resetMapMarkerMap(marker).then(() => {
-          mapMarkers.value.delete(key);
-        });
-      }
-    }
-    for (const k of toAdd) {
-      createAdvancedMapMarker(nextMap.get(k));
-    }
-  }, {
-    immediate: true,
-    deep: true
+    const { center: _, zoom: __, ...rest } = options.value;
+    map.value.setOptions(rest);
   });
-  watch([() => options.value.center, ready, map], async (next, prev) => {
+  watch(() => options.value.zoom, (zoom) => {
+    if (map.value && zoom != null)
+      map.value.setZoom(zoom);
+  });
+  watch([() => options.value.center, isMapReady, map], async (next) => {
     if (!map.value) {
       return;
     }
     let center = toRaw(next[0]);
     if (center) {
-      if (isLocationQuery(center) && ready.value) {
-        center = await resolveQueryToLatLang(center);
+      if (isLocationQuery(center) && isMapReady.value) {
+        center = await resolveQueryToLatLng(center);
       }
-      map.value.setCenter(center);
-      if (props.centerMarker) {
-        if (options.value.mapId) {
+      const current = map.value.getCenter();
+      if (current) {
+        const newLat = typeof center.lat === "function" ? center.lat() : center.lat;
+        const newLng = typeof center.lng === "function" ? center.lng() : center.lng;
+        if (current.lat() === newLat && current.lng() === newLng)
           return;
-        }
-        if (prev[0]) {
-          const prevCenterHash = hash({ position: prev[0] });
-          if (mapMarkers.value.has(prevCenterHash)) {
-            resetMapMarkerMap(mapMarkers.value.get(prevCenterHash)).then(() => {
-              mapMarkers.value.delete(prevCenterHash);
-            });
-          }
-        }
-        createAdvancedMapMarker({ position: center });
       }
+      map.value.setCenter(center);
     }
   }, {
     immediate: true
@@ -260,116 +229,68 @@ onMounted(() => {
     };
     map.value = new mapsApi.value.Map(mapEl.value, _options);
     if (center && isLocationQuery(center)) {
-      centerOverride.value = await resolveQueryToLatLang(center);
-      map.value?.setCenter(centerOverride.value);
+      centerOverride.value = await resolveQueryToLatLng(center);
+      if (centerOverride.value)
+        map.value?.setCenter(centerOverride.value);
     }
-    ready.value = true;
+    isMapReady.value = true;
   });
 });
-if (import.meta.server && !proxyConfig?.enabled) {
+if (import.meta.server) {
   useHead({
     link: [
       {
-        rel: props.aboveTheFold ? "preconnect" : "dns-prefetch",
+        rel: "dns-prefetch",
         href: "https://maps.googleapis.com"
       }
     ]
   });
 }
-function transformMapStyles(styles) {
-  return styles.map((style) => {
-    const feature = style.featureType ? `feature:${style.featureType}` : "";
-    const element = style.elementType ? `element:${style.elementType}` : "";
-    const rules = (style.stylers || []).map((styler) => {
-      return Object.entries(styler).map(([key, value]) => {
-        if (key === "color" && typeof value === "string") {
-          value = value.replace("#", "0x");
-        }
-        return `${key}:${value}`;
-      }).join("|");
-    }).filter(Boolean).join("|");
-    return [feature, element, rules].filter(Boolean).join("|");
-  }).filter(Boolean);
+function toCssUnit(value) {
+  if (value === void 0)
+    return void 0;
+  if (typeof value === "number")
+    return `${value}px`;
+  return value;
+}
+function isPixelValue(value) {
+  if (typeof value === "number")
+    return true;
+  if (typeof value === "string")
+    return DIGITS_ONLY_RE.test(value) || DIGITS_PX_RE.test(value);
+  return false;
 }
-const placeholder = computed(() => {
-  let center = options.value.center;
-  if (center && typeof center === "object") {
-    center = `${center.lat},${center.lng}`;
-  }
-  const placeholderOptions = defu(props.placeholderOptions, {
-    // only map option values
-    zoom: options.value.zoom,
-    center
-  }, {
-    size: `${props.width}x${props.height}`,
-    // Only include API key if not using proxy (proxy injects it server-side)
-    key: proxyConfig?.enabled ? void 0 : apiKey,
-    scale: 2,
-    // we assume a high DPI to avoid hydration issues
-    style: props.mapOptions?.styles ? transformMapStyles(props.mapOptions.styles) : void 0,
-    map_id: currentMapId.value,
-    markers: [
-      ...props.markers || [],
-      props.centerMarker && center
-    ].filter(Boolean).map((m) => {
-      if (typeof m === "object" && m.location) {
-        m = m.location;
-      }
-      if (typeof m === "object" && m.lat) {
-        return `${m.lat},${m.lng}`;
-      }
-      return m;
-    }).join("|")
-  });
-  const baseUrl = proxyConfig?.enabled ? "/_scripts/google-static-maps-proxy" : "https://maps.googleapis.com/maps/api/staticmap";
-  return withQuery(baseUrl, placeholderOptions);
-});
-const placeholderAttrs = computed(() => {
-  return defu(props.placeholderAttrs, {
-    src: placeholder.value,
-    alt: "Google Maps Static Map",
-    loading: props.aboveTheFold ? "eager" : "lazy",
-    style: {
-      cursor: "pointer",
-      width: "100%",
-      objectFit: "cover",
-      height: "100%"
-    }
-  });
-});
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
     "aria-busy": status.value === "loading",
-    "aria-label": status.value === "awaitingLoad" ? "Google Maps Static Map" : status.value === "loading" ? "Google Maps Map Embed Loading" : "Google Maps Embed",
+    "aria-label": status.value === "awaitingLoad" ? "Google Maps" : status.value === "loading" ? "Google Maps Loading" : "Google Maps",
     "aria-live": "polite",
     "role": "application",
     "style": {
       cursor: "pointer",
       position: "relative",
       maxWidth: "100%",
-      width: `${props.width}px`,
-      height: `'auto'`,
-      aspectRatio: `${props.width}/${props.height}`
+      width: toCssUnit(props.width),
+      height: isPixelValue(props.width) && isPixelValue(props.height) ? "auto" : toCssUnit(props.height),
+      aspectRatio: isPixelValue(props.width) && isPixelValue(props.height) ? `${props.width}/${props.height}` : void 0
     },
     ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
   });
 });
-onBeforeUnmount(async () => {
-  await Promise.all([...mapMarkers.value.entries()].map(([, marker]) => resetMapMarkerMap(marker)));
-  mapMarkers.value.clear();
+onBeforeUnmount(() => {
   map.value?.unbindAll();
   map.value = void 0;
   mapEl.value?.firstChild?.remove();
+  libraries.clear();
+  queryToLatLngCache.clear();
 });
 </script>
 
 <template>
   <div ref="rootEl" v-bind="rootAttrs">
-    <div v-show="ready" ref="mapEl" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
-    <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
-      <img v-bind="placeholderAttrs">
-    </slot>
-    <slot v-if="status !== 'awaitingLoad' && !ready" name="loading">
+    <div v-show="isMapReady" ref="mapEl" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
+    <slot v-if="!isMapReady" name="placeholder" />
+    <slot v-if="status !== 'awaitingLoad' && !isMapReady" name="loading">
       <ScriptAriaLoadingIndicator />
     </slot>
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />