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

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;

package/dist/runtime/composables/useScript.js

@@ -1,9 +1,100 @@
-import { defu } from "defu";
+import { resolveTrigger } from "#build/nuxt-scripts-trigger-resolver";
 import { useScript as _useScript } from "@unhead/vue/scripts";
-import { reactive, ref } from "vue";
-import { onNuxtReady, useNuxtApp, useRuntimeConfig, injectHead, useHead } from "nuxt/app";
+import { defu } from "defu";
+import { injectHead, onNuxtReady, useHead, useNuxtApp, useRuntimeConfig } from "nuxt/app";
+import { markRaw, ref } from "vue";
 import { logger } from "../logger.js";
-import { resolveTrigger } from "#build/nuxt-scripts-trigger-resolver";
+function resolveProxyPrefix() {
+  const devtoolsConfig = useRuntimeConfig().public["nuxt-scripts-devtools"];
+  return devtoolsConfig?.proxyPrefix || "/_scripts/p";
+}
+function toNetworkRequest(entry, proxyPrefix) {
+  const isProxied = entry.name.includes(`${proxyPrefix}/`);
+  return {
+    url: entry.name,
+    startTime: entry.startTime,
+    duration: entry.duration,
+    transferSize: entry.transferSize,
+    encodedBodySize: entry.encodedBodySize,
+    decodedBodySize: entry.decodedBodySize,
+    initiatorType: entry.initiatorType,
+    dns: entry.domainLookupEnd - entry.domainLookupStart,
+    connect: entry.connectEnd - entry.connectStart,
+    ssl: entry.secureConnectionStart > 0 ? entry.connectEnd - entry.secureConnectionStart : 0,
+    ttfb: entry.responseStart - entry.requestStart,
+    download: entry.responseEnd - entry.responseStart,
+    isProxied
+  };
+}
+function createDomainMatcher(domains, proxyPrefix) {
+  const localHostname = window.location.hostname;
+  return function matchesScript(entry) {
+    try {
+      const entryUrl = new URL(entry.name, window.location.origin);
+      if (entryUrl.hostname !== localHostname && domains.has(entryUrl.hostname))
+        return true;
+      const proxyPath = `${proxyPrefix}/`;
+      const proxyIdx = entryUrl.pathname.indexOf(proxyPath);
+      if (proxyIdx !== -1) {
+        const afterPrefix = entryUrl.pathname.slice(proxyIdx + proxyPath.length);
+        const proxyDomain = afterPrefix.split("/")[0];
+        if (proxyDomain && domains.has(proxyDomain))
+          return true;
+      }
+    } catch {
+    }
+    return false;
+  };
+}
+function observeNetworkRequests(payload, domains, onUpdate) {
+  if (typeof PerformanceObserver === "undefined")
+    return () => {
+    };
+  const proxyPrefix = resolveProxyPrefix();
+  const matchesScript = createDomainMatcher(domains, proxyPrefix);
+  const seen = /* @__PURE__ */ new Set();
+  function entryKey(entry) {
+    return `${entry.name}@${entry.startTime}`;
+  }
+  function processEntry(entry) {
+    const key = entryKey(entry);
+    if (seen.has(key))
+      return false;
+    if (!matchesScript(entry))
+      return false;
+    seen.add(key);
+    payload.networkRequests.push(toNetworkRequest(entry, proxyPrefix));
+    return true;
+  }
+  for (const entry of performance.getEntriesByType("resource"))
+    processEntry(entry);
+  const observer = new PerformanceObserver((list) => {
+    let added = false;
+    for (const entry of list.getEntries()) {
+      if (processEntry(entry))
+        added = true;
+    }
+    if (added)
+      onUpdate();
+  });
+  observer.observe({ type: "resource", buffered: false });
+  return () => observer.disconnect();
+}
+function extractExternalHostname(src) {
+  if (!src)
+    return "";
+  try {
+    const hostname = new URL(src, window.location.origin).hostname;
+    return hostname === window.location.hostname ? "" : hostname;
+  } catch {
+    return "";
+  }
+}
+function ensureScripts(nuxtApp) {
+  if (!nuxtApp.$scripts) {
+    nuxtApp.$scripts = {};
+  }
+}
 function useNuxtScriptRuntimeConfig() {
   return useRuntimeConfig().public["nuxt-scripts"];
 }
