npm - @nuxt/scripts - Versions diffs - 1.0.0-beta.30 → 1.0.0-beta.31 - Mend

@nuxt/scripts 1.0.0-beta.30 → 1.0.0-beta.31

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 (27) hide show

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

	@@ -1 +1 @@
1	- {"id":"~~f0b4dd20~~-~~8496~~-~~4003~~-~~b7a3~~-~~05cbae515923~~","timestamp":~~1774019040423~~}
1	+ {"id":"70b59a3e-a025-4a77-a25a-dfadf5b1749d","timestamp":1774072124960}

package/dist/client/_nuxt/builds/meta/70b59a3e-a025-4a77-a25a-dfadf5b1749d.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"id":"70b59a3e-a025-4a77-a25a-dfadf5b1749d","timestamp":1774072124960,"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/~~Bl23o3st~~.js"><script type="module" src="/__nuxt-scripts/_nuxt/~~Bl23o3st~~.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:"~~f0b4dd20~~-~~8496~~-~~4003~~-~~b7a3~~-~~05cbae515923~~",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},~~1774019045969~~,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/V4W-T8W6.js"><script type="module" src="/__nuxt-scripts/_nuxt/V4W-T8W6.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:"70b59a3e-a025-4a77-a25a-dfadf5b1749d",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1774072130545,false]</script></body></html>

package/dist/module.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { FetchOptions } from 'ofetch';
-import { ProxyPrivacyInput } from '../dist/runtime/server/utils/privacy.js';
 import { RegistryScripts, NuxtConfigScriptRegistry, NuxtUseScriptOptionsSerializable, NuxtUseScriptInput } from '../dist/runtime/types.js';
+import { ProxyPrivacyInput } from '../dist/runtime/server/utils/privacy.js';
 /**
  * Global privacy override for all first-party proxy requests.
@@ -24,7 +24,7 @@ interface FirstPartyOptions {
      * Path prefix for proxy endpoints.
      *
      * Analytics collection requests are proxied through these paths.
-     * For example, Google Analytics collection goes to `/_scripts/p/ga/g/collect`.
+     * For example, Google Analytics collection goes to `/_scripts/p/www.google-analytics.com/g/collect`.
      * @default '/_scripts/p'
      * @example '/_tracking'
      */

package/dist/module.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { FetchOptions } from 'ofetch';
-import { ProxyPrivacyInput } from '../dist/runtime/server/utils/privacy.js';
 import { RegistryScripts, NuxtConfigScriptRegistry, NuxtUseScriptOptionsSerializable, NuxtUseScriptInput } from '../dist/runtime/types.js';
+import { ProxyPrivacyInput } from '../dist/runtime/server/utils/privacy.js';
 /**
  * Global privacy override for all first-party proxy requests.
@@ -24,7 +24,7 @@ interface FirstPartyOptions {
      * Path prefix for proxy endpoints.
      *
      * Analytics collection requests are proxied through these paths.
-     * For example, Google Analytics collection goes to `/_scripts/p/ga/g/collect`.
+     * For example, Google Analytics collection goes to `/_scripts/p/www.google-analytics.com/g/collect`.
      * @default '/_scripts/p'
      * @example '/_tracking'
      */

package/dist/module.json CHANGED Viewed

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

package/dist/module.mjs CHANGED Viewed

@@ -19,48 +19,34 @@ import { colors } from 'consola/utils';
 import MagicString from 'magic-string';
 import { hash } from 'ohash';
 import { registry } from './registry.mjs';
