From 41cd38f13853f3eea28b74195d800b45a0db6548 Mon Sep 17 00:00:00 2001 From: harlan Date: Tue, 20 Aug 2024 01:28:05 +1000 Subject: [PATCH 1/6] chore: clean up --- src/runtime/registry/clarity.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/runtime/registry/clarity.ts b/src/runtime/registry/clarity.ts index 2f780d34..335eea55 100644 --- a/src/runtime/registry/clarity.ts +++ b/src/runtime/registry/clarity.ts @@ -2,15 +2,6 @@ import { useRegistryScript } from '../utils' import { minLength, object, string, pipe } from '#nuxt-scripts-validator' import type { RegistryScriptInput } from '#nuxt-scripts' -/** - * - */ type ClarityFunctions = ((fn: 'start', options: { content: boolean, cookies: string[], dob: number, expire: number, projectId: string, upload: string }) => void) & ((fn: 'identify', id: string, session?: string, page?: string, userHint?: string) => Promise<{ From 246cd491f65a2c4890636ff558407fe08b5905d3 Mon Sep 17 00:00:00 2001 From: harlan Date: Tue, 20 Aug 2024 15:03:55 +1000 Subject: [PATCH 2/6] feat!: Unhead 1.10.0 integration --- client/app.vue | 6 +- docs/content/_magic-api.md | 8 +- .../1.getting-started/3.confetti-tutorial.md | 24 +- docs/content/docs/1.guides/0.key-concepts.md | 23 +- .../docs/1.guides/1.script-triggers.md | 4 +- docs/content/docs/1.guides/4.global.md | 6 +- docs/content/docs/3.api/1.use-script.md | 2 +- .../analytics/cloudflare-web-analytics.md | 24 +- .../scripts/analytics/fathom-analytics.md | 36 +- .../scripts/analytics/google-analytics.md | 44 +- .../scripts/analytics/matomo-analytics.md | 45 +- .../scripts/analytics/plausible-analytics.md | 46 +- docs/content/scripts/content/google-maps.md | 4 +- docs/content/scripts/content/vimeo-player.md | 4 +- .../content/scripts/content/youtube-player.md | 4 +- docs/content/scripts/payments/stripe.md | 4 +- docs/pages/index.vue | 18 +- package.json | 16 +- pnpm-lock.yaml | 1236 +++++++++++------ src/module.ts | 13 +- src/runtime/components/ScriptCrisp.vue | 17 +- .../components/ScriptGoogleAdsense.vue | 14 +- src/runtime/components/ScriptGoogleMaps.vue | 21 +- src/runtime/components/ScriptIntercom.vue | 17 +- src/runtime/components/ScriptLemonSqueezy.vue | 2 +- .../components/ScriptStripePricingTable.vue | 12 +- .../components/ScriptYouTubePlayer.vue | 18 +- src/runtime/composables/useScript.ts | 34 +- src/runtime/registry/vimeo-player.ts | 2 +- src/runtime/registry/youtube-player.ts | 2 +- src/runtime/types.ts | 6 +- src/runtime/utils.ts | 8 +- test/fixtures/basic/pages/manual-trigger.vue | 4 +- .../basic/pages/mouseover-trigger.vue | 4 +- test/fixtures/basic/pages/tpc/ga.vue | 6 +- test/fixtures/basic/pages/tpc/gtm.vue | 4 +- 36 files changed, 998 insertions(+), 740 deletions(-) diff --git a/client/app.vue b/client/app.vue index b8e91ec2..ff79534c 100644 --- a/client/app.vue +++ b/client/app.vue @@ -193,7 +193,7 @@ function viewDocs(docs: string) { Status
- {{ script.$script.status.value }} + {{ script.status.value }}
@@ -209,10 +209,10 @@ function viewDocs(docs: string) {
{{ script.loadTime }}
- + Load - + Remove
diff --git a/docs/content/_magic-api.md b/docs/content/_magic-api.md index b43b67a5..43beca61 100644 --- a/docs/content/_magic-api.md +++ b/docs/content/_magic-api.md @@ -1,12 +1,14 @@ ```vue ``` diff --git a/docs/content/docs/1.getting-started/3.confetti-tutorial.md b/docs/content/docs/1.getting-started/3.confetti-tutorial.md index 7f547583..d06e7acd 100644 --- a/docs/content/docs/1.getting-started/3.confetti-tutorial.md +++ b/docs/content/docs/1.getting-started/3.confetti-tutorial.md @@ -111,7 +111,7 @@ when switching between pages as `new window.JSConfetti()` needs to be called bet ```vue [Explicit script Load] ``` ```vue [Proxy Functions] ``` @@ -172,7 +170,7 @@ declare global { interface Window extends JSConfettiApi {} } -const { $script } = useScriptNpm({ +const { onLoaded } = useScriptNpm({ packageName: 'js-confetti', file: 'dist/js-confetti.browser.js', version: '0.12.0', @@ -183,7 +181,7 @@ const { $script } = useScriptNpm({ }, }) onMounted(() => { - $script.then(({ JSConfetti }) => { + onLoaded(({ JSConfetti }) => { const confetti = new JSConfetti() // fully typed! confetti.addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] }) @@ -201,7 +199,7 @@ In this example we'll combine the [useScriptTriggerElement](/docs/api/use-script ```vue [app.vue] diff --git a/docs/content/docs/3.api/1.use-script.md b/docs/content/docs/3.api/1.use-script.md index 99aeed2a..3eb29008 100644 --- a/docs/content/docs/3.api/1.use-script.md +++ b/docs/content/docs/3.api/1.use-script.md @@ -55,7 +55,7 @@ export type NuxtUseScriptOptions = Omit, 'trigger'> /** * The trigger to load the script: * - `onNuxtReady` - Load the script when Nuxt is ready. - * - `manual` - Load the script manually by calling `$script.load()` or `$script.waitForLoad()`. + * - `manual` - Load the script manually by calling `load()` * - `Promise` - Load the script when the promise resolves. */ trigger?: UseScriptOptions['trigger'] | 'onNuxtReady' diff --git a/docs/content/scripts/analytics/cloudflare-web-analytics.md b/docs/content/scripts/analytics/cloudflare-web-analytics.md index ffcb6900..c63625d0 100644 --- a/docs/content/scripts/analytics/cloudflare-web-analytics.md +++ b/docs/content/scripts/analytics/cloudflare-web-analytics.md @@ -10,11 +10,11 @@ links: [Cloudflare Web Analytics](https://developers.cloudflare.com/analytics/web-analytics/) with Nuxt is a great privacy analytics solution. It offers free, privacy-centric analytics for your website. It doesn't gather personal data from your visitors, yet provides detailed insights into your web pages' performance as experienced by your visitors. -## Nuxt Config Setup - The simplest way to load Cloudflare Web Analytics globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the [useScriptCloudflareWebAnalytics](#usescriptcloudflarewebanalytics) composable. +## Loading Globally + If you'd like to avoid loading the analytics in development, you can use the [Environment overrides](https://nuxt.com/docs/getting-started/configuration#environment-overrides) in your Nuxt config. ::code-group @@ -45,13 +45,7 @@ export default defineNuxtConfig({ }) ``` -:: - -#### With Environment Variables - -If you prefer to configure your token using environment variables. - -```ts [nuxt.config.ts] +```ts [Environment Variables] export default defineNuxtConfig({ scripts: { registry: { @@ -63,7 +57,9 @@ export default defineNuxtConfig({ public: { scripts: { cloudflareWebAnalytics: { - token: '', // NUXT_PUBLIC_SCRIPTS_CLOUDFLARE_WEB_ANALYTICS_TOKEN + // .env + // NUXT_PUBLIC_SCRIPTS_CLOUDFLARE_WEB_ANALYTICS_TOKEN= + token: '', }, }, }, @@ -71,9 +67,7 @@ export default defineNuxtConfig({ }) ``` -```text [.env] -NUXT_PUBLIC_SCRIPTS_CLOUDFLARE_WEB_ANALYTICS_TOKEN= -``` +:: ## useScriptCloudflareWebAnalytics @@ -137,8 +131,8 @@ The Cloudflare Web Analytics composable injects a `window.__cfBeacon` object int to access this you can do by awaiting the script. ```ts -const { $script } = useScriptCloudflareWebAnalytics() -$script.then(({ cfBeacon }) => { +const { onLoaded } = useScriptCloudflareWebAnalytics() +onLoaded(({ cfBeacon }) => { console.log(cfBeacon) }) ``` diff --git a/docs/content/scripts/analytics/fathom-analytics.md b/docs/content/scripts/analytics/fathom-analytics.md index 0bdfbffa..ee7924d2 100644 --- a/docs/content/scripts/analytics/fathom-analytics.md +++ b/docs/content/scripts/analytics/fathom-analytics.md @@ -10,12 +10,14 @@ links: [Fathom Analytics](https://usefathom.com/) is a great privacy analytics solution for your Nuxt app. It doesn't gather personal data from your visitors, yet provides detailed insights into how your site is used. -## Nuxt Config +## Loading Globally The simplest way to load Fathom Analytics globally in your Nuxt App is to use your Nuxt config, providing your site ID as a string. -```ts [nuxt.config.ts] +::code-group + +```ts [Always enabled] export default defineNuxtConfig({ scripts: { registry: { @@ -27,11 +29,7 @@ export default defineNuxtConfig({ }) ``` -If you'd like to avoid loading the analytics in development, you can conditionally set the config. - -```ts [nuxt.config.ts] -import { isDevelopment } from 'std-env' - +```ts [Production only] export default defineNuxtConfig({ $production: { scripts: { @@ -45,11 +43,8 @@ export default defineNuxtConfig({ }) ``` -### With Environment Variables - -If you prefer to configure your token using environment variables. -```ts [nuxt.config.ts] +```ts [Environment Variables] export default defineNuxtConfig({ scripts: { registry: { @@ -61,7 +56,9 @@ export default defineNuxtConfig({ public: { scripts: { fathomAnalytics: { - token: '', // NUXT_PUBLIC_SCRIPTS_FATHOM_ANALYTICS_SITE + // .env + // NUXT_PUBLIC_SCRIPTS_FATHOM_ANALYTICS_SITE= + token: '', }, }, }, @@ -69,9 +66,7 @@ export default defineNuxtConfig({ }) ``` -```text [.env] -NUXT_PUBLIC_SCRIPTS_FATHOM_ANALYTICS_SITE= -``` +:: ## Composable `useScriptFathomAnalytics` @@ -142,16 +137,15 @@ to use the proxy for any void functions. ::code-group ```ts [Proxy] -const { trackGoal } = useScriptFathomAnalytics() - +const { proxy } = useScriptFathomAnalytics() function trackMyGoal() { - trackGoal('MY_GOAL_ID', 100) + proxy.trackGoal('MY_GOAL_ID', 100) } ``` -```ts [Await Promise] -const { $script } = useScriptFathomAnalytics() -$script.then(({ trackGoal }) => { +```ts [onLoaded] +const { onLoaded } = useScriptFathomAnalytics() +onLoaded(({ trackGoal }) => { trackGoal('MY_GOAL_ID', 100) }) ``` diff --git a/docs/content/scripts/analytics/google-analytics.md b/docs/content/scripts/analytics/google-analytics.md index 57a83899..0096c5cc 100644 --- a/docs/content/scripts/analytics/google-analytics.md +++ b/docs/content/scripts/analytics/google-analytics.md @@ -16,11 +16,11 @@ This composable is generated with [GoogleChromeLabs/third-party-capital](https:/ It provides detailed insights into how your website is performing, how users are interacting with your content, and how they are navigating through your site. -### Nuxt Config Setup - The simplest way to load Google Analytics globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the [useScriptGoogleAnalytics](#useScriptGoogleAnalytics) composable. +### Loading Globally + If you don't plan to send custom events you can use the [Environment overrides](https://nuxt.com/docs/getting-started/configuration#environment-overrides) to disable the script in development. @@ -52,13 +52,7 @@ export default defineNuxtConfig({ }) ``` -:: - -#### With Environment Variables - -If you prefer to configure your id using environment variables. - -```ts [nuxt.config.ts] +```ts [Environment Variables] export default defineNuxtConfig({ scripts: { registry: { @@ -70,7 +64,9 @@ export default defineNuxtConfig({ public: { scripts: { googleAnalytics: { - id: '', // NUXT_PUBLIC_SCRIPTS_GOOGLE_ANALYTICS_ID + // .env + // NUXT_PUBLIC_SCRIPTS_GOOGLE_ANALYTICS_ID= + id: '', }, }, }, @@ -78,16 +74,14 @@ export default defineNuxtConfig({ }) ``` -```text [.env] -NUXT_PUBLIC_SCRIPTS_GOOGLE_ANALYTICS_ID= -``` +:: ## useScriptGoogleAnalytics The `useScriptGoogleAnalytics` composable lets you have fine-grain control over when and how Google Analytics is loaded on your site. ```ts -const { gtag, $script } = useScriptGoogleAnalytics({ +const googleAnalytics = useScriptGoogleAnalytics({ id: 'YOUR_ID' }) ``` @@ -146,13 +140,13 @@ Using Google Analytics only in production while using `gtag` to send a conversio ```vue [ConversionButton.vue] @@ -165,20 +159,4 @@ function sendConversion() { ``` -```ts [nuxt.config.ts Mock development] -import { isDevelopment } from 'std-env' - -export default defineNuxtConfig({ - scripts: { - registry: { - googleAnalytics: isDevelopment - ? 'mock' // script won't load unless manually calling load() - : { - id: 'YOUR_ID', - }, - }, - }, -}) -``` - :: diff --git a/docs/content/scripts/analytics/matomo-analytics.md b/docs/content/scripts/analytics/matomo-analytics.md index 7f67d454..8563e61a 100644 --- a/docs/content/scripts/analytics/matomo-analytics.md +++ b/docs/content/scripts/analytics/matomo-analytics.md @@ -12,11 +12,11 @@ links: It provides detailed insights into how your website is performing, how users are interacting with your content, and how they are navigating through your site. -### Nuxt Config Setup - The simplest way to load Matomo Analytics globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the [useScriptMatomoAnalytics](#useScriptMatomoAnalytics) composable. +## Loading Globally + If you don't plan to send custom events you can use the [Environment overrides](https://nuxt.com/docs/getting-started/configuration#environment-overrides) to disable the script in development. @@ -48,13 +48,7 @@ export default defineNuxtConfig({ }) ``` -:: - -#### With Environment Variables - -If you prefer to configure your id using environment variables. - -```ts [nuxt.config.ts] +```ts [Environment Variables] export default defineNuxtConfig({ scripts: { registry: { @@ -66,6 +60,8 @@ export default defineNuxtConfig({ public: { scripts: { matomoAnalytics: { + // .env + // NUXT_PUBLIC_SCRIPTS_MATOMO_ANALYTICS_SITE_ID= siteId: '', // NUXT_PUBLIC_SCRIPTS_MATOMO_ANALYTICS_SITE_ID }, }, @@ -74,17 +70,15 @@ export default defineNuxtConfig({ }) ``` -```text [.env] -NUXT_PUBLIC_SCRIPTS_MATOMO_ANALYTICS_SITE_ID= -``` +:: ## useScriptMatomoAnalytics The `useScriptMatomoAnalytics` composable lets you have fine-grain control over when and how Matomo Analytics is loaded on your site. ```ts -const { _paq, $script } = useScriptMatomoAnalytics({ - matomoUrl: 'YOUR_MATOMO_URL' +const matomoAnalytics = useScriptMatomoAnalytics({ + matomoUrl: 'YOUR_MATOMO_URL', siteId: 'YOUR_SITE_ID' }) ``` @@ -104,8 +98,9 @@ interface MatomoAnalyticsApi { You must provide the options when setting up the script for the first time. ```ts +// matomoUrl and site are required export const MatomoAnalyticsOptions = object({ - matomoUrl: string(), // site is required + matomoUrl: string(), siteId: string(), trackPageView: optional(boolean()), enableLinkTracking: optional(boolean()), @@ -120,12 +115,12 @@ Using Matomo Analytics only in production while using `_paq` to send a conversio ```vue [ConversionButton.vue] @@ -138,20 +133,4 @@ function sendConversion() { ``` -```ts [nuxt.config.ts Mock development] -import { isDevelopment } from 'std-env' - -export default defineNuxtConfig({ - scripts: { - registry: { - matomoAnalytics: isDevelopment - ? 'mock' // script won't load unless manually calling load() - : { - siteId: 'YOUR_SITE_ID', - }, - }, - }, -}) -``` - :: diff --git a/docs/content/scripts/analytics/plausible-analytics.md b/docs/content/scripts/analytics/plausible-analytics.md index d0b709ba..bb13189c 100644 --- a/docs/content/scripts/analytics/plausible-analytics.md +++ b/docs/content/scripts/analytics/plausible-analytics.md @@ -10,11 +10,11 @@ links: [Plausible Analytics](https://plausible.io/) is a privacy-friendly analytics solution for Nuxt Apps, allowing you to track your website's traffic without compromising your users' privacy. -### Nuxt Config Setup - The simplest way to load Plausible Analytics globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the [useScriptPlausibleAnalytics](#useScriptPlausibleAnalytics) composable. +## Loading Globally + If you don't plan to send custom events you can use the [Environment overrides](https://nuxt.com/docs/getting-started/configuration#environment-overrides) to disable the script in development. @@ -46,13 +46,7 @@ export default defineNuxtConfig({ }) ``` -:: - -#### With Environment Variables - -If you prefer to configure your id using environment variables. - -```ts [nuxt.config.ts] +```ts [Environment Variables] export default defineNuxtConfig({ scripts: { registry: { @@ -64,7 +58,9 @@ export default defineNuxtConfig({ public: { scripts: { plausibleAnalytics: { - domain: '', // NUXT_PUBLIC_SCRIPTS_PLAUSIBLE_ANALYTICS_DOMAIN + // .env + // NUXT_PUBLIC_SCRIPTS_PLAUSIBLE_ANALYTICS_DOMAIN= + domain: '' }, }, }, @@ -72,20 +68,14 @@ export default defineNuxtConfig({ }) ``` -```text [.env] -NUXT_PUBLIC_SCRIPTS_PLAUSIBLE_ANALYTICS_DOMAIN= -``` - ## useScriptPlausibleAnalytics The `useScriptPlausibleAnalytics` composable lets you have fine-grain control over when and how Plausible Analytics is loaded on your site. ```ts -const { plausible, $script } = useScriptPlausibleAnalytics({ +const plausible = useScriptPlausibleAnalytics({ domain: 'YOUR_DOMAIN' }) -// example -plausible('event', { name: 'conversion' }) ``` Please follow the [Registry Scripts](/docs/guides/registry-scripts) guide to learn more about advanced usage. @@ -134,13 +124,13 @@ Using Plausible Analytics only in production while using `plausible` to send a c ```vue [ConversionButton.vue] @@ -153,20 +143,4 @@ function sendConversion() { ``` -```ts [nuxt.config.ts Mock development] -import { isDevelopment } from 'std-env' - -export default defineNuxtConfig({ - scripts: { - registry: { - plausibleAnalytics: isDevelopment - ? 'mock' // script won't load unless manually calling load() - : { - domain: 'YOUR_DOMAIN', - }, - }, - }, -}) -``` - :: diff --git a/docs/content/scripts/content/google-maps.md b/docs/content/scripts/content/google-maps.md index 7098ab1f..17b85d6c 100644 --- a/docs/content/scripts/content/google-maps.md +++ b/docs/content/scripts/content/google-maps.md @@ -363,12 +363,12 @@ Loading the Google Maps SDK and interacting with it programmatically. ```vue diff --git a/test/fixtures/basic/pages/mouseover-trigger.vue b/test/fixtures/basic/pages/mouseover-trigger.vue index 69ef05e9..753ddd9f 100644 --- a/test/fixtures/basic/pages/mouseover-trigger.vue +++ b/test/fixtures/basic/pages/mouseover-trigger.vue @@ -2,7 +2,7 @@ import { ref, useScriptTriggerElement, useScript } from '#imports' const trigger = ref() -const { myScript, $script } = useScript<{ myScript: (arg: string) => void }>('/myScript.js', { +const { myScript, status } = useScript<{ myScript: (arg: string) => void }>('/myScript.js', { trigger: useScriptTriggerElement({ trigger: 'mouseover', el: trigger, @@ -24,7 +24,7 @@ myScript('test') Load script when seen!
- {{ $script.status }} + {{ status }}
diff --git a/test/fixtures/basic/pages/tpc/ga.vue b/test/fixtures/basic/pages/tpc/ga.vue index 73686db4..740d67da 100644 --- a/test/fixtures/basic/pages/tpc/ga.vue +++ b/test/fixtures/basic/pages/tpc/ga.vue @@ -6,11 +6,11 @@ useHead({ }) // composables return the underlying api as a proxy object and a $script with the script state -const { gtag, $script } = useScriptGoogleAnalytics({ +const { proxy, status } = useScriptGoogleAnalytics({ id: 'G-TR58L0EF8P', }) function triggerConversion() { - gtag('event', 'conversion') + proxy.gtag('event', 'conversion') } @@ -18,7 +18,7 @@ function triggerConversion() {
- status: {{ $script.status.value }} + status: {{ status }}