fix(scripts): duplicate event registrations

unjs · Mar 13, 2024 · 52023da · 52023da
1 parent 1c6d9b5
commit 52023da
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/packages/dom/src/renderDOMHead.ts b/packages/dom/src/renderDOMHead.ts
@@ -90,11 +90,11 @@ export async function renderDOMHead<T extends Unhead<any>>(head: T, options: Ren
     }
     // we need to attach event listeners as they can have side effects such as onload
     for (const [k, value] of Object.entries(tag._eventHandlers || {})) {
-      // avoid overriding
-      ;(tag!.tag === 'bodyAttrs' ? dom!.defaultView! : $el)!.addEventListener(
-        k.replace('on', ''),
-        value.bind($el),
-      )
+      if ($el.getAttribute(`data-${k}`) !== '') {
+        // avoid overriding
+        (tag!.tag === 'bodyAttrs' ? dom!.defaultView! : $el).addEventListener(k.replace('on', ''), value.bind($el))
+        $el.setAttribute(`data-${k}`, '')
+      }
     }
     Object.entries(tag.props).forEach(([k, value]) => {
       const ck = `attr:${k}`

diff --git a/test/unhead/dom/eventHandlers.test.ts b/test/unhead/dom/eventHandlers.test.ts
@@ -20,7 +20,7 @@ describe('dom event handlers', () => {
     expect(await useDelayedSerializedDom()).toMatchInlineSnapshot(`
       "<!DOCTYPE html><html><head>
 
-      <script src="https://js.stripe.com/v3/" defer=""></script></head>
+      <script data-onload="" src="https://js.stripe.com/v3/" defer=""></script></head>
       <body>
 
       <div>

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 defer="" fetchpriority="low" src="https://cdn.example.com/script.js" data-hid="438d65b"></script></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>
       <body>
 
       <div>

diff --git a/test/vue/dom/events.test.ts b/test/vue/dom/events.test.ts
@@ -28,7 +28,7 @@ describe('vue events', () => {
       "<!DOCTYPE html><html><head>
 
       </head>
-      <body>
+      <body data-onresize="">
 
       <div>
       <h1>hello world</h1>
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,7 @@ describe('vue events', () => { @@
           "<!DOCTYPE html><html><head>
           </head>
-          <body>
+          <body data-onresize="">
           <div>
           <h1>hello world</h1>
@@ Expand Down @@