@@ -22,16 +113,44 @@ export function useScript(input, options) {
       script: [{ src, type: "text/partytown" }]
     });
     const nuxtApp2 = useNuxtApp();
-    nuxtApp2.$scripts = nuxtApp2.$scripts || reactive({});
+    ensureScripts(nuxtApp2);
     const status = ref("loaded");
+    let disconnectObserver = () => {
+    };
     const stub = {
       id: src,
       status,
       load: () => Promise.resolve({}),
-      remove: () => false,
+      remove: () => {
+        disconnectObserver();
+        return false;
+      },
       entry: void 0
     };
     nuxtApp2.$scripts[src] = stub;
+    if (import.meta.dev && import.meta.client) {
+      let syncScripts = function() {
+        nuxtApp2._scripts[src] = payload;
+        nuxtApp2.hooks.callHook("scripts:updated", { scripts: nuxtApp2._scripts });
+      };
+      nuxtApp2._scripts = nuxtApp2._scripts || {};
+      const scriptHostname = extractExternalHostname(src);
+      const domains = /* @__PURE__ */ new Set([
+        ...scriptHostname ? [scriptHostname] : [],
+        ...options.devtools?.domains || []
+      ]);
+      const payload = {
+        ...options.devtools,
+        src,
+        $script: stub,
+        events: [
+          { type: "status", status: "loaded", at: Date.now() }
+        ],
+        networkRequests: []
+      };
+      disconnectObserver = observeNetworkRequests(payload, domains, syncScripts);
+      syncScripts();
+    }
     return stub;
   }
   if (import.meta.dev && options.bundle === "unsupported") {
@@ -50,7 +169,7 @@ export function useScript(input, options) {
   if (!options.head) {
     throw new Error("useScript() has been called without Nuxt context.");
   }
-  nuxtApp.$scripts = nuxtApp.$scripts || reactive({});
+  ensureScripts(nuxtApp);
   const exists = !!nuxtApp.$scripts?.[id];
   const err = options._validate?.();
   if (import.meta.dev && import.meta.client && err) {
@@ -109,7 +228,8 @@ export function useScript(input, options) {
       ...options.devtools,
       src: input.src,
       $script: null,
-      events: []
+      events: [],
+      networkRequests: []
     };
     nuxtApp._scripts = nuxtApp._scripts || {};
     if (!nuxtApp._scripts[instance.id]) {
@@ -149,8 +269,28 @@ export function useScript(input, options) {
         trigger: options?.trigger,
         at: Date.now()
       });
+      const scriptHostname = extractExternalHostname(input.src);
+      const domains = /* @__PURE__ */ new Set([
+        ...scriptHostname ? [scriptHostname] : [],
+        ...options.devtools?.domains || []
+      ]);
+      let disconnectObserver = observeNetworkRequests(payload, domains, syncScripts);
+      const _origRemove = instance.remove;
+      const _origReload = instance.reload;
+      instance.remove = () => {
+        disconnectObserver();
+        return _origRemove();
+      };
+      instance.reload = async () => {
+        disconnectObserver();
+        const result = await _origReload();
+        disconnectObserver = observeNetworkRequests(payload, domains, syncScripts);
+        return result;
+      };
       syncScripts();
     }
   }
+  markRaw(instance);
+  instance.toJSON = () => ({ id: instance.id, status: instance.status.value });
   return instance;
 }

package/dist/runtime/composables/useScriptEventPage.js

