@nuxt/scripts 1.3.3 → 1.3.4

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

@@ -5,10 +5,11 @@ export { MAP_INJECTION_KEY } from "./useGoogleMapsResource";
 <script setup>
 import { defu } from "defu";
 import { tryUseNuxtApp, useHead, useRuntimeConfig } from "nuxt/app";
-import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, toRaw, useAttrs, useTemplateRef, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, shallowRef, toRaw, useAttrs, useTemplateRef, watch } from "vue";
 import { useScriptTriggerElement } from "#nuxt-scripts/composables/useScriptTriggerElement";
 import { useScriptGoogleMaps } from "#nuxt-scripts/registry/google-maps";
 import { scriptRuntimeConfig, scriptsPrefix } from "#nuxt-scripts/utils";
+import { createAbortablePromise } from "../../utils/abortable-promise";
 import ScriptAriaLoadingIndicator from "../ScriptAriaLoadingIndicator.vue";
 import { defineDeprecatedAlias, MAP_INJECTION_KEY, waitForMapsReady, warnDeprecatedTopLevelMapProps } from "./useGoogleMapsResource";
 const props = defineProps({
@@ -48,6 +49,8 @@ const currentColorScheme = computed(() => {
   return currentColorMode.value === "dark" ? "DARK" : "LIGHT";
 });
 const mapsApi = shallowRef();
+const lifecycleController = new AbortController();
+let isUnmounted = false;
 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).");
@@ -144,7 +147,8 @@ async function resolveQueryToLatLng(query) {
   const endpoints = runtimeConfig.public["nuxt-scripts"]?.endpoints;
   if (endpoints?.googleMaps) {
     const data = await $fetch(`${scriptsPrefix()}/proxy/google-maps-geocode`, {
-      params: { address: query }
+      params: { address: query },
+      signal: lifecycleController.signal
     });
     if (data.status === "OK" && data.results?.[0]?.geometry?.location) {
       const loc = data.results[0].geometry.location;
@@ -154,7 +158,7 @@ async function resolveQueryToLatLng(query) {
     }
     throw new Error(`No location found for ${query}`);
   }
-  await waitForMapsReady({ mapsApi, map, status, load });
+  await waitForMapsReady({ mapsApi, map, status, load, signal: lifecycleController.signal });
   const placesService = new mapsApi.value.places.PlacesService(map.value);
   const result = await new Promise((resolve, reject) => {
     placesService.findPlaceFromQuery(
@@ -178,14 +182,22 @@ const libraries = /* @__PURE__ */ new Map();
 function importLibrary(key) {
   if (libraries.has(key))
     return libraries.get(key);
-  const p = mapsApi.value?.importLibrary(key) || new Promise((resolve) => {
-    const stop = watch(mapsApi, (api) => {
+  const p = createAbortablePromise((resolve, reject) => {
+    let stop = () => {
+    };
+    stop = watch(mapsApi, (api) => {
       if (api) {
-        const p2 = api.importLibrary(key);
-        resolve(p2);
-        stop();
+        try {
+          resolve(api.importLibrary(key));
+        } catch (error) {
+          reject(error);
+        }
       }
     }, { immediate: true });
+    return () => stop();
+  }, {
+    signal: lifecycleController.signal,
+    abortMessage: `Google Maps library import "${key}" was aborted`
   });
   const cached = Promise.resolve(p).catch((err) => {
     libraries.delete(key);
@@ -251,13 +263,15 @@ onMounted(() => {
     const zoom = map.value.getZoom();
     if (center)
       centerOverride.value = { lat: center.lat(), lng: center.lng() };
-    map.value.unbindAll();
+    const previousMap = map.value;
+    mapsApi.value.event.clearInstanceListeners(previousMap);
+    previousMap.unbindAll();
     map.value = void 0;
     slotMounted.value = false;
     if (mapEl.value)
       mapEl.value.innerHTML = "";
     await nextTick();
-    if (!mapEl.value || !mapsApi.value)
+    if (isUnmounted || !mapEl.value || !mapsApi.value)
       return;
     const _options = {
       ...options.value,
@@ -276,40 +290,66 @@ onMounted(() => {
   watch([() => getCenterWatchKey(props.center), () => getCenterWatchKey(props.mapOptions?.center)], () => {
     centerOverride.value = void 0;
   });
-  watch([controlledCenterKey, isMapReady, map], async () => {
-    if (!map.value) {
+  watch([controlledCenterKey, isMapReady, map], async (_, __, onCleanup) => {
+    const currentMap = map.value;
+    if (!currentMap) {
       return;
     }
+    let stale = false;
+    onCleanup(() => {
+      stale = true;
+    });
     let center = toRaw(options.value.center);
     if (center) {
       if (isLocationQuery(center) && isMapReady.value) {
-        center = await resolveQueryToLatLng(center);
+        try {
+          center = await resolveQueryToLatLng(center);
+        } catch (error) {
+          if (error?.name === "AbortError")
+            return;
+          throw error;
+        }
       }
-      const current = map.value.getCenter();
+      if (stale || isUnmounted || map.value !== currentMap)
+        return;
+      const current = currentMap.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;
       }
-      map.value.setCenter(center);
+      currentMap.setCenter(center);
     }
   }, {
     immediate: true
   });
   onLoaded(async (instance) => {
-    mapsApi.value = await instance.maps;
+    const api = await instance.maps;
+    if (isUnmounted || !mapEl.value)
+      return;
+    mapsApi.value = api;
     const center = options.value.center;
     const _options = {
       ...options.value,
       // @ts-expect-error broken
       center: !center || isLocationQuery(center) ? void 0 : center
     };
-    map.value = new mapsApi.value.Map(mapEl.value, _options);
+    map.value = new api.Map(mapEl.value, _options);
     if (center && isLocationQuery(center)) {
-      centerOverride.value = await resolveQueryToLatLng(center);
-      if (centerOverride.value)
-        map.value?.setCenter(centerOverride.value);
+      let resolvedCenter;
+      try {
+        resolvedCenter = await resolveQueryToLatLng(center);
+      } catch (error) {
+        if (error?.name === "AbortError")
+          return;
+        throw error;
+      }
+      if (isUnmounted)
+        return;
+      centerOverride.value = resolvedCenter;
+      if (resolvedCenter)
+        map.value?.setCenter(resolvedCenter);
     }
     isMapReady.value = true;
   });
@@ -356,11 +396,21 @@ const rootAttrs = computed(() => {
   });
 });
 onBeforeUnmount(() => {
-  map.value?.unbindAll();
+  isUnmounted = true;
+  lifecycleController.abort();
+  if (map.value && mapsApi.value) {
+    mapsApi.value.event.clearInstanceListeners(map.value);
+    map.value.unbindAll();
+  }
   map.value = void 0;
+  activeInfoWindow?.close();
+  activeInfoWindow = void 0;
   libraries.clear();
   queryToLatLngCache.clear();
 });
+onUnmounted(() => {
+  mapsApi.value = void 0;
+});
 </script>
 
 <template>

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

@@ -69,11 +69,12 @@ export declare function warnDeprecatedTopLevelMapProps(props: {
  * 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, }: {
+export declare function waitForMapsReady({ mapsApi, map, status, load, signal, }: {
     mapsApi: ShallowRef<typeof google.maps | undefined>;
     map: ShallowRef<google.maps.Map | undefined>;
     status: Ref<string>;
     load: () => Promise<unknown> | unknown;
+    signal?: AbortSignal;
 }): Promise<void>;
 /**
  * Composable for safely managing Google Maps resource lifecycle.

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

@@ -1,5 +1,6 @@
 import { whenever } from "@vueuse/core";
 import { effectScope, inject, onUnmounted, ref, shallowRef, watch } from "vue";
+import { createAbortablePromise, createAbortError } from "../../utils/abortable-promise.js";
 export const MAP_INJECTION_KEY = Symbol("map");
 export const MARKER_INJECTION_KEY = Symbol("marker");
 export function bindGoogleMapsEvents(instance, emit, config) {
@@ -52,38 +53,45 @@ export async function waitForMapsReady({
   mapsApi,
   map,
   status,
-  load
+  load,
+  signal
 }) {
+  const abortMessage = "Google Maps readiness wait was aborted";
+  const throwIfAborted = () => {
+    if (signal?.aborted)
+      throw createAbortError(abortMessage);
+  };
+  throwIfAborted();
   if (mapsApi.value && map.value)
     return;
   if (status.value === "error")
     throw new Error("Google Maps script failed to load");
-  await load();
+  await createAbortablePromise((resolve, reject) => {
+    Promise.resolve(load()).then(() => resolve(), reject);
+  }, { signal, abortMessage });
+  throwIfAborted();
   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 }
-        );
-      });
+  await createAbortablePromise((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();
-  }
+    return () => scope.stop();
+  }, { signal, abortMessage });
 }
 export function useGoogleMapsResource({
   ready,
@@ -96,10 +104,16 @@ export function useGoogleMapsResource({
   whenever(
     () => mapContext?.map.value && mapContext.mapsApi.value && (!ready || ready()),
     () => {
-      Promise.resolve(create({
-        map: mapContext.map.value,
-        mapsApi: mapContext.mapsApi.value
-      })).then((result) => {
+      let creation;
+      try {
+        creation = Promise.resolve(create({
+          map: mapContext.map.value,
+          mapsApi: mapContext.mapsApi.value
+        }));
+      } catch (error) {
+        creation = Promise.reject(error);
+      }
+      creation.then((result) => {
         if (isUnmounted.value) {
           if (cleanup && mapContext?.mapsApi.value) {
             cleanup(result, { mapsApi: mapContext.mapsApi.value });

package/dist/runtime/components/ScriptCarbonAds.vue

@@ -13,12 +13,14 @@ defineSlots();
 const attrId = `_carbonads_js`;
 const carbonadsEl = ref(import.meta.client ? document.getElementById(attrId) : null);
 const status = ref("awaitingLoad");
+let scriptEl;
 function loadCarbon() {
   if (!carbonadsEl.value) {
     return;
   }
   status.value = "loading";
   const script = document.createElement("script");
+  scriptEl = script;
   script.setAttribute("src", withQuery("https://cdn.carbonads.com/carbon.js", {
     serve: props.serve,
     placement: props.placement,
@@ -44,7 +46,10 @@ onMounted(() => {
   if (trigger === "onNuxtReady") {
     loadCarbon();
   } else {
-    trigger.then(loadCarbon);
+    trigger.then((triggered) => {
+      if (triggered)
+        loadCarbon();
+    });
   }
 });
 const rootAttrs = computed(() => {
@@ -53,8 +58,11 @@ const rootAttrs = computed(() => {
   };
 });
 onBeforeUnmount(() => {
-  if (carbonadsEl.value) {
-    carbonadsEl.value.remove();
+  if (scriptEl) {
+    scriptEl.onload = null;
+    scriptEl.onerror = null;
+    scriptEl.remove();
+    scriptEl = void 0;
   }
 });
 </script>

package/dist/runtime/components/ScriptCrisp.vue

@@ -38,11 +38,13 @@ let observer;
 onMounted(() => {
   watch(status, (status2) => {
     if (status2 === "loaded") {
+      observer?.disconnect();
       observer = new MutationObserver(() => {
         if (document.getElementById("crisp-chatbox")) {
           isReady.value = true;
           emits("ready", crisp);
-          observer.disconnect();
+          observer?.disconnect();
+          observer = void 0;
         }
       });
       observer.observe(document.body, { childList: true, subtree: true });
@@ -53,6 +55,7 @@ onMounted(() => {
 });
 onBeforeUnmount(() => {
   observer?.disconnect();
+  observer = void 0;
 });
 const rootAttrs = computed(() => {
   return {

package/dist/runtime/components/ScriptIntercom.vue

@@ -45,11 +45,13 @@ let observer;
 onMounted(() => {
   watch(status, (status2) => {
     if (status2 === "loading") {
+      observer?.disconnect();
       observer = new MutationObserver(() => {
         if (document.getElementById("intercom-frame")) {
           isReady.value = true;
           emits("ready", intercom);
-          observer.disconnect();
+          observer?.disconnect();
+          observer = void 0;
         }
       });
       observer.observe(document.body, { childList: true, subtree: true });
@@ -60,6 +62,7 @@ onMounted(() => {
 });
 onBeforeUnmount(() => {
   observer?.disconnect();
+  observer = void 0;
 });
 const rootAttrs = computed(() => {
   return {

package/dist/runtime/components/ScriptLemonSqueezy.d.vue.ts

@@ -1,22 +1,22 @@
 import type { ElementScriptTrigger } from '../types.js';
-type __VLS_Props = {
+import type { LemonSqueezyApi } from '../registry/lemon-squeezy.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     trigger?: ElementScriptTrigger;
-};
-type __VLS_Slots = {
-    default?: () => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    ready: (args_0: import("../types.js").UseScriptContext<import("../registry/lemon-squeezy.js").LemonSqueezyApi>) => any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (args_0: import("../types.js").UseScriptContext<LemonSqueezyApi>) => any;
     lemonSqueezyEvent: (args_0: never) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onReady?: ((args_0: import("../types.js").UseScriptContext<import("../registry/lemon-squeezy.js").LemonSqueezyApi>) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<{
+    trigger?: ElementScriptTrigger;
+}> & Readonly<{
+    onReady?: ((args_0: import("../types.js").UseScriptContext<LemonSqueezyApi>) => any) | undefined;
     onLemonSqueezyEvent?: ((args_0: never) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: () => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ScriptLemonSqueezy.vue

@@ -1,5 +1,25 @@
+<script>
+const lemonSqueezyHandlers = /* @__PURE__ */ new Map();
+const dispatchLemonSqueezyEvent = (event) => {
+  for (const handler of [...lemonSqueezyHandlers.values()])
+    handler(event);
+};
+function registerLemonSqueezyHandler(owner, handler, setup) {
+  lemonSqueezyHandlers.set(owner, handler);
+  setup({ eventHandler: dispatchLemonSqueezyEvent });
+}
+function unregisterLemonSqueezyHandler(owner) {
+  const removed = lemonSqueezyHandlers.delete(owner);
+  if (!removed || lemonSqueezyHandlers.size > 0)
+    return;
+  if (import.meta.client && typeof window.LemonSqueezy?.Setup === "function")
+    window.LemonSqueezy.Setup({ eventHandler() {
+    } });
+}
+</script>
+
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 import { useScriptLemonSqueezy } from "../registry/lemon-squeezy";
 const props = defineProps({
@@ -8,6 +28,8 @@ const props = defineProps({
 const emits = defineEmits(["ready", "lemonSqueezyEvent"]);
 defineSlots();
 const rootEl = ref(null);
+const owner = /* @__PURE__ */ Symbol("ScriptLemonSqueezy");
+let disposed = false;
 const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const instance = useScriptLemonSqueezy({
   scriptOptions: {
@@ -19,15 +41,17 @@ onMounted(() => {
     a.classList.add("lemonsqueezy-button");
   });
   instance.onLoaded(({ Setup, Refresh }) => {
-    Setup({
-      eventHandler(event) {
-        emits("lemonSqueezyEvent", event);
-      }
-    });
+    if (disposed)
+      return;
+    registerLemonSqueezyHandler(owner, (event) => emits("lemonSqueezyEvent", event), Setup);
     Refresh();
     emits("ready", instance);
   });
 });
+onBeforeUnmount(() => {
+  disposed = true;
+  unregisterLemonSqueezyHandler(owner);
+});
 const rootAttrs = computed(() => {
   return {
     ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}

package/dist/runtime/components/ScriptLemonSqueezy.vue.d.ts

@@ -1,22 +1,22 @@
 import type { ElementScriptTrigger } from '../types.js';
-type __VLS_Props = {
+import type { LemonSqueezyApi } from '../registry/lemon-squeezy.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     trigger?: ElementScriptTrigger;
-};
-type __VLS_Slots = {
-    default?: () => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    ready: (args_0: import("../types.js").UseScriptContext<import("../registry/lemon-squeezy.js").LemonSqueezyApi>) => any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (args_0: import("../types.js").UseScriptContext<LemonSqueezyApi>) => any;
     lemonSqueezyEvent: (args_0: never) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onReady?: ((args_0: import("../types.js").UseScriptContext<import("../registry/lemon-squeezy.js").LemonSqueezyApi>) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<{
+    trigger?: ElementScriptTrigger;
+}> & Readonly<{
+    onReady?: ((args_0: import("../types.js").UseScriptContext<LemonSqueezyApi>) => any) | undefined;
     onLemonSqueezyEvent?: ((args_0: never) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: () => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ScriptPayPalButtons.vue

@@ -22,6 +22,7 @@ const rootEl = ref(null);
 const ready = ref(false);
 const failed = ref(false);
 const sdkInstance = shallowRef();
+let disposed = false;
 const { onLoaded, status } = useScriptPayPal({
   ...props.clientToken ? { clientToken: props.clientToken } : { clientId: props.clientId },
   ...props.paypalScriptOptions
@@ -39,10 +40,15 @@ onMounted(() => {
       ...props.partnerAttributionId && { partnerAttributionId: props.partnerAttributionId }
     };
     try {
-      sdkInstance.value = await paypal.createInstance(instanceOptions);
+      const instance = await paypal.createInstance(instanceOptions);
+      if (disposed)
+        return;
+      sdkInstance.value = instance;
       ready.value = true;
       emit("ready", sdkInstance.value);
     } catch (err) {
+      if (disposed)
+        return;
       sdkInstance.value = void 0;
       failed.value = true;
       emit("error", err);
@@ -50,6 +56,7 @@ onMounted(() => {
   });
 });
 onBeforeUnmount(() => {
+  disposed = true;
   sdkInstance.value = void 0;
 });
 defineExpose({

package/dist/runtime/components/ScriptPayPalMessages.vue

@@ -22,6 +22,7 @@ const rootEl = ref(null);
 const ready = ref(false);
 const failed = ref(false);
 const messagesSession = shallowRef();
+let disposed = false;
 const { onLoaded, status } = useScriptPayPal({
   ...props.clientToken ? { clientToken: props.clientToken } : { clientId: props.clientId },
   ...props.paypalScriptOptions
@@ -41,10 +42,14 @@ onMounted(() => {
     };
     try {
       const instance = await paypal.createInstance(instanceOptions);
+      if (disposed)
+        return;
       messagesSession.value = instance.createPayPalMessages(props.messagesOptions);
       ready.value = true;
       emit("ready", messagesSession.value);
     } catch (err) {
+      if (disposed)
+        return;
       messagesSession.value = void 0;
       failed.value = true;
       emit("error", err);
@@ -52,6 +57,7 @@ onMounted(() => {
   });
 });
 onBeforeUnmount(() => {
+  disposed = true;
   messagesSession.value = void 0;
 });
 defineExpose({

package/dist/runtime/components/ScriptStripePricingTable.vue

@@ -22,6 +22,8 @@ const { onLoaded, status } = instance;
 const pricingTable = ref();
 onMounted(() => {
   onLoaded(() => {
+    if (!rootEl.value)
+      return;
     const StripePricingTable = window.customElements.get("stripe-pricing-table");
     const stripePricingTable = new StripePricingTable();
     stripePricingTable.setAttribute("publishable-key", props.publishableKey);

package/dist/runtime/components/ScriptVimeoPlayer.vue

@@ -205,7 +205,14 @@ const placeholderAttrs = computed(() => {
     }
   });
 });
-onBeforeUnmount(() => player?.unload());
+onBeforeUnmount(() => {
+  const currentPlayer = player;
+  player = void 0;
+  void currentPlayer?.destroy().catch((error) => {
+    if (import.meta.dev)
+      console.warn("[nuxt-scripts] Vimeo player cleanup failed:", error);
+  });
+});
 </script>
 
 <template>