fix!: rename useElementScriptTrigger, useConsentScriptTrigger, useAnalyticsPageEvent

harlan-zw · harlan-zw · commit 038d891502c5 · 2024-07-06T20:18:52.000+10:00
diff --git a/docs/content/docs/1.getting-started/3.confetti-tutorial.md b/docs/content/docs/1.getting-started/3.confetti-tutorial.md
@@ -168,7 +168,7 @@ addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
 
 You can delay the loading of the script by using the `trigger` option. This can be useful if you want to load the script after a certain event or time.
 
-In this example we'll combine the [useElementScriptTrigger](/docs/api/use-element-script-trigger) composable with the `useScriptNpm` composable to load the script after a certain element is in view.
+In this example we'll combine the [useScriptTriggerElement](/docs/api/use-script-trigger-element) composable with the `useScriptNpm` composable to load the script after a certain element is in view.
 
 ```vue [app.vue]
 <script setup lang="ts">
@@ -178,7 +178,7 @@ const { addConfetti } = useScriptNpm<{ addConfetti: (options?: { emojis: string[
   file: 'dist/js-confetti.browser.js',
   version: '0.12.0',
   scriptOptions: {
-    trigger: useElementScriptTrigger({ trigger: 'mouseover', el: mouseOverEl })
+    trigger: useScriptTriggerElement({ trigger: 'mouseover', el: mouseOverEl })
   }
 })
 addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
diff --git a/docs/content/docs/1.guides/1.script-triggers.md b/docs/content/docs/1.guides/1.script-triggers.md
@@ -46,14 +46,14 @@ By default, scripts are loaded when Nuxt is fully hydrated. You can change this
 
 ## Element Event Triggers
 
-The [useElementScriptTrigger](/docs/api/use-element-script-trigger) composable allows you to hook into element events as a way to load script. This is useful for loading scripts when a user interacts with a specific element.
+The [useScriptTriggerElement](/docs/api/use-script-trigger-element) composable allows you to hook into element events as a way to load script. This is useful for loading scripts when a user interacts with a specific element.
 
 ```ts
 const somethingEl = ref<HTMLElement>()
 const { trigger } = useScript({
   src: 'https://example.com/script.js',
 }, {
-  trigger: useElementScriptTrigger({
+  trigger: useScriptTriggerElement({
     trigger: 'hover',
     somethingEl,
   })
diff --git a/docs/content/docs/1.guides/3.consent.md b/docs/content/docs/1.guides/3.consent.md
@@ -5,24 +5,24 @@ description: Learn how to get user consent before loading scripts.
 
 ## Background
 
-Many third-party scripts include tracking cookies that require user consent under privacy laws. Nuxt Scripts simplifies this process with the [useConsentScriptTrigger](/docs/api/use-consent-script-trigger) composable, allowing scripts to be loaded only after receiving user consent.
+Many third-party scripts include tracking cookies that require user consent under privacy laws. Nuxt Scripts simplifies this process with the [useScriptTriggerConsent](/docs/api/use-script-trigger-consent) composable, allowing scripts to be loaded only after receiving user consent.
 
 ## Usage
 
-The [useConsentScriptTrigger](/docs/api/use-consent-script-trigger) composable offers flexible interaction options suitable for various scenarios.
+The [useScriptTriggerConsent](/docs/api/use-script-trigger-consent) composable offers flexible interaction options suitable for various scenarios.
 
-See the [API](/docs/api/use-consent-script-trigger) docs for full details on the available options.
+See the [API](/docs/api/use-script-trigger-consent) docs for full details on the available options.
 
 ### Accepting as a Function
 
-The easiest way to make use of `useConsentScriptTrigger` is by invoking the `accept` method when user consent is granted.
+The easiest way to make use of `useScriptTriggerConsent` is by invoking the `accept` method when user consent is granted.
 
 For an example of how you might lay out your code to handle this, see the following:
 
 ::code-group
 
 ```ts [utils/cookie.ts]
-export const agreedToCookiesScriptConsent = useConsentScriptTrigger()
+export const agreedToCookiesScriptConsent = useScriptTriggerConsent()
 ```
 
 ```vue [app.vue]
@@ -51,12 +51,12 @@ import { agreedToCookiesScriptConsent } from '#imports'
 
 ### Accepting as a resolvable boolean
 
-Alternatively, you can pass a reactive reference to the consent state to the `useConsentScriptTrigger` composable. This will automatically load the script when the consent state is `true`.
+Alternatively, you can pass a reactive reference to the consent state to the `useScriptTriggerConsent` composable. This will automatically load the script when the consent state is `true`.
 
 ```ts
 const agreedToCookies = ref(false)
 useScript('https://www.google-analytics.com/analytics.js', {
-  trigger: useConsentScriptTrigger({
+  trigger: useScriptTriggerConsent({
     consent: agreedToCookies
   })
 })
@@ -71,7 +71,7 @@ For this you can use the `postConsentTrigger`, which shares the same API as `tri
 ```ts
 const agreedToCookies = ref(false)
 useScript('https://www.google-analytics.com/analytics.js', {
-  trigger: useConsentScriptTrigger({
+  trigger: useScriptTriggerConsent({
     consent: agreedToCookies,
     // load 3 seconds after consent is granted
     postConsentTrigger: new Promise<void>(resolve => setTimeout(resolve, 3000))
diff --git a/docs/content/docs/1.guides/3.page-events.md b/docs/content/docs/1.guides/3.page-events.md
@@ -8,9 +8,9 @@ description: Learn how to send page events to your analytics provider.
 When using tracking scripts, it's common to send an event when the page changes. Due to Nuxt's head implementation being
 async, the page title is not always available on route change immediately.
 
-Nuxt Scripts provides the [useAnalyticsPageEvent](/docs/api/use-analytics-page-event) composable to solve this problem.
+Nuxt Scripts provides the [useScriptEventPage](/docs/api/use-script-event-page) composable to solve this problem.
 
-See the [API](/docs/api/use-analytics-page-event) docs for full details on the available options.
+See the [API](/docs/api/use-script-event-page) docs for full details on the available options.
 
 ### Usage
 
@@ -22,7 +22,7 @@ You can use this with any analytics provider where you're seeing the page title
 ```ts
 const { gtag } = useScriptGoogleAnalytics()
 
-useAnalyticsPageEvent(({ title, path }) => {
+useScriptEventPage(({ title, path }) => {
   // triggered on route change
   gtag('event', 'page_view', {
     page_title: title,
diff --git a/docs/content/docs/3.api/3.use-script-trigger-consent.md b/docs/content/docs/3.api/3.use-script-trigger-consent.md
@@ -1,10 +1,10 @@
 ---
-title: useConsentScriptTrigger
-description: API documentation for the useConsentScriptTrigger function.
+title: useScriptTriggerConsent
+description: API documentation for the useScriptTriggerConsent function.
 links:
   - label: Source
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/scripts/blob/main/src/runtime/composables/useConsentScriptTrigger.ts
+    to: https://github.com/nuxt/scripts/blob/main/src/runtime/composables/useScriptTriggerConsent.ts
     size: xs
 ---
 
@@ -13,7 +13,7 @@ Load a script once consent has been provided either through a resolvable `consen
 ## Signature
 
 ```ts
-function useConsentScriptTrigger(options?: ConsentScriptTriggerOptions): UseConsentScriptTriggerApi {}
+function useScriptTriggerConsent(options?: ConsentScriptTriggerOptions): UseConsentScriptTriggerApi {}
 ```
 
 ## Arguments
@@ -50,7 +50,7 @@ interface UseConsentScriptTriggerApi extends Promise<void> {
 
 ```vue [app.vue]
 <script setup lang="ts">
-const trigger = useConsentScriptTrigger()
+const trigger = useScriptTriggerConsent()
 useScript('https://example.com/script.js', { trigger })
 </script>
 
diff --git a/docs/content/docs/3.api/3.use-script-trigger-element.md b/docs/content/docs/3.api/3.use-script-trigger-element.md
@@ -1,10 +1,10 @@
 ---
-title: useElementScriptTrigger
-description: API documentation for the useElementScriptTrigger function.
+title: useScriptTriggerElement
+description: API documentation for the useScriptTriggerElement function.
 links:
   - label: Source
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/scripts/blob/main/src/runtime/composables/useElementScriptTrigger.ts
+    to: https://github.com/nuxt/scripts/blob/main/src/runtime/composables/useScriptTriggerElement.ts
     size: xs
 ---
 
@@ -13,7 +13,7 @@ Create a trigger for an element to load a script based on specific element event
 ## Signature
 
 ```ts
-function useElementScriptTrigger(options: ElementScriptTriggerOptions): Promise<void> {}
+function useScriptTriggerElement(options: ElementScriptTriggerOptions): Promise<void> {}
 ```
 
 ## Arguments
@@ -44,7 +44,7 @@ A promise that resolves when the script is loaded.
 <script setup lang="ts">
 const el = ref<HTMLElement>()
 useScript('/script.js', {
-  trigger: useElementScriptTrigger({
+  trigger: useScriptTriggerElement({
     trigger: 'visible',
     el,
   })
@@ -67,7 +67,7 @@ useScript('/script.js', {
 <script setup lang="ts">
 const el = ref<HTMLElement>()
 useScript('/script.js', {
-  trigger: useElementScriptTrigger({
+  trigger: useScriptTriggerElement({
     trigger: 'hover',
     el,
   })
diff --git a/docs/content/docs/3.api/4.use-script-event-page.md b/docs/content/docs/3.api/4.use-script-event-page.md
@@ -1,10 +1,10 @@
 ---
-title: useAnalyticsPageEvent
-description: API documentation for the useAnalyticsPageEvent function.
+title: useScriptEventPage
+description: API documentation for the useScriptEventPage function.
 links:
   - label: Source
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/scripts/blob/main/src/runtime/composables/useAnalyticsPageEvent.ts
+    to: https://github.com/nuxt/scripts/blob/main/src/runtime/composables/useScriptEventPage.ts
     size: xs
 ---
 
@@ -13,7 +13,7 @@ Access the current page title and path and trigger an event when they change.
 ## Signature
 
 ```ts
-function useAnalyticsPageEvent(callback?: (title: string, path: string) => void): Ref<{ title: string, path: string }> {}
+function useScriptEventPage(callback?: (title: string, path: string) => void): Ref<{ title: string, path: string }> {}
 ```
 
 #### Arguments
@@ -30,7 +30,7 @@ A ref containing the current page title and path.
 
 ```vue
 <script setup lang="ts">
-useAnalyticsPageEvent((ctx) => {
+useScriptEventPage((ctx) => {
   console.log(ctx.title, ctx.path)
 })
 </script>
diff --git a/playground/pages/npm/js-confetti.vue b/playground/pages/npm/js-confetti.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { ref, useElementScriptTrigger, useScriptNpm } from '#imports'
+import { ref, useScriptTriggerElement, useScriptNpm } from '#imports'
 
 const mouseOverEl = ref()
 const { addConfetti } = useScriptNpm<JSConfettiApi>({
   packageName: 'js-confetti',
   file: 'dist/js-confetti.browser.js',
   version: '0.12.0',
   scriptOptions: {
-    trigger: useElementScriptTrigger({ trigger: 'mouseover', el: mouseOverEl }),
+    trigger: useScriptTriggerElement({ trigger: 'mouseover', el: mouseOverEl }),
     bundle: true,
     use() {
       return typeof window.JSConfetti !== 'undefined' && new window.JSConfetti()
diff --git a/src/runtime/components/ScriptCarbonAds.vue b/src/runtime/components/ScriptCarbonAds.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { withQuery } from 'ufo'
-import { onBeforeUnmount, onMounted, ref, useElementScriptTrigger } from '#imports'
+import { onBeforeUnmount, onMounted, ref, useScriptTriggerElement } from '#imports'
 import type { ElementScriptTrigger } from '#nuxt-scripts'
 
 const props = defineProps<{
@@ -50,7 +50,7 @@ onMounted(() => {
     loadCarbon()
   }
   else {
-    useElementScriptTrigger({ trigger: props.trigger, el: carbonadsEl })
+    useScriptTriggerElement({ trigger: props.trigger, el: carbonadsEl })
   }
 })
 
diff --git a/src/runtime/components/ScriptCrisp.vue b/src/runtime/components/ScriptCrisp.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptCrisp } from '../registry/crisp'
 import { ref, onMounted, onBeforeUnmount, watch } from '#imports'
 import type { ElementScriptTrigger } from '#nuxt-scripts'
@@ -27,7 +27,7 @@ const emits = defineEmits<{
 }>()
 
 const rootEl = ref(null)
-const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
 
 const isReady = ref(false)
 const crisp = useScriptCrisp({
diff --git a/src/runtime/components/ScriptGoogleAdsense.vue b/src/runtime/components/ScriptGoogleAdsense.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptGoogleAdsense } from '../registry/google-adsense'
 import { callOnce, onMounted, ref, watch } from '#imports'
 import type { ElementScriptTrigger } from '#nuxt-scripts'
@@ -25,7 +25,7 @@ const emits = defineEmits<{
 }>()
 
 const rootEl = ref(null)
-const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
 
 const instance = useScriptGoogleAdsense({
   client: props.dataAdClient,
diff --git a/src/runtime/components/ScriptGoogleMaps.vue b/src/runtime/components/ScriptGoogleMaps.vue
@@ -7,7 +7,7 @@ import type { QueryObject } from 'ufo'
 import { defu } from 'defu'
 import type { ElementScriptTrigger } from '../types'
 import { scriptRuntimeConfig } from '../utils'
-import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptGoogleMaps } from '../registry/google-maps'
 import { resolveComponent, useHead } from '#imports'
 
@@ -101,7 +101,7 @@ const mapEl = ref<HTMLElement>()
 const { $script } = useScriptGoogleMaps({
   apiKey: props.apiKey,
   scriptOptions: {
-    trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
+    trigger: useScriptTriggerElement({ trigger: props.trigger, el: rootEl }),
   },
 })
 
diff --git a/src/runtime/components/ScriptIntercom.vue b/src/runtime/components/ScriptIntercom.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useScriptIntercom } from '../registry/intercom'
-import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { ref, onMounted, watch, onBeforeUnmount } from '#imports'
 import type { ElementScriptTrigger } from '#nuxt-scripts'
 
@@ -29,7 +29,7 @@ const emits = defineEmits<{
 }>()
 
 const rootEl = ref(null)
-const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
 
 const isReady = ref(false)
 const intercom = useScriptIntercom({
diff --git a/src/runtime/components/ScriptLemonSqueezy.vue b/src/runtime/components/ScriptLemonSqueezy.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { ElementScriptTrigger } from '../types'
-import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptLemonSqueezy } from '../registry/lemon-squeezy'
 import type { LemonSqueezyEventPayload } from '../registry/lemon-squeezy'
 import { onMounted, ref } from '#imports'
@@ -19,7 +19,7 @@ const emits = defineEmits<{
 const rootEl = ref<HTMLElement | null>(null)
 const instance = useScriptLemonSqueezy({
   scriptOptions: {
-    trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
+    trigger: useScriptTriggerElement({ trigger: props.trigger, el: rootEl }),
   },
 })
 onMounted(() => {
diff --git a/src/runtime/components/ScriptStripePricingTable.vue b/src/runtime/components/ScriptStripePricingTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { ElementScriptTrigger } from '../types'
-import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScript } from '../composables/useScript'
 import { onBeforeUnmount, onMounted, watch } from '#imports'
 
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 const rootEl = ref<HTMLDivElement | undefined>()
 const containerEl = ref<HTMLDivElement | undefined>()
 const instance = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
-  trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
+  trigger: useScriptTriggerElement({ trigger: props.trigger, el: rootEl }),
 })
 const { $script } = instance
 
diff --git a/src/runtime/components/ScriptVimeoPlayer.vue b/src/runtime/components/ScriptVimeoPlayer.vue
@@ -4,7 +4,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type { HTMLAttributes, ImgHTMLAttributes } from 'vue'
 import { defu } from 'defu'
 import type { ElementScriptTrigger } from '../types'
-import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptVimeoPlayer } from '../registry/vimeo-player'
 import { useAsyncData, useHead } from '#imports'
 
@@ -114,7 +114,7 @@ const events: (keyof TEmits)[] = [
 const elVimeo = ref()
 const rootEl = ref()
 
-const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
 let clickTriggered = false
 if (props.trigger === 'mousedown') {
   trigger.then(() => {
diff --git a/src/runtime/components/ScriptYouTubePlayer.vue b/src/runtime/components/ScriptYouTubePlayer.vue
@@ -4,7 +4,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import type { HTMLAttributes, ImgHTMLAttributes, Ref } from 'vue'
 import { defu } from 'defu'
 import type { ElementScriptTrigger } from '../types'
-import { useElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptYouTubePlayer } from '../registry/youtube-player'
 import { useHead } from '#imports'
 
@@ -43,7 +43,7 @@ const events: (keyof YT.Events)[] = [
 const rootEl = ref()
 const youtubeEl = ref()
 const ready = ref(false)
-const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
 const { $script } = useScriptYouTubePlayer({
   scriptOptions: {
     trigger,
diff --git a/src/runtime/composables/useScriptEventPage.ts b/src/runtime/composables/useScriptEventPage.ts
@@ -1,7 +1,7 @@
 import { injectHead, ref, useNuxtApp, useRoute } from '#imports'
 import type { TrackedPage } from '#nuxt-scripts'
 
-export function useAnalyticsPageEvent(onChange?: (payload: TrackedPage) => void) {
+export function useScriptEventPage(onChange?: (payload: TrackedPage) => void) {
   const nuxt = useNuxtApp()
   const route = useRoute()
   const head = injectHead()
diff --git a/src/runtime/composables/useScriptTriggerConsent.ts b/src/runtime/composables/useScriptTriggerConsent.ts
diff --git a/src/runtime/composables/useScriptTriggerElement.ts b/src/runtime/composables/useScriptTriggerElement.ts
diff --git a/test/fixtures/basic/pages/mouseover-trigger.vue b/test/fixtures/basic/pages/mouseover-trigger.vue
diff --git a/test/fixtures/basic/pages/visibility-trigger.vue b/test/fixtures/basic/pages/visibility-trigger.vue

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<script setup lang="ts">`
`2`	`2`	`import { withQuery } from 'ufo'`
`3`		`-import { onBeforeUnmount, onMounted, ref, useElementScriptTrigger } from '#imports'`
	`3`	`+import { onBeforeUnmount, onMounted, ref, useScriptTriggerElement } from '#imports'`
`4`	`4`	`import type { ElementScriptTrigger } from '#nuxt-scripts'`
`5`	`5`
`6`	`6`	`const props = defineProps<{`
`@@ -50,7 +50,7 @@ onMounted(() => {`
`50`	`50`	`loadCarbon()`
`51`	`51`	`}`
`52`	`52`	`else {`
`53`		`- useElementScriptTrigger({ trigger: props.trigger, el: carbonadsEl })`
	`53`	`+ useScriptTriggerElement({ trigger: props.trigger, el: carbonadsEl })`
`54`	`54`	`}`
`55`	`55`	`})`
`56`	`56`