fix(script): address lifecycle review findings

Author: harlan-zw

packages/script/src/devtools.ts

@@ -1,6 +1,7 @@
 import type { Nuxt } from '@nuxt/schema'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import type { ProxyConfig, RegistryScript } from './runtime/types'
+import { Buffer } from 'node:buffer'
 import { existsSync } from 'node:fs'
 import { createResolver, extendViteConfig } from '@nuxt/kit'
 
@@ -82,7 +83,7 @@ export function setupStandaloneApi(nuxt: Nuxt) {
       }
 
       if (req.method === 'POST') {
-        let body = ''
+        let chunks: Buffer[] = []
         let size = 0
         let finished = false
 
@@ -94,7 +95,7 @@ export function setupStandaloneApi(nuxt: Nuxt) {
         }
         function onAborted() {
           finished = true
-          body = ''
+          chunks = []
           cleanup()
         }
         function onData(chunk: Buffer) {
@@ -103,7 +104,7 @@ export function setupStandaloneApi(nuxt: Nuxt) {
           size += chunk.byteLength
           if (size > DEVTOOLS_API_MAX_BODY_SIZE) {
             finished = true
-            body = ''
+            chunks = []
             cleanup()
             // Drain the remainder so the keep-alive connection can be reused.
             // `cleanup()` removed the normal error handler, so keep one listener
@@ -114,15 +115,15 @@ export function setupStandaloneApi(nuxt: Nuxt) {
             res.end('payload too large')
             return
           }
-          body += chunk.toString()
+          chunks.push(chunk)
         }
         function onEnd() {
           if (finished)
             return
           finished = true
           cleanup()
           try {
-            const data = JSON.parse(body)
+            const data = JSON.parse(Buffer.concat(chunks, size).toString('utf8'))
             scriptsState = { ...data, updatedAt: Date.now() }
             res.statusCode = 200
             res.end('ok')
@@ -131,7 +132,7 @@ export function setupStandaloneApi(nuxt: Nuxt) {
             res.statusCode = 400
             res.end('invalid json')
           }
-          body = ''
+          chunks = []
         }
 
         req.on('data', onData)

packages/script/src/runtime/components/ScriptCarbonAds.vue

@@ -85,10 +85,6 @@ onBeforeUnmount(() => {
     scriptEl.remove()
     scriptEl = undefined
   }
-  if (carbonadsEl.value) {
-    carbonadsEl.value.remove()
-    carbonadsEl.value = null
-  }
 })
 </script>
 

packages/script/src/runtime/components/ScriptLemonSqueezy.vue

@@ -1,9 +1,35 @@
 <script lang="ts">
-let activeLemonSqueezyOwner: symbol | undefined
+import type { LemonSqueezyApi, LemonSqueezyEventPayload } from '../registry/lemon-squeezy'
+
+type LemonSqueezyHandler = (event: LemonSqueezyEventPayload) => void
+
+const lemonSqueezyHandlers = new Map<symbol, LemonSqueezyHandler>()
+const dispatchLemonSqueezyEvent: LemonSqueezyHandler = (event) => {
+  for (const handler of [...lemonSqueezyHandlers.values()])
+    handler(event)
+}
+
+function registerLemonSqueezyHandler(
+  owner: symbol,
+  handler: LemonSqueezyHandler,
+  setup: LemonSqueezyApi['Setup'],
+) {
+  lemonSqueezyHandlers.set(owner, handler)
+  // Lemon.js replaces its global handler on load and reload. Reinstall the
+  // stable dispatcher each time while retaining every live subscriber.
+  setup({ eventHandler: dispatchLemonSqueezyEvent })
+}
+
+function unregisterLemonSqueezyHandler(owner: symbol) {
+  const removed = lemonSqueezyHandlers.delete(owner)
+  if (!removed || lemonSqueezyHandlers.size > 0)
+    return
+  if (import.meta.client && typeof window.LemonSqueezy?.Setup === 'function')
+    window.LemonSqueezy.Setup({ eventHandler() {} })
+}
 </script>
 
 <script lang="ts" setup>
-import type { LemonSqueezyEventPayload } from '../registry/lemon-squeezy'
 import type { ElementScriptTrigger } from '../types'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
@@ -40,27 +66,15 @@ onMounted(() => {
   instance.onLoaded(({ Setup, Refresh }) => {
     if (disposed)
       return
-    Setup({
-      eventHandler(event) {
-        emits('lemonSqueezyEvent', event)
-      },
-    })
-    activeLemonSqueezyOwner = owner
+    registerLemonSqueezyHandler(owner, event => emits('lemonSqueezyEvent', event), Setup)
     Refresh()
     emits('ready', instance)
   })
 })
 
 onBeforeUnmount(() => {
   disposed = true
-  // Lemon.js `Setup()` stores a single global `eventHandler`, which captures
-  // this component's `emits` (and therefore the instance). Setup() replaces
-  // rather than appends. Only the component that most recently installed the
-  // handler may clear it; an older instance can unmount after a newer one.
-  if (activeLemonSqueezyOwner === owner && import.meta.client && typeof window.LemonSqueezy?.Setup === 'function') {
-    window.LemonSqueezy.Setup({ eventHandler() {} })
-    activeLemonSqueezyOwner = undefined
-  }
+  unregisterLemonSqueezyHandler(owner)
 })
 
 const rootAttrs = computed(() => {

packages/script/src/runtime/registry/usercentrics.ts

@@ -1,9 +1,8 @@
 import type { RegistryScriptInput, UseScriptContext } from '#nuxt-scripts/types'
 import { useHead } from '@unhead/vue'
 import { useNuxtApp } from 'nuxt/app'
-import { logger } from '../logger'
 import { useRegistryScript } from '../utils'
-import { createAbortablePromise, createAbortError } from '../utils/abortable-promise'
+import { attachUsercentricsConsent } from '../utils/usercentrics-consent'
 import { UsercentricsOptions } from './schemas'
 
 export { UsercentricsOptions }
@@ -81,95 +80,6 @@ export interface UsercentricsConsent {
   denyAll: () => Promise<void> | void
 }
 
-interface UsercentricsEventTarget {
-  __ucCmp?: UsercentricsCmp
-  addEventListener: Window['addEventListener']
-  removeEventListener: Window['removeEventListener']
-}
-
-type HookAppUnmount = (callback: () => void) => () => void
-
-export function attachUsercentricsConsent<T extends UsercentricsApi>(
-  instance: UseScriptContext<T, UsercentricsConsent>,
-  target: UsercentricsEventTarget,
-  hookAppUnmount: HookAppUnmount,
-): void {
-  if (instance.consent)
-    return
-
-  let readyApi: UsercentricsCmp | undefined
-  let readyPromise: Promise<UsercentricsCmp> | undefined
-  const readyController = new AbortController()
-  let disposed = false
-  const cleanupReadyListener = () => {
-    if (disposed)
-      return
-    disposed = true
-    readyController.abort()
-  }
-  const whenReady = (): Promise<UsercentricsCmp> => {
-    if (disposed)
-      return Promise.reject(createAbortError('Usercentrics readiness wait was aborted'))
-    if (readyApi)
-      return Promise.resolve(readyApi)
-    if (!readyPromise) {
-      // Install the event listener before checking isInitialized() so an
-      // event fired during that async check cannot be missed.
-      readyPromise = createAbortablePromise<UsercentricsCmp>((resolve) => {
-        const onReady = () => {
-          const api = target.__ucCmp
-          if (!api)
-            return
-          readyApi = api
-          resolve(api)
-        }
-        target.addEventListener('UC_CMP_API_READY', onReady)
-        const api = target.__ucCmp
-        if (api?.isInitialized) {
-          Promise.resolve()
-            .then(() => api.isInitialized())
-            .then((initialized) => {
-              if (initialized && !readyController.signal.aborted)
-                onReady()
-            })
-            .catch((error) => {
-              // Some bootstrap stubs throw until the ready event; the event
-              // listener remains the authoritative readiness signal.
-              if (!readyController.signal.aborted)
-                logger.debug('[usercentrics] Waiting for UC_CMP_API_READY after isInitialized() failed', error)
-            })
-        }
-        return () => target.removeEventListener('UC_CMP_API_READY', onReady)
-      }, {
-        signal: readyController.signal,
-        abortMessage: 'Usercentrics readiness wait was aborted',
-      })
-    }
-    return readyPromise
-  }
-
-  const stopAppUnmount = hookAppUnmount(cleanupReadyListener)
-  const originalRemove = instance.remove
-  instance.remove = () => {
-    cleanupReadyListener()
-    stopAppUnmount()
-    return originalRemove()
-  }
-
-  instance.consent = {
-    whenReady,
-    onConsentChange(cb) {
-      const handler = (event: Event) => cb((event as CustomEvent).detail, event)
-      target.addEventListener('UC_UI_CMP_EVENT', handler)
-      return () => target.removeEventListener('UC_UI_CMP_EVENT', handler)
-    },
-    showFirstLayer: () => target.__ucCmp?.showFirstLayer?.(),
-    showSecondLayer: () => target.__ucCmp?.showSecondLayer?.(),
-    acceptAll: () => target.__ucCmp?.acceptAllConsents?.(),
-    denyAll: () => target.__ucCmp?.denyAllConsents?.(),
-  }
-}
-
 /**
  * Load the Usercentrics CMP v3 ("Web CMP") loader and expose typed access to
  * the `window.__ucCmp` programmatic API plus a `consent` helper with

packages/script/src/runtime/registry/youtube-player.ts

@@ -4,7 +4,7 @@ import { useHead } from '@unhead/vue'
 /// <reference types="youtube" />
 import { watch } from 'vue'
 import { useRegistryScript } from '../utils'
-import { createAbortablePromise } from '../utils/abortable-promise'
+import { armYouTubeReadiness, useYouTubeReadinessState } from '../utils/youtube-readiness'
 
 export interface YouTubePlayerApi {
   YT: MaybePromise<{
@@ -37,19 +37,19 @@ declare global {
 
 export type YouTubePlayerInput = RegistryScriptInput
 const cleanupDecoration = Symbol('nuxt-scripts:youtube-cleanup')
+const readinessDecoration = Symbol('nuxt-scripts:youtube-readiness')
 
 export function useScriptYouTubePlayer<T extends YouTubePlayerApi>(_options: YouTubePlayerInput): UseScriptContext<T> {
-  let readyPromise: Promise<void> = Promise.resolve()
-  let readyController: AbortController | undefined
   const instance = useRegistryScript<T>('youtubePlayer', () => ({
     scriptInput: {
       src: 'https://www.youtube.com/iframe_api',
       crossorigin: false, // crossorigin can't be set or it breaks
     },
     scriptOptions: {
       use() {
+        const readiness = useYouTubeReadinessState()
         return {
-          YT: window.YT || readyPromise.then(() => {
+          YT: window.YT || readiness.promise.then(() => {
             return window.YT
           }),
         }
@@ -58,49 +58,21 @@ export function useScriptYouTubePlayer<T extends YouTubePlayerApi>(_options: You
     clientInit: import.meta.server
       ? undefined
       : () => {
-          readyController?.abort()
-          readyController = new AbortController()
-          readyPromise = createAbortablePromise((resolve) => {
-            const previousReady = window.onYouTubeIframeAPIReady
-            let onReady: () => void
-            const restoreReady = () => {
-              if (window.onYouTubeIframeAPIReady !== onReady)
-                return
-              if (previousReady)
-                window.onYouTubeIframeAPIReady = previousReady
-              else
-                delete (window as any).onYouTubeIframeAPIReady
-            }
-            onReady = () => {
-              restoreReady()
-              try {
-                previousReady?.()
-              }
-              catch (error) {
-                if (import.meta.dev)
-                  console.error('[nuxt-scripts] Previous onYouTubeIframeAPIReady handler failed:', error)
-              }
-              finally {
-                resolve()
-              }
-            }
-            window.onYouTubeIframeAPIReady = onReady
-            return restoreReady
-          }, {
-            signal: readyController.signal,
-            abortMessage: 'YouTube API readiness wait was aborted',
-          })
-          // Removal can reject readiness before any caller has requested YT.
-          // Mark the internal promise handled while preserving rejection for
-          // consumers that do await the promise returned by `use()`.
-          void readyPromise.then(undefined, () => undefined)
+          armYouTubeReadiness(useYouTubeReadinessState())
         },
   }), _options)
-  if (import.meta.client && !(instance as any)[cleanupDecoration]) {
-    ;(instance as any)[cleanupDecoration] = true
+  const clientInstance = import.meta.server || typeof window === 'undefined'
+    ? undefined
+    : instance as UseScriptContext<T> & {
+      [cleanupDecoration]?: boolean
+      [readinessDecoration]?: ReturnType<typeof useYouTubeReadinessState>
+    }
+  if (clientInstance && !clientInstance[cleanupDecoration]) {
+    clientInstance[cleanupDecoration] = true
+    clientInstance[readinessDecoration] = useYouTubeReadinessState()
     const originalRemove = instance.remove
     instance.remove = () => {
-      readyController?.abort()
+      clientInstance[readinessDecoration]?.controller?.abort()
       return originalRemove()
     }
   }