@nuxt/scripts 0.6.4 → 0.6.5

package/dist/runtime/components/ScriptYouTubePlayer.vue

@@ -1,170 +1,171 @@
-<script setup lang="ts">
-/// <reference types="youtube" />
-import { computed, onMounted, ref, watch } from 'vue'
-import type { HTMLAttributes, ImgHTMLAttributes, Ref } from 'vue'
-import { defu } from 'defu'
-import type { ElementScriptTrigger } from '../types'
-import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
-import { useScriptYouTubePlayer } from '../registry/youtube-player'
-import { useHead } from '#imports'
-
-const props = withDefaults(defineProps<{
-  placeholderAttrs?: ImgHTMLAttributes
-  rootAttrs?: HTMLAttributes
-  aboveTheFold?: boolean
-  trigger?: ElementScriptTrigger
-  videoId: string
-  playerVars?: YT.PlayerVars
-  width?: number
-  height?: number
-}>(), {
-  trigger: 'mousedown',
-  // @ts-expect-error untyped
-  playerVars: { autoplay: 0, playsinline: 1 },
-  width: 640,
-  height: 480,
-})
-
-const emits = defineEmits<{
-  'ready': [e: YT.PlayerEvent]
-  'state-change': [e: YT.OnStateChangeEvent, target: YT.Player]
-  'playback-quality-change': [e: YT.OnPlaybackQualityChangeEvent, target: YT.Player]
-  'playback-rate-change': [e: YT.OnPlaybackRateChangeEvent, target: YT.Player]
-  'error': [e: YT.OnErrorEvent, target: YT.Player]
-}>()
-const events: (keyof YT.Events)[] = [
-  'onReady',
-  'onStateChange',
-  'onPlaybackQualityChange',
-  'onPlaybackRateChange',
-  'onError',
-  'onApiChange',
-]
-const rootEl = ref()
-const youtubeEl = ref()
-const ready = ref(false)
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
-const { $script } = useScriptYouTubePlayer({
-  scriptOptions: {
-    trigger,
-  },
-})
-
-const player: Ref<YT.Player | undefined> = ref()
-let clickTriggered = false
-if (props.trigger === 'mousedown') {
-  trigger.then(() => {
-    clickTriggered = true
-  })
-}
-onMounted(() => {
-  $script.then(async (instance) => {
-    const YouTube: typeof YT & { ready: (fn: () => void) => void } = await instance.YT
-    await new Promise<void>((resolve) => {
-      if (typeof YT.Player === 'undefined')
-        YouTube.ready(resolve)
-      else
-        resolve()
-    })
-    player.value = new YT.Player(youtubeEl.value, {
-      ...props,
-      events: Object.fromEntries(events.map(event => [event, (e: any) => {
-        const emitEventName = event.replace(/([A-Z])/g, '-$1').replace('on-', '').toLowerCase()
-        // @ts-expect-error untyped
-        emits(emitEventName, e)
-        if (event === 'onReady') {
-          ready.value = true
-          if (clickTriggered) {
-            player.value?.playVideo()
-            clickTriggered = false
-          }
-          watch(() => props.videoId, () => {
-            player.value?.loadVideoById(props.videoId)
-          })
-        }
-      }])),
-    })
-  })
-  watch($script.status, (status) => {
-    if (status === 'error') {
-      // @ts-expect-error untyped
-      emits('error')
-    }
-  })
-})
-
-defineExpose({
-  player,
-})
-
-const rootAttrs = computed(() => {
-  return defu(props.rootAttrs, {
-    'aria-busy': $script.status.value === 'loading',
-    'aria-label': $script.status.value === 'awaitingLoad'
-      ? 'YouTube Player - Placeholder'
-      : $script.status.value === 'loading'
-        ? 'YouTube Player - Loading'
-        : 'YouTube Player - Loaded',
-    'aria-live': 'polite',
-    'role': 'application',
-    'style': {
-      cursor: 'pointer',
-      position: 'relative',
-      backgroundColor: 'black',
-      maxWidth: '100%',
-      width: `${props.width}px`,
-      height: `'auto'`,
-      aspectRatio: `${props.width}/${props.height}`,
-    },
-  }) as HTMLAttributes
-})
-
-const placeholder = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`)
-
-if (import.meta.server) {
-  // dns-prefetch https://i.vimeocdn.com
-  useHead({
-    link: [
-      {
-        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
-        href: 'https://i.ytimg.com',
-      },
-      props.aboveTheFold
-        // we can preload the placeholder image
-        ? {
-            rel: 'preload',
-            as: 'image',
-            href: placeholder.value,
-          }
-        : {},
-    ],
-  })
-}
-
-const placeholderAttrs = computed(() => {
-  return defu(props.placeholderAttrs, {
-    src: placeholder.value,
-    alt: '',
-    loading: props.aboveTheFold ? 'eager' : 'lazy',
-    style: {
-      width: '100%',
-      objectFit: 'contain',
-      height: '100%',
-    },
-  } satisfies ImgHTMLAttributes)
-})
-</script>
-
-<template>
-  <div ref="rootEl" v-bind="rootAttrs">
-    <div ref="youtubeEl" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" />
-    <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
-      <img v-bind="placeholderAttrs">
-    </slot>
-    <slot v-if="$script.status.value === 'loading'" name="loading">
-      <ScriptLoadingIndicator />
-    </slot>
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
-  </div>
-</template>
+<script setup lang="ts">
+/// <reference types="youtube" />
+import { computed, onMounted, ref, watch } from 'vue'
+import type { HTMLAttributes, ImgHTMLAttributes, Ref } from 'vue'
+import { defu } from 'defu'
+import type { ElementScriptTrigger } from '../types'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
+import { useScriptYouTubePlayer } from '../registry/youtube-player'
+import { useHead } from '#imports'
+
+const props = withDefaults(defineProps<{
+  placeholderAttrs?: ImgHTMLAttributes
+  rootAttrs?: HTMLAttributes
+  aboveTheFold?: boolean
+  trigger?: ElementScriptTrigger
+  videoId: string
+  playerVars?: YT.PlayerVars
+  width?: number
+  height?: number
+}>(), {
+  trigger: 'mousedown',
+  // @ts-expect-error untyped
+  playerVars: { autoplay: 0, playsinline: 1 },
+  width: 640,
+  height: 480,
+})
+
+const emits = defineEmits<{
+  'ready': [e: YT.PlayerEvent]
+  'state-change': [e: YT.OnStateChangeEvent, target: YT.Player]
+  'playback-quality-change': [e: YT.OnPlaybackQualityChangeEvent, target: YT.Player]
+  'playback-rate-change': [e: YT.OnPlaybackRateChangeEvent, target: YT.Player]
+  'error': [e: YT.OnErrorEvent, target: YT.Player]
+}>()
+const events: (keyof YT.Events)[] = [
+  'onReady',
+  'onStateChange',
+  'onPlaybackQualityChange',
+  'onPlaybackRateChange',
+  'onError',
+  'onApiChange',
+]
+const rootEl = ref()
+const youtubeEl = ref()
+const ready = ref(false)
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
+const { $script } = useScriptYouTubePlayer({
+  scriptOptions: {
+    trigger,
+  },
+})
+
+const player: Ref<YT.Player | undefined> = ref()
+let clickTriggered = false
+if (props.trigger === 'mousedown') {
+  trigger.then(() => {
+    clickTriggered = true
+  })
+}
+onMounted(() => {
+  $script.then(async (instance) => {
+    const YouTube: typeof YT & { ready: (fn: () => void) => void } = await instance.YT
+    await new Promise<void>((resolve) => {
+      if (typeof YT.Player === 'undefined')
+        YouTube.ready(resolve)
+      else
+        resolve()
+    })
+    player.value = new YT.Player(youtubeEl.value, {
+      ...props,
+      events: Object.fromEntries(events.map(event => [event, (e: any) => {
+        const emitEventName = event.replace(/([A-Z])/g, '-$1').replace('on-', '').toLowerCase()
+        // @ts-expect-error untyped
+        emits(emitEventName, e)
+        if (event === 'onReady') {
+          ready.value = true
+          if (clickTriggered) {
+            player.value?.playVideo()
+            clickTriggered = false
+          }
+          watch(() => props.videoId, () => {
+            player.value?.loadVideoById(props.videoId)
+          })
+        }
+      }])),
+    })
+  })
+  watch($script.status, (status) => {
+    if (status === 'error') {
+      // @ts-expect-error untyped
+      emits('error')
+    }
+  })
+})
+
+defineExpose({
+  player,
+})
+
+const rootAttrs = computed(() => {
+  return defu(props.rootAttrs, {
+    'aria-busy': $script.status.value === 'loading',
+    'aria-label': $script.status.value === 'awaitingLoad'
+      ? 'YouTube Player - Placeholder'
+      : $script.status.value === 'loading'
+        ? 'YouTube Player - Loading'
+        : 'YouTube Player - Loaded',
+    'aria-live': 'polite',
+    'role': 'application',
+    'style': {
+      cursor: 'pointer',
+      position: 'relative',
+      backgroundColor: 'black',
+      maxWidth: '100%',
+      width: `${props.width}px`,
+      height: `'auto'`,
+      aspectRatio: `${props.width}/${props.height}`,
+    },
+  }) as HTMLAttributes
+})
+
+const placeholder = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`)
+
+if (import.meta.server) {
+  // dns-prefetch https://i.vimeocdn.com
+  useHead({
+    link: [
+      {
+        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
+        href: 'https://i.ytimg.com',
+      },
+      props.aboveTheFold
+        // we can preload the placeholder image
+        ? {
+            rel: 'preload',
+            as: 'image',
+            href: placeholder.value,
+          }
+        : {},
+    ],
+  })
+}
+
+const placeholderAttrs = computed(() => {
+  return defu(props.placeholderAttrs, {
+    src: placeholder.value,
+    alt: '',
+    loading: props.aboveTheFold ? 'eager' : 'lazy',
+    style: {
+      width: '100%',
+      objectFit: 'contain',
+      height: '100%',
+    },
+  } satisfies ImgHTMLAttributes)
+})
+</script>
+
+<template>
+  <div ref="rootEl" v-bind="rootAttrs">
+    <div ref="youtubeEl" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" />
+    <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
+      <img v-bind="placeholderAttrs">
+    </slot>
+    <slot v-if="$script.status.value === 'loading'" name="loading">
+      <ScriptLoadingIndicator />
+    </slot>
+    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot />
+  </div>
+</template>

