@nuxt/scripts 0.11.4 → 0.11.6

package/dist/runtime/components/ScriptStripePricingTable.vue

@@ -1,66 +1,54 @@
-<script setup lang="ts">
-import { ref, computed, onBeforeUnmount, onMounted, watch } from 'vue'
-import type { ElementScriptTrigger } from '../types'
-import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
-import { useScript } from '#imports'
-
-const props = withDefaults(defineProps<{
-  trigger?: ElementScriptTrigger
-  publishableKey: string
-  pricingTableId: string
-  clientReferenceId?: string
-  customerEmail?: string
-  customerSessionClientSecret?: string
-}>(), {
-  trigger: 'visible',
-})
-
-const emit = defineEmits<{
-  ready: [ReturnType<typeof useScript>]
-  error: []
-}>()
-
-const rootEl = ref<HTMLDivElement | undefined>()
-const containerEl = ref<HTMLDivElement | undefined>()
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
+<script setup>
+import { ref, computed, onBeforeUnmount, onMounted, watch } from "vue";
+import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
+import { useScript } from "#imports";
+const props = defineProps({
+  trigger: { type: [String, Array, Boolean], required: false, default: "visible" },
+  publishableKey: { type: String, required: true },
+  pricingTableId: { type: String, required: true },
+  clientReferenceId: { type: String, required: false },
+  customerEmail: { type: String, required: false },
+  customerSessionClientSecret: { type: String, required: false }
+});
+const emit = defineEmits(["ready", "error"]);
+const rootEl = ref();
+const containerEl = ref();
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const instance = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
-  trigger,
-})
-const { onLoaded, status } = instance
-
-const pricingTable = ref<HTMLElement | undefined>()
+  trigger
+});
+const { onLoaded, status } = instance;
+const pricingTable = ref();
 onMounted(() => {
   onLoaded(() => {
-    const StripePricingTable = window.customElements.get('stripe-pricing-table')!
-    const stripePricingTable = new StripePricingTable()
-    stripePricingTable.setAttribute('publishable-key', props.publishableKey)
-    stripePricingTable.setAttribute('pricing-table-id', props.pricingTableId)
+    const StripePricingTable = window.customElements.get("stripe-pricing-table");
+    const stripePricingTable = new StripePricingTable();
+    stripePricingTable.setAttribute("publishable-key", props.publishableKey);
+    stripePricingTable.setAttribute("pricing-table-id", props.pricingTableId);
     if (props.clientReferenceId)
-      stripePricingTable.setAttribute('client-reference-id', props.clientReferenceId)
+      stripePricingTable.setAttribute("client-reference-id", props.clientReferenceId);
     if (props.customerEmail)
-      stripePricingTable.setAttribute('customer-email', props.customerEmail)
+      stripePricingTable.setAttribute("customer-email", props.customerEmail);
     if (props.customerSessionClientSecret)
-      stripePricingTable.setAttribute('customer-session-client-secret', props.customerSessionClientSecret)
-    pricingTable.value = stripePricingTable
-    rootEl.value!.appendChild(stripePricingTable)
-    emit('ready', instance)
-  })
-  watch(status, (status) => {
-    if (status === 'error') {
-      emit('error')
+      stripePricingTable.setAttribute("customer-session-client-secret", props.customerSessionClientSecret);
+    pricingTable.value = stripePricingTable;
+    rootEl.value.appendChild(stripePricingTable);
+    emit("ready", instance);
+  });
+  watch(status, (status2) => {
+    if (status2 === "error") {
+      emit("error");
     }
-  })
-})
-
+  });
+});
 onBeforeUnmount(() => {
-  pricingTable.value?.remove()
-})
-
+  pricingTable.value?.remove();
+});
 const rootAttrs = computed(() => {
   return {
-    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
-  }
-})
+    ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
+  };
+});
 </script>
 
 <template>

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

