@nuxt/scripts 1.0.0-beta.6 → 1.0.0-rc.1

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

@@ -0,0 +1,200 @@
+export type StaticMapFormat = 'png' | 'jpg' | 'gif' | 'png8' | 'png32' | 'jpg-baseline';
+export type StaticMapType = 'roadmap' | 'satellite' | 'terrain' | 'hybrid';
+import type { ImgHTMLAttributes, ReservedProps } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * The center of the map. Accepts a "lat,lng" string or a LatLngLiteral object.
+     */
+    center?: string | {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * Zoom level (0-21).
+     */
+    zoom?: number;
+    /**
+     * Explicit pixel size for the Static Maps API request, e.g. "640x400".
+     * When omitted, the component measures its rendered dimensions on mount and uses those.
+     * Falls back to "640x400" during SSR or when dimensions can't be measured.
+     */
+    size?: `${number}x${number}`;
+    /**
+     * Device pixel ratio for the static map image (1 or 2).
+     */
+    scale?: 1 | 2;
+    /**
+     * Image format.
+     */
+    format?: StaticMapFormat;
+    /**
+     * Map type.
+     */
+    maptype?: StaticMapType;
+    /**
+     * Cloud-based map styling ID.
+     */
+    mapId?: string;
+    /**
+     * Map markers. Supports multiple markers via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Markers
+     */
+    markers?: string | string[];
+    /**
+     * Polyline paths. Supports multiple paths via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Paths
+     */
+    path?: string | string[];
+    /**
+     * Locations that should be visible on the map.
+     */
+    visible?: string | string[];
+    /**
+     * Map styling. Accepts raw Static Maps API style strings or Google Maps JS API MapTypeStyle objects.
+     */
+    style?: string | string[] | google.maps.MapTypeStyle[];
+    /**
+     * Language code for map labels.
+     */
+    language?: string;
+    /**
+     * Region bias.
+     */
+    region?: string;
+    /**
+     * Digital signature for requests without an API key.
+     */
+    signature?: string;
+    /**
+     * API key override. When the proxy is enabled, this is ignored and the server-side key is used instead.
+     */
+    apiKey?: string;
+    /**
+     * CSS width for the container element.
+     */
+    width?: number | string;
+    /**
+     * CSS height for the container element.
+     */
+    height?: number | string;
+    /**
+     * Image loading strategy.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Object-fit for the image within its container.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    /**
+     * Additional attributes for the `<img>` element.
+     */
+    imgAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
+}, {
+    src: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The center of the map. Accepts a "lat,lng" string or a LatLngLiteral object.
+     */
+    center?: string | {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * Zoom level (0-21).
+     */
+    zoom?: number;
+    /**
+     * Explicit pixel size for the Static Maps API request, e.g. "640x400".
+     * When omitted, the component measures its rendered dimensions on mount and uses those.
+     * Falls back to "640x400" during SSR or when dimensions can't be measured.
+     */
+    size?: `${number}x${number}`;
+    /**
+     * Device pixel ratio for the static map image (1 or 2).
+     */
+    scale?: 1 | 2;
+    /**
+     * Image format.
+     */
+    format?: StaticMapFormat;
+    /**
+     * Map type.
+     */
+    maptype?: StaticMapType;
+    /**
+     * Cloud-based map styling ID.
+     */
+    mapId?: string;
+    /**
+     * Map markers. Supports multiple markers via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Markers
+     */
+    markers?: string | string[];
+    /**
+     * Polyline paths. Supports multiple paths via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Paths
+     */
+    path?: string | string[];
+    /**
+     * Locations that should be visible on the map.
+     */
+    visible?: string | string[];
+    /**
+     * Map styling. Accepts raw Static Maps API style strings or Google Maps JS API MapTypeStyle objects.
+     */
+    style?: string | string[] | google.maps.MapTypeStyle[];
+    /**
+     * Language code for map labels.
+     */
+    language?: string;
+    /**
+     * Region bias.
+     */
+    region?: string;
+    /**
+     * Digital signature for requests without an API key.
+     */
+    signature?: string;
+    /**
+     * API key override. When the proxy is enabled, this is ignored and the server-side key is used instead.
+     */
+    apiKey?: string;
+    /**
+     * CSS width for the container element.
+     */
+    width?: number | string;
+    /**
+     * CSS height for the container element.
+     */
+    height?: number | string;
+    /**
+     * Image loading strategy.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Object-fit for the image within its container.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    /**
+     * Additional attributes for the `<img>` element.
+     */
+    imgAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
+}> & Readonly<{}>, {
+    loading: "eager" | "lazy";
+    width: number | string;
+    height: number | string;
+    zoom: number;
+    objectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    scale: 1 | 2;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        src: string;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,165 @@
+<script>
+import { scriptRuntimeConfig } from "#nuxt-scripts/utils";
+import { defu } from "defu";
+import { useHead, useRuntimeConfig } from "nuxt/app";
+import { withQuery } from "ufo";
+import { computed, onMounted, ref } from "vue";
+</script>
+
+<script setup>
+const props = defineProps({
+  center: { type: [String, Object], required: false },
+  zoom: { type: Number, required: false, default: 15 },
+  size: { type: null, required: false },
+  scale: { type: Number, required: false, default: 2 },
+  format: { type: String, required: false },
+  maptype: { type: String, required: false },
+  mapId: { type: String, required: false },
+  markers: { type: [String, Array], required: false },
+  path: { type: [String, Array], required: false },
+  visible: { type: [String, Array], required: false },
+  style: { type: [String, Array], required: false },
+  language: { type: String, required: false },
+  region: { type: String, required: false },
+  signature: { type: String, required: false },
+  apiKey: { type: String, required: false },
+  width: { type: [Number, String], required: false, default: 640 },
+  height: { type: [Number, String], required: false, default: 400 },
+  loading: { type: String, required: false, default: "lazy" },
+  objectFit: { type: String, required: false, default: "cover" },
+  imgAttrs: { type: Object, required: false }
+});
+const runtimeConfig = useRuntimeConfig();
+const proxyConfig = runtimeConfig.public["nuxt-scripts"]?.googleStaticMapsProxy;
+const apiKey = props.apiKey || scriptRuntimeConfig("googleMaps")?.apiKey;
+const useProxy = !props.apiKey && proxyConfig?.enabled;
+if (import.meta.dev) {
+  if (!apiKey && !useProxy)
+    console.warn("[nuxt-scripts] ScriptGoogleMapsStaticMap requires a Google Maps API key with Static Maps API access. Set NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY in your .env, or enable the proxy via `scripts.registry.googleMaps`.");
+}
+const rootEl = ref();
+const measuredSize = ref();
+function clampStaticMapSize(width, height, max = 640) {
+  const ratio = Math.min(1, max / Math.max(width, height));
+  return `${Math.max(1, Math.floor(width * ratio))}x${Math.max(1, Math.floor(height * ratio))}`;
+}
+onMounted(() => {
+  if (props.size || !rootEl.value)
+    return;
+  const { offsetWidth, offsetHeight } = rootEl.value;
+  if (offsetWidth > 0 && offsetHeight > 0) {
+    measuredSize.value = clampStaticMapSize(offsetWidth, offsetHeight);
+  }
+});
+function toCssUnit(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+const PIXEL_VALUE_RE = /^\d+(?:px)?$/i;
+function isPixelValue(value) {
+  if (typeof value === "number")
+    return true;
+  return PIXEL_VALUE_RE.test(value);
+}
+function transformMapStyles(styles) {
+  return styles.map((s) => {
+    const feature = s.featureType ? `feature:${s.featureType}` : "";
+    const element = s.elementType ? `element:${s.elementType}` : "";
+    const rules = (s.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 resolveStyle(style) {
+  if (!style)
+    return void 0;
+  if (typeof style === "string")
+    return style;
+  if (Array.isArray(style) && style.length > 0 && typeof style[0] === "string")
+    return style;
+  return transformMapStyles(style);
+}
+function resolveCenter(center) {
+  if (!center)
+    return void 0;
+  if (typeof center === "string")
+    return center;
+  return `${center.lat},${center.lng}`;
+}
+const resolvedSize = computed(() => {
+  if (props.size)
+    return props.size;
+  if (measuredSize.value)
+    return measuredSize.value;
+  if (isPixelValue(props.width) && isPixelValue(props.height))
+    return clampStaticMapSize(Number.parseInt(String(props.width)), Number.parseInt(String(props.height)));
+  return "640x400";
+});
+const src = computed(() => {
+  const query = {
+    center: resolveCenter(props.center),
+    zoom: props.zoom,
+    size: resolvedSize.value,
+    scale: props.scale,
+    format: props.format,
+    maptype: props.maptype,
+    map_id: props.mapId,
+    markers: props.markers,
+    path: props.path,
+    visible: props.visible,
+    style: resolveStyle(props.style),
+    language: props.language,
+    region: props.region,
+    signature: props.signature,
+    key: useProxy ? void 0 : apiKey
+  };
+  for (const key of Object.keys(query)) {
+    if (query[key] === void 0)
+      delete query[key];
+  }
+  const baseUrl = useProxy ? "/_scripts/proxy/google-static-maps" : "https://maps.googleapis.com/maps/api/staticmap";
+  return withQuery(baseUrl, query);
+});
+const imgAttributes = computed(() => {
+  return defu(props.imgAttrs, {
+    src: src.value,
+    alt: "Google Maps",
+    loading: props.loading,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: props.objectFit,
+      display: "block"
+    }
+  });
+});
+const rootStyle = computed(() => ({
+  width: toCssUnit(props.width),
+  height: toCssUnit(props.height),
+  maxWidth: "100%",
+  overflow: "hidden"
+}));
+if (import.meta.server) {
+  useHead({
+    link: [
+      {
+        rel: props.loading === "eager" ? "preconnect" : "dns-prefetch",
+        href: useProxy ? void 0 : "https://maps.googleapis.com"
+      }
+    ].filter((l) => l.href)
+  });
+}
+defineExpose({ src });
+</script>
+
+<template>
+  <div ref="rootEl" :style="rootStyle">
+    <slot :src="src">
+      <img v-bind="imgAttributes">
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,200 @@
+export type StaticMapFormat = 'png' | 'jpg' | 'gif' | 'png8' | 'png32' | 'jpg-baseline';
+export type StaticMapType = 'roadmap' | 'satellite' | 'terrain' | 'hybrid';
+import type { ImgHTMLAttributes, ReservedProps } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * The center of the map. Accepts a "lat,lng" string or a LatLngLiteral object.
+     */
+    center?: string | {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * Zoom level (0-21).
+     */
+    zoom?: number;
+    /**
+     * Explicit pixel size for the Static Maps API request, e.g. "640x400".
+     * When omitted, the component measures its rendered dimensions on mount and uses those.
+     * Falls back to "640x400" during SSR or when dimensions can't be measured.
+     */
+    size?: `${number}x${number}`;
+    /**
+     * Device pixel ratio for the static map image (1 or 2).
+     */
+    scale?: 1 | 2;
+    /**
+     * Image format.
+     */
+    format?: StaticMapFormat;
+    /**
+     * Map type.
+     */
+    maptype?: StaticMapType;
+    /**
+     * Cloud-based map styling ID.
+     */
+    mapId?: string;
+    /**
+     * Map markers. Supports multiple markers via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Markers
+     */
+    markers?: string | string[];
+    /**
+     * Polyline paths. Supports multiple paths via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Paths
+     */
+    path?: string | string[];
+    /**
+     * Locations that should be visible on the map.
+     */
+    visible?: string | string[];
+    /**
+     * Map styling. Accepts raw Static Maps API style strings or Google Maps JS API MapTypeStyle objects.
+     */
+    style?: string | string[] | google.maps.MapTypeStyle[];
+    /**
+     * Language code for map labels.
+     */
+    language?: string;
+    /**
+     * Region bias.
+     */
+    region?: string;
+    /**
+     * Digital signature for requests without an API key.
+     */
+    signature?: string;
+    /**
+     * API key override. When the proxy is enabled, this is ignored and the server-side key is used instead.
+     */
+    apiKey?: string;
+    /**
+     * CSS width for the container element.
+     */
+    width?: number | string;
+    /**
+     * CSS height for the container element.
+     */
+    height?: number | string;
+    /**
+     * Image loading strategy.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Object-fit for the image within its container.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    /**
+     * Additional attributes for the `<img>` element.
+     */
+    imgAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
+}, {
+    src: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The center of the map. Accepts a "lat,lng" string or a LatLngLiteral object.
+     */
+    center?: string | {
+        lat: number;
+        lng: number;
+    };
+    /**
+     * Zoom level (0-21).
+     */
+    zoom?: number;
+    /**
+     * Explicit pixel size for the Static Maps API request, e.g. "640x400".
+     * When omitted, the component measures its rendered dimensions on mount and uses those.
+     * Falls back to "640x400" during SSR or when dimensions can't be measured.
+     */
+    size?: `${number}x${number}`;
+    /**
+     * Device pixel ratio for the static map image (1 or 2).
+     */
+    scale?: 1 | 2;
+    /**
+     * Image format.
+     */
+    format?: StaticMapFormat;
+    /**
+     * Map type.
+     */
+    maptype?: StaticMapType;
+    /**
+     * Cloud-based map styling ID.
+     */
+    mapId?: string;
+    /**
+     * Map markers. Supports multiple markers via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Markers
+     */
+    markers?: string | string[];
+    /**
+     * Polyline paths. Supports multiple paths via string array.
+     * @see https://developers.google.com/maps/documentation/maps-static/start#Paths
+     */
+    path?: string | string[];
+    /**
+     * Locations that should be visible on the map.
+     */
+    visible?: string | string[];
+    /**
+     * Map styling. Accepts raw Static Maps API style strings or Google Maps JS API MapTypeStyle objects.
+     */
+    style?: string | string[] | google.maps.MapTypeStyle[];
+    /**
+     * Language code for map labels.
+     */
+    language?: string;
+    /**
+     * Region bias.
+     */
+    region?: string;
+    /**
+     * Digital signature for requests without an API key.
+     */
+    signature?: string;
+    /**
+     * API key override. When the proxy is enabled, this is ignored and the server-side key is used instead.
+     */
+    apiKey?: string;
+    /**
+     * CSS width for the container element.
+     */
+    width?: number | string;
+    /**
+     * CSS height for the container element.
+     */
+    height?: number | string;
+    /**
+     * Image loading strategy.
+     */
+    loading?: "eager" | "lazy";
+    /**
+     * Object-fit for the image within its container.
+     */
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    /**
+     * Additional attributes for the `<img>` element.
+     */
+    imgAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
+}> & Readonly<{}>, {
+    loading: "eager" | "lazy";
+    width: number | string;
+    height: number | string;
+    zoom: number;
+    objectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    scale: 1 | 2;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        src: string;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,13 @@
+/**
+ * Bind Google Maps event listeners that forward to Vue emit.
+ *
+ * Two categories:
+ * - `noPayload`: emits with no arguments (state-change events like `position_changed`)
+ * - `withPayload`: forwards the first argument from the listener (mouse events, etc.)
+ */
+export declare function bindGoogleMapsEvents(instance: {
+    addListener: (event: string, handler: (...args: any[]) => void) => void;
+}, emit: (...args: any[]) => void, config: {
+    noPayload?: readonly string[];
+    withPayload?: readonly string[];
+}): void;

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

@@ -0,0 +1,8 @@
+export function bindGoogleMapsEvents(instance, emit, config) {
+  config.noPayload?.forEach((event) => {
+    instance.addListener(event, () => emit(event));
+  });
+  config.withPayload?.forEach((event) => {
+    instance.addListener(event, (payload) => emit(event, payload));
+  });
+}

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

@@ -0,0 +1,10 @@
+import type { InjectionKey, Ref, ShallowRef } from 'vue';
+export declare const MAP_INJECTION_KEY: InjectionKey<{
+    map: ShallowRef<google.maps.Map | undefined>;
+    mapsApi: Ref<typeof google.maps | undefined>;
+    /** Close the previously active InfoWindow and register a new one as active */
+    activateInfoWindow: (iw: google.maps.InfoWindow) => void;
+}>;
+export declare const MARKER_INJECTION_KEY: InjectionKey<{
+    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
+}>;

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

@@ -0,0 +1,2 @@
+export const MAP_INJECTION_KEY = Symbol("map");
+export const MARKER_INJECTION_KEY = Symbol("marker");

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

@@ -0,0 +1,48 @@
+import type { InjectionKey, Ref, ShallowRef } from 'vue';
+export declare const MAP_INJECTION_KEY: InjectionKey<{
+    map: ShallowRef<google.maps.Map | undefined>;
+    mapsApi: Ref<typeof google.maps | undefined>;
+    /** Close the previously active InfoWindow and register a new one as active */
+    activateInfoWindow: (iw: google.maps.InfoWindow) => void;
+}>;
+export declare const MARKER_INJECTION_KEY: InjectionKey<{
+    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
+}>;
+/**
+ * Bind Google Maps event listeners that forward to Vue emit.
+ *
+ * Two categories:
+ * - `noPayload`: emits with no arguments (state-change events like `position_changed`)
+ * - `withPayload`: forwards the first argument from the listener (mouse events, etc.)
+ */
+export declare function bindGoogleMapsEvents(instance: {
+    addListener: (event: string, handler: (...args: any[]) => void) => void;
+}, emit: (...args: any[]) => void, config: {
+    noPayload?: readonly string[];
+    withPayload?: readonly string[];
+}): void;
+export interface GoogleMapsResourceContext {
+    map: google.maps.Map;
+    mapsApi: typeof google.maps;
+}
+/**
+ * Composable for safely managing Google Maps resource lifecycle.
+ *
+ * Handles the common pattern: wait for map readiness → async create → cleanup on unmount.
+ *
+ * Safety guarantees:
+ * - No watchers created after `await` (prevents orphaned watchers that leak memory)
+ * - Unmount guard prevents resource creation after component unmount
+ * - Resources created during the async gap are immediately cleaned up
+ * - Resource ref is always nulled on unmount to allow GC
+ */
+export declare function useGoogleMapsResource<T>({ ready, create, cleanup, }: {
+    /** Additional readiness condition beyond map + mapsApi being available */
+    ready?: () => boolean;
+    /** Create the Google Maps resource. Receives map context snapshot. May be async. */
+    create: (ctx: GoogleMapsResourceContext) => Promise<T> | T;
+    /** Clean up the resource. Called on unmount, or immediately if resource was created after unmount. */
+    cleanup?: (resource: T, ctx: {
+        mapsApi: typeof google.maps;
+    }) => void;
+}): ShallowRef<T | undefined>;