feat: use useEventListener where it was not being used (#4479)

Author: ferferga

packages/core/onClickOutside/index.ts

@@ -51,9 +51,10 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
   // How it works: https://stackoverflow.com/a/39712411
   if (isIOS && !_iOSWorkaround) {
     _iOSWorkaround = true
+    const listenerOptions = { passive: true }
     Array.from(window.document.body.children)
-      .forEach(el => el.addEventListener('click', noop))
-    window.document.documentElement.addEventListener('click', noop)
+      .forEach(el => useEventListener(el, 'click', noop, listenerOptions))
+    useEventListener(window.document.documentElement, 'click', noop, listenerOptions)
   }
 
   let shouldListen = true

packages/core/useBluetooth/index.md

@@ -47,7 +47,7 @@ This sample illustrates the use of the Web Bluetooth API to read battery level a
 Here, we use the characteristicvaluechanged event listener to handle reading battery level characteristic value. This event listener will optionally handle upcoming notifications as well.
 
 ```ts
-import { pausableWatch, useBluetooth } from '@vueuse/core'
+import { pausableWatch, useBluetooth, useEventListener } from '@vueuse/core'
 
 const {
   isSupported,
@@ -78,9 +78,9 @@ async function getBatteryLevels() {
   )
 
   // Listen to when characteristic value changes on `characteristicvaluechanged` event:
-  batteryLevelCharacteristic.addEventListener('characteristicvaluechanged', (event) => {
+  useEventListener(batteryLevelCharacteristic, 'characteristicvaluechanged', (event) => {
     batteryPercent.value = event.target.value.getUint8(0)
-  })
+  }, { passive: true })
 
   // Convert received buffer to number:
   const batteryLevel = await batteryLevelCharacteristic.readValue()

packages/core/useBluetooth/index.ts

@@ -4,6 +4,7 @@ import { tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
 import { readonly, shallowRef, watch } from 'vue'
 
 import { defaultNavigator } from '../_configurable'
+import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
 
 export interface UseBluetoothRequestDeviceOptions {
@@ -102,7 +103,7 @@ export function useBluetooth(options?: UseBluetoothOptions): UseBluetoothReturn
 
     if (device.value && device.value.gatt) {
       // Add reset fn to gattserverdisconnected event:
-      device.value.addEventListener('gattserverdisconnected', reset)
+      useEventListener(device, 'gattserverdisconnected', reset, { passive: true })
 
       try {
         // Connect to the device:

packages/core/useBroadcastChannel/index.ts

@@ -3,6 +3,7 @@ import type { ConfigurableWindow } from '../_configurable'
 import { tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
 import { ref, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
+import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
 
 export interface UseBroadcastChannelOptions extends ConfigurableWindow {
@@ -49,17 +50,21 @@ export function useBroadcastChannel<D, P>(options: UseBroadcastChannelOptions):
       error.value = null
       channel.value = new BroadcastChannel(name)
 
-      channel.value.addEventListener('message', (e: MessageEvent) => {
+      const listenerOptions = {
+        passive: true,
+      }
+
+      useEventListener(channel, 'message', (e: MessageEvent) => {
         data.value = e.data
-      }, { passive: true })
+      }, listenerOptions)
 
-      channel.value.addEventListener('messageerror', (e: MessageEvent) => {
+      useEventListener(channel, 'messageerror', (e: MessageEvent) => {
         error.value = e
-      }, { passive: true })
+      }, listenerOptions)
 
-      channel.value.addEventListener('close', () => {
+      useEventListener(channel, 'close', () => {
         isClosed.value = true
-      })
+      }, listenerOptions)
     })
   }
 

packages/core/useDisplayMedia/index.ts

@@ -3,6 +3,7 @@ import type { Ref } from 'vue'
 import type { ConfigurableNavigator } from '../_configurable'
 import { ref, shallowRef, watch } from 'vue'
 import { defaultNavigator } from '../_configurable'
+import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
 
 export interface UseDisplayMediaOptions extends ConfigurableNavigator {
@@ -43,7 +44,7 @@ export function useDisplayMedia(options: UseDisplayMediaOptions = {}) {
     if (!isSupported.value || stream.value)
       return
     stream.value = await navigator!.mediaDevices.getDisplayMedia(constraint)
-    stream.value?.getTracks().forEach(t => t.addEventListener('ended', stop))
+    stream.value?.getTracks().forEach(t => useEventListener(t, 'ended', stop, { passive: true }))
     return stream.value
   }
 

packages/core/useMediaControls/index.ts

@@ -159,6 +159,8 @@ export function useMediaControls(target: MaybeRef<HTMLMediaElement | null | unde
     document = defaultDocument,
   } = options
 
+  const listenerOptions = { passive: true }
+
   const currentTime = ref(0)
   const duration = ref(0)
   const seeking = ref(false)
@@ -265,7 +267,6 @@ export function useMediaControls(target: MaybeRef<HTMLMediaElement | null | unde
 
     // Clear the sources
     el.querySelectorAll('source').forEach((e) => {
-      e.removeEventListener('error', sourceErrorEvent.trigger)
       e.remove()
     })
 
@@ -277,7 +278,7 @@ export function useMediaControls(target: MaybeRef<HTMLMediaElement | null | unde
       source.setAttribute('type', type || '')
       source.setAttribute('media', media || '')
 
-      source.addEventListener('error', sourceErrorEvent.trigger)
+      useEventListener(source, 'error', sourceErrorEvent.trigger, listenerOptions)
 
       el.appendChild(source)
     })
@@ -286,15 +287,6 @@ export function useMediaControls(target: MaybeRef<HTMLMediaElement | null | unde
     el.load()
   })
 
-  // Remove source error listeners
-  tryOnScopeDispose(() => {
-    const el = toValue(target)
-    if (!el)
-      return
-
-    el.querySelectorAll('source').forEach(e => e.removeEventListener('error', sourceErrorEvent.trigger))
-  })
-
   /**
    * Apply composable state to the element, also when element is changed
    */
@@ -394,8 +386,6 @@ export function useMediaControls(target: MaybeRef<HTMLMediaElement | null | unde
     }
   })
 
-  const listenerOptions = { passive: true }
-
   useEventListener(
     target,
     'timeupdate',

packages/core/useMediaQuery/index.ts

@@ -2,9 +2,10 @@
 
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
-import { pxValue, tryOnScopeDispose } from '@vueuse/shared'
-import { computed, ref, toValue, watchEffect } from 'vue'
+import { pxValue } from '@vueuse/shared'
+import { computed, ref, shallowRef, toValue, watchEffect } from 'vue'
 import { defaultWindow } from '../_configurable'
+import { useEventListener } from '../useEventListener'
 import { useSSRWidth } from '../useSSRWidth'
 import { useSupported } from '../useSupported'
 
@@ -21,24 +22,14 @@ export function useMediaQuery(query: MaybeRefOrGetter<string>, options: Configur
 
   const ssrSupport = ref(typeof ssrWidth === 'number')
 
-  let mediaQuery: MediaQueryList | undefined
+  const mediaQuery = shallowRef<MediaQueryList>()
   const matches = ref(false)
 
   const handler = (event: MediaQueryListEvent) => {
     matches.value = event.matches
   }
 
-  const cleanup = () => {
-    if (!mediaQuery)
-      return
-    if ('removeEventListener' in mediaQuery)
-      mediaQuery.removeEventListener('change', handler)
-    else
-      // @ts-expect-error deprecated API
-      mediaQuery.removeListener(handler)
-  }
-
-  const stopWatch = watchEffect(() => {
+  watchEffect(() => {
     if (ssrSupport.value) {
       // Exit SSR support on mounted if window available
       ssrSupport.value = !isSupported.value
@@ -62,24 +53,11 @@ export function useMediaQuery(query: MaybeRefOrGetter<string>, options: Configur
     if (!isSupported.value)
       return
 
-    cleanup()
-
-    mediaQuery = window!.matchMedia(toValue(query))
-
-    if ('addEventListener' in mediaQuery)
-      mediaQuery.addEventListener('change', handler)
-    else
-      // @ts-expect-error deprecated API
-      mediaQuery.addListener(handler)
-
-    matches.value = mediaQuery.matches
+    mediaQuery.value = window!.matchMedia(toValue(query))
+    matches.value = mediaQuery.value.matches
   })
 
-  tryOnScopeDispose(() => {
-    stopWatch()
-    cleanup()
-    mediaQuery = undefined
-  })
+  useEventListener(mediaQuery, 'change', handler, { passive: true })
 
   return computed(() => matches.value)
 }

packages/core/useScriptTag/index.ts

@@ -3,6 +3,7 @@ import type { ConfigurableDocument } from '../_configurable'
 import { noop, tryOnMounted, tryOnUnmounted } from '@vueuse/shared'
 import { ref, toValue } from 'vue'
 import { defaultDocument } from '../_configurable'
+import { useEventListener } from '../useEventListener'
 
 export interface UseScriptTagOptions extends ConfigurableDocument {
   /**
@@ -128,14 +129,17 @@ export function useScriptTag(
     }
 
     // Event listeners
-    el.addEventListener('error', event => reject(event))
-    el.addEventListener('abort', event => reject(event))
-    el.addEventListener('load', () => {
+    const listenerOptions = {
+      passive: true,
+    }
+    useEventListener(el, 'error', event => reject(event), listenerOptions)
+    useEventListener(el, 'abort', event => reject(event), listenerOptions)
+    useEventListener(el, 'load', () => {
       el!.setAttribute('data-loaded', 'true')
 
       onLoaded(el!)
       resolveWithElement(el!)
-    })
+    }, listenerOptions)
 
     // Append the <script> tag to head.
     if (shouldAppend)

packages/guidelines.md

@@ -50,6 +50,7 @@ Learn more about the implementation: [`_configurable.ts`](https://github.com/vue
 ```ts
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
+import { useEventListener } from '../useEventListener'
 
 export function useActiveElement<T extends HTMLElement>(
   options: ConfigurableWindow = {},
@@ -63,7 +64,7 @@ export function useActiveElement<T extends HTMLElement>(
 
   // skip when in Node.js environment (SSR)
   if (window) {
-    window.addEventListener('blur', () => {
+    useEventListener(window, 'blur', () => {
       el = window?.document.activeElement
     }, true)
   }

packages/shared/useDebounceFn/index.md

@@ -12,27 +12,27 @@ Debounce execution of a function.
 ## Usage
 
 ```js
-import { useDebounceFn } from '@vueuse/core'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
 
 const debouncedFn = useDebounceFn(() => {
   // do something
 }, 1000)
 
-window.addEventListener('resize', debouncedFn)
+useEventListener(window, 'resize', debouncedFn)
 ```
 
 You can also pass a 3rd parameter to this, with a maximum wait time, similar to [lodash debounce](https://lodash.com/docs/4.17.15#debounce)
 
 ```js
-import { useDebounceFn } from '@vueuse/core'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
 
 // If no invokation after 5000ms due to repeated input,
 // the function will be called anyway.
 const debouncedFn = useDebounceFn(() => {
   // do something
 }, 1000, { maxWait: 5000 })
 
-window.addEventListener('resize', debouncedFn)
+useEventListener(window, 'resize', debouncedFn)
 ```
 
 Optionally, you can get the return value of the function using promise operations.