@@ -0,0 +1,56 @@
+import type { ElementScriptTrigger } from '../types.js';
+type __VLS_Props = {
+    trigger?: ElementScriptTrigger;
+    publishableKey: string;
+    pricingTableId: string;
+    clientReferenceId?: string;
+    customerEmail?: string;
+    customerSessionClientSecret?: string;
+};
+declare const rootEl: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+declare const containerEl: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+declare const status: import("vue").Ref<import("@unhead/vue").UseScriptStatus, import("@unhead/vue").UseScriptStatus>;
+declare const rootAttrs: import("vue").ComputedRef<{
+    [x: string]: string;
+}>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    loading?: (props: typeof __VLS_1) => any;
+} & {
+    awaitingLoad?: (props: typeof __VLS_3) => any;
+} & {
+    error?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    rootEl: typeof rootEl;
+    containerEl: typeof containerEl;
+    status: typeof status;
+    rootAttrs: typeof rootAttrs;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: () => any;
+    ready: (args_0: import("../types.js").UseScriptContext<Record<string | symbol, any>>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: (() => any) | undefined;
+    onReady?: ((args_0: import("../types.js").UseScriptContext<Record<string | symbol, any>>) => any) | undefined;
+}>, {
+    trigger: ElementScriptTrigger;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: () => any;
+    ready: (args_0: import("../types.js").UseScriptContext<Record<string | symbol, any>>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: (() => any) | undefined;
+    onReady?: ((args_0: import("../types.js").UseScriptContext<Record<string | symbol, any>>) => any) | undefined;
+}>, {
+    trigger: ElementScriptTrigger;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ScriptVimeoPlayer.vue

@@ -1,273 +1,176 @@
-<script setup lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-/// <reference types="vimeo__player" />
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import type { HTMLAttributes, ImgHTMLAttributes } from 'vue'
-import { defu } from 'defu'
-import { useAsyncData, useHead } from 'nuxt/app'
-import type { ElementScriptTrigger } from '../types'
-import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
-import { useScriptVimeoPlayer } from '../registry/vimeo-player'
-import ScriptAriaLoadingIndicator from './ScriptAriaLoadingIndicator.vue'
-
-interface VimeoOptions {
-  // copied from @types/vimeo__player
-  id?: number | undefined
-  url?: string | undefined
-  autopause?: boolean | undefined
-  autoplay?: boolean | undefined
-  background?: boolean | undefined
-  byline?: boolean | undefined
-  color?: string | undefined
-  controls?: boolean | undefined
-  dnt?: boolean | undefined
-  height?: number | undefined
-
-  interactive_params?: string | undefined
-  keyboard?: boolean | undefined
-  loop?: boolean | undefined
-  maxheight?: number | undefined
-  maxwidth?: number | undefined
-  muted?: boolean | undefined
-  pip?: boolean | undefined
-  playsinline?: boolean | undefined
-  portrait?: boolean | undefined
-  responsive?: boolean | undefined
-  speed?: boolean | undefined
-  quality?: Vimeo.VimeoVideoQuality | undefined
-  texttrack?: string | undefined
-  title?: boolean | undefined
-  transparent?: boolean | undefined
-  width?: number | undefined
-}
-
-const props = withDefaults(defineProps<{
-  // custom
-  trigger?: ElementScriptTrigger
-  placeholderAttrs?: ImgHTMLAttributes
-  rootAttrs?: HTMLAttributes
-  aboveTheFold?: boolean
-  vimeoOptions?: VimeoOptions
-  id?: number | undefined
-  url?: string | undefined
-}>(), {
-  trigger: 'mousedown',
-})
-
-const emits = defineEmits<TEmits>()
-
-type EventMap<E extends keyof Vimeo.EventMap> = [event: Vimeo.EventMap[E], player: Vimeo]
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type TEmits = {
-  play: EventMap<'play'>
-  playing: EventMap<'playing'>
-  pause: EventMap<'pause'>
-  ended: EventMap<'ended'>
-  timeupdate: EventMap<'timeupdate'>
-  progress: EventMap<'progress'>
-  seeking: EventMap<'seeking'>
-  seeked: EventMap<'seeked'>
-  texttrackchange: EventMap<'texttrackchange'>
-  chapterchange: EventMap<'chapterchange'>
-  cuechange: EventMap<'cuechange'>
-  cuepoint: EventMap<'cuepoint'>
-  volumechange: EventMap<'volumechange'>
-  playbackratechange: EventMap<'playbackratechange'>
-  bufferstart: EventMap<'bufferstart'>
-  bufferend: EventMap<'bufferend'>
-  error: EventMap<'error'>
-  loaded: EventMap<'loaded'>
-  durationchange: EventMap<'durationchange'>
-  fullscreenchange: EventMap<'fullscreenchange'>
-  qualitychange: EventMap<'qualitychange'>
-  camerachange: EventMap<'camerachange'>
-  resize: EventMap<'resize'>
-  enterpictureinpicture: EventMap<'enterpictureinpicture'>
-  leavepictureinpicture: EventMap<'leavepictureinpicture'>
-}
-
-const events: (keyof TEmits)[] = [
-  'play',
-  'playing',
-  'pause',
-  'ended',
-  'timeupdate',
-  'progress',
-  'seeking',
-  'seeked',
-  'texttrackchange',
-  'chapterchange',
-  'cuechange',
-  'cuepoint',
-  'volumechange',
-  'playbackratechange',
-  'bufferstart',
-  'bufferend',
-  'error',
-  'loaded',
-  'durationchange',
-  'fullscreenchange',
-  'qualitychange',
-  'camerachange',
-  'resize',
-  'enterpictureinpicture',
-  'leavepictureinpicture',
-]
-
-const elVimeo = ref()
-const rootEl = ref()
-
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
-let clickTriggered = false
-if (props.trigger === 'mousedown' && trigger instanceof Promise) {
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { defu } from "defu";
+import { useAsyncData, useHead } from "nuxt/app";
+import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
+import { useScriptVimeoPlayer } from "../registry/vimeo-player";
+import ScriptAriaLoadingIndicator from "./ScriptAriaLoadingIndicator.vue";
+const props = defineProps({
+  trigger: { type: [String, Array, Boolean], required: false, default: "mousedown" },
+  placeholderAttrs: { type: Object, required: false },
+  rootAttrs: { type: Object, required: false },
+  aboveTheFold: { type: Boolean, required: false },
+  vimeoOptions: { type: Object, required: false },
+  id: { type: null, required: false },
+  url: { type: null, required: false }
+});
+const emits = defineEmits(["play", "playing", "pause", "ended", "timeupdate", "progress", "seeking", "seeked", "texttrackchange", "chapterchange", "cuechange", "cuepoint", "volumechange", "playbackratechange", "bufferstart", "bufferend", "error", "loaded", "durationchange", "fullscreenchange", "qualitychange", "camerachange", "resize", "enterpictureinpicture", "leavepictureinpicture"]);
+const events = [
+  "play",
+  "playing",
+  "pause",
+  "ended",
+  "timeupdate",
+  "progress",
+  "seeking",
+  "seeked",
+  "texttrackchange",
+  "chapterchange",
+  "cuechange",
+  "cuepoint",
+  "volumechange",
+  "playbackratechange",
+  "bufferstart",
+  "bufferend",
+  "error",
+  "loaded",
+  "durationchange",
+  "fullscreenchange",
+  "qualitychange",
+  "camerachange",
+  "resize",
+  "enterpictureinpicture",
+  "leavepictureinpicture"
+];
+const elVimeo = ref();
+const rootEl = ref();
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
+let clickTriggered = false;
+if (props.trigger === "mousedown" && trigger instanceof Promise) {
   trigger.then((val) => {
     if (val) {
-      clickTriggered = true
+      clickTriggered = true;
     }
-  })
+  });
 }
-const ready = ref(false)
+const ready = ref(false);
 const { onLoaded, status } = useScriptVimeoPlayer({
   scriptOptions: {
-    trigger,
-  },
-})
-
+    trigger
+  }
+});
 if (import.meta.server) {
-  // dns-prefetch https://i.vimeocdn.com
   useHead({
     link: [
       {
-        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
-        href: 'https://i.vimeocdn.com',
-      },
-    ],
-  })
+        rel: props.aboveTheFold ? "preconnect" : "dns-prefetch",
+        href: "https://i.vimeocdn.com"
+      }
+    ]
+  });
 }
