@nuxt/scripts 1.0.0-beta.15 → 1.0.0-beta.17

package/dist/client/_nuxt/builds/latest.json

@@ -1 +1 @@
-{"id":"0f5f1d62-f186-4aef-a618-dcef5ec637c1","timestamp":1772688986035}
+{"id":"54747b43-880a-49d1-91ff-d00dbcdf3ad7","timestamp":1772765383758}

package/dist/client/_nuxt/builds/meta/54747b43-880a-49d1-91ff-d00dbcdf3ad7.json

@@ -0,0 +1 @@
+{"id":"54747b43-880a-49d1-91ff-d00dbcdf3ad7","timestamp":1772765383758,"prerendered":[]}

package/dist/client/_nuxt/error-404.Cqp3ffuH.css

@@ -0,0 +1 @@
+.grid[data-v-47fa61ef]{display:grid}.mb-2[data-v-47fa61ef]{margin-bottom:.5rem}.mb-4[data-v-47fa61ef]{margin-bottom:1rem}.max-w-520px[data-v-47fa61ef]{max-width:520px}.min-h-screen[data-v-47fa61ef]{min-height:100vh}.w-full[data-v-47fa61ef]{width:100%}.flex[data-v-47fa61ef]{display:flex}.place-content-center[data-v-47fa61ef]{place-content:center}.items-center[data-v-47fa61ef]{align-items:center}.justify-center[data-v-47fa61ef]{justify-content:center}.overflow-hidden[data-v-47fa61ef]{overflow:hidden}.bg-white[data-v-47fa61ef]{--un-bg-opacity:1;background-color:rgb(255 255 255/var(--un-bg-opacity))}.px-2[data-v-47fa61ef]{padding-left:.5rem;padding-right:.5rem}.text-center[data-v-47fa61ef]{text-align:center}.text-\[80px\][data-v-47fa61ef]{font-size:80px}.text-2xl[data-v-47fa61ef]{font-size:1.5rem;line-height:2rem}.text-sm[data-v-47fa61ef]{font-size:.875rem;line-height:1.25rem}.text-\[\#020420\][data-v-47fa61ef]{--un-text-opacity:1;color:rgb(2 4 32/var(--un-text-opacity))}.text-\[\#64748B\][data-v-47fa61ef]{--un-text-opacity:1;color:rgb(100 116 139/var(--un-text-opacity))}.hover\:text-\[\#00DC82\][data-v-47fa61ef]:hover{--un-text-opacity:1;color:rgb(0 220 130/var(--un-text-opacity))}.font-medium[data-v-47fa61ef]{font-weight:500}.font-semibold[data-v-47fa61ef]{font-weight:600}.leading-none[data-v-47fa61ef]{line-height:1}.tracking-wide[data-v-47fa61ef]{letter-spacing:.025em}.font-sans[data-v-47fa61ef]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.tabular-nums[data-v-47fa61ef]{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)}.underline[data-v-47fa61ef]{text-decoration-line:underline}.underline-offset-3[data-v-47fa61ef]{text-underline-offset:3px}.antialiased[data-v-47fa61ef]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(prefers-color-scheme:dark){.dark\:bg-\[\#020420\][data-v-47fa61ef]{--un-bg-opacity:1;background-color:rgb(2 4 32/var(--un-bg-opacity))}.dark\:text-white[data-v-47fa61ef]{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity))}}@media(min-width:640px){.sm\:text-\[110px\][data-v-47fa61ef]{font-size:110px}.sm\:text-3xl[data-v-47fa61ef]{font-size:1.875rem;line-height:2.25rem}}

package/dist/client/_nuxt/error-500.B9hH8BAi.css

@@ -0,0 +1 @@
+.grid[data-v-c0d7df54]{display:grid}.mb-2[data-v-c0d7df54]{margin-bottom:.5rem}.mb-4[data-v-c0d7df54]{margin-bottom:1rem}.max-w-520px[data-v-c0d7df54]{max-width:520px}.min-h-screen[data-v-c0d7df54]{min-height:100vh}.place-content-center[data-v-c0d7df54]{place-content:center}.overflow-hidden[data-v-c0d7df54]{overflow:hidden}.bg-white[data-v-c0d7df54]{--un-bg-opacity:1;background-color:rgb(255 255 255/var(--un-bg-opacity))}.px-2[data-v-c0d7df54]{padding-left:.5rem;padding-right:.5rem}.text-center[data-v-c0d7df54]{text-align:center}.text-\[80px\][data-v-c0d7df54]{font-size:80px}.text-2xl[data-v-c0d7df54]{font-size:1.5rem;line-height:2rem}.text-\[\#020420\][data-v-c0d7df54]{--un-text-opacity:1;color:rgb(2 4 32/var(--un-text-opacity))}.text-\[\#64748B\][data-v-c0d7df54]{--un-text-opacity:1;color:rgb(100 116 139/var(--un-text-opacity))}.font-semibold[data-v-c0d7df54]{font-weight:600}.leading-none[data-v-c0d7df54]{line-height:1}.tracking-wide[data-v-c0d7df54]{letter-spacing:.025em}.font-sans[data-v-c0d7df54]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.tabular-nums[data-v-c0d7df54]{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)}.antialiased[data-v-c0d7df54]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(prefers-color-scheme:dark){.dark\:bg-\[\#020420\][data-v-c0d7df54]{--un-bg-opacity:1;background-color:rgb(2 4 32/var(--un-bg-opacity))}.dark\:text-white[data-v-c0d7df54]{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity))}}@media(min-width:640px){.sm\:text-\[110px\][data-v-c0d7df54]{font-size:110px}.sm\:text-3xl[data-v-c0d7df54]{font-size:1.875rem;line-height:2.25rem}}

package/dist/client/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt-scripts/_nuxt/entry.D45OuV0w.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/CAywURt7.js"><script type="module" src="/__nuxt-scripts/_nuxt/CAywURt7.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{"nuxt-scripts":{version:"",defaultScriptOptions:{trigger:"onNuxtReady"},googleStaticMapsProxy:""}},app:{baseURL:"/__nuxt-scripts",buildId:"0f5f1d62-f186-4aef-a618-dcef5ec637c1",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1772688990394,false]</script></body></html>
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/__nuxt-scripts/_nuxt/entry.D45OuV0w.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/NbccNBFl.js"><script type="module" src="/__nuxt-scripts/_nuxt/NbccNBFl.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{"nuxt-scripts":{version:"",defaultScriptOptions:{trigger:"onNuxtReady"},googleStaticMapsProxy:""}},app:{baseURL:"/__nuxt-scripts",buildId:"54747b43-880a-49d1-91ff-d00dbcdf3ad7",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1772765388173,false]</script></body></html>

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16"
   },
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.17",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -18,7 +18,7 @@ import fsp from 'node:fs/promises';
 import { colors } from 'consola/utils';
 import MagicString from 'magic-string';
 import { hash } from 'ohash';
-import { a as getProxyConfig, g as getAllProxyConfigs, r as routesToInterceptRules } from './shared/scripts.DLRgvHQg.mjs';
+import { a as getProxyConfig, g as getAllProxyConfigs, r as routesToInterceptRules } from './shared/scripts.Bg4pl9Yo.mjs';
 import { registry } from './registry.mjs';
 
 const renderedScript = /* @__PURE__ */ new Map();
@@ -300,6 +300,10 @@ function matchAndRewrite(value, rewrites) {
 }
 function rewriteScriptUrlsAST(content, filename, rewrites) {
   const s = new MagicString(content);
+  function needsLeadingSpace(start) {
+    const prev = content[start - 1];
+    return prev && /[\w$]/.test(prev) ? " " : "";
+  }
   parseAndWalk(content, filename, (node, parent, ctx) => {
     if (node.type === "Literal" && typeof node.value === "string") {
       const value = node.value;
@@ -310,7 +314,7 @@ function rewriteScriptUrlsAST(content, filename, rewrites) {
       if (isPropertyKeyAST(parent, ctx)) {
         s.overwrite(node.start, node.end, quote + rewritten + quote);
       } else {
-        s.overwrite(node.start, node.end, `self.location.origin+${quote}${rewritten}${quote}`);
+        s.overwrite(node.start, node.end, `${needsLeadingSpace(node.start)}self.location.origin+${quote}${rewritten}${quote}`);
       }
     }
     if (node.type === "TemplateLiteral" && node.expressions?.length === 0) {
@@ -325,7 +329,7 @@ function rewriteScriptUrlsAST(content, filename, rewrites) {
         if (isPropertyKeyAST(parent, ctx)) {
           s.overwrite(node.start, node.end, `\`${rewritten}\``);
         } else {
-          s.overwrite(node.start, node.end, `self.location.origin+\`${rewritten}\``);
+          s.overwrite(node.start, node.end, `${needsLeadingSpace(node.start)}self.location.origin+\`${rewritten}\``);
         }
       }
     }
@@ -346,12 +350,12 @@ function rewriteScriptUrlsAST(content, filename, rewrites) {
   const gaRewrite = rewrites.find((r) => r.from.includes("google-analytics.com/g/collect"));
   if (gaRewrite) {
     output = output.replace(
-      /"https:\/\/"\+\(.*?\)\+"\.google-analytics\.com\/g\/collect"/g,
-      `self.location.origin+"${gaRewrite.to}"`
+      /([\w$])?"https:\/\/"\+\(.*?\)\+"\.google-analytics\.com\/g\/collect"/g,
+      (_, prevChar) => `${prevChar ? `${prevChar} ` : ""}self.location.origin+"${gaRewrite.to}"`
     );
     output = output.replace(
-      /"https:\/\/"\+\(.*?\)\+"\.analytics\.google\.com\/g\/collect"/g,
-      `self.location.origin+"${gaRewrite.to}"`
+      /([\w$])?"https:\/\/"\+\(.*?\)\+"\.analytics\.google\.com\/g\/collect"/g,
+      (_, prevChar) => `${prevChar ? `${prevChar} ` : ""}self.location.origin+"${gaRewrite.to}"`
     );
   }
   return output;
@@ -1272,6 +1276,17 @@ See: https://scripts.nuxt.com/docs/guides/first-party#static-hosting`
         handler: await resolvePath("./runtime/server/google-static-maps-proxy")
       });
     }
+    if (config.registry?.gravatar) {
+      const gravatarConfig = typeof config.registry.gravatar === "object" && !Array.isArray(config.registry.gravatar) ? config.registry.gravatar : {};
+      nuxt.options.runtimeConfig.public["nuxt-scripts"] = defu(
+        { gravatarProxy: { cacheMaxAge: gravatarConfig.cacheMaxAge ?? 3600 } },
+        nuxt.options.runtimeConfig.public["nuxt-scripts"]
+      );
+      addServerHandler({
+        route: "/_scripts/gravatar-proxy",
+        handler: await resolvePath("./runtime/server/gravatar-proxy")
+      });
+    }
     addServerHandler({
       route: "/api/_scripts/x-embed",
       handler: await resolvePath("./runtime/server/x-embed")

package/dist/registry.mjs

@@ -28,6 +28,17 @@ async function registry(resolve) {
         from: await resolve("./runtime/registry/cloudflare-web-analytics")
       }
     },
+    {
+      label: "Vercel Analytics",
+      src: "https://va.vercel-scripts.com/v1/script.js",
+      proxy: "vercelAnalytics",
+      category: "analytics",
+      logo: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path d="M256 48L496 464H16z" fill="currentColor"/></svg>`,
+      import: {
+        name: "useScriptVercelAnalytics",
+        from: await resolve("./runtime/registry/vercel-analytics")
+      }
+    },
     {
       label: "PostHog",
       src: false,
@@ -419,6 +430,17 @@ async function registry(resolve) {
         name: "useScriptUmamiAnalytics",
         from: await resolve("./runtime/registry/umami-analytics")
       }
+    },
+    {
+      label: "Gravatar",
+      proxy: "gravatar",
+      src: "https://secure.gravatar.com/js/gprofiles.js",
+      category: "utility",
+      logo: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><circle cx="128" cy="128" r="128" fill="#1d4fc4"/><path d="M128 28c-55.2 0-100 44.8-100 100s44.8 100 100 100 100-44.8 100-100S183.2 28 128 28zm0 180c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z" fill="#fff"/></svg>`,
+      import: {
+        name: "useScriptGravatar",
+        from: await resolve("./runtime/registry/gravatar")
+      }
     }
   ];
 }

package/dist/runtime/components/GoogleMaps/ScriptGoogleMaps.d.vue.ts

@@ -228,9 +228,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     }) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
-    centerMarker: boolean;
     width: number | string;
     height: number | string;
