fix(docs): clear event listeners before component unmounts (#7193)

Arooba-git · jacobmllr95 · web-flow · commit 9155d0036276 · 2025-03-31T08:43:28.000+02:00
* Clear event listeners before component unmounts

* fix: don't use optional chaining

---------

Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/docs/components/contributors.vue b/docs/components/contributors.vue
@@ -135,7 +135,9 @@ export default {
       }
 
       xhr.open('GET', url, true)
-      xhr.addEventListener('load', onLoad)
+      xhr.addEventListener('load', onLoad, {
+        signal: this.controller ? this.controller.signal : undefined
+      })
       // Initiate the request
       xhr.send()
     },
@@ -248,6 +250,14 @@ export default {
       // Donors are people/organizations with one-time (paid) donations
       this.makeOcRequest(this.processDonors.bind(this), { status: 'paid' })
     }
+  },
+
+  beforeDestroy() {
+    this.controller.abort()
+  },
+
+  created() {
+    this.controller = new window.AbortController()
   }
 }
 </script>
diff --git a/docs/components/quick-links.vue b/docs/components/quick-links.vue
@@ -52,10 +52,16 @@ export default {
     }
   },
   created() {
-    this.$root.$on('docs-set-toc', toc => {
+    const handleDocsSetToc = toc => {
       this.expanded = false
       // Update the TOC content
       this.toc = toc
+    }
+
+    this.$root.$on('docs-set-toc', handleDocsSetToc)
+
+    this.$once('hook:beforeDestroy', () => {
+      this.$root.$off('docs-set-toc', handleDocsSetToc)
     })
   },
   mounted() {
diff --git a/docs/components/toc.vue b/docs/components/toc.vue
@@ -57,8 +57,14 @@ export default {
     }
   },
   created() {
-    this.$root.$on('docs-set-toc', toc => {
+    const handleDocsSetToc = toc => {
       this.toc = toc
+    }
+
+    this.$root.$on('docs-set-toc', handleDocsSetToc)
+
+    this.$once('hook:beforeDestroy', () => {
+      this.$root.$off('docs-set-toc', handleDocsSetToc)
     })
   },
   mounted() {

Original file line number	Diff line number	Diff line change
`@@ -135,7 +135,9 @@ export default {`
`135`	`135`	`}`
`136`	`136`
`137`	`137`	`xhr.open('GET', url, true)`
`138`		`- xhr.addEventListener('load', onLoad)`
	`138`	`+ xhr.addEventListener('load', onLoad, {`
	`139`	`+ signal: this.controller ? this.controller.signal : undefined`
	`140`	`+ })`
`139`	`141`	`// Initiate the request`
`140`	`142`	`xhr.send()`
`141`	`143`	`},`
`@@ -248,6 +250,14 @@ export default {`
`248`	`250`	`// Donors are people/organizations with one-time (paid) donations`
`249`	`251`	`this.makeOcRequest(this.processDonors.bind(this), { status: 'paid' })`
`250`	`252`	`}`
	`253`	`+ },`
	`254`	`+`
	`255`	`+ beforeDestroy() {`
	`256`	`+ this.controller.abort()`
	`257`	`+ },`
	`258`	`+`
	`259`	`+ created() {`
	`260`	`+ this.controller = new window.AbortController()`
`251`	`261`	`}`
`252`	`262`	`}`
`253`	`263`	`</script>`