@nuxt/scripts 1.0.0-rc.4 → 1.0.0-rc.6

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

@@ -1,35 +1,47 @@
+<script>
+
+</script>
+
 <script setup>
-import { computed, inject, ref, useTemplateRef, watch } from "vue";
+import { computed, inject, shallowRef, useTemplateRef, watch } from "vue";
 import { MARKER_CLUSTERER_INJECTION_KEY } from "./types";
-import { MARKER_INJECTION_KEY, useGoogleMapsResource } from "./useGoogleMapsResource";
+import { defineDeprecatedAlias, MARKER_INJECTION_KEY, normalizeLatLng, useGoogleMapsResource } from "./useGoogleMapsResource";
 defineOptions({
   inheritAttrs: false
 });
-const props = defineProps({
+const {
+  position,
+  defaultOpen = true,
+  anchor = "bottom-center",
+  offset,
+  pane = "floatPane",
+  zIndex,
+  blockMapInteraction = true,
+  panOnOpen = true,
+  hideWhenClustered = true
+} = defineProps({
   position: { type: null, required: false },
-  anchor: { type: String, required: false, default: "bottom-center" },
+  defaultOpen: { type: Boolean, required: false },
+  anchor: { type: String, required: false },
   offset: { type: Object, required: false },
-  pane: { type: String, required: false, default: "floatPane" },
+  pane: { type: String, required: false },
   zIndex: { type: Number, required: false },
-  blockMapInteraction: { type: Boolean, required: false, default: true },
-  panOnOpen: { type: [Boolean, Number], required: false, default: true },
-  hideWhenClustered: { type: Boolean, required: false, default: true }
+  blockMapInteraction: { type: Boolean, required: false },
+  panOnOpen: { type: [Boolean, Number], required: false },
+  hideWhenClustered: { type: Boolean, required: false }
 });
 defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: void 0 } });