-
 const id = computed(() => {
-  return props.vimeoOptions?.id || props.id
-})
-
+  return props.vimeoOptions?.id || props.id;
+});
 const { data: payload } = useAsyncData(
   `vimeo-embed:${id.value}`,
   // TODO ideally we cache this
-  () => $fetch(`https://vimeo.com/api/v2/video/${id.value}.json`).then(res => (res as any)[0]),
+  () => $fetch(`https://vimeo.com/api/v2/video/${id.value}.json`).then((res) => res[0]),
   {
-    watch: [id],
-  },
-)
-
-const placeholder = computed(() => payload.value?.thumbnail_large)
-
-let player: Vimeo | undefined
-// we can't directly expose the player as vue will break the proxy
+    watch: [id]
+  }
+);
+const placeholder = computed(() => payload.value?.thumbnail_large);
+let player;
 defineExpose({
   play: () => player?.play(),
   pause: () => player?.pause(),
   getDuration: () => player?.getDuration(),
   getCurrentTime: () => player?.getCurrentTime(),
-  setCurrentTime: (time: number) => player?.setCurrentTime(time),
+  setCurrentTime: (time) => player?.setCurrentTime(time),
   getVolume: () => player?.getVolume(),
-  setVolume: (volume: number) => player?.setVolume(volume),
+  setVolume: (volume) => player?.setVolume(volume),
   getPaused: () => player?.getPaused(),
   getEnded: () => player?.getEnded(),
   getLoop: () => player?.getLoop(),
-  setLoop: (loop: boolean) => player?.setLoop(loop),
+  setLoop: (loop) => player?.setLoop(loop),
   getPlaybackRate: () => player?.getPlaybackRate(),
-  setPlaybackRate: (rate: number) => player?.setPlaybackRate(rate),
-})
-
+  setPlaybackRate: (rate) => player?.setPlaybackRate(rate)
+});
 const width = computed(() => {
-  return props.vimeoOptions?.width || elVimeo.value?.parentNode?.offsetWidth || 640
-})
-
+  return props.vimeoOptions?.width || elVimeo.value?.parentNode?.offsetWidth || 640;
+});
 const height = computed(() => {
-  return props.vimeoOptions?.height || elVimeo.value?.parentNode?.offsetHeight || 480
-})
-
+  return props.vimeoOptions?.height || elVimeo.value?.parentNode?.offsetHeight || 480;
+});
 onMounted(() => {
-  // @ts-ignore failing for end users
   onLoaded(async ({ Vimeo }) => {
-    const vimeoOptions = props.vimeoOptions || {}
+    const vimeoOptions = props.vimeoOptions || {};
     if (!vimeoOptions.id && props.id) {
-      vimeoOptions.id = props.id
+      vimeoOptions.id = props.id;
     }
     if (!vimeoOptions.url && props.url) {
-      vimeoOptions.url = props.url
+      vimeoOptions.url = props.url;
     }
-    vimeoOptions.width = width.value
-    vimeoOptions.height = height.value
-    player = new Vimeo.Player(elVimeo.value, vimeoOptions)
+    vimeoOptions.width = width.value;
+    vimeoOptions.height = height.value;
+    player = new Vimeo.Player(elVimeo.value, vimeoOptions);
     if (clickTriggered) {
-      player!.play()
-      clickTriggered = false
+      player.play();
+      clickTriggered = false;
     }
     for (const event of events) {
-      player!.on(event, (e: EventMap<typeof event>) => {
-        // @ts-expect-error ts isn't able to infer the correct event type
-        emits(event, e, player)
-        if (event === 'loaded')
-          ready.value = true
-      })
+      player.on(event, (e) => {
+        emits(event, e, player);
+        if (event === "loaded")
+          ready.value = true;
+      });
     }
-  })
-})
-
+  });
+});
 watch(() => props.id, (v) => {
   if (v) {
-    player?.loadVideo(Number(v))
+    player?.loadVideo(Number(v));
   }
-})
-watch(status, (status) => {
-  if (status === 'error') {
-    // @ts-expect-error untyped
-    emits('error')
+});
+watch(status, (status2) => {
+  if (status2 === "error") {
+    emits("error");
   }
-})
-
+});
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
-    'aria-busy': status.value === 'loading',
-    'aria-label': status.value === 'awaitingLoad'
-      ? 'Vimeo Player - Placeholder'
-      : status.value === 'loading'
-        ? 'Vimeo Player - Loading'
-        : 'Vimeo Player - Loaded',
-    'aria-live': 'polite',
-    'role': 'application',
-    'style': {
-      maxWidth: '100%',
+    "aria-busy": status.value === "loading",
+    "aria-label": status.value === "awaitingLoad" ? "Vimeo Player - Placeholder" : status.value === "loading" ? "Vimeo Player - Loading" : "Vimeo Player - Loaded",
+    "aria-live": "polite",
+    "role": "application",
+    "style": {
+      maxWidth: "100%",
       width: `auto`,
-      height: 'auto',
+      height: "auto",
       aspectRatio: `16/9`,
-      position: 'relative',
-      backgroundColor: 'black',
+      position: "relative",
+      backgroundColor: "black"
     },
-    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
-  }) as HTMLAttributes
-})
-
+    ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
+  });
+});
 const placeholderAttrs = computed(() => {
   return defu(props.placeholderAttrs, {
     src: placeholder.value,
-    alt: '',
-    loading: props.aboveTheFold ? 'eager' : 'lazy',
+    alt: "",
+    loading: props.aboveTheFold ? "eager" : "lazy",
     // @ts-expect-error untyped
-    fetchpriority: props.aboveTheFold ? 'high' : undefined,
+    fetchpriority: props.aboveTheFold ? "high" : void 0,
     style: {
-      cursor: 'pointer',
-      width: '100%',
-      objectFit: 'contain',
-      height: '100%',
-    },
-  } satisfies ImgHTMLAttributes)
-})
-
-onBeforeUnmount(() => player?.unload())
+      cursor: "pointer",
+      width: "100%",
+      objectFit: "contain",
+      height: "100%"
+    }
+  });
+});
+onBeforeUnmount(() => player?.unload());
 </script>
 
 <template>