@nuxt/scripts 1.3.5 → 2.0.0-beta.1

package/dist/runtime/components/MapLibre/ScriptMapLibrePopup.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { inject, useTemplateRef, watch } from "vue";
+import { MAPLIBRE_MARKER_INJECTION_KEY, useMapLibreResource } from "./useMapLibreResource";
+const props = defineProps({
+  position: { type: null, required: false },
+  open: { type: Boolean, required: false, default: false },
+  options: { type: null, required: false }
+});
+const emit = defineEmits(["open", "close"]);
+defineSlots();
+const markerContext = inject(MAPLIBRE_MARKER_INJECTION_KEY, void 0);
+const content = useTemplateRef("content");
+let boundMarker;
+let popupMap;
+let popupClassNames = new Set((props.options?.className || "").split(/\s+/).filter(Boolean));
+const openHandler = (event) => emit("open", event);
+const closeHandler = (event) => emit("close", event);
+function setOpen(instance, open) {
+  if (open === instance.isOpen())
+    return;
+  if (open) {
+    if (boundMarker)
+      boundMarker.togglePopup();
+    else if (popupMap)
+      instance.addTo(popupMap);
+  } else {
+    instance.remove();
+  }
+}
+const popup = useMapLibreResource({
+  ready: () => !!content.value && (!!markerContext?.marker.value || !!props.position),
+  create({ maplibre, map }) {
+    popupMap = map;
+    const instance = new maplibre.Popup(props.options).setDOMContent(content.value);
+    popupClassNames = new Set((props.options?.className || "").split(/\s+/).filter(Boolean));
+    instance.on("open", openHandler);
+    instance.on("close", closeHandler);
+    boundMarker = markerContext?.marker.value;
+    if (boundMarker)
+      boundMarker.setPopup(instance);
+    else if (props.position)
+      instance.setLngLat(props.position);
+    setOpen(instance, props.open);
+    return instance;
+  },
+  cleanup(instance) {
+    if (boundMarker) {
+      boundMarker.setPopup(null);
+      boundMarker = void 0;
+    }
+    instance.off("open", openHandler);
+    instance.off("close", closeHandler);
+    instance.remove();
+    popupMap = void 0;
+  }
+});
+watch(() => props.open, (open) => popup.value && setOpen(popup.value, open));
+watch(() => props.position, (position) => {
+  if (popup.value && position && !boundMarker)
+    popup.value.setLngLat(position);
+}, { deep: 1 });
+watch(() => props.options, (options) => {
+  if (!popup.value || !options)
+    return;
+  if (options.maxWidth !== void 0)
+    popup.value.setMaxWidth(options.maxWidth);
+  if (options.offset !== void 0)
+    popup.value.setOffset(options.offset);
+  if (options.padding !== void 0)
+    popup.value.setPadding(options.padding);
+  if (options.subpixelPositioning !== void 0)
+    popup.value.setSubpixelPositioning(options.subpixelPositioning);
+  if (options.className !== void 0) {
+    const nextClassNames = new Set(options.className.split(/\s+/).filter(Boolean));
+    for (const className of popupClassNames) {
+      if (!nextClassNames.has(className))
+        popup.value.removeClassName(className);
+    }
+    for (const className of nextClassNames) {
+      if (!popupClassNames.has(className))
+        popup.value.addClassName(className);
+    }
+    popupClassNames = nextClassNames;
+  }
+}, { deep: 2 });
+defineExpose({ popup });
+</script>
+
+<template>
+  <div class="maplibre-popup-content-source">
+    <div ref="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.maplibre-popup-content-source{display:none}
+</style>

package/dist/runtime/components/MapLibre/ScriptMapLibrePopup.vue.d.ts