@@ -1,5 +1,5 @@
-import { useNuxtApp, useRoute, injectHead } from "nuxt/app";
-import { ref, onScopeDispose } from "vue";
+import { injectHead, useNuxtApp, useRoute } from "nuxt/app";
+import { onScopeDispose, ref } from "vue";
 export function useScriptEventPage(onChange) {
   const nuxt = useNuxtApp();
   const route = useRoute();

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

@@ -1,12 +1,22 @@
+import type { Ref } from 'vue';
 import type { ConsentScriptTriggerOptions } from '../types.js';
 interface UseConsentScriptTriggerApi extends Promise<void> {
     /**
      * A function that can be called to accept the consent and load the script.
      */
     accept: () => void;
+    /**
+     * A function that can be called to revoke consent and signal the script should be unloaded.
+     */
+    revoke: () => void;
+    /**
+     * Reactive reference to the consent state
+     */
+    consented: Ref<boolean>;
 }
 /**
  * Load a script once consent has been provided either through a resolvable `consent` or calling the `accept` method.
+ * Supports revoking consent via the reactive `consented` ref. Consumers should watch `consented` to react to revocation.
  * @param options
  */
 export declare function useScriptTriggerConsent(options?: ConsentScriptTriggerOptions): UseConsentScriptTriggerApi;

package/dist/runtime/composables/useScriptTriggerConsent.js

@@ -1,14 +1,37 @@
+import { onNuxtReady, requestIdleCallback, tryUseNuxtApp } from "nuxt/app";
 import { isRef, ref, toValue, watch } from "vue";
-import { tryUseNuxtApp, onNuxtReady, requestIdleCallback } from "nuxt/app";
 export function useScriptTriggerConsent(options) {
-  if (import.meta.server)
-    return new Promise(() => {
+  if (import.meta.server) {
+    const p = new Promise(() => {
     });
+    p.accept = () => {
+    };
+    p.revoke = () => {
+    };
+    p.consented = ref(false);
+    return p;
+  }
   const consented = ref(false);
   const nuxtApp = tryUseNuxtApp();
+  if (options?.consent) {
+    if (isRef(options?.consent)) {
+      watch(options.consent, (_val) => {
+        const val = toValue(_val);
+        consented.value = Boolean(val);
+      }, { immediate: true });
+    } else if (typeof options?.consent === "boolean") {
+      consented.value = options?.consent;
+    } else if (options?.consent instanceof Promise) {
+      options.consent.then((res) => {
+        consented.value = typeof res === "boolean" ? res : true;
+      }).catch(() => {
+        consented.value = false;
+      });
+    }
+  }
   const promise = new Promise((resolve) => {
-    watch(consented, (ready) => {
-      if (ready) {
+    watch(consented, (newValue, oldValue) => {
+      if (newValue && !oldValue) {
         const runner = nuxtApp?.runWithContext || ((cb) => cb());
         if (options?.postConsentTrigger instanceof Promise) {
           options.postConsentTrigger.then(() => runner(resolve));
@@ -32,24 +55,14 @@ export function useScriptTriggerConsent(options) {
         }
         runner(resolve);
       }
-    });
-    if (options?.consent) {
-      if (isRef(options?.consent)) {
-        watch(options.consent, (_val) => {
-          const val = toValue(_val);
-          consented.value = Boolean(val);
-        }, { immediate: true });
-      } else if (typeof options?.consent === "boolean") {
-        consented.value = options?.consent;
-      } else if (options?.consent instanceof Promise) {
-        options?.consent.then((res) => {
-          consented.value = typeof res === "boolean" ? res : true;
-        });
-      }
-    }
+    }, { immediate: true });
   });
   promise.accept = () => {
     consented.value = true;
   };
+  promise.revoke = () => {
+    consented.value = false;
+  };
+  promise.consented = consented;
   return promise;
 }

package/dist/runtime/composables/useScriptTriggerElement.js

@@ -2,7 +2,7 @@ import {
   useEventListener,
   useIntersectionObserver
 } from "@vueuse/core";
-import { tryOnScopeDispose, tryOnMounted } from "@vueuse/shared";
+import { tryOnMounted, tryOnScopeDispose } from "@vueuse/shared";
 import { watch } from "vue";
 function useElementVisibilityPromise(element) {
   let observer;

package/dist/runtime/composables/useScriptTriggerIdleTimeout.js

@@ -1,5 +1,5 @@
-import { tryOnScopeDispose } from "@vueuse/shared";
 import { useTimeoutFn } from "@vueuse/core";
+import { tryOnScopeDispose } from "@vueuse/shared";
 import { onNuxtReady } from "nuxt/app";
 export function useScriptTriggerIdleTimeout(options) {
   if (import.meta.server) {

package/dist/runtime/devtools-standalone-bridge.client.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Dev-only client plugin that bridges script state to the standalone devtools API.
+ * When `_standaloneDevtools` is enabled, this plugin listens for `scripts:updated`
+ * and POSTs a serializable snapshot of script state to `/__nuxt-scripts-api/state`.
+ * Also syncs the current route path so standalone devtools can show which page the user is on.
+ */
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/devtools-standalone-bridge.client.js

@@ -0,0 +1,50 @@
+import { defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from "nuxt/app";
+export default defineNuxtPlugin(() => {
+  const nuxtApp = useNuxtApp();
+  const config = useRuntimeConfig();
+  const version = config.public["nuxt-scripts"]?.version;
+  const firstPartyData = config.public["nuxt-scripts-devtools"] || null;
+  let lastScripts = {};
+  function pushState(scripts) {
+    if (scripts)
+      lastScripts = scripts;
+    const route = nuxtApp.$router?.currentRoute?.value;
+    if (route?.path?.startsWith("/__nuxt-scripts"))
+      return;
+    fetch("/__nuxt-scripts-api/state", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        scripts: serializeScripts(lastScripts),
+        version,
+        firstPartyData,
+        route: route ? { path: route.path, fullPath: route.fullPath, query: route.query } : null
+      })
+    }).catch(() => {
+    });
+  }
+  nuxtApp.hooks.hook("scripts:updated", (ctx) => {
+    pushState(ctx.scripts);
+  });
+  nuxtApp.$router?.afterEach(() => {
+    pushState();
+  });
+  pushState(nuxtApp._scripts || {});
+});
+function serializeScripts(scripts) {
+  const result = {};
+  for (const [key, script] of Object.entries(scripts)) {
+    result[key] = {
+      src: script.src,
+      key: script.key,
+      registryKey: script.registryKey,
+      registryMeta: script.registryMeta,
+      loadedFrom: script.loadedFrom && script.loadedFrom !== "unknown" ? script.loadedFrom : void 0,
+      events: script.events,
+      networkRequests: script.networkRequests,
+      // Serialize $script status as a plain string (methods won't transfer)
+      $script: script.$script ? { status: typeof script.$script.status === "object" ? script.$script.status.value : script.$script.status } : { status: "unknown" }
+    };
+  }
+  return result;
+}

package/dist/runtime/registry/bing-uet.d.ts

@@ -0,0 +1,20 @@
+import type { RegistryScriptInput } from '#nuxt-scripts/types';
+import { BingUetOptions } from './schemas.js';
+export { BingUetOptions };
+export type BingUetInput = RegistryScriptInput<typeof BingUetOptions, true, false>;
+export interface BingUetApi {
+    uetq: {
+        push: (event: string | Record<string, any>) => void;
+    };
+}
+declare global {
+    interface Window {
+        UET: new (options: {
+            ti: string;
+            enableAutoSpaTracking?: boolean;
+            q?: any[];
+        }) => BingUetApi['uetq'];
+        uetq: any[] | BingUetApi['uetq'];
+    }
+}
+export declare function useScriptBingUet<T extends BingUetApi>(_options?: BingUetInput): import("#nuxt-scripts/types").UseScriptContext<T>;

package/dist/runtime/registry/bing-uet.js

@@ -0,0 +1,29 @@
+import { useRegistryScript } from "../utils.js";
+import { BingUetOptions } from "./schemas.js";
+export { BingUetOptions };
+export function useScriptBingUet(_options) {
+  return useRegistryScript("bingUet", (options) => ({
+    scriptInput: {
+      src: "https://bat.bing.com/bat.js",
+      crossorigin: false
+    },
+    schema: import.meta.dev ? BingUetOptions : void 0,
+    scriptOptions: {
+      use() {
+        if (options?.id && typeof window.UET === "function" && Array.isArray(window.uetq)) {
+          const uetOptions = {
+            ti: options.id,
+            enableAutoSpaTracking: options.enableAutoSpaTracking ?? true,
+            q: window.uetq
+          };
+          window.uetq = new window.UET(uetOptions);
+          window.uetq.push("pageLoad");
+        }
+        return { uetq: window.uetq };
+      }
+    },
+    clientInit: import.meta.server ? void 0 : () => {
+      window.uetq = window.uetq || [];
+    }
+  }), _options);
+}

package/dist/runtime/registry/bluesky-embed.d.ts

@@ -0,0 +1,116 @@
+import type { RegistryScriptInput } from '#nuxt-scripts/types';
+import { BlueskyEmbedOptions } from './schemas.js';
+export { BlueskyEmbedOptions };
+export interface BlueskyEmbedPostData {
+    uri: string;
+    cid: string;
+    author: {
+        did: string;
+        handle: string;
+        displayName: string;
+        avatar: string;
+        labels: Array<{
+            val: string;
+        }>;
+        verification?: {
+            verifiedStatus: string;
+        };
+    };
+    record: {
+        $type: string;
+        createdAt: string;
+        text: string;
+        langs?: string[];
+        facets?: Array<{
+            features: Array<{
+                $type: string;
+                uri?: string;
+                did?: string;
+                tag?: string;
+            }>;
+            index: {
+                byteStart: number;
+                byteEnd: number;
+            };
+        }>;
+        embed?: {
+            $type: string;
+            images?: Array<{
+                alt: string;
+                image: {
+                    ref: {
+                        $link: string;
+                    };
+                    mimeType: string;
+                    size: number;
+                };
+                aspectRatio?: {
+                    width: number;
+                    height: number;
+                };
+            }>;
+            external?: {
+                uri: string;
+                title: string;
+                description: string;
+                thumb?: {
+                    ref: {
+                        $link: string;
+                    };
+                    mimeType: string;
+                    size: number;
+                };
+            };
+        };
+    };
+    embed?: {
+        $type: string;
+        images?: Array<{
+            thumb: string;
+            fullsize: string;
+            alt: string;
+            aspectRatio?: {
+                width: number;
+                height: number;
+            };
+        }>;
+        external?: {
+            uri: string;
+            title: string;
+            description: string;
+            thumb?: string;
+        };
+    };
+    likeCount: number;
+    repostCount: number;
+    replyCount: number;
+    quoteCount: number;
+    indexedAt: string;
+    labels: Array<{
+        val: string;
+    }>;
+}
+export type BlueskyEmbedInput = RegistryScriptInput<typeof BlueskyEmbedOptions, false, false>;
+/**
+ * Extract the handle/DID and post rkey from a Bluesky post URL
+ */
+export declare function extractBlueskyPostId(url: string): {
+    actor: string;
+    rkey: string;
+} | undefined;
+/**
+ * Proxy a Bluesky image URL through the server
+ */
+export declare function proxyBlueskyImageUrl(url: string, proxyEndpoint?: string): string;
+/**
+ * Format a Bluesky post date for display
+ */
+export declare function formatBlueskyDate(dateString: string): string;
+/**
+ * Format a number for display (e.g., 1234 -> 1.2K)
+ */
+export declare function formatCount(count: number): string;
+/**
+ * Convert Bluesky facets (byte-range rich text annotations) to HTML
+ */
+export declare function facetsToHtml(text: string, facets?: BlueskyEmbedPostData['record']['facets']): string;