+if (open.value === void 0)
+  open.value = defaultOpen ?? true;
 const markerContext = inject(MARKER_INJECTION_KEY, void 0);
 const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, void 0);
 function getResolvedPosition() {
-  if (props.position)
-    return props.position;
-  if (markerContext?.advancedMarkerElement.value) {
-    const pos = markerContext.advancedMarkerElement.value.position;
-    if (pos) {
-      if ("lat" in pos && typeof pos.lat === "function")
-        return { lat: pos.lat(), lng: pos.lng() };
-      return pos;
-    }
-  }
+  if (position)
+    return normalizeLatLng(position);
+  const markerPosition = markerContext?.advancedMarkerElement.value?.position;
+  if (markerPosition)
+    return normalizeLatLng(markerPosition);
   return void 0;
 }
 const ANCHOR_TRANSFORMS = {
@@ -43,21 +55,32 @@ const ANCHOR_TRANSFORMS = {
   "left-center": "translate(0, -50%)",
   "right-center": "translate(-100%, -50%)"
 };
-const overlayContent = useTemplateRef("overlay-content");
-const isPositioned = ref(false);
-const dataState = computed(() => isPositioned.value ? "open" : "closed");
+const overlayAnchor = useTemplateRef("overlay-anchor");
+const overlayPosition = shallowRef(void 0);
+const dataState = computed(
+  () => open.value !== false && overlayPosition.value !== void 0 ? "open" : "closed"
+);
+const overlayStyle = computed(() => {
+  const visible = open.value !== false && overlayPosition.value !== void 0;
+  if (!visible) {
+    return {
+      position: "absolute",
+      visibility: "hidden",
+      pointerEvents: "none"
+    };
+  }
+  const { x, y } = overlayPosition.value;
+  return {
+    position: "absolute",
+    left: `${x + (offset?.x ?? 0)}px`,
+    top: `${y + (offset?.y ?? 0)}px`,
+    transform: ANCHOR_TRANSFORMS[anchor],
+    zIndex: zIndex !== void 0 ? String(zIndex) : void 0,
+    visibility: "visible",
+    pointerEvents: "auto"
+  };
+});
 const listeners = [];
-function setDataState(el, state) {
-  el.dataset.state = state;
-  const child = el.firstElementChild;
-  if (child)
-    child.dataset.state = state;
-}
-function hideElement(el) {
-  el.style.visibility = "hidden";
-  el.style.pointerEvents = "none";
-  setDataState(el, "closed");
-}
 function panMapToFitOverlay(el, map, padding) {
   const child = el.firstElementChild;
   if (!child)
@@ -77,69 +100,59 @@ function panMapToFitOverlay(el, map, padding) {
   if (panX !== 0 || panY !== 0)
     map.panBy(panX, panY);
 }
-const overlay = useGoogleMapsResource({
-  // ready condition accesses .value on ShallowRefs — tracked by whenever() in useGoogleMapsResource
-  ready: () => !!overlayContent.value && !!(props.position || markerContext?.advancedMarkerElement.value),
-  create({ mapsApi, map }) {
-    const el = overlayContent.value;
-    class CustomOverlay extends mapsApi.OverlayView {
-      onAdd() {
-        const panes = this.getPanes();
-        if (panes) {
-          panes[props.pane].appendChild(el);
-          if (props.blockMapInteraction)
-            mapsApi.OverlayView.preventMapHitsAndGesturesFrom(el);
-        }
-        if (props.panOnOpen) {
-          const padding = typeof props.panOnOpen === "number" ? props.panOnOpen : 40;
-          requestAnimationFrame(() => {
-            panMapToFitOverlay(el, map, padding);
-          });
-        }
+function makeOverlayClass(mapsApi, map) {
+  return class CustomOverlay extends mapsApi.OverlayView {
+    onAdd() {
+      const panes = this.getPanes();
+      const el = overlayAnchor.value;
+      if (panes && el) {
+        panes[pane].appendChild(el);
+        if (blockMapInteraction)
+          mapsApi.OverlayView.preventMapHitsAndGesturesFrom(el);
       }
-      draw() {
-        if (open.value === false) {
-          isPositioned.value = false;
-          hideElement(el);
-          return;
-        }
-        const position = getResolvedPosition();
-        if (!position) {
-          isPositioned.value = false;
-          hideElement(el);
-          return;
-        }
-        const projection = this.getProjection();
-        if (!projection) {
-          isPositioned.value = false;
-          hideElement(el);
-          return;
-        }
-        const pos = projection.fromLatLngToDivPixel(
-          new mapsApi.LatLng(position.lat, position.lng)
-        );
-        if (!pos) {
-          isPositioned.value = false;
-          hideElement(el);
-          return;
-        }
-        el.style.position = "absolute";
-        el.style.left = `${pos.x + (props.offset?.x ?? 0)}px`;
-        el.style.top = `${pos.y + (props.offset?.y ?? 0)}px`;
-        el.style.transform = ANCHOR_TRANSFORMS[props.anchor];
-        if (props.zIndex !== void 0)
-          el.style.zIndex = String(props.zIndex);
-        el.style.visibility = "visible";
-        el.style.pointerEvents = "auto";
-        setDataState(el, "open");
-        isPositioned.value = true;
+      if (panOnOpen && open.value !== false) {
+        const padding = typeof panOnOpen === "number" ? panOnOpen : 40;
+        requestAnimationFrame(() => {
+          if (open.value !== false && overlayAnchor.value && overlayPosition.value)
+            panMapToFitOverlay(overlayAnchor.value, map, padding);
+        });
       }
-      onRemove() {
-        el.parentNode?.removeChild(el);
+    }
+    draw() {
+      if (open.value === false) {
+        overlayPosition.value = void 0;
+        return;
       }
+      const resolvedPosition = getResolvedPosition();
+      if (!resolvedPosition) {
+        overlayPosition.value = void 0;
+        return;
+      }
+      const projection = this.getProjection();
+      if (!projection) {
+        overlayPosition.value = void 0;
+        return;
+      }
+      const pos = projection.fromLatLngToDivPixel(
+        new mapsApi.LatLng(resolvedPosition.lat, resolvedPosition.lng)
+      );
+      if (!pos) {
+        overlayPosition.value = void 0;
+        return;
+      }
+      overlayPosition.value = { x: pos.x, y: pos.y };
     }
-    el.style.visibility = "hidden";
-    el.style.pointerEvents = "none";
+    onRemove() {
+      const el = overlayAnchor.value;
+      el?.parentNode?.removeChild(el);
+    }
+  };
+}
+const overlay = useGoogleMapsResource({
+  // ready condition accesses .value on ShallowRefs — tracked by whenever() in useGoogleMapsResource
+  ready: () => !!overlayAnchor.value && !!(position || markerContext?.advancedMarkerElement.value),
+  create({ mapsApi, map }) {
+    const CustomOverlay = makeOverlayClass(mapsApi, map);
     const ov = new CustomOverlay();
     ov.setMap(map);
     if (markerContext?.advancedMarkerElement.value) {
@@ -160,12 +173,8 @@ const overlay = useGoogleMapsResource({
 if (markerContext) {
   watch(
     () => {
-      const pos = markerContext.advancedMarkerElement.value?.position;
-      if (!pos)
-        return void 0;
-      if ("lat" in pos && typeof pos.lat === "function")
-        return { lat: pos.lat(), lng: pos.lng() };
-      return pos;
+      const markerPosition = markerContext.advancedMarkerElement.value?.position;
+      return markerPosition ? normalizeLatLng(markerPosition) : void 0;
     },
     () => {
       overlay.value?.draw();
@@ -173,7 +182,10 @@ if (markerContext) {
   );
 }
 watch(
-  () => [props.position?.lat, props.position?.lng, props.offset?.x, props.offset?.y, props.zIndex, props.anchor],
+  () => {
+    const p = position ? normalizeLatLng(position) : void 0;
+    return [p?.lat, p?.lng, offset?.x, offset?.y, zIndex, anchor];
+  },
   () => {
     overlay.value?.draw();
   }
@@ -183,7 +195,7 @@ watch(() => open.value, () => {
     return;
   overlay.value.draw();
 });
-watch([() => props.pane, () => props.blockMapInteraction], () => {
+watch([() => pane, () => blockMapInteraction], () => {
   if (overlay.value) {
     const map = overlay.value.getMap();
     overlay.value.setMap(null);
@@ -195,7 +207,7 @@ if (markerClustererContext && markerContext) {
   watch(
     () => markerClustererContext.clusteringVersion.value,
     () => {
-      if (!props.hideWhenClustered || open.value === false)
+      if (!hideWhenClustered || open.value === false)
         return;
       const clusterer = markerClustererContext.markerClusterer.value;
       if (!clusterer?.clusters)
@@ -211,13 +223,41 @@ if (markerClustererContext && markerContext) {
     }
   );
 }
-defineExpose({ overlay, dataState });
+const exposed = {
+  overlayView: overlay,
+  // 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 `overlayView`.
+  overlay,
+  dataState
+};
+if (import.meta.dev) {
+  defineDeprecatedAlias(
+    exposed,
+    "overlay",
+    "overlayView",
+    '[nuxt-scripts] <ScriptGoogleMapsOverlayView> expose key "overlay" is deprecated; use "overlayView" instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1'
+  );
+}
+defineExpose(exposed);
 </script>
 
 <template>
   <div style="display: none;">
-    <div ref="overlay-content" :data-state="dataState" v-bind="$attrs">
-      <slot />
+    <!--
+      Two-element structure:
+        - `overlay-anchor` is moved into a Google Maps pane on `onAdd()`. Its
+          inline style is reactively bound to `overlayStyle`, so position
+          updates from `draw()` flow through Vue's patcher even after the node
+          has been reparented out of the component tree.
+        - `overlay-content` carries `data-state`, attribute-based animations,
+          and forwards parent attrs (e.g. `class`) so consumers can target it
+          directly with `[data-state]` selectors.
+    -->
+    <div ref="overlay-anchor" :style="overlayStyle">
+      <div :data-state="dataState" v-bind="$attrs">
+        <slot />
+      </div>
     </div>
   </div>
 </template>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue.d.ts

@@ -1,16 +1,29 @@
-type OverlayAnchor = 'center' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-center' | 'right-center';
-type OverlayPane = 'mapPane' | 'overlayLayer' | 'markerLayer' | 'overlayMouseTarget' | 'floatPane';
-type __VLS_Props = {
+import type { ShallowRef } from 'vue';
+export type ScriptGoogleMapsOverlayAnchor = 'center' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-center' | 'right-center';
+export type ScriptGoogleMapsOverlayPane = 'mapPane' | 'overlayLayer' | 'markerLayer' | 'overlayMouseTarget' | 'floatPane';
+export interface ScriptGoogleMapsOverlayViewProps {
     /**
      * Geographic position for the overlay. Falls back to parent marker position if omitted.
+     *
+     * Accepts either a plain `LatLngLiteral` (`{ lat, lng }`) or a
+     * `google.maps.LatLng` instance.
      * @see https://developers.google.com/maps/documentation/javascript/reference/overlay-view#OverlayView
      */
-    position?: google.maps.LatLngLiteral;
+    position?: google.maps.LatLng | google.maps.LatLngLiteral;
+    /**
+     * Initial open state for the uncontrolled mode (when `v-model:open` is not
+     * bound). When omitted, the overlay opens on mount, matching v0 behaviour.
+     *
+     * Has no effect when `v-model:open` is used; pass an initial value to the
+     * bound ref instead.
+     * @default true
+     */
+    defaultOpen?: boolean;
     /**
      * Anchor point of the overlay relative to its position.
      * @default 'bottom-center'
      */
-    anchor?: OverlayAnchor;
+    anchor?: ScriptGoogleMapsOverlayAnchor;
     /**
      * Pixel offset from the anchor position.
      */
@@ -23,7 +36,7 @@ type __VLS_Props = {
      * @default 'floatPane'
      * @see https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapPanes
      */
-    pane?: OverlayPane;
+    pane?: ScriptGoogleMapsOverlayPane;
     /**
      * CSS z-index for the overlay element.
      */
@@ -45,31 +58,39 @@ type __VLS_Props = {
      * @default true
      */
     hideWhenClustered?: boolean;
-};
-type __VLS_Slots = {
+}
+export interface ScriptGoogleMapsOverlayViewEmits {
+    /** Event handler called when the open state of the overlay view changes. */
+    'update:open': [value: boolean];
+}
+export interface ScriptGoogleMapsOverlayViewSlots {
     default?: () => any;
-};
-type __VLS_ModelProps = {
-    'open'?: boolean;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    overlay: import("vue").ShallowRef<google.maps.OverlayView | undefined>;
-    dataState: import("vue").ComputedRef<"open" | "closed">;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {
-    anchor: OverlayAnchor;
-    pane: OverlayPane;
-    blockMapInteraction: boolean;
-    panOnOpen: boolean | number;
-    hideWhenClustered: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+}
+export interface ScriptGoogleMapsOverlayViewExpose {
+    /** The underlying `OverlayView` instance. */
+    overlayView: ShallowRef<google.maps.OverlayView | undefined>;
+    /**
+     * The underlying `OverlayView` instance.
+     *
+     * @deprecated Use `overlayView` instead. The `overlay` alias will be
+     * removed in a future major version.
+     * @see https://scripts.nuxt.com/docs/migration-guide/v0-to-v1
+     */
+    overlay: ShallowRef<google.maps.OverlayView | undefined>;
+    /** The current data-state of the overlay, either 'open' or 'closed'. */
+    dataState: Readonly<ShallowRef<'open' | 'closed'>>;
+}
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScriptGoogleMapsOverlayViewProps & {
+    open?: boolean;
+}, ScriptGoogleMapsOverlayViewExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ScriptGoogleMapsOverlayViewProps & {
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScriptGoogleMapsOverlayViewSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/GoogleMaps/useGoogleMapsResource.d.ts

@@ -25,6 +25,56 @@ export interface GoogleMapsResourceContext {
     map: google.maps.Map;
     mapsApi: typeof google.maps;
 }
+/**
+ * Normalizes a `LatLng | LatLngLiteral` value into a plain `LatLngLiteral`.
+ *
+ * Google's `LatLng` exposes coordinates via `.lat()`/`.lng()` methods, while
+ * `LatLngLiteral` exposes them as plain `lat`/`lng` numeric properties. The
+ * runtime distinguishes them by checking whether `.lat` is callable; this is
+ * preferred over `instanceof google.maps.LatLng` because mocked APIs in tests
+ * return plain objects rather than real `LatLng` instances.
+ */
+export declare function normalizeLatLng(p: google.maps.LatLng | google.maps.LatLngLiteral): google.maps.LatLngLiteral;
+/**
+ * Defines a deprecated property alias on an exposed object. Reading the alias
+ * returns the value of the canonical key and emits a one-shot
+ * `console.warn` (so repeated reads don't spam the console).
+ *
+ * Used to provide backward-compatible renames on `defineExpose` payloads
+ * without breaking existing template-ref consumers. Call sites should wrap
+ * this in `if (import.meta.dev)` so production builds skip the getter
+ * entirely and the alias stays a plain data property.
+ */
+export declare function defineDeprecatedAlias<T extends object, K extends keyof T>(target: T, alias: string, canonicalKey: K, message: string): T;
+/**
+ * Emits dev-mode deprecation warnings for the legacy top-level `center` and
+ * `zoom` props on `<ScriptGoogleMaps>`. Both props still work, but new code
+ * should pass them via `mapOptions` instead.
+ *
+ * Returns the number of warnings emitted (useful for tests).
+ */
+export declare function warnDeprecatedTopLevelMapProps(props: {
+    center?: unknown;
+    zoom?: unknown;
+}): number;
+/**
+ * Wait until the Google Maps API and a Map instance are both available.
+ *
+ * Triggers script loading via `load()` if not already loaded. Uses an
+ * immediate watcher (matching `importLibrary`'s pattern) to avoid the race
+ * where `load()` resolves synchronously: a non-immediate watcher would miss
+ * the change and the promise would hang forever.
+ *
+ * Rejects if `status` enters an `'error'` state before both refs are populated.
+ * Runs the watcher inside a detached effect scope so it is safe to call from
+ * any context (component setup, exposed methods, tests).
+ */
+export declare function waitForMapsReady({ mapsApi, map, status, load, }: {
+    mapsApi: ShallowRef<typeof google.maps | undefined>;
+    map: ShallowRef<google.maps.Map | undefined>;
+    status: Ref<string>;
+    load: () => Promise<unknown> | unknown;
+}): Promise<void>;
 /**
  * Composable for safely managing Google Maps resource lifecycle.
  *

package/dist/runtime/components/GoogleMaps/useGoogleMapsResource.js

@@ -1,5 +1,5 @@
 import { whenever } from "@vueuse/core";
-import { inject, onUnmounted, ref, shallowRef } from "vue";
+import { effectScope, inject, onUnmounted, ref, shallowRef, watch } from "vue";
 export const MAP_INJECTION_KEY = Symbol("map");
 export const MARKER_INJECTION_KEY = Symbol("marker");
 export function bindGoogleMapsEvents(instance, emit, config) {
@@ -10,6 +10,81 @@ export function bindGoogleMapsEvents(instance, emit, config) {
     instance.addListener(event, (payload) => emit(event, payload));
   });
 }
+export function normalizeLatLng(p) {
+  if (typeof p.lat === "function") {
+    const ll = p;
+    return { lat: ll.lat(), lng: ll.lng() };
+  }
+  return { lat: p.lat, lng: p.lng };
+}
+export function defineDeprecatedAlias(target, alias, canonicalKey, message) {
+  let warned = false;
+  Object.defineProperty(target, alias, {
+    get() {
+      if (!warned) {
+        warned = true;
+        console.warn(message);
+      }
+      return target[canonicalKey];
+    },
+    enumerable: true,
+    configurable: true
+  });
+  return target;
+}
+export function warnDeprecatedTopLevelMapProps(props) {
+  let warned = 0;
+  if (props.center !== void 0) {
+    warned++;
+    console.warn(
+      '[nuxt-scripts] <ScriptGoogleMaps> prop "center" is deprecated; use `:map-options="{ center: ... }"` instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1'
+    );
+  }
+  if (props.zoom !== void 0) {
+    warned++;
+    console.warn(
+      '[nuxt-scripts] <ScriptGoogleMaps> prop "zoom" is deprecated; use `:map-options="{ zoom: ... }"` instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1'
+    );
+  }
+  return warned;
+}
+export async function waitForMapsReady({
+  mapsApi,
+  map,
+  status,
+  load
+}) {
+  if (mapsApi.value && map.value)
+    return;
+  if (status.value === "error")
+    throw new Error("Google Maps script failed to load");
+  await load();
+  if (mapsApi.value && map.value)
+    return;
+  if (status.value === "error")
+    throw new Error("Google Maps script failed to load");
+  const scope = effectScope(true);
+  try {
+    await new Promise((resolve, reject) => {
+      scope.run(() => {
+        watch(
+          [mapsApi, map, status],
+          ([api, m, s]) => {
+            if (api && m) {
+              resolve();
+              return;
+            }
+            if (s === "error")
+              reject(new Error("Google Maps script failed to load"));
+          },
+          { immediate: true }
+        );
+      });
+    });
+  } finally {
+    scope.stop();
+  }
+}
 export function useGoogleMapsResource({
   ready,
   create,