fix(useScript): singleton abort promise

Fixes nuxt/scripts#291
unjs · Oct 14, 2024 · 7a026f4 · 7a026f4
1 parent 8fd2a67
commit 7a026f4
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/packages/schema/src/script.ts b/packages/schema/src/script.ts
@@ -33,7 +33,11 @@ export interface ScriptInstance<T extends BaseScriptApi> {
   /**
    * @internal
    */
-  _triggerAbortController?: AbortController
+  _triggerAbortController?: AbortController | null
+  /**
+   * @internal
+   */
+  _triggerAbortPromise?: Promise<void>
   /**
    * @internal
    */

diff --git a/packages/unhead/src/composables/useScript.ts b/packages/unhead/src/composables/useScript.ts
@@ -104,6 +104,9 @@ export function useScript<T extends Record<symbol | string, any> = Record<symbol
     id,
     status: 'awaitingLoad',
     remove() {
+      // cancel any pending triggers as we've started loading
+      script._triggerAbortController?.abort()
+      script._triggerPromises = [] // clear any pending promises
       if (script.entry) {
         script.entry.dispose()
         syncStatus('removed')
@@ -150,22 +153,33 @@ export function useScript<T extends Record<symbol | string, any> = Record<symbol
         script.load()
       }
       else if (trigger instanceof Promise) {
-        script._triggerAbortController = script._triggerAbortController || new AbortController()
         // promise triggers only work client side
         if (head.ssr) {
           return
         }
+        if (!script._triggerAbortController) {
+          script._triggerAbortController = new AbortController()
+          script._triggerAbortPromise = new Promise<void>((resolve) => {
+            script._triggerAbortController!.signal.addEventListener('abort', () => {
+              script._triggerAbortController = null
+              resolve()
+            })
+          })
+        }
         script._triggerPromises = script._triggerPromises || []
         const idx = script._triggerPromises.push(Promise.race([
           trigger.then(v => typeof v === 'undefined' || v ? script.load : undefined),
-          new Promise<void>((resolve) => {
-            script._triggerAbortController!.signal.addEventListener('abort', () => resolve())
-          }),
-        ]).then((res) => {
-          res?.()
-          // remove the promise from the list
-          script._triggerPromises?.splice(idx, 1)
-        }))
+          script._triggerAbortPromise,
+        ])
+          // OK
+          .catch(() => {})
+          .then((res) => {
+            res?.()
+          })
+          .finally(() => {
+            // remove the promise from the list
+            script._triggerPromises?.splice(idx, 1)
+          }))
       }
       else if (typeof trigger === 'function') {
         trigger(script.load)