@nuxt/scripts 0.13.2 → 1.0.0-beta.2

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

@@ -14,7 +14,7 @@ type __VLS_Props = {
     trigger?: ElementScriptTrigger;
 };
 declare var __VLS_1: {
-    ready: any;
+    ready: boolean;
 }, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -14,7 +14,7 @@ type __VLS_Props = {
     trigger?: ElementScriptTrigger;
 };
 declare var __VLS_1: {
-    ready: any;
+    ready: boolean;
 }, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -64,6 +64,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getPlaybackRate: () => Promise<number> | undefined;
     setPlaybackRate: (rate: number) => Promise<number> | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     error: (event: import("@vimeo/player").Error, player: Vimeo.Player) => any;
     loaded: (event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any;
     cuechange: (event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any;
@@ -72,7 +73,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     pause: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     play: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     playing: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
-    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     resize: (event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any;
     seeked: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     seeking: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
@@ -90,6 +90,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     enterpictureinpicture: (event: never, player: Vimeo.Player) => any;
     leavepictureinpicture: (event: never, player: Vimeo.Player) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onError?: ((event: import("@vimeo/player").Error, player: Vimeo.Player) => any) | undefined;
     onLoaded?: ((event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any) | undefined;
     onCuechange?: ((event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any) | undefined;
@@ -98,7 +99,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     onPause?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onPlay?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onPlaying?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
-    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onResize?: ((event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any) | undefined;
     onSeeked?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onSeeking?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;

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

@@ -64,6 +64,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     getPlaybackRate: () => Promise<number> | undefined;
     setPlaybackRate: (rate: number) => Promise<number> | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     error: (event: import("@vimeo/player").Error, player: Vimeo.Player) => any;
     loaded: (event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any;
     cuechange: (event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any;
@@ -72,7 +73,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     pause: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     play: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     playing: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
-    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     resize: (event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any;
     seeked: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
     seeking: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
@@ -90,6 +90,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     enterpictureinpicture: (event: never, player: Vimeo.Player) => any;
     leavepictureinpicture: (event: never, player: Vimeo.Player) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onError?: ((event: import("@vimeo/player").Error, player: Vimeo.Player) => any) | undefined;
     onLoaded?: ((event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any) | undefined;
     onCuechange?: ((event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any) | undefined;
@@ -98,7 +99,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     onPause?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onPlay?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onPlaying?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
-    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onResize?: ((event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any) | undefined;
     onSeeked?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
     onSeeking?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;

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

@@ -0,0 +1,82 @@
+import type { HTMLAttributes } from 'vue';
+import type { XEmbedTweetData } from '../registry/x-embed.js';
+type __VLS_Props = {
+    /**
+     * The tweet ID to embed
+     */
+    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;
+    /**
+     * Root element attributes
+     */
+    rootAttrs?: HTMLAttributes;
+};
+declare var __VLS_1: {}, __VLS_3: {
+    error: import("nuxt/app").NuxtError<unknown> | undefined;
+}, __VLS_5: {
+    tweet: XEmbedTweetData;
+    userName: string;
+    userHandle: string;
+    userAvatar: string;
+    userAvatarOriginal: string;
+    isVerified: boolean | undefined;
+    text: string;
+    datetime: string;
+    createdAt: Date;
+    likes: number;
+    likesFormatted: string;
+    replies: number;
+    repliesFormatted: string;
+    photos: {
+        proxiedUrl: string;
+        url: string;
+        width: number;
+        height: number;
+    }[] | undefined;
+    video: {
+        posterProxied: string;
+        poster: string;
+        variants: Array<{
+            type: string;
+            src: string;
+        }>;
+    } | null;
+    tweetUrl: string;
+    userUrl: string;
+    quotedTweet: XEmbedTweetData | undefined;
+    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;
+};
+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>;
+    error: import("vue").Ref<import("nuxt/app").NuxtError<unknown> | undefined, import("nuxt/app").NuxtError<unknown> | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    apiEndpoint: string;
+    imageProxyEndpoint: string;
+}, {}, {}, {}, 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/ScriptXEmbed.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { computed } from "vue";
+import { useAsyncData } from "nuxt/app";
+import { formatCount, formatTweetDate, proxyXImageUrl } from "../registry/x-embed";
+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" },
+  rootAttrs: { type: Object, required: false }
+});
+const cacheKey = computed(() => `x-embed-${props.tweetId}`);
+const { data: tweet, status, error } = useAsyncData(
+  cacheKey,
+  () => $fetch(`${props.apiEndpoint}?id=${props.tweetId}`)
+);
+const slotProps = computed(() => {
+  if (!tweet.value)
+    return null;
+  const t = tweet.value;
+  return {
+    // Raw data
+    tweet: t,
+    // 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,
+    isVerified: t.user.verified || t.user.is_blue_verified,
+    // Tweet content
+    text: t.text,
+    // Formatted values
+    datetime: formatTweetDate(t.created_at),
+    createdAt: new Date(t.created_at),
+    likes: t.favorite_count,
+    likesFormatted: formatCount(t.favorite_count),
+    replies: t.conversation_count,
+    repliesFormatted: formatCount(t.conversation_count),
+    // Media
+    photos: t.photos?.map((p) => ({
+      ...p,
+      proxiedUrl: proxyXImageUrl(p.url, props.imageProxyEndpoint)
+    })),
+    video: t.video ? {
+      ...t.video,
+      posterProxied: proxyXImageUrl(t.video.poster, props.imageProxyEndpoint)
+    } : null,
+    // Links
+    tweetUrl: `https://x.com/${t.user.screen_name}/status/${t.id_str}`,
+    userUrl: `https://x.com/${t.user.screen_name}`,
+    // Quoted tweet
+    quotedTweet: t.quoted_tweet,
+    // Reply context
+    isReply: !!t.parent,
+    replyToUser: t.parent?.user.screen_name,
+    // Helpers
+    proxyImage: (url) => proxyXImageUrl(url, props.imageProxyEndpoint)
+  };
+});
+defineExpose({
+  tweet,
+  status,
+  error
+});
+</script>
+
+<template>
+  <div v-bind="rootAttrs">
+    <slot v-if="status === 'pending'" name="loading">
+      <div>Loading tweet...</div>
+    </slot>
+    <slot v-else-if="status === 'error'" name="error" :error="error">
+      <div>Failed to load tweet</div>
+    </slot>
+    <slot v-else-if="slotProps" v-bind="slotProps" />
+  </div>
+</template>

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

@@ -0,0 +1,82 @@
+import type { HTMLAttributes } from 'vue';
+import type { XEmbedTweetData } from '../registry/x-embed.js';
+type __VLS_Props = {
+    /**
+     * The tweet ID to embed
+     */
+    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;
+    /**
+     * Root element attributes
+     */
+    rootAttrs?: HTMLAttributes;
+};
+declare var __VLS_1: {}, __VLS_3: {
+    error: import("nuxt/app").NuxtError<unknown> | undefined;
+}, __VLS_5: {
+    tweet: XEmbedTweetData;
+    userName: string;
+    userHandle: string;
+    userAvatar: string;
+    userAvatarOriginal: string;
+    isVerified: boolean | undefined;
+    text: string;
+    datetime: string;
+    createdAt: Date;
+    likes: number;
+    likesFormatted: string;
+    replies: number;
+    repliesFormatted: string;
+    photos: {
+        proxiedUrl: string;
+        url: string;
+        width: number;
+        height: number;
+    }[] | undefined;
+    video: {
+        posterProxied: string;
+        poster: string;
+        variants: Array<{
+            type: string;
+            src: string;
+        }>;
+    } | null;
+    tweetUrl: string;
+    userUrl: string;
+    quotedTweet: XEmbedTweetData | undefined;
+    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;
+};
+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>;
+    error: import("vue").Ref<import("nuxt/app").NuxtError<unknown> | undefined, import("nuxt/app").NuxtError<unknown> | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    apiEndpoint: string;
+    imageProxyEndpoint: string;
+}, {}, {}, {}, 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/ScriptYouTubePlayer.d.vue.ts

@@ -10,6 +10,7 @@ type __VLS_Props = {
     playerVars?: YT.PlayerVars;
     width?: number;
     height?: number;
+    ratio?: string;
     /**
      * Whether to use youtube-nocookie.com for embedding.
      *
@@ -19,9 +20,15 @@ type __VLS_Props = {
     playerOptions?: YT.PlayerOptions;
     thumbnailSize?: YoutubeThumbnailSize;
     webp?: boolean;
+    /**
+     * Object-fit for the placeholder image.
+     *
+     * @default 'cover'
+     */
+    placeholderObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };
 declare var __VLS_1: {
-    placeholder: any;
+    placeholder: string;
 }, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     placeholder?: (props: typeof __VLS_1) => any;
@@ -42,20 +49,24 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     "state-change": (e: YT.OnStateChangeEvent, target: YT.Player) => any;
     "playback-quality-change": (e: YT.OnPlaybackQualityChangeEvent, target: YT.Player) => any;
     "playback-rate-change": (e: YT.OnPlaybackRateChangeEvent, target: YT.Player) => any;
+    "api-change": (e: YT.PlayerEvent, target: YT.Player) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onError?: ((e: YT.OnErrorEvent, target: YT.Player) => any) | undefined;
     onReady?: ((e: YT.PlayerEvent) => any) | undefined;
     "onState-change"?: ((e: YT.OnStateChangeEvent, target: YT.Player) => any) | undefined;
     "onPlayback-quality-change"?: ((e: YT.OnPlaybackQualityChangeEvent, target: YT.Player) => any) | undefined;
     "onPlayback-rate-change"?: ((e: YT.OnPlaybackRateChangeEvent, target: YT.Player) => any) | undefined;
+    "onApi-change"?: ((e: YT.PlayerEvent, target: YT.Player) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
     width: number;
     height: number;
     playerVars: YT.PlayerVars;
+    ratio: string;
     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,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { defu } from "defu";
 import { useHead } from "nuxt/app";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
@@ -14,12 +14,14 @@ const props = defineProps({
   playerVars: { type: null, required: false, default: { autoplay: 0, playsinline: 1 } },
   width: { type: Number, required: false, default: 640 },
   height: { type: Number, required: false, default: 360 },
+  ratio: { type: String, required: false, default: "16/9" },
   cookies: { type: Boolean, required: false, default: false },
   playerOptions: { type: null, required: false },
   thumbnailSize: { type: String, required: false, default: "hq720" },
-  webp: { type: Boolean, required: false, default: true }
+  webp: { type: Boolean, required: false, default: true },
+  placeholderObjectFit: { type: String, required: false, default: "cover" }
 });
-const emits = defineEmits(["ready", "state-change", "playback-quality-change", "playback-rate-change", "error"]);
+const emits = defineEmits(["ready", "state-change", "playback-quality-change", "playback-rate-change", "error", "api-change"]);
 const events = [
   "onReady",
   "onStateChange",
@@ -31,24 +33,46 @@ const events = [
 const rootEl = ref();
 const youtubeEl = ref();
 const ready = ref(false);
+const isTriggered = ref(false);
 const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const script = useScriptYouTubePlayer({
   scriptOptions: {
+    // Use immediate trigger so script loads when ANY player needs it
+    // Each player will wait for its own trigger before creating iframe
     trigger
   }
 });
 const { onLoaded, status } = script;
 const player = ref();
-let clickTriggered = false;
-if (props.trigger === "mousedown" && trigger instanceof Promise) {
+const clickTriggered = ref(false);
+if (trigger instanceof Promise) {
   trigger.then((triggered) => {
     if (triggered) {
-      clickTriggered = true;
+      isTriggered.value = true;
+      if (props.trigger === "mousedown") {
+        clickTriggered.value = true;
+      }
     }
   });
+} else {
+  isTriggered.value = true;
 }
+const stopVideoIdWatch = watch(() => props.videoId, (newId) => {
+  if (ready.value && player.value) {
+    player.value.loadVideoById(newId);
+  }
+});
+onBeforeUnmount(() => {
+  stopVideoIdWatch();
+  player.value?.destroy();
+});
 onMounted(() => {
   onLoaded(async (instance) => {
+    if (!isTriggered.value && trigger instanceof Promise) {
+      const triggered = await trigger;
+      if (!triggered) 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")
@@ -56,22 +80,23 @@ onMounted(() => {
       else
         resolve();
     });
+    if (!youtubeEl.value) return;
     player.value = new YT.Player(youtubeEl.value, {
       host: !props.cookies ? "https://www.youtube-nocookie.com" : "https://www.youtube.com",
-      ...props,
+      videoId: props.videoId,
+      width: props.width,
+      height: props.height,
+      playerVars: props.playerVars,
       ...props.playerOptions,
       events: Object.fromEntries(events.map((event) => [event, (e) => {
         const emitEventName = event.replace(/([A-Z])/g, "-$1").replace("on-", "").toLowerCase();
         emits(emitEventName, e);
         if (event === "onReady") {
           ready.value = true;
-          if (clickTriggered) {
+          if (clickTriggered.value) {
             player.value?.playVideo();
-            clickTriggered = false;
+            clickTriggered.value = false;
           }
-          watch(() => props.videoId, () => {
-            player.value?.loadVideoById(props.videoId);
-          });
         }
       }]))
     });
@@ -96,7 +121,7 @@ const rootAttrs = computed(() => {
       position: "relative",
       backgroundColor: "black",
       width: "100%",
-      aspectRatio: `${props.width}/${props.height}`
+      aspectRatio: props.ratio
     },
     ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
   });
@@ -108,12 +133,12 @@ if (import.meta.server) {
   useHead({
     link: [
       {
-        key: `nuxt-script-youtube-img`,
+        key: "nuxt-script-youtube-img-preconnect",
         rel: props.aboveTheFold ? "preconnect" : "dns-prefetch",
         href: "https://i.ytimg.com"
       },
       props.aboveTheFold ? {
-        key: `nuxt-script-youtube-img`,
+        key: `nuxt-script-youtube-img-preload-${props.videoId}`,
         rel: "preload",
         as: "image",
         href: placeholder.value
@@ -128,7 +153,7 @@ const placeholderAttrs = computed(() => {
     loading: props.aboveTheFold ? "eager" : "lazy",
     style: {
       width: "100%",
-      objectFit: "contain",
+      objectFit: props.placeholderObjectFit,
       height: "100%"
     },
     onLoad(payload) {

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

@@ -10,6 +10,7 @@ type __VLS_Props = {
     playerVars?: YT.PlayerVars;
     width?: number;
     height?: number;
+    ratio?: string;
     /**
      * Whether to use youtube-nocookie.com for embedding.
      *
@@ -19,9 +20,15 @@ type __VLS_Props = {
     playerOptions?: YT.PlayerOptions;
     thumbnailSize?: YoutubeThumbnailSize;
     webp?: boolean;
+    /**
+     * Object-fit for the placeholder image.
+     *
+     * @default 'cover'
+     */
+    placeholderObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };
 declare var __VLS_1: {
-    placeholder: any;
+    placeholder: string;
 }, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     placeholder?: (props: typeof __VLS_1) => any;
@@ -42,20 +49,24 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     "state-change": (e: YT.OnStateChangeEvent, target: YT.Player) => any;
     "playback-quality-change": (e: YT.OnPlaybackQualityChangeEvent, target: YT.Player) => any;
     "playback-rate-change": (e: YT.OnPlaybackRateChangeEvent, target: YT.Player) => any;
+    "api-change": (e: YT.PlayerEvent, target: YT.Player) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onError?: ((e: YT.OnErrorEvent, target: YT.Player) => any) | undefined;
     onReady?: ((e: YT.PlayerEvent) => any) | undefined;
     "onState-change"?: ((e: YT.OnStateChangeEvent, target: YT.Player) => any) | undefined;
     "onPlayback-quality-change"?: ((e: YT.OnPlaybackQualityChangeEvent, target: YT.Player) => any) | undefined;
     "onPlayback-rate-change"?: ((e: YT.OnPlaybackRateChangeEvent, target: YT.Player) => any) | undefined;
+    "onApi-change"?: ((e: YT.PlayerEvent, target: YT.Player) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
     width: number;
     height: number;
     playerVars: YT.PlayerVars;
+    ratio: string;
     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/composables/useScript.js

@@ -1,7 +1,7 @@
 import { defu } from "defu";
 import { useScript as _useScript } from "@unhead/vue/scripts";
-import { reactive } from "vue";
-import { onNuxtReady, useNuxtApp, useRuntimeConfig, injectHead } from "nuxt/app";
+import { reactive, ref } from "vue";
+import { onNuxtReady, useNuxtApp, useRuntimeConfig, injectHead, useHead } from "nuxt/app";
 import { logger } from "../logger.js";
 import { resolveTrigger } from "#build/nuxt-scripts-trigger-resolver";
 function useNuxtScriptRuntimeConfig() {
@@ -13,6 +13,27 @@ export function resolveScriptKey(input) {
 export function useScript(input, options) {
   input = typeof input === "string" ? { src: input } : input;
   options = defu(options, useNuxtScriptRuntimeConfig()?.defaultScriptOptions);
+  if (options.partytown) {
+    const src = input.src;
+    if (!src) {
+      throw new Error("useScript with partytown requires a src");
+    }
+    useHead({
+      script: [{ src, type: "text/partytown" }]
+    });
+    const nuxtApp2 = useNuxtApp();
+    nuxtApp2.$scripts = nuxtApp2.$scripts || reactive({});
+    const status = ref("loaded");
+    const stub = {
+      id: src,
+      status,
+      load: () => Promise.resolve({}),
+      remove: () => false,
+      entry: void 0
+    };
+    nuxtApp2.$scripts[src] = stub;
+    return stub;
+  }
   if (import.meta.dev && options.bundle === "unsupported") {
     console.warn("[Nuxt Scripts] Bundling is not supported for dynamic script sources. Static URLs are required for bundling.");
     options.bundle = false;
@@ -23,8 +44,8 @@ export function useScript(input, options) {
       options.trigger = resolved;
     }
   }
-  const id = String(resolveScriptKey(input));
   const nuxtApp = useNuxtApp();
+  const id = String(resolveScriptKey(input));
   options.head = options.head || injectHead();
   if (!options.head) {
     throw new Error("useScript() has been called without Nuxt context.");
@@ -65,6 +86,16 @@ export function useScript(input, options) {
     }
     return _load();
   };
+  instance.reload = async () => {
+    instance.remove();
+    const reloadInput = typeof input === "string" ? { src: input, key: `${id}-${Date.now()}` } : { ...input, key: `${id}-${Date.now()}` };
+    const reloaded = _useScript(reloadInput, { ...options, trigger: "client" });
+    Object.assign(instance, {
+      status: reloaded.status,
+      entry: reloaded.entry
+    });
+    return reloaded.load();
+  };
   nuxtApp.$scripts[id] = instance;
   if (import.meta.dev && import.meta.client) {
     let syncScripts = function() {

package/dist/runtime/composables/useScriptTriggerServiceWorker.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Create a trigger that loads a script after the service worker is controlling the page.
+ * Falls back to immediate loading if service workers are not supported or after timeout.
+ */
+export declare function useScriptTriggerServiceWorker(options?: {
+    timeout?: number;
+}): Promise<boolean>;

package/dist/runtime/composables/useScriptTriggerServiceWorker.js

@@ -0,0 +1,39 @@
+import { tryOnScopeDispose } from "@vueuse/shared";
+export function useScriptTriggerServiceWorker(options) {
+  if (import.meta.server)
+    return new Promise(() => {
+    });
+  const timeout = options?.timeout ?? 3e3;
+  return new Promise((resolve) => {
+    if (!("serviceWorker" in navigator)) {
+      resolve(true);
+      return;
+    }
+    let resolved = false;
+    const done = () => {
+      if (resolved)
+        return;
+      resolved = true;
+      resolve(true);
+    };
+    if (navigator.serviceWorker.controller) {
+      done();
+      return;
+    }
+    const onControllerChange = () => {
+      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
+      done();
+    };
+    navigator.serviceWorker.addEventListener("controllerchange", onControllerChange);
+    const timer = setTimeout(() => {
+      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
+      console.warn("[nuxt-scripts] Service worker not controlling after timeout, loading scripts anyway");
+      done();
+    }, timeout);
+    tryOnScopeDispose(() => {
+      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
+      clearTimeout(timer);
+      resolve(false);
+    });
+  });
+}