@nuxt/scripts 1.0.0-beta.7 → 1.0.0-rc.10

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

@@ -1,6 +1,6 @@
-import { type HTMLAttributes, type ReservedProps } from 'vue';
-import type { PayPalMessagesComponentOptions } from '@paypal/paypal-js';
 import type { ElementScriptTrigger } from '#nuxt-scripts/types';
+import type { PageTypes, PayPalMessagesOptions, PayPalMessagesSession } from '@paypal/paypal-js/sdk-v6';
+import type { HTMLAttributes, ReservedProps } from 'vue';
 import type { PayPalInput } from '../registry/paypal.js';
 type __VLS_Props = {
     /**
@@ -12,51 +12,60 @@ type __VLS_Props = {
      */
     trigger?: ElementScriptTrigger;
     /**
-     * The client id for the paypal script.
+     * Client ID or client token for PayPal SDK v6 authentication.
      */
     clientId?: string;
     /**
-     * The options for the paypal buttons.
+     * Server-generated client token for SDK v6.
      */
-    messagesOptions?: PayPalMessagesComponentOptions;
+    clientToken?: string;
     /**
-     * The merchant id for the paypal script.
+     * The merchant ID for the paypal script.
      */
-    merchantId?: string;
+    merchantId?: string | string[];
     /**
-     * The partner attribution id for the paypal script.
+     * The partner attribution ID.
      */
     partnerAttributionId?: string;
     /**
-     * The options for the paypal scipt.
+     * The page type context hint.
+     */
+    pageType?: PageTypes;
+    /**
+     * The locale for the SDK (BCP-47 code).
+     */
+    locale?: string;
+    /**
+     * Options for the PayPal Messages session.
+     */
+    messagesOptions?: PayPalMessagesOptions;
+    /**
+     * The paypal script options.
      */
     paypalScriptOptions?: Partial<PayPalInput>;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
-type __VLS_Slots = {} & {
-    placeholder?: (props: typeof __VLS_1) => any;
-} & {
-    loading?: (props: typeof __VLS_3) => any;
-} & {
-    awaitingLoad?: (props: typeof __VLS_10) => any;
-} & {
-    error?: (props: typeof __VLS_12) => any;
-} & {
-    default?: (props: typeof __VLS_14) => any;
+type __VLS_Slots = {
+    default?: (props: {
+        messagesSession: PayPalMessagesSession | undefined;
+    }) => any;
+    placeholder?: () => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    render: (data: Record<string, unknown>) => any;
-    apply: (data: Record<string, unknown>) => any;
-    clickMessages: (data: Record<string, unknown>) => any;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    messagesSession: import("vue").ShallowRef<PayPalMessagesSession | undefined, PayPalMessagesSession | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: unknown) => any;
+    ready: (session: PayPalMessagesSession) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onRender?: ((data: Record<string, unknown>) => any) | undefined;
-    onApply?: ((data: Record<string, unknown>) => any) | undefined;
-    onClickMessages?: ((data: Record<string, unknown>) => any) | undefined;
+    onError?: ((error: unknown) => any) | undefined;
+    onReady?: ((session: PayPalMessagesSession) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
     clientId: string;
     paypalScriptOptions: Partial<PayPalInput>;
-    messagesOptions: PayPalMessagesComponentOptions;
+    messagesOptions: PayPalMessagesOptions;
 }, {}, {}, {}, 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/ScriptStripePricingTable.d.vue.ts

@@ -7,15 +7,11 @@ type __VLS_Props = {
     customerEmail?: string;
     customerSessionClientSecret?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
-type __VLS_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;
+type __VLS_Slots = {
+    default?: () => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: () => any;

package/dist/runtime/components/ScriptStripePricingTable.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, computed, onBeforeUnmount, onMounted, watch } from "vue";
-import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useScript } from "../composables/useScript";
+import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 const props = defineProps({
   trigger: { type: [String, Array, Boolean], required: false, default: "visible" },
   publishableKey: { type: String, required: true },
@@ -11,6 +11,7 @@ const props = defineProps({
   customerSessionClientSecret: { type: String, required: false }
 });
 const emit = defineEmits(["ready", "error"]);
+defineSlots();
 const rootEl = ref();
 const containerEl = ref();
 const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });

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

@@ -7,15 +7,11 @@ type __VLS_Props = {
     customerEmail?: string;
     customerSessionClientSecret?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
-type __VLS_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;
+type __VLS_Slots = {
+    default?: () => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: () => any;

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

@@ -36,18 +36,22 @@ type __VLS_Props = {
     vimeoOptions?: VimeoOptions;
     id?: number | undefined;
     url?: string | undefined;
+    ratio?: string;
+    /**
+     * Object-fit for the placeholder image.
+     *
+     * @default 'contain'
+     */
+    placeholderObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };
-declare var __VLS_1: any, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
-type __VLS_Slots = {} & {
-    placeholder?: (props: typeof __VLS_1) => any;
-} & {
-    loading?: (props: typeof __VLS_3) => any;
-} & {
-    awaitingLoad?: (props: typeof __VLS_10) => any;
-} & {
-    error?: (props: typeof __VLS_12) => any;
-} & {
-    default?: (props: typeof __VLS_14) => any;
+type __VLS_Slots = {
+    default?: () => any;
+    placeholder?: (props: {
+        placeholder: string | undefined;
+    }) => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     play: () => Promise<void> | undefined;
@@ -117,6 +121,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     onLeavepictureinpicture?: ((event: never, player: Vimeo.Player) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
+    ratio: string;
+    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
 }, {}, {}, {}, 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/ScriptVimeoPlayer.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { defu } from "defu";
 import { useAsyncData, useHead } from "nuxt/app";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 import { useScriptVimeoPlayer } from "../registry/vimeo-player";
 import ScriptAriaLoadingIndicator from "./ScriptAriaLoadingIndicator.vue";
@@ -12,9 +12,12 @@ const props = defineProps({
   aboveTheFold: { type: Boolean, required: false },
   vimeoOptions: { type: Object, required: false },
   id: { type: null, required: false },
-  url: { type: null, required: false }
+  url: { type: null, required: false },
+  ratio: { type: String, required: false, default: "16/9" },
+  placeholderObjectFit: { type: String, required: false, default: "contain" }
 });
 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"]);
+defineSlots();
 const events = [
   "play",
   "playing",
@@ -153,12 +156,13 @@ const rootAttrs = computed(() => {
     "aria-live": "polite",
     "role": "application",
     "style": {
-      maxWidth: "100%",
-      width: `auto`,
-      height: "auto",
-      aspectRatio: `16/9`,
-      position: "relative",
-      backgroundColor: "black"
+      "--vimeo-ratio": props.ratio,
+      "maxWidth": "100%",
+      "width": `auto`,
+      "height": "auto",
+      "aspectRatio": props.ratio,
+      "position": "relative",
+      "backgroundColor": "black"
     },
     ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
   });
@@ -173,7 +177,7 @@ const placeholderAttrs = computed(() => {
     style: {
       cursor: "pointer",
       width: "100%",
-      objectFit: "contain",
+      objectFit: props.placeholderObjectFit,
       height: "100%"
     }
   });
@@ -197,5 +201,5 @@ onBeforeUnmount(() => player?.unload());
 </template>
 
 <style>
-.vimeo-player iframe{aspect-ratio:16/9;height:auto;max-width:100%!important;width:100%}
+.vimeo-player iframe{aspect-ratio:var(--vimeo-ratio,16/9);height:auto;max-width:100%!important;width:100%}
 </style>

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

@@ -36,18 +36,22 @@ type __VLS_Props = {
     vimeoOptions?: VimeoOptions;
     id?: number | undefined;
     url?: string | undefined;
+    ratio?: string;
+    /**
+     * Object-fit for the placeholder image.
+     *
+     * @default 'contain'
+     */
+    placeholderObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };
-declare var __VLS_1: any, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
-type __VLS_Slots = {} & {
-    placeholder?: (props: typeof __VLS_1) => any;
-} & {
-    loading?: (props: typeof __VLS_3) => any;
-} & {
-    awaitingLoad?: (props: typeof __VLS_10) => any;
-} & {
-    error?: (props: typeof __VLS_12) => any;
-} & {
-    default?: (props: typeof __VLS_14) => any;
+type __VLS_Slots = {
+    default?: () => any;
+    placeholder?: (props: {
+        placeholder: string | undefined;
+    }) => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     play: () => Promise<void> | undefined;
@@ -117,6 +121,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     onLeavepictureinpicture?: ((event: never, player: Vimeo.Player) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
+    ratio: string;
+    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
 }, {}, {}, {}, 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/ScriptXEmbed.d.vue.ts

@@ -7,12 +7,10 @@ type __VLS_Props = {
     tweetId: string;
     /**
      * Custom API endpoint for fetching tweet data
-     * @default '/_scripts/x-embed'
      */
     apiEndpoint?: string;
     /**
      * Custom image proxy endpoint
-     * @default '/_scripts/x-embed-image'
      */
     imageProxyEndpoint?: string;
     /**
@@ -20,14 +18,19 @@ type __VLS_Props = {
      */
     rootAttrs?: HTMLAttributes;
 };
-declare var __VLS_1: {}, __VLS_3: {
-    error: import("nuxt/app").NuxtError<unknown> | undefined;
-}, __VLS_5: {
+type __VLS_Slots = {
+    default?: (props: NonNullable<typeof slotProps.value>) => any;
+    loading?: () => any;
+    error?: (props: {
+        error: typeof error.value;
+    }) => any;
+};
+declare const error: import("vue").Ref<import("nuxt/app").NuxtError<unknown> | undefined, import("nuxt/app").NuxtError<unknown> | undefined>;
+declare const slotProps: import("vue").ComputedRef<{
     tweet: XEmbedTweetData;
     userName: string;
     userHandle: string;
     userAvatar: string;
-    userAvatarOriginal: string;
     isVerified: boolean | undefined;
     text: string;
     datetime: string;
@@ -56,14 +59,7 @@ declare var __VLS_1: {}, __VLS_3: {
     isReply: boolean;
     replyToUser: string | undefined;
     proxyImage: (url: string) => string;
-};
-type __VLS_Slots = {} & {
-    loading?: (props: typeof __VLS_1) => any;
-} & {
-    error?: (props: typeof __VLS_3) => any;
-} & {
-    default?: (props: typeof __VLS_5) => any;
-};
+} | null>;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     tweet: import("vue").Ref<XEmbedTweetData | undefined, XEmbedTweetData | undefined>;
     status: import("vue").Ref<import("nuxt/app").AsyncDataRequestStatus, import("nuxt/app").AsyncDataRequestStatus>;

package/dist/runtime/components/ScriptXEmbed.vue

@@ -1,17 +1,26 @@
 <script setup>
-import { computed } from "vue";
 import { useAsyncData } from "nuxt/app";
-import { formatCount, formatTweetDate, proxyXImageUrl } from "../registry/x-embed";
+import { computed } from "vue";
+import { useScriptProxyUrl } from "../composables/useScriptProxyUrl";
+import { formatCount, formatTweetDate } from "../registry/x-embed";
+import { requireRegistryEndpoint, scriptsPrefix } from "../utils";
 const props = defineProps({
   tweetId: { type: String, required: true },
-  apiEndpoint: { type: String, required: false, default: "/api/_scripts/x-embed" },
-  imageProxyEndpoint: { type: String, required: false, default: "/api/_scripts/x-embed-image" },
+  apiEndpoint: { type: String, required: false, default: void 0 },
+  imageProxyEndpoint: { type: String, required: false, default: void 0 },
   rootAttrs: { type: Object, required: false }
 });
+defineSlots();
+const prefix = scriptsPrefix();
+const apiEndpoint = computed(() => props.apiEndpoint || `${prefix}/embed/x`);
+const resolvedImageProxyEndpoint = computed(() => props.imageProxyEndpoint || `${prefix}/embed/x-image`);
+if (!props.apiEndpoint)
+  requireRegistryEndpoint("ScriptXEmbed", "xEmbed");
+const proxyUrl = useScriptProxyUrl();
 const cacheKey = computed(() => `x-embed-${props.tweetId}`);
 const { data: tweet, status, error } = useAsyncData(
   cacheKey,
-  () => $fetch(`${props.apiEndpoint}?id=${props.tweetId}`)
+  () => $fetch(proxyUrl(apiEndpoint.value, { id: props.tweetId }))
 );
 const slotProps = computed(() => {
   if (!tweet.value)
@@ -23,8 +32,7 @@ const slotProps = computed(() => {
     // User info
     userName: t.user.name,
     userHandle: t.user.screen_name,
-    userAvatar: proxyXImageUrl(t.user.profile_image_url_https, props.imageProxyEndpoint),
-    userAvatarOriginal: t.user.profile_image_url_https,
+    userAvatar: t.user.profile_image_url_https,
     isVerified: t.user.verified || t.user.is_blue_verified,
     // Tweet content
     text: t.text,
@@ -35,14 +43,14 @@ const slotProps = computed(() => {
     likesFormatted: formatCount(t.favorite_count),
     replies: t.conversation_count,
     repliesFormatted: formatCount(t.conversation_count),
-    // Media
+    // Media (already proxied)
     photos: t.photos?.map((p) => ({
       ...p,
-      proxiedUrl: proxyXImageUrl(p.url, props.imageProxyEndpoint)
+      proxiedUrl: p.url
     })),
     video: t.video ? {
       ...t.video,
-      posterProxied: proxyXImageUrl(t.video.poster, props.imageProxyEndpoint)
+      posterProxied: t.video.poster
     } : null,
     // Links
     tweetUrl: `https://x.com/${t.user.screen_name}/status/${t.id_str}`,
@@ -52,8 +60,9 @@ const slotProps = computed(() => {
     // Reply context
     isReply: !!t.parent,
     replyToUser: t.parent?.user.screen_name,
-    // Helpers
-    proxyImage: (url) => proxyXImageUrl(url, props.imageProxyEndpoint)
+    // Helpers — proxy an arbitrary URL through the image endpoint at runtime.
+    // Uses the page token emitted during SSR so client-generated URLs validate.
+    proxyImage: (url) => proxyUrl(resolvedImageProxyEndpoint.value, { url })
   };
 });
 defineExpose({

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

@@ -7,12 +7,10 @@ type __VLS_Props = {
     tweetId: string;
     /**
      * Custom API endpoint for fetching tweet data
-     * @default '/_scripts/x-embed'
      */
     apiEndpoint?: string;
     /**
      * Custom image proxy endpoint
-     * @default '/_scripts/x-embed-image'
      */
     imageProxyEndpoint?: string;
     /**
@@ -20,14 +18,19 @@ type __VLS_Props = {
      */
     rootAttrs?: HTMLAttributes;
 };
-declare var __VLS_1: {}, __VLS_3: {
-    error: import("nuxt/app").NuxtError<unknown> | undefined;
-}, __VLS_5: {
+type __VLS_Slots = {
+    default?: (props: NonNullable<typeof slotProps.value>) => any;
+    loading?: () => any;
+    error?: (props: {
+        error: typeof error.value;
+    }) => any;
+};
+declare const error: import("vue").Ref<import("nuxt/app").NuxtError<unknown> | undefined, import("nuxt/app").NuxtError<unknown> | undefined>;
+declare const slotProps: import("vue").ComputedRef<{
     tweet: XEmbedTweetData;
     userName: string;
     userHandle: string;
     userAvatar: string;
-    userAvatarOriginal: string;
     isVerified: boolean | undefined;
     text: string;
     datetime: string;
@@ -56,14 +59,7 @@ declare var __VLS_1: {}, __VLS_3: {
     isReply: boolean;
     replyToUser: string | undefined;
     proxyImage: (url: string) => string;
-};
-type __VLS_Slots = {} & {
-    loading?: (props: typeof __VLS_1) => any;
-} & {
-    error?: (props: typeof __VLS_3) => any;
-} & {
-    default?: (props: typeof __VLS_5) => any;
-};
+} | null>;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     tweet: import("vue").Ref<XEmbedTweetData | undefined, XEmbedTweetData | undefined>;
     status: import("vue").Ref<import("nuxt/app").AsyncDataRequestStatus, import("nuxt/app").AsyncDataRequestStatus>;

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

@@ -27,19 +27,14 @@ type __VLS_Props = {
      */
     placeholderObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };
-declare var __VLS_1: {
-    placeholder: string;
-}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
-type __VLS_Slots = {} & {
-    placeholder?: (props: typeof __VLS_1) => any;
-} & {
-    loading?: (props: typeof __VLS_3) => any;
-} & {
-    awaitingLoad?: (props: typeof __VLS_10) => any;
-} & {
-    error?: (props: typeof __VLS_12) => any;
-} & {
-    default?: (props: typeof __VLS_14) => any;
+type __VLS_Slots = {
+    default?: () => any;
+    placeholder?: (props: {
+        placeholder: string;
+    }) => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     player: Ref<YT.Player | undefined, YT.Player | undefined>;
@@ -61,12 +56,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     trigger: ElementScriptTrigger;
     width: number;
     height: number;
-    playerVars: YT.PlayerVars;
     ratio: string;
+    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    playerVars: YT.PlayerVars;
     cookies: boolean;
     thumbnailSize: YoutubeThumbnailSize;
     webp: boolean;
-    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
 }, {}, {}, {}, 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/ScriptYouTubePlayer.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { defu } from "defu";
 import { useHead } from "nuxt/app";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 import { useScriptYouTubePlayer } from "../registry/youtube-player";
 import ScriptAriaLoadingIndicator from "./ScriptAriaLoadingIndicator.vue";
@@ -22,6 +22,7 @@ const props = defineProps({
   placeholderObjectFit: { type: String, required: false, default: "cover" }
 });
 const emits = defineEmits(["ready", "state-change", "playback-quality-change", "playback-rate-change", "error", "api-change"]);
+defineSlots();
 const events = [
   "onReady",
   "onStateChange",
@@ -30,6 +31,7 @@ const events = [
   "onError",
   "onApiChange"
 ];
+const CAMEL_CASE_RE = /([A-Z])/g;
 const rootEl = ref();
 const youtubeEl = ref();
 const ready = ref(false);
@@ -70,9 +72,11 @@ onMounted(() => {
   onLoaded(async (instance) => {
     if (!isTriggered.value && trigger instanceof Promise) {
       const triggered = await trigger;
-      if (!triggered) return;
+      if (!triggered)
+        return;
     }
-    if (!youtubeEl.value) return;
+    if (!youtubeEl.value)
+      return;
     const YouTube = instance.YT instanceof Promise ? await instance.YT : instance.YT;
     await new Promise((resolve) => {
       if (typeof YT.Player === "undefined")
@@ -80,7 +84,8 @@ onMounted(() => {
       else
         resolve();
     });
-    if (!youtubeEl.value) return;
+    if (!youtubeEl.value)
+      return;
     player.value = new YT.Player(youtubeEl.value, {
       host: !props.cookies ? "https://www.youtube-nocookie.com" : "https://www.youtube.com",
       videoId: props.videoId,
@@ -89,7 +94,7 @@ onMounted(() => {
       playerVars: props.playerVars,
       ...props.playerOptions,
       events: Object.fromEntries(events.map((event) => [event, (e) => {
-        const emitEventName = event.replace(/([A-Z])/g, "-$1").replace("on-", "").toLowerCase();
+        const emitEventName = event.replace(CAMEL_CASE_RE, "-$1").replace("on-", "").toLowerCase();
         emits(emitEventName, e);
         if (event === "onReady") {
           ready.value = true;
@@ -151,6 +156,8 @@ const placeholderAttrs = computed(() => {
     src: isFallbackPlaceHolder.value ? fallbackPlaceHolder.value : placeholder.value,
     alt: "",
     loading: props.aboveTheFold ? "eager" : "lazy",
+    // @ts-expect-error untyped
+    fetchpriority: props.aboveTheFold ? "high" : void 0,
     style: {
       width: "100%",
       objectFit: props.placeholderObjectFit,

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

@@ -27,19 +27,14 @@ type __VLS_Props = {
      */
     placeholderObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };
-declare var __VLS_1: {
-    placeholder: string;
-}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
-type __VLS_Slots = {} & {
-    placeholder?: (props: typeof __VLS_1) => any;
-} & {
-    loading?: (props: typeof __VLS_3) => any;
-} & {
-    awaitingLoad?: (props: typeof __VLS_10) => any;
-} & {
-    error?: (props: typeof __VLS_12) => any;
-} & {
-    default?: (props: typeof __VLS_14) => any;
+type __VLS_Slots = {
+    default?: () => any;
+    placeholder?: (props: {
+        placeholder: string;
+    }) => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: () => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     player: Ref<YT.Player | undefined, YT.Player | undefined>;
@@ -61,12 +56,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     trigger: ElementScriptTrigger;
     width: number;
     height: number;
-    playerVars: YT.PlayerVars;
     ratio: string;
+    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    playerVars: YT.PlayerVars;
     cookies: boolean;
     thumbnailSize: YoutubeThumbnailSize;
     webp: boolean;
-    placeholderObjectFit: "cover" | "contain" | "fill" | "none" | "scale-down";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;