fix(script)!: eventContext option, skip onabort, onprogress events

unjs · Mar 23, 2024 · 335f419 · 335f419
1 parent 7cba505
commit 335f419
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 23 deletions.
diff --git a/packages/schema/src/script.ts b/packages/schema/src/script.ts
@@ -39,4 +39,10 @@ export interface UseScriptOptions<T> extends Omit<HeadEntryOptions, 'transform'>
    * - `Promise` - Load the script when the promise resolves.
    */
   trigger?: 'idle' | 'manual' | Promise<void>
+  trigger?: 'manual' | Promise<void>
+  /**
+   * Context to run events with. This is useful in Vue to attach the current instance context before
+   * calling the event, allowing the event to be reactive.
+   */
+  eventContext?: any
 }
diff --git a/packages/shared/src/script.ts b/packages/shared/src/script.ts
@@ -1 +1,2 @@
 export const NetworkEvents = ['onload', 'onerror', 'onabort', 'onprogress', 'onloadstart']
+export const ScriptNetworkEvents = ['onload', 'onerror', 'onloadstart']
diff --git a/packages/unhead/src/composables/useScript.ts b/packages/unhead/src/composables/useScript.ts
@@ -1,4 +1,4 @@
-import { NetworkEvents, hashCode } from '@unhead/shared'
+import { ScriptNetworkEvents, hashCode } from '@unhead/shared'
 import type {
   DomRenderTagContext,
   Head,
@@ -84,16 +84,14 @@ export function useScript<T>(_input: UseScriptInput, _options?: UseScriptOptions
   })
 
   const hookCtx = { script }
-
-  NetworkEvents.forEach((fn) => {
-    // clone fn
-    const _fn = typeof input[fn] === 'function' ? input[fn].bind({}) : null
-    input[fn] = (e: Event) => {
-      script.status = fn === 'onload' ? 'loaded' : fn === 'onerror' ? 'error' : 'loading'
-      head.hooks.callHook(`script:updated`, hookCtx)
-      _fn && _fn(e)
-    }
-  })
+  ScriptNetworkEvents
+    .forEach((fn) => {
+      input[fn] = (e: Event) => {
+        script.status = fn === 'onload' ? 'loaded' : fn === 'onerror' ? 'error' : 'loading'
+        head.hooks.callHook(`script:updated`, hookCtx)
+        typeof input[fn] === 'function' && input[fn].call(options.eventContext, e)
+      }
+    })
 
   const trigger = options.trigger
   if (options.trigger)

diff --git a/packages/vue/src/composables/useScript.ts b/packages/vue/src/composables/useScript.ts
@@ -22,22 +22,12 @@ export type UseScriptInput = string | (MaybeComputedRefEntriesOnly<Omit<ScriptBa
 export function useScript<T>(_input: UseScriptInput, _options?: UseScriptOptions<T>): T & { $script: VueScriptInstance<T> } {
   const input = typeof _input === 'string' ? { src: _input } : _input
   const head = injectHead()
-  const ctx = getCurrentInstance()
   const options = _options || {}
   // @ts-expect-error untyped
   options.head = head
+  options.eventContext = getCurrentInstance()
   const status = ref('awaitingLoad')
 
-  NetworkEvents.forEach((fn) => {
-    // @ts-expect-error untyped
-    const _fn = typeof input[fn] === 'function' ? input[fn].bind(ctx) : null
-    // rebinding the events for the vue context
-    if (_fn) {
-      // @ts-expect-error untyped
-      input[fn] = (e: Event) => _fn(e)
-    }
-  })
-
   options.stub = ({ script, fn }) => {
     if (fn === '$script') {
       return Object.assign(script, {

diff --git a/test/unhead/dom/useScript.test.ts b/test/unhead/dom/useScript.test.ts
@@ -13,7 +13,7 @@ describe('dom useScript', () => {
     expect(await useDelayedSerializedDom()).toMatchInlineSnapshot(`
       "<!DOCTYPE html><html><head>
 
-      <script data-onload="" data-onerror="" data-onabort="" data-onprogress="" data-onloadstart="" defer="" fetchpriority="low" src="https://cdn.example.com/script.js" data-hid="438d65b"></script></head>
+      <script data-onload="" data-onerror="" data-onloadstart="" defer="" fetchpriority="low" src="https://cdn.example.com/script.js" data-hid="438d65b"></script></head>
       <body>
 
       <div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export const NetworkEvents = ['onload', 'onerror', 'onabort', 'onprogress', 'onloadstart']
		export const ScriptNetworkEvents = ['onload', 'onerror', 'onloadstart']