@@ -0,0 +1,31 @@
+import type * as MapLibre from 'maplibre-gl';
+type __VLS_Props = {
+    /** Position for a standalone popup. Omit when nested inside a marker. */
+    position?: MapLibre.LngLatLike;
+    /** Whether the popup is open. @default false */
+    open?: boolean;
+    /** Options passed to `new maplibregl.Popup()`. Options with public setters also update reactively. */
+    options?: MapLibre.PopupOptions;
+};
+type __VLS_Slots = {
+    default?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    popup: import("vue").ShallowRef<MapLibre.Popup | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: MapLibre.Event) => any;
+    open: (event: MapLibre.Event) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((event: MapLibre.Event) => any) | undefined;
+    onOpen?: ((event: MapLibre.Event) => any) | undefined;
+}>, {
+    open: boolean;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/MapLibre/useMapLibreResource.d.ts

@@ -0,0 +1,23 @@
+import type * as MapLibre from 'maplibre-gl';
+import type { InjectionKey, ShallowRef } from 'vue';
+export interface MapLibreMapContext {
+    map: ShallowRef<MapLibre.Map | undefined>;
+    maplibre: ShallowRef<typeof MapLibre | undefined>;
+}
+export declare const MAPLIBRE_MAP_INJECTION_KEY: InjectionKey<MapLibreMapContext>;
+export declare const MAPLIBRE_MARKER_INJECTION_KEY: InjectionKey<{
+    marker: ShallowRef<MapLibre.Marker | undefined>;
+}>;
+export interface MapLibreResourceContext {
+    map: MapLibre.Map;
+    maplibre: typeof MapLibre;
+}
+/**
+ * Creates a MapLibre resource after its parent map and any component-specific
+ * DOM refs are ready, then removes it synchronously during unmount.
+ */
+export declare function useMapLibreResource<T>({ ready, create, cleanup, }: {
+    ready?: () => boolean;
+    create: (context: MapLibreResourceContext) => T;
+    cleanup: (resource: T, context: MapLibreResourceContext) => void;
+}): ShallowRef<T | undefined>;

package/dist/runtime/components/MapLibre/useMapLibreResource.js

@@ -0,0 +1,41 @@
+import { inject, onUnmounted, shallowRef, watch } from "vue";
+export const MAPLIBRE_MAP_INJECTION_KEY = Symbol("maplibre-map");
+export const MAPLIBRE_MARKER_INJECTION_KEY = Symbol("maplibre-marker");
+export function useMapLibreResource({
+  ready,
+  create,
+  cleanup
+}) {
+  const mapContext = inject(MAPLIBRE_MAP_INJECTION_KEY, void 0);
+  const resource = shallowRef();
+  let creating = false;
+  let resourceContext;
+  if (import.meta.dev && !mapContext) {
+    console.warn("[nuxt-scripts] MapLibre child components must be placed inside <ScriptMapLibreMap>.");
+  }
+  const stop = watch(
+    () => [mapContext?.map.value, mapContext?.maplibre.value, ready?.() ?? true],
+    ([map, maplibre, isReady]) => {
+      if (!map || !maplibre || !isReady || resource.value || creating)
+        return;
+      creating = true;
+      try {
+        resourceContext = { map, maplibre };
+        resource.value = create(resourceContext);
+      } catch (error) {
+        console.error("[nuxt-scripts] MapLibre resource creation failed:", error);
+      } finally {
+        creating = false;
+      }
+    },
+    { immediate: true }
+  );
+  onUnmounted(() => {
+    stop();
+    if (resource.value && resourceContext)
+      cleanup(resource.value, resourceContext);
+    resource.value = void 0;
+    resourceContext = void 0;
+  });
+  return resource;
+}

package/dist/runtime/components/ScriptCrisp.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useMutationObserver } from "@vueuse/core";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 import { useScriptCrisp } from "../registry/crisp";
 const props = defineProps({
@@ -34,28 +35,29 @@ if (props.trigger === "click") {
 defineExpose({
   crisp
 });
-let observer;
+const observerTarget = shallowRef(null);
+function markReady() {
+  if (isReady.value)
+    return true;
+  if (!document.getElementById("crisp-chatbox"))
+    return false;
+  isReady.value = true;
+  observerTarget.value = null;
+  emits("ready", crisp);
+  return true;
+}
+useMutationObserver(observerTarget, markReady, { childList: true, subtree: true });
 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 = void 0;
-        }
-      });
-      observer.observe(document.body, { childList: true, subtree: true });
+      if (!markReady())
+        observerTarget.value = document.body;
     } else if (status2 === "error") {
+      observerTarget.value = null;
+      isReady.value = false;
       emits("error");
     }