-import { g as getAllProxyConfigs, r as routesToInterceptRules } from './shared/scripts.ViOoYQXH.mjs';
+import { g as getAllProxyConfigs } from './shared/scripts.D7e2ENu6.mjs';
-function generatePartytownResolveUrl(interceptRules) {
-  const rulesJson = JSON.stringify(interceptRules);
+function generatePartytownResolveUrl(proxyPrefix) {
   return `function(url, location, type) {
-  var rules = ${rulesJson};
-  for (var i = 0; i < rules.length; i++) {
-    var rule = rules[i];
-    if (url.hostname === rule.pattern || url.hostname.endsWith('.' + rule.pattern)) {
-      if (rule.pathPrefix && !url.pathname.startsWith(rule.pathPrefix)) continue;
-      var path = rule.pathPrefix ? url.pathname.slice(rule.pathPrefix.length) : url.pathname;
-      var newPath = rule.target + (path.startsWith('/') ? '' : '/') + path + url.search;
-      return new URL(newPath, location.origin);
-    }
+  if (url.origin !== location.origin) {
+    return new URL(${JSON.stringify(proxyPrefix)} + '/' + url.host + url.pathname + url.search, location.origin);
   }
 }`;
 }
 const logger = useLogger("@nuxt/scripts");
-function generateInterceptPluginContents(interceptRules) {
-  const rulesJson = JSON.stringify(interceptRules);
+function generateInterceptPluginContents(proxyPrefix) {
   return `export default defineNuxtPlugin({
   name: 'nuxt-scripts:intercept',
   enforce: 'pre',
   setup() {
-    const rules = ${rulesJson};
+    const proxyPrefix = ${JSON.stringify(proxyPrefix)};
     const origBeacon = typeof navigator !== 'undefined' && navigator.sendBeacon
       ? navigator.sendBeacon.bind(navigator)
       : () => false;
     const origFetch = globalThis.fetch.bind(globalThis);
-    function rewriteUrl(url) {
+    function proxyUrl(url) {
       try {
         const parsed = new URL(url, location.origin);
-        for (const rule of rules) {
-          if (parsed.hostname === rule.pattern || parsed.hostname.endsWith('.' + rule.pattern)) {
-            if (rule.pathPrefix && !parsed.pathname.startsWith(rule.pathPrefix)) continue;
-            const path = rule.pathPrefix ? parsed.pathname.slice(rule.pathPrefix.length) : parsed.pathname;
-            return location.origin + rule.target + (path.startsWith('/') ? '' : '/') + path + parsed.search;
-          }
-        }
+        if (parsed.origin !== location.origin)
+          return location.origin + proxyPrefix + '/' + parsed.host + parsed.pathname + parsed.search;
       } catch {}
       return url;
     }
@@ -70,7 +56,7 @@ function generateInterceptPluginContents(interceptRules) {
     class ProxiedXHR extends OrigXHR {
       open() {
         const args = Array.from(arguments);
-        if (typeof args[1] === 'string') args[1] = rewriteUrl(args[1]);
+        if (typeof args[1] === 'string') args[1] = proxyUrl(args[1]);
         return super.open.apply(this, args);
       }
     }
@@ -83,7 +69,7 @@ function generateInterceptPluginContents(interceptRules) {
       if (origSrcDesc && origSrcDesc.set) {
         Object.defineProperty(img, 'src', {
           get() { return origSrcDesc.get.call(this); },
-          set(v) { origSrcDesc.set.call(this, typeof v === 'string' ? rewriteUrl(v) : v); },
+          set(v) { origSrcDesc.set.call(this, typeof v === 'string' ? proxyUrl(v) : v); },
           configurable: true,
         });
       }
@@ -91,8 +77,8 @@ function generateInterceptPluginContents(interceptRules) {
     }
     globalThis.__nuxtScripts = {
-      sendBeacon: (url, data) => origBeacon(rewriteUrl(url), data),
-      fetch: (url, opts) => origFetch(typeof url === 'string' ? rewriteUrl(url) : url, opts),
+      sendBeacon: (url, data) => origBeacon(proxyUrl(url), data),
+      fetch: (url, opts) => origFetch(typeof url === 'string' ? proxyUrl(url) : url, opts),
       XMLHttpRequest: ProxiedXHR,
       Image: ProxiedImage,
     };
@@ -106,7 +92,7 @@ async function setupFirstParty(config, resolvePath) {
   const proxyPrefix = typeof config.firstParty === "object" ? config.firstParty.proxyPrefix || "/_scripts/p" : "/_scripts/p";
   const privacy = typeof config.firstParty === "object" ? config.firstParty.privacy : void 0;
   const assetsPrefix = config.assets?.prefix || "/_scripts/assets";
-  const proxyConfigs = enabled ? getAllProxyConfigs(proxyPrefix) : {};
+  const proxyConfigs = enabled ? getAllProxyConfigs() : {};
   const firstParty = { enabled, proxyPrefix, privacy, assetsPrefix, proxyConfigs };
   if (enabled) {
     const proxyHandlerPath = await resolvePath("./runtime/server/proxy-handler");
@@ -123,6 +109,9 @@ function applyAutoInject(registry, runtimeConfig, proxyPrefix, registryKey, auto
   if (!entry)
     return;
   const input = entry[0];
+  const scriptOptions = entry[1];
+  if (input?.firstParty === false || scriptOptions?.firstParty === false)
+    return;
   const rtScripts = runtimeConfig.public?.scripts;
   const rtEntry = rtScripts?.[registryKey];
   const config = rtEntry && typeof rtEntry === "object" ? rtEntry : input;
@@ -133,16 +122,6 @@ function applyAutoInject(registry, runtimeConfig, proxyPrefix, registryKey, auto
   if (rtEntry && typeof rtEntry === "object" && rtEntry !== input)
     rtEntry[autoInject.configField] = value;
 }
-const DOMAIN_RE = /^https?:\/\/([^/]+)/;
-function extractDomains(routes) {
-  const domains = /* @__PURE__ */ new Set();
-  for (const { proxy } of Object.values(routes)) {
-    const match = proxy.match(DOMAIN_RE);
-    if (match?.[1])
-      domains.add(match[1]);
-  }
-  return [...domains].sort();
-}
 function computePrivacyLevel(privacy) {
   const flags = Object.values(privacy);
   if (flags.every(Boolean))
@@ -160,10 +139,10 @@ function finalizeFirstParty(opts) {
     if (script.registryKey)
       scriptByKey.set(script.registryKey, script);
   }
-  const neededRoutes = {};
-  const routePrivacyOverrides = {};
+  const domainPrivacy = {};
   const unsupportedScripts = [];
   const unmatchedScripts = [];
+  let totalDomains = 0;
   const devtoolsScripts = [];
   for (const key of registryKeys) {
     const script = scriptByKey.get(key);
@@ -173,6 +152,11 @@ function finalizeFirstParty(opts) {
     }
     if (script.proxy === false)
       continue;
+    const registryEntry = opts.registry?.[key];
+    const entryScriptOptions = registryEntry?.[1];
+    const entryInput = registryEntry?.[0];
+    if (entryScriptOptions?.firstParty === false || entryInput?.firstParty === false)
+      continue;
     const configKey = script.proxy || key;
     const proxyConfig = proxyConfigs[configKey];
     if (!proxyConfig) {
@@ -180,11 +164,9 @@ function finalizeFirstParty(opts) {
         unsupportedScripts.push(key);
       continue;
     }
-    const scriptRoutes = proxyConfig.routes || {};
-    if (proxyConfig.routes) {
-      Object.assign(neededRoutes, proxyConfig.routes);
-      for (const routePath of Object.keys(proxyConfig.routes))
-        routePrivacyOverrides[routePath] = proxyConfig.privacy;
+    for (const domain of proxyConfig.domains) {
+      domainPrivacy[domain] = proxyConfig.privacy;
+      totalDomains++;
     }
     if (proxyConfig.autoInject && opts.registry)
       applyAutoInject(opts.registry, nuxtOptions.runtimeConfig, proxyPrefix, key, proxyConfig.autoInject);
@@ -200,7 +182,6 @@ function finalizeFirstParty(opts) {
       };
       const logo = script.logo;
       const logoStr = typeof logo === "object" ? logo.dark || logo.light : logo || "";
-      const interceptRules2 = routesToInterceptRules(scriptRoutes);
       devtoolsScripts.push({
         registryKey: key,
         label: script.label || key,
@@ -213,9 +194,7 @@ function finalizeFirstParty(opts) {
         hasPostProcess: !!proxyConfig.postProcess,
         privacy: normalizedPrivacy,
         privacyLevel: computePrivacyLevel(normalizedPrivacy),
-        domains: extractDomains(scriptRoutes),
-        routes: Object.entries(scriptRoutes).map(([local, { proxy }]) => ({ local, target: proxy })),
-        interceptRules: interceptRules2
+        domains: [...proxyConfig.domains]
       });
     }
   }
@@ -231,30 +210,21 @@ These scripts will not have proxy routes registered. Check that the registry key
 They will load directly from third-party servers. Request support at https://github.com/nuxt/scripts/issues`
     );
   }
-  const interceptRules = routesToInterceptRules(neededRoutes);
   addPluginTemplate({
     filename: "nuxt-scripts-intercept.client.mjs",
     getContents() {
-      return generateInterceptPluginContents(interceptRules);
+      return generateInterceptPluginContents(proxyPrefix);
     }
   });
-  const flatRoutes = {};
-  for (const [path, config] of Object.entries(neededRoutes))
-    flatRoutes[path] = config.proxy;
   nuxtOptions.runtimeConfig["nuxt-scripts-proxy"] = {
-    routes: flatRoutes,
-    privacy: firstParty.privacy,
-    routePrivacy: routePrivacyOverrides
+    proxyPrefix,
+    domainPrivacy,
+    privacy: firstParty.privacy
   };
   const privacyLabel = firstParty.privacy === void 0 ? "per-script" : typeof firstParty.privacy === "boolean" ? firstParty.privacy ? "anonymize" : "passthrough" : "custom";
-  if (Object.keys(neededRoutes).length && nuxtOptions.dev) {
-    const routeCount = Object.keys(neededRoutes).length;
+  if (totalDomains > 0 && nuxtOptions.dev) {
     const scriptsCount = registryKeys.length;
-    logger.success(`First-party mode enabled for ${scriptsCount} script(s), ${routeCount} proxy route(s) configured (privacy: ${privacyLabel})`);
-    if (logger.level >= 4) {
-      for (const [path, config] of Object.entries(neededRoutes))
-        logger.debug(`  ${path} \u2192 ${config.proxy}`);
-    }
+    logger.success(`First-party mode enabled for ${scriptsCount} script(s), ${totalDomains} domain(s) proxied (privacy: ${privacyLabel})`);
   }
   const staticPresets = ["static", "github-pages", "cloudflare-pages-static", "netlify-static", "azure-static", "firebase-static"];
   const preset = process.env.NITRO_PRESET || "";
@@ -283,11 +253,10 @@ See: https://scripts.nuxt.com/docs/guides/first-party#static-hosting`
       proxyPrefix,
       privacyMode: privacyLabel,
       scripts: devtoolsScripts,
-      totalRoutes: Object.keys(neededRoutes).length,
       totalDomains: allDomains.size
     };
   }
