fix(useScriptTriggerConsent): prefer lazy postConsentTrigger promises

Fixes #391

Author: harlan-zw

docs/content/docs/1.guides/3.consent.md

@@ -74,7 +74,9 @@ useScript('https://www.google-analytics.com/analytics.js', {
   trigger: useScriptTriggerConsent({
     consent: agreedToCookies,
     // load 3 seconds after consent is granted
-    postConsentTrigger: new Promise<void>(resolve => setTimeout(resolve, 3000))
+    postConsentTrigger: () => new Promise<void>(resolve =>
+      setTimeout(resolve, 3000),
+    ),
   })
 })
 ```

playground/pages/issue-391.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useScriptGoogleAnalytics, useScriptTriggerConsent } from '#imports'
+
+const agreedCookies = ref(false)
+const triggerCalled = ref(false)
+
+useScriptGoogleAnalytics({
+  id: 'G-H9LK49C4ZH',
+  scriptOptions: {
+    trigger: useScriptTriggerConsent({
+      consent: agreedCookies,
+      // load 3 seconds after consent is granted
+      postConsentTrigger: () => new Promise<void>(resolve =>
+        setTimeout(resolve, 3000),
+      ),
+    }),
+  },
+})
+</script>
+
+<template>
+  <div>Post Consent Trigger is called: {{ triggerCalled }}</div>
+</template>

src/runtime/composables/useScriptTriggerConsent.ts

@@ -24,10 +24,24 @@ export function useScriptTriggerConsent(options?: ConsentScriptTriggerOptions):
     watch(consented, (ready) => {
       if (ready) {
         const runner = nuxtApp?.runWithContext || ((cb: () => void) => cb())
+        // TODO drop support in v1
         if (options?.postConsentTrigger instanceof Promise) {
           options.postConsentTrigger.then(() => runner(resolve))
           return
         }
+        if (typeof options?.postConsentTrigger === 'function') {
+          // check if function has an argument
+          if (options?.postConsentTrigger.length === 1) {
+            options.postConsentTrigger(resolve)
+            return
+          }
+          // else it's returning a promise to await
+          const val = options.postConsentTrigger()
+          if (val instanceof Promise) {
+            return val.then(() => runner(resolve))
+          }
+          return
+        }
         if (options?.postConsentTrigger === 'onNuxtReady') {
           const idleTimeout = options?.postConsentTrigger ? (nuxtApp ? onNuxtReady : requestIdleCallback) : (cb: () => void) => cb()
           runner(() => idleTimeout(resolve))
@@ -38,23 +52,22 @@ export function useScriptTriggerConsent(options?: ConsentScriptTriggerOptions):
       }
     })
     if (options?.consent) {
+      if (isRef(options?.consent)) {
+        watch(options.consent, (_val) => {
+          const val = toValue(_val)
+          consented.value = Boolean(val)
+        }, { immediate: true })
+      }
       // check for boolean primitive
-      if (typeof options?.consent === 'boolean') {
-        consented.value = true
+      else if (typeof options?.consent === 'boolean') {
+        consented.value = options?.consent
       }
       // consent is a promise
       else if (options?.consent instanceof Promise) {
         options?.consent.then((res) => {
           consented.value = typeof res === 'boolean' ? res : true
         })
       }
-      else if (isRef(options?.consent)) {
-        watch(options.consent, (_val) => {
-          const val = toValue(_val)
-          if (typeof val === 'boolean')
-            consented.value = val
-        }, { immediate: true })
-      }
     }
   }) as UseConsentScriptTriggerApi
   // we augment the promise with a consent API

src/runtime/types.ts

@@ -108,6 +108,8 @@ export interface TrackedPage {
   path: string
 }
 
+type ExcludePromises<T> = T extends Promise<any> ? never : T
+
 export interface ConsentScriptTriggerOptions {
   /**
    * An optional reactive (or promise) reference to the consent state. You can use this to accept the consent for scripts
@@ -118,7 +120,7 @@ export interface ConsentScriptTriggerOptions {
    * Should the script be loaded on the `requestIdleCallback` callback. This is useful for non-essential scripts that
    * have already been consented to be loaded.
    */
-  postConsentTrigger?: NuxtUseScriptOptions['trigger']
+  postConsentTrigger?: ExcludePromises<NuxtUseScriptOptions['trigger']> | (() => Promise<any>)
 }
 
 export interface NuxtDevToolsScriptInstance {

test/unit/consent.test.ts

@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+import { ref } from 'vue'
+import { useScriptTriggerConsent } from '../../src/runtime/composables/useScriptTriggerConsent'
+
+function getPromiseState(promise: Promise<any>) {
+  const temp = {}
+  return Promise.race([promise, temp])
+    .then(value => value === temp ? 'pending' : 'fulfilled')
+    .catch(() => 'rejected')
+}
+
+describe('consent', () => {
+  it('promise post consent trigger', async () => {
+    const consent = ref(false)
+    const triggerCalled = ref(false)
+    const p = useScriptTriggerConsent({
+      consent,
+      postConsentTrigger: () => new Promise<void>(resolve =>
+        setTimeout(resolve, 30),
+      ).then(() => (triggerCalled.value = true)),
+    })
+
+    // Check initial state
+    expect(await getPromiseState(p)).toBe('pending')
+
+    // wait 50ms
+    await new Promise(resolve => setTimeout(resolve, 50))
+    expect(await getPromiseState(p)).toBe('pending')
+    expect(triggerCalled.value).toBe(false)
+
+    consent.value = true
+
+    // await next tick
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    // only loads 30 ms after
+    expect(await getPromiseState(p)).toBe('pending')
+
+    // await 50ms
+    await new Promise(resolve => setTimeout(resolve, 50))
+
+    // should be fulfilled
+    expect(await getPromiseState(p)).toBe('fulfilled')
+
+    expect(triggerCalled.value).toBe(true)
+  }, 60000)
+  it('function post consent trigger', async () => {
+    const consent = ref(false)
+    const triggerCalled = ref(false)
+    const p = useScriptTriggerConsent({
+      consent,
+      postConsentTrigger: (fn) => {
+        // load in 30ms
+        setTimeout(() => {
+          fn()
+          triggerCalled.value = true
+        }, 30)
+      },
+    })
+
+    // Check initial state
+    expect(await getPromiseState(p)).toBe('pending')
+
+    // wait 50ms
+    await new Promise(resolve => setTimeout(resolve, 50))
+    expect(await getPromiseState(p)).toBe('pending')
+    expect(triggerCalled.value).toBe(false)
+
+    consent.value = true
+
+    // await next tick
+    await new Promise(resolve => setTimeout(resolve, 35))
+
+    // should be fulfilled
+    expect(await getPromiseState(p)).toBe('fulfilled')
+
+    expect(triggerCalled.value).toBe(true)
+  })
+})