chore: remove addEventListener (#196)

Co-authored-by: Hunter Johnston <[email protected]>
Co-authored-by: Hunter Johnston <[email protected]>

.changeset/nasty-carrots-kick.md

@@ -0,0 +1,5 @@
+---
+"runed": patch
+---
+
+internal: remove `addEventListener` in favor of [on](https://svelte.dev/docs/svelte/svelte-events#on) from Svelte

packages/runed/src/lib/utilities/on-click-outside/on-click-outside.svelte.ts

@@ -5,10 +5,10 @@ import {
 } from "$lib/internal/configurable-globals.js";
 import type { MaybeElementGetter } from "$lib/internal/types.js";
 import { getActiveElement, getOwnerDocument, isOrContainsTarget } from "$lib/internal/utils/dom.js";
-import { addEventListener } from "$lib/internal/utils/event.js";
 import { noop } from "$lib/internal/utils/function.js";
 import { isElement } from "$lib/internal/utils/is.js";
 import { sleep } from "$lib/internal/utils/sleep.js";
+import { on } from "svelte/events";
 import { extract } from "../extract/extract.svelte.js";
 import { useDebounce } from "../use-debounce/use-debounce.svelte.js";
 import { watch } from "../watch/watch.svelte.js";
@@ -105,7 +105,7 @@ export function onClickOutside<T extends Element = HTMLElement>(
 			 * scrolling or dragging the page.
 			 */
 			removeClickListener();
-			removeClickListener = addEventListener(nodeOwnerDocument, "click", () => callback(e), {
+			removeClickListener = on(nodeOwnerDocument, "click", () => callback(e), {
 				once: true,
 			});
 		} else {
@@ -126,22 +126,22 @@ export function onClickOutside<T extends Element = HTMLElement>(
 			 * Mark the pointerdown event as intercepted to indicate that an interaction
 			 * has started. This helps in distinguishing between valid and invalid events.
 			 */
-			addEventListener(
+			on(
 				nodeOwnerDocument,
 				"pointerdown",
 				(e) => {
 					if (isValidEvent(e, node, nodeOwnerDocument)) {
 						pointerDownIntercepted = true;
 					}
 				},
-				true
+				{ capture: true }
 			),
 			/**
 			 * BUBBLE INTERACTION START
 			 * Mark the pointerdown event as non-intercepted. Debounce `handleClickOutside` to
 			 * avoid prematurely checking if other events were intercepted.
 			 */
-			addEventListener(nodeOwnerDocument, "pointerdown", (e) => {
+			on(nodeOwnerDocument, "pointerdown", (e) => {
 				pointerDownIntercepted = false;
 				handleClickOutside(e);
 			}),
@@ -155,7 +155,7 @@ export function onClickOutside<T extends Element = HTMLElement>(
 				 * interacts with an iframe. If the active element is an iframe and it
 				 * is not a descendant of the container, we call the callback function.
 				 */
-				addEventListener(window, "blur", async (e) => {
+				on(window, "blur", async (e) => {
 					await sleep();
 					const activeElement = getActiveElement(nodeOwnerDocument);
 					if (activeElement?.tagName === "IFRAME" && !isOrContainsTarget(node, activeElement)) {

packages/runed/src/lib/utilities/use-event-listener/use-event-listener.svelte.ts

@@ -1,6 +1,6 @@
 import { extract } from "../extract/extract.svelte.js";
 import type { MaybeGetter } from "$lib/internal/types.js";
-import { addEventListener } from "$lib/internal/utils/event.js";
+import { on } from "svelte/events";
 
 /**
  * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it.
@@ -15,7 +15,7 @@ export function useEventListener<TEvent extends keyof WindowEventMap>(
 	target: MaybeGetter<Window | null | undefined>,
 	event: MaybeGetter<TEvent | TEvent[]>,
 	handler: (this: Window, event: WindowEventMap[TEvent]) => unknown,
-	options?: boolean | AddEventListenerOptions
+	options?: AddEventListenerOptions
 ): void;
 
 /**
@@ -31,7 +31,7 @@ export function useEventListener<TEvent extends keyof DocumentEventMap>(
 	target: MaybeGetter<Document | null | undefined>,
 	event: MaybeGetter<TEvent | TEvent[]>,
 	handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown,
-	options?: boolean | AddEventListenerOptions
+	options?: AddEventListenerOptions
 ): void;
 
 /**
@@ -50,7 +50,7 @@ export function useEventListener<
 	target: MaybeGetter<TElement | null | undefined>,
 	event: MaybeGetter<TEvent | TEvent[]>,
 	handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown,
-	options?: boolean | AddEventListenerOptions
+	options?: AddEventListenerOptions
 ): void;
 
 /**
@@ -66,7 +66,7 @@ export function useEventListener<TEvent extends keyof MediaQueryListEventMap>(
 	target: MaybeGetter<MediaQueryList | null | undefined>,
 	event: MaybeGetter<TEvent | TEvent[]>,
 	handler: (this: MediaQueryList, event: MediaQueryListEventMap[TEvent]) => unknown,
-	options?: boolean | AddEventListenerOptions
+	options?: AddEventListenerOptions
 ): void;
 
 /**
@@ -81,20 +81,27 @@ export function useEventListener<TEvent extends keyof MediaQueryListEventMap>(
 export function useEventListener(
 	target: MaybeGetter<EventTarget | null | undefined>,
 	event: MaybeGetter<string | string[]>,
-	handler: EventListenerOrEventListenerObject,
-	options?: boolean | AddEventListenerOptions
+	handler: EventListener,
+	options?: AddEventListenerOptions
 ): void;
 
 export function useEventListener(
 	_target: MaybeGetter<EventTarget | null | undefined>,
 	_events: MaybeGetter<string | string[]>,
-	handler: EventListenerOrEventListenerObject,
-	options?: boolean | AddEventListenerOptions
+	handler: EventListener,
+	options?: AddEventListenerOptions
 ): void {
 	$effect(() => {
 		const target = extract(_target);
 		const events = extract(_events);
 		if (target === undefined || target === null) return;
-		return addEventListener(target, events, handler, options);
+
+		if (Array.isArray(events)) {
+			for (const event of events) {
+				$effect(() => on(target, event, handler, options));
+			}
+		} else {
+			return on(target, events, handler, options);
+		}
 	});
 }