@nuxt/scripts 0.3.3 → 0.3.5

package/dist/runtime/registry/segment.d.ts

@@ -7,15 +7,27 @@ export declare const SegmentOptions: import("valibot").ObjectSchema<{
     analyticsKey?: string | undefined;
 }>;
 export type SegmentInput = RegistryScriptInput<typeof SegmentOptions>;
-export interface SegmentApi {
-    analytics: {
-        track: (event: string, properties?: Record<string, any>) => void;
-        page: (name?: string, properties?: Record<string, any>) => void;
-        identify: (userId: string, traits?: Record<string, any>, options?: Record<string, any>) => void;
-        group: (groupId: string, traits?: Record<string, any>, options?: Record<string, any>) => void;
-        alias: (userId: string, previousId: string, options?: Record<string, any>) => void;
-        reset: () => void;
-    };
+interface AnalyticsApi {
+    track: (event: string, properties?: Record<string, any>) => void;
+    page: (name?: string, properties?: Record<string, any>) => void;
+    identify: (userId: string, traits?: Record<string, any>, options?: Record<string, any>) => void;
+    group: (groupId: string, traits?: Record<string, any>, options?: Record<string, any>) => void;
+    alias: (userId: string, previousId: string, options?: Record<string, any>) => void;
+    reset: () => void;
+    /**
+     * @internal
+     */
+    methods: string[];
+    /**
+     * @internal
+     */
+    factory: (method: string) => (...args: any[]) => AnalyticsApi;
+    /**
+     * @internal
+     */
+    push: (args: any[]) => void;
+}
+export interface SegmentApi extends Pick<AnalyticsApi, 'track' | 'page' | 'identify' | 'group' | 'alias' | 'reset'> {
 }
 declare global {
     interface Window extends SegmentApi {
@@ -24,3 +36,4 @@ declare global {
 export declare function useScriptSegment<T extends SegmentApi>(_options?: SegmentInput): T & {
     $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
 };
+export {};

package/dist/runtime/registry/segment.mjs

@@ -1,39 +1,61 @@
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { SegmentScriptResolver } from "../../registry";
 import { object, optional, string } from "#nuxt-scripts-validator";
 export const SegmentOptions = object({
   writeKey: string(),
   analyticsKey: optional(string())
 });
+const methods = ["track", "page", "identify", "group", "alias", "reset"];
 export function useScriptSegment(_options) {
-  return registryScript("segment", (options) => {
-    const analyticsKey = options?.analyticsKey || "analytics";
+  return useRegistryScript("segment", (options) => {
+    const k = options?.analyticsKey ?? "analytics";
     return {
       scriptInput: {
-        "data-global-segment-analytics-key": analyticsKey,
+        "data-global-segment-analytics-key": k,
         "src": SegmentScriptResolver(options)
       },
+      clientInit: import.meta.server ? void 0 : () => {
+        window[k] = window[k] || [];
+        window[k].methods = methods;
+        window[k].factory = function(method) {
+          return function(...params) {
+            const args = Array.prototype.slice.call(params);
+            args.unshift(method);
+            window[k].push(args);
+            return window[k];
+          };
+        };
+        for (let i = 0; i < window[k].methods.length; i++) {
+          const key = window[k].methods[i];
+          window[k][key] = window[k].factory(key);
+        }
+        window[k].page();
+      },
       schema: import.meta.dev ? SegmentOptions : void 0,
       scriptOptions: {
-        use() {
-          return { analytics: window[analyticsKey] };
-        },
-        clientInit: import.meta.server ? void 0 : () => {
-          window.analytics = window.analytics || [];
-          window.analytics.methods = ["track", "page", "identify", "group", "alias", "reset"];
-          window.analytics.factory = function(method) {
-            return function(...params) {
-              const args = Array.prototype.slice.call(params);
-              args.unshift(method);
-              window.analytics.push(args);
-              return window.analytics;
+        stub: import.meta.server ? ({ fn }) => {
+          if (fn === "analytics") {
+            return {
+              track: () => {
+              },
+              page: () => {
+              },
+              identify: () => {
+              },
+              group: () => {
+              },
+              alias: () => {
+              },
+              reset: () => {
+              }
             };
-          };
-          for (let i = 0; i < window.analytics.methods.length; i++) {
-            const key = window.analytics.methods[i];
-            window.analytics[key] = window.analytics.factory(key);
           }
-          window.analytics.page();
+        } : void 0,
+        use() {
+          return methods.reduce((acc, key) => {
+            acc[key] = window[k].factory(key);
+            return acc;
+          }, {});
         }
       }
     };

package/dist/runtime/registry/stripe.mjs

@@ -1,11 +1,11 @@
 import { withQuery } from "ufo";
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { boolean, object, optional } from "#nuxt-scripts-validator";
 export const StripeOptions = object({
   advancedFraudSignals: optional(boolean())
 });
 export function useScriptStripe(_options) {
-  return registryScript("stripe", (options) => ({
+  return useRegistryScript("stripe", (options) => ({
     scriptInput: {
       src: withQuery(
         `https://js.stripe.com/v3/`,
@@ -13,9 +13,9 @@ export function useScriptStripe(_options) {
       ),
       // opt-out of privacy defaults
       // @ts-expect-error TODO add types
-      crossorigin: null,
+      crossorigin: false,
       // @ts-expect-error TODO add types
-      referrerpolicy: null
+      referrerpolicy: false
     },
     schema: import.meta.dev ? StripeOptions : void 0,
     scriptOptions: {

package/dist/runtime/registry/vimeo-player.d.ts

@@ -1,13 +1,13 @@
-import type VimeoPlayer from 'vimeo__player';
+import type ScriptVimeoPlayer from 'vimeo__player';
 import type { RegistryScriptInput } from '#nuxt-scripts';
 export interface VimeoPlayerApi {
-    Player: VimeoPlayer;
+    Vimeo: {
+        Player: ScriptVimeoPlayer;
+    };
 }
-export declare const VimeoPlayerOptions: import("valibot").ObjectSchema<{}, undefined, {}>;
-export type VimeoPlayerInput = RegistryScriptInput<typeof VimeoPlayerOptions>;
+export type VimeoPlayerInput = RegistryScriptInput;
 declare global {
-    interface Window {
-        Vimeo: VimeoPlayerApi;
+    interface Window extends VimeoPlayerApi {
     }
 }
 export declare function useScriptVimeoPlayer<T extends VimeoPlayerApi>(_options?: VimeoPlayerInput): T & {

package/dist/runtime/registry/vimeo-player.mjs

@@ -1,45 +1,41 @@
-import { registryScript } from "../utils.mjs";
-import { object } from "#nuxt-scripts-validator";
+import { watch } from "vue";
+import { useRegistryScript } from "../utils.mjs";
 import { useHead } from "#imports";
-export const VimeoPlayerOptions = object({});
 export function useScriptVimeoPlayer(_options) {
-  return registryScript("vimeoPlayer", () => ({
+  const instance = useRegistryScript("vimeoPlayer", () => ({
     scriptInput: {
       src: "https://player.vimeo.com/api/player.js"
     },
-    schema: import.meta.dev ? VimeoPlayerOptions : void 0,
     scriptOptions: {
       use() {
-        let Player;
-        if (import.meta.client) {
-          Player = function(...params) {
-            return new window.Vimeo.Player(...params);
-          };
-        }
-        return { Player };
+        return {
+          Vimeo: window.Vimeo
+        };
       }
-    },
-    beforeInit() {
-      useHead({
-        link: [
-          {
-            rel: "preconnect",
-            href: "https://player.vimeo.com"
-          },
-          {
-            rel: "preconnect",
-            href: "https://i.vimeocdn.com"
-          },
-          {
-            rel: "preconnect",
-            href: "https://f.vimeocdn.com"
-          },
-          {
-            rel: "preconnect",
-            href: "https://fresnel.vimeocdn.com"
-          }
-        ]
-      });
     }
   }), _options);
+  if (import.meta.client) {
+    const _ = watch(instance.$script.status, (status) => {
+      if (status === "loading") {
+        useHead({
+          link: [
+            {
+              rel: "preconnect",
+              href: "https://i.vimeocdn.com"
+            },
+            {
+              rel: "preconnect",
+              href: "https://f.vimeocdn.com"
+            },
+            {
+              rel: "preconnect",
+              href: "https://fresnel.vimeocdn.com"
+            }
+          ]
+        });
+        _();
+      }
+    });
+  }
+  return instance;
 }

package/dist/runtime/registry/x-pixel.mjs

@@ -1,28 +1,32 @@
-import { registryScript } from "../utils.mjs";
+import { useRegistryScript } from "../utils.mjs";
 import { object, optional, string } from "#nuxt-scripts-validator";
 export const XPixelOptions = object({
   id: string(),
   version: optional(string())
 });
 export function useScriptXPixel(_options) {
-  return registryScript("xPixel", (options) => ({
-    scriptInput: {
-      src: "https://static.ads-twitter.com/uwt.js"
-    },
-    schema: import.meta.dev ? XPixelOptions : void 0,
-    scriptOptions: {
-      use() {
-        return { twq: window.twq };
+  return useRegistryScript("xPixel", (options) => {
+    return {
+      scriptInput: {
+        src: "https://static.ads-twitter.com/uwt.js",
+        // @ts-expect-error TODO fix upstream
+        crossorigin: false
       },
       clientInit: import.meta.server ? void 0 : () => {
-        const s = window.twq = function(...params) {
-          s.exe ? s.exe(s, ...params) : s.queue.push(params);
+        const s = window.twq = function() {
+          s.exe ? s.exe(s, arguments) : s.queue.push(arguments);
         };
         s.version = options?.version || "1.1";
         s.queue = [
           ["config", options?.id]
         ];
+      },
+      schema: import.meta.dev ? XPixelOptions : void 0,
+      scriptOptions: {
+        use() {
+          return { twq: window.twq };
+        }
       }
-    }
-  }), _options);
+    };
+  }, _options);
 }

package/dist/runtime/registry/youtube-player.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="youtube" />
+import type { RegistryScriptInput } from '#nuxt-scripts';
+export interface YouTubePlayerApi {
+    YT: typeof YT;
+}
+declare global {
+    interface Window extends YouTubePlayerApi {
+        onYouTubeIframeAPIReady: () => void;
+    }
+}
+export type YouTubePlayerInput = RegistryScriptInput;
+export declare function useScriptYouTubePlayer<T extends YouTubePlayerApi>(_options: YouTubePlayerInput): T & {
+    $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
+};

package/dist/runtime/registry/{youtube-iframe.mjs → youtube-player.mjs}

@@ -1,19 +1,15 @@
-import { registryScript } from "../utils.mjs";
-import { object } from "#nuxt-scripts-validator";
+import { watch } from "vue";
+import { useRegistryScript } from "../utils.mjs";
 import { useHead } from "#imports";
-export const YouTubeIframeOptions = object({
-  // no options afaik
-});
-export function useScriptYouTubeIframe(_options) {
+export function useScriptYouTubePlayer(_options) {
   let readyPromise = Promise.resolve();
-  return registryScript("youtubeIframe", () => ({
+  const instance = useRegistryScript("youtubePlayer", () => ({
     scriptInput: {
       src: "https://www.youtube.com/iframe_api",
-      // opt-out of privacy defaults
-      // @ts-expect-error TODO add types
-      crossorigin: null
+      // @ts-expect-error TODO fix types upstream
+      crossorigin: false
+      // crossorigin can't be set or it breaks
     },
-    schema: import.meta.dev ? YouTubeIframeOptions : void 0,
     scriptOptions: {
       use() {
         return {
@@ -21,13 +17,17 @@ export function useScriptYouTubeIframe(_options) {
             return window.YT;
           })
         };
-      },
-      clientInit: import.meta.server ? void 0 : () => {
-        readyPromise = new Promise((resolve) => {
-          window.onYouTubeIframeAPIReady = resolve;
-        });
-      },
-      beforeInit() {
+      }
+    },
+    clientInit: import.meta.server ? void 0 : () => {
+      readyPromise = new Promise((resolve) => {
+        window.onYouTubeIframeAPIReady = resolve;
+      });
+    }
+  }), _options);
+  if (import.meta.client) {
+    const _ = watch(instance.$script.status, (status) => {
+      if (status === "loading") {
         useHead({
           link: [
             {
@@ -48,7 +48,9 @@ export function useScriptYouTubeIframe(_options) {
             }
           ]
         });
+        _();
       }
-    }
-  }), _options);
+    });
+  }
+  return instance;
 }

package/dist/runtime/types.d.ts

@@ -5,7 +5,7 @@ import type { Input, ObjectSchema } from 'valibot';
 import type { Import } from 'unimport';
 import type { SegmentInput } from './registry/segment';
 import type { CloudflareWebAnalyticsInput } from './registry/cloudflare-web-analytics';
-import type { FacebookPixelInput } from './registry/facebook-pixel';
+import type { MetaPixelInput } from './registry/meta-pixel';
 import type { FathomAnalyticsInput } from './registry/fathom-analytics';
 import type { HotjarInput } from './registry/hotjar';
 import type { IntercomInput } from './registry/intercom';
@@ -16,6 +16,10 @@ import type { MatomoAnalyticsInput } from './registry/matomo-analytics';
 import type { StripeInput } from './registry/stripe';
 import type { VimeoPlayerInput } from './registry/vimeo-player';
 import type { XPixelInput } from './registry/x-pixel';
+import type { YouTubePlayerInput } from './registry/youtube-player';
+import type { PlausibleAnalyticsInput } from './registry/plausible-analytics';
+import type { NpmInput } from './registry/npm';
+import type { LemonSqueezyInput } from './registry/lemon-squeezy';
 export type NuxtUseScriptOptions<T = any> = Omit<UseScriptOptions<T>, 'trigger'> & {
     /**
      * The trigger to load the script:
@@ -32,6 +36,11 @@ export type NuxtUseScriptOptions<T = any> = Omit<UseScriptOptions<T>, 'trigger'>
      * - `false` - Do not bundle the script. (default)
      */
     bundle?: boolean;
+    /**
+     * Skip any schema validation for the script input. This is useful for loading the script stubs for development without
+     * loading the actual script and not getting warnings.
+     */
+    skipValidation?: boolean;
 };
 export type NuxtUseScriptIntegrationOptions = Omit<NuxtUseScriptOptions, 'use'>;
 export type NuxtUseScriptInput = UseScriptInput;
@@ -64,23 +73,30 @@ export interface NuxtAppScript {
         at: number;
     }[];
 }
-export type ScriptRegistryEntry<T> = true | T | [T, NuxtUseScriptOptions<T>];
 export interface ScriptRegistry {
-    cloudflareWebAnalytics?: ScriptRegistryEntry<CloudflareWebAnalyticsInput>;
-    facebookPixel?: ScriptRegistryEntry<FacebookPixelInput>;
-    fathomAnalytics?: ScriptRegistryEntry<FathomAnalyticsInput>;
-    googleAnalytics?: ScriptRegistryEntry<GoogleAnalyticsInput>;
-    googleMaps?: ScriptRegistryEntry<GoogleMapsInput>;
-    googleTagManager?: ScriptRegistryEntry<GoogleTagManagerInput>;
-    hotjar?: ScriptRegistryEntry<HotjarInput>;
-    intercom?: ScriptRegistryEntry<IntercomInput>;
-    matomoAnalytics?: ScriptRegistryEntry<MatomoAnalyticsInput>;
-    segment?: ScriptRegistryEntry<SegmentInput>;
-    stripe?: ScriptRegistryEntry<StripeInput>;
-    vimeo?: ScriptRegistryEntry<VimeoPlayerInput>;
-    xPixel?: ScriptRegistryEntry<XPixelInput>;
+    cloudflareWebAnalytics?: CloudflareWebAnalyticsInput;
+    metaPixel?: MetaPixelInput;
+    fathomAnalytics?: FathomAnalyticsInput;
+    plausibleAnalytics?: PlausibleAnalyticsInput;
+    googleAnalytics?: GoogleAnalyticsInput;
+    googleMaps?: GoogleMapsInput;
+    lemonSqueezy?: LemonSqueezyInput;
+    googleTagManager?: GoogleTagManagerInput;
+    hotjar?: HotjarInput;
+    intercom?: IntercomInput;
+    matomoAnalytics?: MatomoAnalyticsInput;
+    segment?: SegmentInput;
+    stripe?: StripeInput;
+    xPixel?: XPixelInput;
+    youtubePlayer?: YouTubePlayerInput;
+    vimeoPlayer?: VimeoPlayerInput;
+    [key: `${string}-npm`]: NpmInput;
 }
-export type RegistryScriptInput<T extends ObjectSchema<any>, Bundelable extends boolean = true> = Input<T> & {
+export type NuxtConfigScriptRegistryEntry<T> = true | 'mock' | T | [T, NuxtUseScriptOptions<T>];
+export type NuxtConfigScriptRegistry<T extends keyof ScriptRegistry = keyof ScriptRegistry> = Partial<Record<T, NuxtConfigScriptRegistryEntry<ScriptRegistry[T]>>>;
+declare const emptyOptions: ObjectSchema<{}, undefined, {}>;
+export type EmptyOptionsSchema = typeof emptyOptions;
+export type RegistryScriptInput<T extends ObjectSchema<any> = EmptyOptionsSchema, Bundelable extends boolean = true> = Input<T> & {
     scriptInput?: UseScriptInput;
     scriptOptions?: Bundelable extends true ? Omit<NuxtUseScriptOptions, 'use'> : Omit<NuxtUseScriptOptions, 'bundle' | 'use'>;
 };
@@ -95,3 +111,4 @@ export type RegistryScripts = {
         dark: string;
     };
 }[];
+export {};

package/dist/runtime/types.mjs

@@ -0,0 +1,2 @@
+import { object } from "valibot";
+const emptyOptions = object({});

package/dist/runtime/utils.d.ts

@@ -1,13 +1,14 @@
 import type { Input, ObjectSchema } from 'valibot';
 import type { UseScriptInput } from '@unhead/vue';
-import type { NuxtUseScriptOptions, RegistryScriptInput } from '#nuxt-scripts';
+import type { EmptyOptionsSchema, NuxtUseScriptOptions, RegistryScriptInput, ScriptRegistry } from '#nuxt-scripts';
 type OptionsFn<O extends ObjectSchema<any>> = (options: Input<O>) => ({
     scriptInput?: UseScriptInput;
     scriptOptions?: NuxtUseScriptOptions;
     schema?: O;
     clientInit?: () => void;
 });
-export declare function registryScript<T extends Record<string | symbol, any>, O extends ObjectSchema<any>>(key: string, optionsFn: OptionsFn<O>, _userOptions?: RegistryScriptInput<O>): T & {
+export declare function scriptRuntimeConfig<T extends keyof ScriptRegistry>(key: T): ScriptRegistry[T];
+export declare function useRegistryScript<T extends Record<string | symbol, any>, O extends ObjectSchema<any> = EmptyOptionsSchema>(key: keyof ScriptRegistry | string, optionsFn: OptionsFn<O>, _userOptions?: RegistryScriptInput<O>): T & {
     $script: Promise<T> & import("@unhead/vue").VueScriptInstance<T>;
 };
 export {};

package/dist/runtime/utils.mjs

@@ -1,30 +1,32 @@
 import { defu } from "defu";
 import { parse } from "#nuxt-scripts-validator";
-import { createError, useRuntimeConfig, useScript } from "#imports";
+import { useRuntimeConfig, useScript } from "#imports";
 function validateScriptInputSchema(key, schema, options) {
   if (import.meta.dev) {
     try {
       parse(schema, options);
-    } catch (e) {
-      createError({
-        cause: e,
-        message: `Invalid script options for ${key}`
-      });
+    } catch (_e) {
+      const e = _e;
+      console.error(e.issues.map((i) => `${key}.${i.path?.map((i2) => i2.key).join(",")}: ${i.message}`).join("\n"));
     }
   }
 }
-export function registryScript(key, optionsFn, _userOptions) {
-  const runtimeConfig = useRuntimeConfig().public.scripts || {};
-  const runtimeOptions = runtimeConfig[key];
-  const userOptions = Object.assign(_userOptions || {}, runtimeOptions || {});
+export function scriptRuntimeConfig(key) {
+  return (useRuntimeConfig().public.scripts || {})[key];
+}
+export function useRegistryScript(key, optionsFn, _userOptions) {
+  const scriptConfig = scriptRuntimeConfig(key);
+  const userOptions = Object.assign(_userOptions || {}, typeof scriptConfig === "object" ? scriptConfig : {});
   const options = optionsFn(userOptions);
   const scriptInput = defu(options.scriptInput, { key });
-  const scriptOptions = Object.assign(_userOptions?.scriptOptions || {}, options.scriptOptions || {});
+  const scriptOptions = Object.assign(userOptions?.scriptOptions || {}, options.scriptOptions || {});
   const init = scriptOptions.beforeInit;
   scriptOptions.beforeInit = () => {
-    import.meta.dev && options.schema && validateScriptInputSchema(key, options.schema, userOptions);
+    import.meta.dev && !scriptOptions.skipValidation && options.schema && validateScriptInputSchema(key, options.schema, userOptions);
     init?.();
-    import.meta.client && options.clientInit?.();
+    if (import.meta.client) {
+      options.clientInit?.();
+    }
   };
   return useScript(scriptInput, scriptOptions);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/scripts",
   "type": "module",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Load third-party scripts with better performance, privacy and DX in Nuxt Apps.",
   "author": {
     "website": "https://harlanzw.com",
@@ -43,11 +43,11 @@
     "@nuxt/devtools-kit": "^1.2.0",
     "@nuxt/devtools-ui-kit": "^1.2.0",
     "@nuxt/kit": "^3.11.2",
-    "@types/google.maps": "^3.55.7",
+    "@types/google.maps": "^3.55.8",
     "@types/stripe-v3": "^3.1.33",
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.0.50",
-    "@unhead/vue": "^1.9.8",
+    "@unhead/vue": "^1.9.9",
     "@vueuse/core": "^10.9.0",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
@@ -75,14 +75,14 @@
     "@nuxt/devtools-ui-kit": "^1.2.0",
     "@nuxt/module-builder": "^0.6.0",
     "@nuxt/test-utils": "3.12.1",
-    "@unhead/schema": "^1.9.8",
+    "@unhead/schema": "^1.9.9",
     "acorn-loose": "^8.4.0",
     "bumpp": "^9.4.1",
-    "eslint": "9.1.1",
+    "eslint": "9.2.0",
     "nuxt": "^3.11.2",
     "playwright-core": "^1.43.1",
     "typescript": "^5.4.5",
-    "vitest": "^1.5.3",
+    "vitest": "^1.6.0",
     "vue": "^3.4.26",
     "vue-router": "^4.3.2"
   },