-  return { interceptRules, devtools };
+  return { proxyPrefix, devtools };
 }
 const renderedScript = /* @__PURE__ */ new Map();
@@ -1056,7 +1025,10 @@ function NuxtScriptBundleTransformer(options = {
                     const script = options.scripts?.find((s2) => s2.import.name === fnName);
                     const proxyConfigKey = script?.proxy !== false ? script?.proxy || registryKey : void 0;
                     const proxyConfig = !firstPartyOptOut && proxyConfigKey ? options.proxyConfigs?.[proxyConfigKey] : void 0;
-                    const proxyRewrites = proxyConfig?.rewrite;
+                    const proxyRewrites = proxyConfig?.domains?.map((domain) => ({
+                      from: domain,
+                      to: `${options.proxyPrefix}/${domain}`
+                    }));
                     const postProcess = proxyConfig?.postProcess;
                     const skipApiRewrites = !!(registryKey && options.partytownScripts?.has(registryKey));
                     deferredOps.push(async () => {
@@ -1601,7 +1573,7 @@ const module$1 = defineNuxtModule({
       }
       const { renderedScript } = setupPublicAssetStrategy(config.assets);
       if (firstParty.enabled) {
-        const { interceptRules, devtools: devtoolsData } = finalizeFirstParty({
+        const { proxyPrefix, devtools: devtoolsData } = finalizeFirstParty({
           firstParty,
           registry: config.registry,
           registryScripts,
@@ -1610,10 +1582,10 @@ const module$1 = defineNuxtModule({
         if (devtoolsData) {
           nuxt.options.runtimeConfig.public["nuxt-scripts-devtools"] = devtoolsData;
         }
-        if (config.partytown?.length && hasNuxtModule("@nuxtjs/partytown") && interceptRules.length) {
+        if (config.partytown?.length && hasNuxtModule("@nuxtjs/partytown")) {
           const partytownConfig = nuxt.options.partytown || {};
           if (!partytownConfig.resolveUrl) {
-            partytownConfig.resolveUrl = generatePartytownResolveUrl(interceptRules);
+            partytownConfig.resolveUrl = generatePartytownResolveUrl(proxyPrefix);
             nuxt.options.partytown = partytownConfig;
             logger.info("[partytown] Auto-configured resolveUrl for first-party proxy");
           } else {
@@ -1630,6 +1602,7 @@ const module$1 = defineNuxtModule({
         registryConfig: nuxt.options.runtimeConfig.public.scripts,
         defaultBundle: firstParty.enabled || config.defaultScriptOptions?.bundle,
         proxyConfigs: firstParty.proxyConfigs,
+        proxyPrefix: firstParty.proxyPrefix,
         partytownScripts: new Set(config.partytown || []),
         moduleDetected(module) {
           if (nuxt.options.dev && module !== "@nuxt/scripts" && !moduleInstallPromises.has(module) && !hasNuxtModule(module))

package/dist/registry.mjs CHANGED Viewed

@@ -340,6 +340,8 @@ async function registry(resolve) {
       registryKey: "stripe",
       label: "Stripe",
       scriptBundling: false,
+      // needs fingerprinting for fraud detection
+      proxy: false,
       category: "payments",
       logo: LOGOS.stripe,
       import: {
@@ -363,7 +365,8 @@ async function registry(resolve) {
       registryKey: "paypal",
       label: "PayPal",
       src: false,
-      // should not be bundled
+      // needs fingerprinting for fraud detection
+      proxy: false,
       category: "payments",
       logo: LOGOS.paypal,
       import: {
@@ -466,18 +469,14 @@ async function registry(resolve) {
     {
       registryKey: "googleRecaptcha",
       label: "Google reCAPTCHA",
+      scriptBundling: false,
+      // needs fingerprinting for bot detection
+      proxy: false,
       category: "utility",
       logo: LOGOS.googleRecaptcha,
       import: {
         name: "useScriptGoogleRecaptcha",
         from: await resolve("./runtime/registry/google-recaptcha")
-      },
-      scriptBundling(options) {
-        if (!options?.siteKey) {
-          return false;
-        }
-        const baseUrl = options?.recaptchaNet ? "https://www.recaptcha.net/recaptcha" : "https://www.google.com/recaptcha";
-        return `${baseUrl}/${options?.enterprise ? "enterprise.js" : "api.js"}`;
       }
     },
     {
@@ -485,7 +484,8 @@ async function registry(resolve) {
       label: "Google Sign-In",
       src: "https://accounts.google.com/gsi/client",
       scriptBundling: false,
-      // CORS prevents bundling
+      // CORS prevents bundling, needs fingerprinting for auth
+      proxy: false,
       category: "utility",
       logo: LOGOS.googleSignIn,
       import: {

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

@@ -12,10 +12,13 @@ export interface MarkerClustererOptions {
     renderer?: unknown;
     onClusterClick?: unknown;
 }
-export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<{
+export interface MarkerClustererContext {
     markerClusterer: ShallowRef<MarkerClustererInstance | undefined>;
     requestRerender: () => void;
-}>;
+    /** Increments after each clustering cycle; watch to detect cluster membership changes */
+    clusteringVersion: ShallowRef<number>;
+}
+export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<MarkerClustererContext>;
 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,6 +1,7 @@
 <script>
-import { provide, shallowRef, watch } from "vue";
+import { inject, provide, shallowRef, watch } from "vue";
 import { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
+import { MAP_INJECTION_KEY } from "./injectionKeys";
 import { useGoogleMapsResource } from "./useGoogleMapsResource";
 export const MARKER_CLUSTERER_INJECTION_KEY = /* @__PURE__ */ Symbol("marker-clusterer");
 </script>
@@ -15,6 +16,8 @@ const markerClustererEvents = [
   "clusteringbegin",
   "clusteringend"
 ];
+const mapContext = inject(MAP_INJECTION_KEY, void 0);
+const clusteringVersion = shallowRef(0);
 const markerClusterer = useGoogleMapsResource({
   async create({ map }) {
     const { MarkerClusterer } = await import("@googlemaps/markerclusterer");
@@ -23,6 +26,9 @@ const markerClusterer = useGoogleMapsResource({
       ...props.options
     });
     bindGoogleMapsEvents(clusterer, emit, { withPayload: markerClustererEvents });
+    clusterer.addListener("clusteringend", () => {
+      clusteringVersion.value++;
+    });
     return clusterer;
   },
   cleanup(clusterer, { mapsApi }) {
@@ -39,6 +45,8 @@ watch(
   (ready) => {
     if (!ready)
       return;
+    if (!mapContext?.map.value?.getProjection())
+      return;
     rerenderPending.value = false;
     try {
       markerClusterer.value.render();
@@ -53,7 +61,8 @@ provide(
   MARKER_CLUSTERER_INJECTION_KEY,
   {
     markerClusterer,
-    requestRerender
+    requestRerender,
+    clusteringVersion
   }
 );
 </script>

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

@@ -12,10 +12,13 @@ export interface MarkerClustererOptions {
     renderer?: unknown;
     onClusterClick?: unknown;
 }
-export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<{
+export interface MarkerClustererContext {
     markerClusterer: ShallowRef<MarkerClustererInstance | undefined>;
     requestRerender: () => void;
-}>;
+    /** Increments after each clustering cycle; watch to detect cluster membership changes */
+    clusteringVersion: ShallowRef<number>;
+}
+export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<MarkerClustererContext>;
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{

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

@@ -33,6 +33,18 @@ type __VLS_Props = {
      * @default true
      */
     blockMapInteraction?: boolean;
+    /**
+     * Pan the map so the overlay is fully visible when opened, similar to InfoWindow behavior.
+     * Set to `true` for default 40px padding, or a number for custom padding.
+     * @default true
+     */
+    panOnOpen?: boolean | number;
+    /**
+     * Automatically hide the overlay when its parent marker joins a cluster (on zoom out).
+     * Only applies when nested inside a ScriptGoogleMapsMarkerClusterer.
+     * @default true
+     */
+    hideWhenClustered?: boolean;
 };
 type __VLS_ModelProps = {
     'open'?: boolean;
@@ -52,6 +64,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     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>;
 declare const _default: typeof __VLS_export;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { inject, useTemplateRef, watch } from "vue";
 import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY, MARKER_INJECTION_KEY } from "./injectionKeys";
+import { MARKER_CLUSTERER_INJECTION_KEY } from "./ScriptGoogleMapsMarkerClusterer.vue";
 import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   position: { type: null, required: false },
@@ -8,11 +9,14 @@ const props = defineProps({
   offset: { type: Object, required: false },
   pane: { type: String, required: false, default: "floatPane" },
   zIndex: { type: Number, required: false },
-  blockMapInteraction: { type: Boolean, required: false, default: true }
+  blockMapInteraction: { type: Boolean, required: false, default: true },
+  panOnOpen: { type: [Boolean, Number], required: false, default: true },
+  hideWhenClustered: { type: Boolean, required: false, default: true }
 });
 const open = defineModel("open", { type: Boolean, ...{ default: void 0 } });
 const markerContext = inject(MARKER_INJECTION_KEY, void 0);
 const advancedMarkerElementContext = inject(ADVANCED_MARKER_ELEMENT_INJECTION_KEY, void 0);
+const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, void 0);
 function getResolvedPosition() {
   if (props.position)
     return props.position;
@@ -44,6 +48,25 @@ const ANCHOR_TRANSFORMS = {
 };
 const overlayContent = useTemplateRef("overlay-content");
 const listeners = [];
+function panMapToFitOverlay(el, map, padding) {
+  const child = el.firstElementChild;
+  if (!child)
+    return;
+  const overlayRect = child.getBoundingClientRect();
+  const mapRect = map.getDiv().getBoundingClientRect();
+  let panX = 0;
+  let panY = 0;
+  if (overlayRect.top - padding < mapRect.top)
+    panY = overlayRect.top - mapRect.top - padding;
+  if (overlayRect.bottom + padding > mapRect.bottom)
+    panY = overlayRect.bottom - mapRect.bottom + padding;
+  if (overlayRect.left - padding < mapRect.left)
+    panX = overlayRect.left - mapRect.left - padding;
+  else if (overlayRect.right + padding > mapRect.right)
+    panX = overlayRect.right - mapRect.right + 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?.marker.value || advancedMarkerElementContext?.advancedMarkerElement.value),
@@ -57,6 +80,12 @@ const overlay = useGoogleMapsResource({
           if (props.blockMapInteraction)
             mapsApi.OverlayView.preventMapHitsAndGesturesFrom(el);
         }
+        if (props.panOnOpen) {
+          const padding = typeof props.panOnOpen === "number" ? props.panOnOpen : 40;
+          requestAnimationFrame(() => {
+            panMapToFitOverlay(el, map, padding);
+          });
+        }
       }
       draw() {
         if (open.value === false) {
@@ -148,6 +177,26 @@ watch([() => props.pane, () => props.blockMapInteraction], () => {
       overlay.value.setMap(map);
   }
 });
+if (markerClustererContext && (markerContext || advancedMarkerElementContext)) {
+  watch(
+    () => markerClustererContext.clusteringVersion.value,
+    () => {
+      if (!props.hideWhenClustered || open.value === false)
+        return;
+      const clusterer = markerClustererContext.markerClusterer.value;
+      if (!clusterer?.clusters)
+        return;
+      const parentMarker = advancedMarkerElementContext?.advancedMarkerElement.value ?? markerContext?.marker.value;
+      if (!parentMarker)
+        return;
+      const isClustered = clusterer.clusters.some(
+        (cluster) => cluster.count > 1 && cluster.markers?.includes(parentMarker)
+      );
+      if (isClustered)
+        open.value = false;
+    }
+  );
+}
 defineExpose({ overlay });
 </script>

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

@@ -33,6 +33,18 @@ type __VLS_Props = {
      * @default true
      */
     blockMapInteraction?: boolean;
+    /**
+     * Pan the map so the overlay is fully visible when opened, similar to InfoWindow behavior.
+     * Set to `true` for default 40px padding, or a number for custom padding.
+     * @default true
+     */
+    panOnOpen?: boolean | number;
+    /**
+     * Automatically hide the overlay when its parent marker joins a cluster (on zoom out).
+     * Only applies when nested inside a ScriptGoogleMapsMarkerClusterer.
+     * @default true
+     */
+    hideWhenClustered?: boolean;
 };
 type __VLS_ModelProps = {
     'open'?: boolean;
@@ -52,6 +64,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     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>;
 declare const _default: typeof __VLS_export;