package/dist/runtime/composables/useScript.js

@@ -33,7 +33,7 @@ export function useScript(input, options) {
       nuxtApp.hooks.callHook("scripts:updated", { scripts: nuxtApp._scripts });
     };
     const payload = {
-      key: input.key || input.src,
+      ...options.devtools,
       src: input.src,
       $script: null,
       events: []
@@ -53,7 +53,7 @@ export function useScript(input, options) {
         syncScripts();
       });
       head.hooks.hook("script:instance-fn", (ctx) => {
-        if (ctx.script.id !== instance.$script.id)
+        if (ctx.script.id !== instance.$script.id || String(ctx.fn).startsWith("__v_"))
           return;
         payload.events.push({
           type: "fn-call",

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

@@ -1,5 +1,5 @@
 import type { TrackedPage } from '#nuxt-scripts';
-export declare function useScriptEventPage(onChange?: (payload: TrackedPage) => void): import("vue").Ref<{
+export declare function useScriptEventPage(onChange?: (payload: TrackedPage) => void): import("#imports").Ref<{
     title?: string;
     path: string;
 }>;

package/dist/runtime/registry/clarity.js

@@ -8,7 +8,7 @@ export const ClarityOptions = object({
 });
 export function useScriptClarity(_options) {
   return useRegistryScript(
-    _options?.key || "clarity",
+    "clarity",
     (options) => ({
       scriptInput: {
         src: `https://www.clarity.ms/tag/${options.id}`

package/dist/runtime/registry/cloudflare-web-analytics.js

@@ -14,7 +14,7 @@ export const CloudflareWebAnalyticsOptions = object({
   spa: optional(boolean())
 });
 export function useScriptCloudflareWebAnalytics(_options) {
-  return useRegistryScript(_options?.key || "cloudflareWebAnalytics", (options) => ({
+  return useRegistryScript("cloudflareWebAnalytics", (options) => ({
     scriptInput: {
       "src": "https://static.cloudflareinsights.com/beacon.min.js",
       "data-cf-beacon": JSON.stringify({ token: options.token, spa: options.spa || true }),

package/dist/runtime/registry/crisp.js

@@ -34,7 +34,7 @@ export const CrispOptions = object({
 });
 export function useScriptCrisp(_options) {
   let readyPromise = Promise.resolve();
-  return useRegistryScript(_options?.key || "crisp", (options) => ({
+  return useRegistryScript("crisp", (options) => ({
     scriptInput: {
       src: "https://client.crisp.chat/l.js"
       // can't be bundled

package/dist/runtime/registry/fathom-analytics.js

@@ -23,7 +23,7 @@ export const FathomAnalyticsOptions = object({
   honorDnt: optional(boolean())
 });
 export function useScriptFathomAnalytics(_options) {
-  return useRegistryScript(_options?.key || "fathomAnalytics", (options) => ({
+  return useRegistryScript("fathomAnalytics", (options) => ({
     scriptInput: {
       src: "https://cdn.usefathom.com/script.js",
       // can't be bundled

package/dist/runtime/registry/google-adsense.js

@@ -9,7 +9,7 @@ export const GoogleAdsenseOptions = object({
   client: optional(string())
 });
 export function useScriptGoogleAdsense(_options) {
-  return useRegistryScript(_options?.key || "googleAdsense", (options) => ({
+  return useRegistryScript("googleAdsense", (options) => ({
     scriptInput: {
       src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
     },

package/dist/runtime/registry/google-analytics.d.ts

@@ -1,13 +1,19 @@
-import type { GoogleAnalyticsApi } from 'third-party-capital';
+import type { DataLayer, GTag } from 'third-party-capital';
 import type { RegistryScriptInput } from '#nuxt-scripts';
 export declare const GoogleAnalyticsOptions: import("valibot").ObjectSchema<{
     readonly id: import("valibot").StringSchema<undefined>;
+    readonly l: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, never>;
 }, undefined>;
-declare global {
-    interface Window extends GoogleAnalyticsApi {
-    }
-}
 export type GoogleAnalyticsInput = RegistryScriptInput<typeof GoogleAnalyticsOptions>;
-export declare function useScriptGoogleAnalytics<T extends GoogleAnalyticsApi>(_options?: GoogleAnalyticsInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
+export declare function useScriptGoogleAnalytics(_options?: GoogleAnalyticsInput): {
+    dataLayer: DataLayer;
+    gtag: GTag;
+} & {
+    $script: Promise<{
+        dataLayer: DataLayer;
+        gtag: GTag;
+    }> & import("@unhead/vue").VueScriptInstance<{
+        dataLayer: DataLayer;
+        gtag: GTag;
+    }>;
 };

package/dist/runtime/registry/google-analytics.js

@@ -1,17 +1,27 @@
 import { withQuery } from "ufo";
 import { useRegistryScript } from "#nuxt-scripts-utils";
-import { object, string } from "#nuxt-scripts-validator";
-export const GoogleAnalyticsOptions = object({ id: string() });
+import { object, string, optional } from "#nuxt-scripts-validator";
+export const GoogleAnalyticsOptions = object({
+  id: string(),
+  l: optional(string())
+});
+function use(options) {
+  const gtag = function(...args) {
+    window[options.l ?? "dataLayer"].push(args);
+  };
+  return {
+    dataLayer: window[options.l ?? "dataLayer"],
+    gtag
+  };
+}
 export function useScriptGoogleAnalytics(_options) {
-  return useRegistryScript(_options?.key || "google-analytics", (options) => ({
+  return useRegistryScript(_options?.key || "googleAnalytics", (options) => ({
     scriptInput: {
-      src: withQuery("https://www.googletagmanager.com/gtag/js", { id: options?.id })
+      src: withQuery("https://www.googletagmanager.com/gtag/js", { id: options?.id, l: options?.l })
     },
-    schema: import.meta.dev ? void 0 : GoogleAnalyticsOptions,
+    schema: import.meta.dev ? GoogleAnalyticsOptions : void 0,
     scriptOptions: {
-      use: () => {
-        return { dataLayer: window.dataLayer, gtag: window.gtag };
-      },
+      use: () => use(options),
       stub: import.meta.client ? void 0 : ({ fn }) => {
         return fn === "dataLayer" ? [] : void 0;
       },
@@ -19,13 +29,12 @@ export function useScriptGoogleAnalytics(_options) {
       ...{ tagPriority: 1 }
     },
     // eslint-disable-next-line
+    // @ts-ignore
+    // eslint-disable-next-line
     clientInit: import.meta.server ? void 0 : () => {
-      window.dataLayer = window.dataLayer || [];
-      window.gtag = function gtag() {
-        window.dataLayer.push(arguments);
-      };
-      window.gtag("js", /* @__PURE__ */ new Date());
-      window.gtag("config", options.id);
+      window[options?.l ?? "dataLayer"] = window[options?.l ?? "dataLayer"] || [];
+      window[options?.l ?? "dataLayer"].push({ "js": /* @__PURE__ */ new Date() });
+      window[options?.l ?? "dataLayer"].push({ "config": options?.id });
     }
   }), _options);
 }

package/dist/runtime/registry/google-maps.js

@@ -8,7 +8,7 @@ export const GoogleMapsOptions = object({
 });
 export function useScriptGoogleMaps(_options) {
   let readyPromise = Promise.resolve();
-  return useRegistryScript(_options?.key || "googleMaps", (options) => {
+  return useRegistryScript("googleMaps", (options) => {
     const libraries = options?.libraries || ["places"];
     return {
       scriptInput: {

package/dist/runtime/registry/google-tag-manager.d.ts

@@ -1,13 +1,23 @@
-import type { GoogleTagManagerApi } from 'third-party-capital';
+import type { GoogleTagManagerApi, DataLayer } from 'third-party-capital';
 import type { RegistryScriptInput } from '#nuxt-scripts';
-export declare const GoogleTagManagerOptions: import("valibot").ObjectSchema<{
-    readonly id: import("valibot").StringSchema<undefined>;
-}, undefined>;
 declare global {
     interface Window extends GoogleTagManagerApi {
     }
 }
+export declare const GoogleTagManagerOptions: import("valibot").ObjectSchema<{
+    readonly id: import("valibot").StringSchema<undefined>;
+    readonly l: import("valibot").OptionalSchema<import("valibot").StringSchema<undefined>, never>;
+}, undefined>;
 export type GoogleTagManagerInput = RegistryScriptInput<typeof GoogleTagManagerOptions>;
-export declare function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(_options?: GoogleTagManagerInput): T & {
-    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
+export declare function useScriptGoogleTagManager(_options?: GoogleTagManagerInput): {
+    dataLayer: DataLayer;
+    google_tag_manager: import("third-party-capital").GoogleTagManagerInstance;
+} & {
+    $script: Promise<{
+        dataLayer: DataLayer;
+        google_tag_manager: import("third-party-capital").GoogleTagManagerInstance;
+    }> & import("@unhead/vue").VueScriptInstance<{
+        dataLayer: DataLayer;
+        google_tag_manager: import("third-party-capital").GoogleTagManagerInstance;
+    }>;
 };

package/dist/runtime/registry/google-tag-manager.js

@@ -1,17 +1,21 @@
 import { withQuery } from "ufo";
 import { useRegistryScript } from "#nuxt-scripts-utils";
-import { object, string } from "#nuxt-scripts-validator";
-export const GoogleTagManagerOptions = object({ id: string() });
+import { object, string, optional } from "#nuxt-scripts-validator";
+export const GoogleTagManagerOptions = object({
+  id: string(),
+  l: optional(string())
+});
+function use(options) {
+  return { dataLayer: window[options.l ?? "dataLayer"], google_tag_manager: window.google_tag_manager };
+}
 export function useScriptGoogleTagManager(_options) {
-  return useRegistryScript(_options?.key || "google-tag-manager", (options) => ({
+  return useRegistryScript(_options?.key || "googleTagManager", (options) => ({
     scriptInput: {
-      src: withQuery("https://www.googletagmanager.com/gtm.js", { id: options?.id })
+      src: withQuery("https://www.googletagmanager.com/gtm.js", { id: options?.id, l: options?.l })
     },
-    schema: import.meta.dev ? void 0 : GoogleTagManagerOptions,
+    schema: import.meta.dev ? GoogleTagManagerOptions : void 0,
     scriptOptions: {
-      use: () => {
-        return { dataLayer: window.dataLayer, google_tag_manager: window.google_tag_manager };
-      },
+      use: () => use(options),
       stub: import.meta.client ? void 0 : ({ fn }) => {
         return fn === "dataLayer" ? [] : void 0;
       },
@@ -19,9 +23,11 @@ export function useScriptGoogleTagManager(_options) {
       ...{ tagPriority: 1 }
     },
     // eslint-disable-next-line
+    // @ts-ignore
+    // eslint-disable-next-line
     clientInit: import.meta.server ? void 0 : () => {
-      window.dataLayer = window.dataLayer || [];
-      window.dataLayer.push({ "gtm.start": (/* @__PURE__ */ new Date()).getTime(), event: "gtm.js" });
+      window[options?.l ?? "dataLayer"] = window[options?.l ?? "dataLayer"] || [];
+      window[options?.l ?? "dataLayer"].push({ "gtm.start": (/* @__PURE__ */ new Date()).getTime(), event: "gtm.js" });
     }
   }), _options);
 }

package/dist/runtime/registry/hotjar.js

@@ -5,7 +5,7 @@ export const HotjarOptions = object({
   sv: optional(number())
 });
 export function useScriptHotjar(_options) {
-  return useRegistryScript(_options?.key || "hotjar", (options) => ({
+  return useRegistryScript("hotjar", (options) => ({
     scriptInput: {
       src: `https://static.hotjar.com/c/hotjar-${options?.id}.js?sv=${options?.sv || 6}`
     },

package/dist/runtime/registry/intercom.js

@@ -13,7 +13,7 @@ export const IntercomOptions = object({
   vertical_padding: optional(number())
 });
 export function useScriptIntercom(_options) {
-  return useRegistryScript(_options?.key || "intercom", (options) => ({
+  return useRegistryScript("intercom", (options) => ({
     scriptInput: {
       src: joinURL(`https://widget.intercom.io/widget`, options?.app_id || "")
     },

package/dist/runtime/registry/lemon-squeezy.js

@@ -1,6 +1,6 @@
 import { useRegistryScript } from "../utils.js";
 export function useScriptLemonSqueezy(_options) {
-  return useRegistryScript(_options?.key || "lemonSqueezy", () => ({
+  return useRegistryScript("lemonSqueezy", () => ({
     scriptInput: {
       src: "https://assets.lemonsqueezy.com/lemon.js",
       crossorigin: false

package/dist/runtime/registry/matomo-analytics.js

@@ -9,7 +9,7 @@ export const MatomoAnalyticsOptions = object({
   enableLinkTracking: optional(boolean())
 });
 export function useScriptMatomoAnalytics(_options) {
-  return useRegistryScript(_options?.key || "matomoAnalytics", (options) => ({
+  return useRegistryScript("matomoAnalytics", (options) => ({
     scriptInput: {
       src: withBase(`/matomo.js`, withHttps(options?.matomoUrl)),
       crossorigin: false

package/dist/runtime/registry/meta-pixel.js

@@ -4,7 +4,7 @@ export const MetaPixelOptions = object({
   id: union([string(), number()])
 });
 export function useScriptMetaPixel(_options) {
-  return useRegistryScript(_options?.key || "metaPixel", (options) => ({
+  return useRegistryScript("metaPixel", (options) => ({
     scriptInput: {
       src: "https://connect.facebook.net/en_US/fbevents.js",
       crossorigin: false

package/dist/runtime/registry/npm.js

@@ -8,7 +8,7 @@ export const NpmOptions = object({
   type: optional(string())
 });
 export function useScriptNpm(_options) {
-  return useRegistryScript(_options?.key || `${_options.packageName}-npm`, (options) => ({
+  return useRegistryScript(`${_options.packageName}-npm`, (options) => ({
     scriptInput: {
       src: withBase(options.file || "", `https://unpkg.com/${options?.packageName}@${options.version || "latest"}`)
     },