-  });
-});
-onBeforeUnmount(() => {
-  observer?.disconnect();
-  observer = void 0;
+  }, { immediate: true });
 });
 const rootAttrs = computed(() => {
   return {
@@ -72,7 +74,7 @@ const rootAttrs = computed(() => {
   >
     <slot :ready="isReady" />
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
     <slot v-else-if="status === 'error'" name="error" />
+    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
   </div>
 </template>

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

@@ -0,0 +1,40 @@
+import type { ElementScriptTrigger } from '#nuxt-scripts/types';
+type __VLS_Props = {
+    /**
+     * Defines the trigger event to load the script.
+     */
+    trigger?: ElementScriptTrigger;
+    widgetKey: string;
+    board?: string;
+    color?: string;
+    position?: 'left' | 'right';
+    greeting?: string;
+    launcher?: 'logo';
+};
+type __VLS_Slots = {
+    default?: (props: {
+        ready: boolean;
+    }) => any;
+    awaitingLoad?: () => any;
+    loading?: () => any;
+    error?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    deskcrew: import("#nuxt-scripts/types").UseScriptContext<import("../registry/deskcrew.js").DeskCrewApi>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: () => any;
+    ready: (e: import("#nuxt-scripts/types").UseScriptContext<import("../registry/deskcrew.js").DeskCrewApi>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: (() => any) | undefined;
+    onReady?: ((e: import("#nuxt-scripts/types").UseScriptContext<import("../registry/deskcrew.js").DeskCrewApi>) => 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ScriptDeskCrew.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { useMutationObserver } from "@vueuse/core";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
+import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
+import { useScriptDeskCrew } from "../registry/deskcrew";
+const props = defineProps({
+  trigger: { type: [String, Array, Boolean], required: false, default: "click" },
+  widgetKey: { type: String, required: true },
+  board: { type: String, required: false },
+  color: { type: String, required: false },
+  position: { type: String, required: false },
+  greeting: { type: String, required: false },
+  launcher: { type: String, required: false }
+});
+const emits = defineEmits(["ready", "error"]);
+defineSlots();
+const rootEl = ref(null);
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
+const isReady = ref(false);
+const deskcrew = useScriptDeskCrew({
+  widgetKey: props.widgetKey,
+  board: props.board,
+  color: props.color,
+  position: props.position,
+  greeting: props.greeting,
+  launcher: props.launcher,
+  scriptOptions: {
+    trigger
+  }
+});
+const { onLoaded, status } = deskcrew;
+if (props.trigger === "click") {
+  onLoaded((instance) => {
+    instance.open();
+  });
+}
+defineExpose({
+  deskcrew
+});
+const observerTarget = shallowRef(null);
+function markReady() {
+  if (isReady.value)
+    return true;
+  if (!document.getElementById("deskcrew-root"))
+    return false;
+  isReady.value = true;
+  observerTarget.value = null;
+  emits("ready", deskcrew);
+  return true;
+}
+useMutationObserver(observerTarget, markReady, { childList: true, subtree: true });
+onMounted(() => {
+  watch(status, (status2) => {
+    if (status2 === "loaded") {
+      if (!markReady())
+        observerTarget.value = document.body;
+    } else if (status2 === "error") {
+      observerTarget.value = null;
+      isReady.value = false;
+      emits("error");
+    }
+  }, { immediate: true });
+});
+const rootAttrs = computed(() => {
+  return {
+    ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
+  };
+});
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    :style="{ display: isReady ? 'none' : 'block' }"
+    v-bind="rootAttrs"
+  >
+    <slot :ready="isReady" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
+    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
+  </div>
+</template>

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

@@ -0,0 +1,40 @@
+import type { ElementScriptTrigger } from '#nuxt-scripts/types';
+type __VLS_Props = {
+    /**
+     * Defines the trigger event to load the script.
+     */
+    trigger?: ElementScriptTrigger;
+    widgetKey: string;
+    board?: string;
+    color?: string;
+    position?: 'left' | 'right';
+    greeting?: string;
+    launcher?: 'logo';
+};
+type __VLS_Slots = {
+    default?: (props: {
+        ready: boolean;
+    }) => any;
+    awaitingLoad?: () => any;
+    loading?: () => any;
+    error?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    deskcrew: import("#nuxt-scripts/types").UseScriptContext<import("../registry/deskcrew.js").DeskCrewApi>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: () => any;
+    ready: (e: import("#nuxt-scripts/types").UseScriptContext<import("../registry/deskcrew.js").DeskCrewApi>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: (() => any) | undefined;
+    onReady?: ((e: import("#nuxt-scripts/types").UseScriptContext<import("../registry/deskcrew.js").DeskCrewApi>) => 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ScriptIntercom.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useMutationObserver } from "@vueuse/core";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 import { useScriptIntercom } from "../registry/intercom";
 const props = defineProps({
@@ -41,28 +42,29 @@ if (props.trigger === "click") {
 defineExpose({
   intercom
 });
-let observer;
+const observerTarget = shallowRef(null);
+function markReady() {
+  if (isReady.value)
+    return true;
+  if (!document.getElementById("intercom-frame"))
+    return false;
+  isReady.value = true;
+  observerTarget.value = null;
+  emits("ready", intercom);
+  return true;
+}
+useMutationObserver(observerTarget, markReady, { childList: true, subtree: true });
 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 = void 0;
-        }
-      });
-      observer.observe(document.body, { childList: true, subtree: true });
+    if (status2 === "loading" || status2 === "loaded") {
+      if (!markReady())
+        observerTarget.value = document.body;
     } else if (status2 === "error") {
+      observerTarget.value = null;
+      isReady.value = false;
       emits("error");
     }
-  });
-});
-onBeforeUnmount(() => {
-  observer?.disconnect();
-  observer = void 0;
+  }, { immediate: true });
 });
 const rootAttrs = computed(() => {
   return {
@@ -83,7 +85,7 @@ const rootAttrs = computed(() => {
   >
     <slot :ready="isReady" />
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
     <slot v-else-if="status === 'error'" name="error" />
+    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
   </div>
 </template>

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

@@ -3,8 +3,8 @@ type __VLS_Props = {
     size?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number;
     color: string;
+    size: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -3,8 +3,8 @@ type __VLS_Props = {
     size?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number;
     color: string;
+    size: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ScriptPayPalButtons.vue

@@ -9,7 +9,7 @@ const props = defineProps({
   clientId: { type: String, required: false, default: "test" },
   clientToken: { type: String, required: false },
   components: { type: Array, required: false, default: () => ["paypal-payments"] },
-  pageType: { type: String, required: false },
+  pageType: { type: null, required: false },
   locale: { type: String, required: false },
   merchantId: { type: [String, Array], required: false },
   partnerAttributionId: { type: String, required: false },
@@ -23,9 +23,14 @@ const ready = ref(false);
 const failed = ref(false);
 const sdkInstance = shallowRef();
 let disposed = false;
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const { onLoaded, status } = useScriptPayPal({
   ...props.clientToken ? { clientToken: props.clientToken } : { clientId: props.clientId },
-  ...props.paypalScriptOptions
+  ...props.paypalScriptOptions,
+  scriptOptions: {
+    ...props.paypalScriptOptions.scriptOptions,
+    trigger
+  }
 });
 onMounted(() => {
   onLoaded(async ({ paypal }) => {
@@ -64,7 +69,6 @@ defineExpose({
   sdkInstance
 });
 const ScriptLoadingIndicator = resolveComponent("ScriptLoadingIndicator");
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
     "aria-busy": status.value === "loading",

package/dist/runtime/components/ScriptPayPalMessages.vue

@@ -10,9 +10,9 @@ const props = defineProps({
   clientToken: { type: String, required: false },
   merchantId: { type: [String, Array], required: false },
   partnerAttributionId: { type: String, required: false },
-  pageType: { type: String, required: false },
+  pageType: { type: null, required: false },
   locale: { type: String, required: false },
-  messagesOptions: { type: Object, required: false, default: () => ({}) },
+  messagesOptions: { type: null, required: false, default: () => ({}) },
   paypalScriptOptions: { type: Object, required: false, default: () => ({}) }
 });
 const emit = defineEmits(["ready", "error"]);
@@ -23,9 +23,14 @@ const ready = ref(false);
 const failed = ref(false);
 const messagesSession = shallowRef();
 let disposed = false;
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const { onLoaded, status } = useScriptPayPal({
   ...props.clientToken ? { clientToken: props.clientToken } : { clientId: props.clientId },
-  ...props.paypalScriptOptions
+  ...props.paypalScriptOptions,
+  scriptOptions: {
+    ...props.paypalScriptOptions.scriptOptions,
+    trigger
+  }
 });
 onMounted(() => {
   onLoaded(async ({ paypal }) => {
@@ -64,7 +69,6 @@ defineExpose({
   messagesSession
 });
 const ScriptLoadingIndicator = resolveComponent("ScriptLoadingIndicator");
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
     "aria-busy": status.value === "loading",