+    centerMarker: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     placeholder?: (props: {
         placeholder: string;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMaps.vue.d.ts

@@ -228,9 +228,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     }) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
-    centerMarker: boolean;
     width: number | string;
     height: number | string;
+    centerMarker: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     placeholder?: (props: {
         placeholder: string;

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /** Email address — sent to your server proxy for hashing, not sent to Gravatar */
+    email?: string;
+    /** Pre-computed SHA256 hash of the email */
+    hash?: string;
+    /** Avatar size in pixels */
+    size?: number;
+    /** Default avatar style when no Gravatar exists */
+    default?: string;
+    /** Content rating filter */
+    rating?: string;
+    /** Enable hovercards on hover */
+    hovercards?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    default: string;
+    size: number;
+    rating: string;
+    hovercards: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ScriptGravatar.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed, onMounted, ref, useAttrs } from "vue";
+import { useScriptGravatar } from "../registry/gravatar";
+const props = defineProps({
+  email: { type: String, required: false },
+  hash: { type: String, required: false },
+  size: { type: Number, required: false, default: 80 },
+  default: { type: String, required: false, default: "mp" },
+  rating: { type: String, required: false, default: "g" },
+  hovercards: { type: Boolean, required: false, default: false }
+});
+const attrs = useAttrs();
+const imgSrc = ref("");
+const { onLoaded } = useScriptGravatar();
+const queryOverrides = computed(() => ({
+  size: props.size,
+  default: props.default,
+  rating: props.rating
+}));
+onMounted(() => {
+  onLoaded((api) => {
+    if (props.email) {
+      imgSrc.value = api.getAvatarUrlFromEmail(props.email, queryOverrides.value);
+    } else if (props.hash) {
+      imgSrc.value = api.getAvatarUrl(props.hash, queryOverrides.value);
+    }
+  });
+});
+</script>
+
+<template>
+  <img
+    v-if="imgSrc"
+    :src="imgSrc"
+    :width="size"
+    :height="size"
+    :class="{ hovercard: hovercards }"
+    v-bind="attrs"
+    :alt="attrs.alt || 'Gravatar avatar'"
+    loading="lazy"
+  >
+  <span
+    v-else
+    :style="{ display: 'inline-block', width: `${size}px`, height: `${size}px`, borderRadius: '50%', background: '#e0e0e0' }"
+  />
+</template>

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /** Email address — sent to your server proxy for hashing, not sent to Gravatar */
+    email?: string;
+    /** Pre-computed SHA256 hash of the email */
+    hash?: string;
+    /** Avatar size in pixels */
+    size?: number;
+    /** Default avatar style when no Gravatar exists */
+    default?: string;
+    /** Content rating filter */
+    rating?: string;
+    /** Enable hovercards on hover */
+    hovercards?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    default: string;
+    size: number;
+    rating: string;
+    hovercards: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -3,8 +3,8 @@ type __VLS_Props = {
     size?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    color: string;
     size: number;
+    color: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -3,8 +3,8 @@ type __VLS_Props = {
     size?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    color: string;
     size: number;
+    color: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,5 +1,5 @@
 import type { ElementScriptTrigger } from '#nuxt-scripts/types';
-import type { OnApproveActions, OnApproveData, OnCancelledActions, OnClickActions, OnInitActions, OnShippingAddressChangeActions, OnShippingAddressChangeData, OnShippingOptionsChangeActions, OnShippingOptionsChangeData, PayPalButtonsComponentOptions } from '@paypal/paypal-js';
+import type { Components, PageTypes, SdkInstance } from '@paypal/paypal-js/sdk-v6';
 import type { HTMLAttributes, ReservedProps } from 'vue';
 import type { PayPalInput } from '../registry/paypal.js';
 type __VLS_Props = {
@@ -12,55 +12,66 @@ type __VLS_Props = {
      */
     trigger?: ElementScriptTrigger;
     /**
-     * The client id for the paypal script.
+     * Client ID or client token for PayPal SDK v6 authentication.
      */
     clientId?: string;
     /**
-     * The options for the paypal buttons.
+     * Server-generated client token for SDK v6.
      */
-    buttonOptions?: PayPalButtonsComponentOptions;
+    clientToken?: string;
     /**
-     * The paypal script options.
+     * The v6 SDK components to load.
+     * @default ['paypal-payments']
      */
-    paypalScriptOptions?: Partial<PayPalInput>;
+    components?: Components[];
+    /**
+     * The page type context hint.
+     */
+    pageType?: PageTypes;
+    /**
+     * The locale for the SDK (BCP-47 code).
+     */
+    locale?: string;
     /**
-     * Disables the paypal buttons.
+     * The merchant ID(s).
      */
-    disabled?: boolean;
+    merchantId?: string | string[];
+    /**
+     * Partner attribution ID for revenue sharing.
+     */
+    partnerAttributionId?: string;
+    /**
+     * The paypal script options.
+     */
+    paypalScriptOptions?: Partial<PayPalInput>;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+declare var __VLS_1: {
+    sdkInstance: SdkInstance<Components[]> | undefined;
+}, __VLS_3: {}, __VLS_5: {}, __VLS_12: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
-    placeholder?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_1) => any;
 } & {
-    loading?: (props: typeof __VLS_3) => any;
+    placeholder?: (props: typeof __VLS_3) => any;
 } & {
-    awaitingLoad?: (props: typeof __VLS_10) => any;
+    loading?: (props: typeof __VLS_5) => any;
 } & {
-    error?: (props: typeof __VLS_12) => any;
+    awaitingLoad?: (props: typeof __VLS_12) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    error?: (props: typeof __VLS_14) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: (error: Record<string, unknown>) => any;
-    init: (data: Record<string, unknown>, actions: OnInitActions) => any;
-    cancel: (data: Record<string, unknown>, actions: OnCancelledActions) => any;
-    approve: (data: OnApproveData, actions: OnApproveActions) => any;
-    clickButtons: (data: Record<string, unknown>, actions: OnClickActions) => any;
-    shippingOptionsChange: (data: OnShippingOptionsChangeData, actions: OnShippingOptionsChangeActions) => any;
-    shippingAddressChange: (data: OnShippingAddressChangeData, actions: OnShippingAddressChangeActions) => any;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    /** The PayPal SDK v6 instance for creating payment sessions, checking eligibility, etc. */
+    sdkInstance: import("vue").ShallowRef<SdkInstance<Components[]> | undefined, SdkInstance<Components[]> | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: unknown) => any;
+    ready: (instance: SdkInstance<Components[]>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onError?: ((error: Record<string, unknown>) => any) | undefined;
-    onInit?: ((data: Record<string, unknown>, actions: OnInitActions) => any) | undefined;
-    onCancel?: ((data: Record<string, unknown>, actions: OnCancelledActions) => any) | undefined;
-    onApprove?: ((data: OnApproveData, actions: OnApproveActions) => any) | undefined;
-    onClickButtons?: ((data: Record<string, unknown>, actions: OnClickActions) => any) | undefined;
-    onShippingOptionsChange?: ((data: OnShippingOptionsChangeData, actions: OnShippingOptionsChangeActions) => any) | undefined;
-    onShippingAddressChange?: ((data: OnShippingAddressChangeData, actions: OnShippingAddressChangeActions) => any) | undefined;
+    onError?: ((error: unknown) => any) | undefined;
+    onReady?: ((instance: SdkInstance<Components[]>) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
-    disabled: boolean;
     clientId: string;
-    buttonOptions: PayPalButtonsComponentOptions;
+    components: Components[];
     paypalScriptOptions: Partial<PayPalInput>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ScriptPayPalButtons.vue

@@ -1,100 +1,66 @@
 <script setup>
 import { defu } from "defu";
-import { computed, onBeforeUnmount, onMounted, ref, resolveComponent, shallowRef, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, resolveComponent, shallowRef } from "vue";
 import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
 import { useScriptPayPal } from "../registry/paypal";
 const props = defineProps({
   rootAttrs: { type: Object, required: false },
   trigger: { type: [String, Array, Boolean], required: false, default: "visible" },
   clientId: { type: String, required: false, default: "test" },
-  buttonOptions: { type: Object, required: false, default: () => ({}) },
-  paypalScriptOptions: { type: Object, required: false, default: () => ({}) },
-  disabled: { type: Boolean, required: false, default: false }
+  clientToken: { type: String, required: false },
+  components: { type: Array, required: false, default: () => ["paypal-payments"] },
+  pageType: { type: String, required: false },
+  locale: { type: String, required: false },
+  merchantId: { type: [String, Array], required: false },
+  partnerAttributionId: { type: String, required: false },
+  paypalScriptOptions: { type: Object, required: false, default: () => ({}) }
 });
-const emit = defineEmits(["approve", "error", "cancel", "clickButtons", "shippingOptionsChange", "shippingAddressChange", "init"]);
+const emit = defineEmits(["ready", "error"]);
 const el = ref(null);
 const rootEl = ref(null);
 const ready = ref(false);
+const failed = ref(false);
+const sdkInstance = shallowRef();
 const { onLoaded, status } = useScriptPayPal({
-  clientId: props.clientId,
+  ...props.clientToken ? { clientToken: props.clientToken } : { clientId: props.clientId },
   ...props.paypalScriptOptions
 });
-const initActions = shallowRef(null);
-function handleDisabled() {
-  if (!initActions.value)
-    return;
-  if (props.disabled) {
-    initActions.value.disable();
-  } else {
-    initActions.value.enable();
-  }
-}
-const options = computed(() => {
-  const _options = {
-    onApprove: async (data, actions) => {
-      emit("approve", data, actions);
-      return props.buttonOptions?.onApprove?.(data, actions);
-    },
-    onError: (err) => {
-      emit("error", err);
-      return props.buttonOptions?.onError?.(err);
-    },
-    onCancel: (data, actions) => {
-      emit("cancel", data, actions);
-      return props.buttonOptions?.onCancel?.(data, actions);
-    },
-    onClick: (data, actions) => {
-      emit("clickButtons", data, actions);
-      return props.buttonOptions?.onClick?.(data, actions);
-    },
-    onShippingOptionsChange: async (data, actions) => {
-      emit("shippingOptionsChange", data, actions);
-      return props.buttonOptions?.onShippingOptionsChange?.(data, actions);
-    },
-    onShippingAddressChange: async (data, actions) => {
-      emit("shippingAddressChange", data, actions);
-      return props.buttonOptions?.onShippingAddressChange?.(data, actions);
-    },
-    onInit: (data, actions) => {
-      initActions.value = actions;
-      actions.disable();
-      handleDisabled();
-      emit("init", data, actions);
-      return props.buttonOptions?.onInit?.(data, actions);
-    }
-  };
-  return defu(_options, props.buttonOptions);
-});
-watch(() => props.disabled, handleDisabled);
-const buttonInst = shallowRef();
 onMounted(() => {
   onLoaded(async ({ paypal }) => {
     if (!el.value)
       return;
-    buttonInst.value = paypal?.Buttons?.(options.value);
-    await buttonInst.value?.render(el.value);
-    ready.value = true;
-    watch(() => options.value, async (_options) => {
-      if (!el.value)
-        return;
-      await buttonInst.value?.updateProps(_options);
-    });
+    const instanceOptions = {
+      ...props.clientToken ? { clientToken: props.clientToken } : { clientId: props.clientId },
+      components: props.components,
+      ...props.pageType && { pageType: props.pageType },
+      ...props.locale && { locale: props.locale },
+      ...props.merchantId && { merchantId: props.merchantId },
+      ...props.partnerAttributionId && { partnerAttributionId: props.partnerAttributionId }
+    };
+    try {
+      sdkInstance.value = await paypal.createInstance(instanceOptions);
+      ready.value = true;
+      emit("ready", sdkInstance.value);
+    } catch (err) {
+      sdkInstance.value = void 0;
+      failed.value = true;
+      emit("error", err);
+    }
   });
 });
-async function destroy() {
-  if (buttonInst.value) {
-    await buttonInst.value?.close();
-  }
-}
-onBeforeUnmount(async () => {
-  await destroy();
+onBeforeUnmount(() => {
+  sdkInstance.value = void 0;
+});
+defineExpose({
+  /** The PayPal SDK v6 instance for creating payment sessions, checking eligibility, etc. */
+  sdkInstance
 });
 const ScriptLoadingIndicator = resolveComponent("ScriptLoadingIndicator");
 const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
     "aria-busy": status.value === "loading",
-    "aria-label": status.value === "awaitingLoad" ? "PayPal Script Placeholder" : status.value === "loading" ? "PayPal Buttons Loading" : "PayPal Buttons",
+    "aria-label": status.value === "awaitingLoad" ? "PayPal Script Placeholder" : status.value === "loading" ? "PayPal Loading" : "PayPal",
     "aria-live": "polite",
     "role": "application",
     ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
@@ -103,16 +69,17 @@ const rootAttrs = computed(() => {
 </script>
 
 <template>
-  <div v-bind="rootAttrs" id="test">
-    <div v-show="ready" ref="el" />
-    <slot v-if="!ready" name="placeholder">
+  <div ref="rootEl" v-bind="rootAttrs">
+    <div ref="el">
+      <slot v-if="ready" name="default" :sdk-instance="sdkInstance" />
+    </div>
+    <slot v-if="status !== 'error' && !ready && !failed" name="placeholder">
       placeholder
     </slot>
-    <slot v-if="status !== 'awaitingLoad' && !ready" name="loading">
+    <slot v-if="status !== 'awaitingLoad' && status !== 'error' && !ready && !failed" name="loading">
       <ScriptLoadingIndicator color="black" />
     </slot>
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="status === 'error'" name="error" />
-    <slot />
+    <slot v-else-if="status === 'error' || failed" name="error" />
   </div>
 </template>