chore: improved registry APIs

package.json

@@ -56,7 +56,7 @@
     "@nuxt/devtools-kit": "^1.1.5",
     "@nuxt/devtools-ui-kit": "^1.1.5",
     "@nuxt/kit": "^3.11.2",
-    "@unhead/vue": "^1.9.6",
+    "@unhead/vue": "^1.9.7",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
     "estree-walker": "^3.0.3",
@@ -83,7 +83,7 @@
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/test-utils": "3.12.1",
     "@types/stripe-v3": "^3.1.33",
-    "@unhead/schema": "^1.9.6",
+    "@unhead/schema": "^1.9.7",
     "acorn-loose": "^8.4.0",
     "bumpp": "^9.4.0",
     "eslint": "9.0.0",

playground/pages/index.vue

@@ -22,6 +22,10 @@ const thirdParties = [
     name: 'Fathom Analytics',
     path: '/third-parties/fathom-analytics',
   },
+  {
+    name: 'Matomo Analytics',
+    path: '/third-parties/matomo-analytics',
+  },
   {
     name: 'Hotjar',
     path: '/third-parties/hotjar',

playground/pages/third-parties/matomo-analytics.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { useScriptMatomoAnalytics } from '../../../src/runtime/registry/matomo-analytics'
+import { useHead } from '#imports'
+
+useHead({
+  title: 'Matomo Analytics',
+})
+
+// composables return the underlying api as a proxy object and a $script with the script state
+const { $script, _paq } = useScriptMatomoAnalytics({
+  matomoUrl: 'https://matomo.example.com',
+  siteId: 'KBXOGxgqMFjm2mxtJDJg0iDn5AnGYb9C',
+})
+
+console.log({ _paq })
+
+_paq.push(['trackPageView'])
+</script>
+
+<template>
+  <div>
+    <ClientOnly>
+      <div>
+        status: {{ $script.status.value }}
+      </div>
+    </ClientOnly>
+  </div>
+</template>

src/module.ts

@@ -152,6 +152,12 @@ export default defineNuxtModule<ModuleOptions>({
           from: resolve('./runtime/registry/fathom-analytics'),
           src: false, // can not be bundled, breaks script
         },
+        {
+          name: 'useScriptMatomoAnalytics',
+          key: 'matomoAnalytics',
+          from: resolve('./runtime/registry/matomo-analytics'),
+          src: false, // can not be bundled, breaks script
+        },
         {
           name: 'useScriptStripe',
           key: 'stripe',

src/runtime/composables/useScript.ts

@@ -15,7 +15,6 @@ export function useScript<T>(input: UseScriptInput, options?: NuxtUseScriptOptio
   const id = input.key || input.src || hashCode((typeof input.innerHTML === 'string' ? input.innerHTML : ''))
   // only validate if we're initializing the script
   if (!nuxtApp.scripts?.[id]) {
-    options.beforeInit?.()
     if (import.meta.client) {
       performance?.mark?.('mark_feature_usage', {
         detail: {

src/runtime/registry/cloudflare-web-analytics.ts

@@ -1,7 +1,8 @@
 import { type Input, boolean, minLength, object, optional, string } from 'valibot'
 import { defu } from 'defu'
-import { useScript, validateScriptInputSchema } from '#imports'
-import type { NuxtUseScriptIntegrationOptions, NuxtUseScriptOptions } from '#nuxt-scripts'
+import { registryScriptOptions } from '../utils'
+import { useScript } from '#imports'
+import type { NuxtUseScriptIntegrationOptions } from '#nuxt-scripts'
 
 export interface CloudflareWebAnalyticsApi {
   __cfBeacon: {
@@ -35,17 +36,16 @@ export const CloudflareWebAnalyticsOptions = object({
 
 export type CloudflareWebAnalyticsInput = Input<typeof CloudflareWebAnalyticsOptions>
 
-export function useScriptCloudflareWebAnalytics<T extends CloudflareWebAnalyticsApi>(options?: CloudflareWebAnalyticsInput, _scriptOptions?: NuxtUseScriptIntegrationOptions) {
-  const scriptOptions: NuxtUseScriptOptions<T> = _scriptOptions || {}
-  scriptOptions.beforeInit = () => {
-    import.meta.dev && validateScriptInputSchema(CloudflareWebAnalyticsOptions, options)
-    _scriptOptions?.beforeInit?.()
-  }
-  return useScript<CloudflareWebAnalyticsApi>({
+export function useScriptCloudflareWebAnalytics<T extends CloudflareWebAnalyticsApi>(options?: CloudflareWebAnalyticsInput, scriptOptions?: NuxtUseScriptIntegrationOptions) {
+  return useScript<T>({
     'src': 'https://static.cloudflareinsights.com/beacon.min.js',
     'data-cf-beacon': JSON.stringify(defu(options, { spa: true })),
   }, {
-    ...scriptOptions,
+    ...registryScriptOptions({
+      scriptOptions,
+      schema: CloudflareWebAnalyticsOptions,
+      options,
+    }),
     use() {
       return { __cfBeacon: window.__cfBeacon, __cfRl: window.__cfRl }
     },

src/runtime/registry/confetti.ts

@@ -1,4 +1,5 @@
 import { type Input, pick } from 'valibot'
+import { registryScriptOptions } from '../utils'
 import { NpmOptions, useScriptNpm } from './npm'
 import type { NuxtUseScriptIntegrationOptions } from '#nuxt-scripts'
 
@@ -15,14 +16,20 @@ declare global {
 export const ConfettiOptions = pick(NpmOptions, ['version'])
 export type ConfettiInput = Input<typeof ConfettiOptions>
 
-export function useScriptConfetti(options: ConfettiInput, _scriptOptions: NuxtUseScriptIntegrationOptions = {}) {
-  return useScriptNpm<ConfettiApi>({
+export function useScriptConfetti<T extends ConfettiApi>(options: ConfettiInput, scriptOptions?: NuxtUseScriptIntegrationOptions) {
+  return useScriptNpm<T>({
     packageName: 'js-confetti',
     version: options.version,
     file: 'dist/js-confetti.browser.js',
   }, {
-    ...options,
+    ...registryScriptOptions({
+      scriptOptions,
+      schema: ConfettiOptions,
+      options,
+    }),
     use() {
+      if (typeof window.JSConfetti === 'undefined')
+        return null
       return new window.JSConfetti()
     },
   })

src/runtime/registry/facebook-pixel.ts

@@ -1,6 +1,7 @@
 import { type Input, number, object, string, union } from 'valibot'
-import { useScript, validateScriptInputSchema } from '#imports'
-import type { NuxtUseScriptIntegrationOptions, NuxtUseScriptOptions } from '#nuxt-scripts'
+import { registryScriptOptions } from '../utils'
+import { useScript } from '#imports'
+import type { NuxtUseScriptIntegrationOptions } from '#nuxt-scripts'
 
 type StandardEvents = 'AddPaymentInfo' | 'AddToCart' | 'AddToWishlist' | 'CompleteRegistration' | 'Contact' | 'CustomizeProduct' | 'Donate' | 'FindLocation' | 'InitiateCheckout' | 'Lead' | 'Purchase' | 'Schedule' | 'Search' | 'StartTrial' | 'SubmitApplication' | 'Subscribe' | 'ViewContent'
 interface EventObjectProperties {
@@ -41,33 +42,32 @@ export const FacebookPixelOptions = object({
 })
 export type FacebookPixelInput = Input<typeof FacebookPixelOptions>
 
-export function useScriptFacebookPixel<T extends FacebookPixelApi>(options?: FacebookPixelInput, _scriptOptions?: NuxtUseScriptIntegrationOptions) {
-  const scriptOptions: NuxtUseScriptOptions<T> = _scriptOptions || {}
-  scriptOptions.beforeInit = () => {
-    import.meta.dev && validateScriptInputSchema(FacebookPixelOptions, options)
-
-    // we need to insert the hj function
-    if (import.meta.client) {
-      const fbq: FacebookPixelApi['fbq'] = window.fbq = function (...params: any[]) {
-        // @ts-expect-error untyped
-        fbq.callMethod ? fbq.callMethod(...params) : fbq.queue.push(params)
-      } as any as FacebookPixelApi['fbq']
-      if (!window._fbq)
-        window._fbq = fbq
-      fbq.push = fbq
-      fbq.loaded = true
-      fbq.version = '2.0'
-      fbq.queue = []
-      fbq('init', options?.id)
-      fbq('track', 'PageView')
-    }
-    _scriptOptions?.beforeInit?.()
-  }
+export function useScriptFacebookPixel<T extends FacebookPixelApi>(options?: FacebookPixelInput, scriptOptions?: NuxtUseScriptIntegrationOptions) {
   return useScript<T>({
     key: 'facebookPixel',
     src: 'https://connect.facebook.net/en_US/fbevents.js',
   }, {
-    ...scriptOptions,
+    ...registryScriptOptions({
+      scriptOptions,
+      schema: FacebookPixelOptions,
+      options,
+      clientInit: import.meta.server
+        ? undefined
+        : () => {
+            const fbq: FacebookPixelApi['fbq'] = window.fbq = function (...params: any[]) {
+            // @ts-expect-error untyped
+              fbq.callMethod ? fbq.callMethod(...params) : fbq.queue.push(params)
+            } as any as FacebookPixelApi['fbq']
+            if (!window._fbq)
+              window._fbq = fbq
+            fbq.push = fbq
+            fbq.loaded = true
+            fbq.version = '2.0'
+            fbq.queue = []
+            fbq('init', options?.id)
+            fbq('track', 'PageView')
+          },
+    }),
     use() {
       return { fbq: window.fbq }
     },