diff --git a/.changeset/nasty-carrots-kick.md b/.changeset/nasty-carrots-kick.md new file mode 100644 index 00000000..bd779bab --- /dev/null +++ b/.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 diff --git a/packages/runed/src/lib/internal/utils/event.ts b/packages/runed/src/lib/internal/utils/event.ts deleted file mode 100644 index e81fc228..00000000 --- a/packages/runed/src/lib/internal/utils/event.ts +++ /dev/null @@ -1,96 +0,0 @@ -/** - * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it. - * @param target The target element to add the event listener to. - * @param event The event(s) to listen for. - * @param handler The function to be called when the event is triggered. - * @param options An optional object that specifies characteristics about the event listener. - * @returns A function that removes the event listener(s) from the target element. - */ -export function addEventListener( - target: Window, - event: TEvent | TEvent[], - handler: (this: Window, event: WindowEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions -): VoidFunction; - -/** - * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it. - * @param target The target element to add the event listener to. - * @param event The event(s) to listen for. - * @param handler The function to be called when the event is triggered. - * @param options An optional object that specifies characteristics about the event listener. - * @returns A function that removes the event listener(s) from the target element. - */ -export function addEventListener( - target: Document, - event: TEvent | TEvent[], - handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions -): VoidFunction; - -/** - * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it. - * @param target The target element to add the event listener to. - * @param event The event(s) to listen for. - * @param handler The function to be called when the event is triggered. - * @param options An optional object that specifies characteristics about the event listener. - * @returns A function that removes the event listener(s) from the target element. - */ -export function addEventListener< - TElement extends HTMLElement, - TEvent extends keyof HTMLElementEventMap, ->( - target: TElement, - event: TEvent | TEvent[], - handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions -): VoidFunction; - -/** - * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it. - * @param target The target element to add the event listener to. - * @param event The event(s) to listen for. - * @param handler The function to be called when the event is triggered. - * @param options An optional object that specifies characteristics about the event listener. - * @returns A function that removes the event listener(s) from the target element. - */ -export function addEventListener( - target: MediaQueryList, - event: TEvent | TEvent[], - handler: (this: MediaQueryList, event: MediaQueryListEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions -): VoidFunction; - -/** - * Adds an event listener to the specified target element for the given event(s), and returns a function to remove it. - * @param target The target element to add the event listener to. - * @param event The event(s) to listen for. - * @param handler The function to be called when the event is triggered. - * @param options An optional object that specifies characteristics about the event listener. - * @returns A function that removes the event listener(s) from the target element. - */ -export function addEventListener( - target: EventTarget, - event: string | string[], - handler: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions -): VoidFunction; - -export function addEventListener( - target: EventTarget, - event: string | string[], - handler: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions -): VoidFunction { - const events = Array.isArray(event) ? event : [event]; - - for (const event of events) { - target.addEventListener(event, handler, options); - } - - return () => { - for (const event of events) { - target.removeEventListener(event, handler, options); - } - }; -} diff --git a/packages/runed/src/lib/utilities/on-click-outside/on-click-outside.svelte.ts b/packages/runed/src/lib/utilities/on-click-outside/on-click-outside.svelte.ts index cdbdbf48..fac5da42 100644 --- a/packages/runed/src/lib/utilities/on-click-outside/on-click-outside.svelte.ts +++ b/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( * scrolling or dragging the page. */ removeClickListener(); - removeClickListener = addEventListener(nodeOwnerDocument, "click", () => callback(e), { + removeClickListener = on(nodeOwnerDocument, "click", () => callback(e), { once: true, }); } else { @@ -126,7 +126,7 @@ export function onClickOutside( * 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) => { @@ -134,14 +134,14 @@ export function onClickOutside( 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( * 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)) { diff --git a/packages/runed/src/lib/utilities/use-event-listener/use-event-listener.svelte.ts b/packages/runed/src/lib/utilities/use-event-listener/use-event-listener.svelte.ts index d8487c7e..c63c07ea 100644 --- a/packages/runed/src/lib/utilities/use-event-listener/use-event-listener.svelte.ts +++ b/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( target: MaybeGetter, event: MaybeGetter, handler: (this: Window, event: WindowEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + options?: AddEventListenerOptions ): void; /** @@ -31,7 +31,7 @@ export function useEventListener( target: MaybeGetter, event: MaybeGetter, handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + options?: AddEventListenerOptions ): void; /** @@ -50,7 +50,7 @@ export function useEventListener< target: MaybeGetter, event: MaybeGetter, handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + options?: AddEventListenerOptions ): void; /** @@ -66,7 +66,7 @@ export function useEventListener( target: MaybeGetter, event: MaybeGetter, handler: (this: MediaQueryList, event: MediaQueryListEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + options?: AddEventListenerOptions ): void; /** @@ -81,20 +81,27 @@ export function useEventListener( export function useEventListener( target: MaybeGetter, event: MaybeGetter, - handler: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions + handler: EventListener, + options?: AddEventListenerOptions ): void; export function useEventListener( _target: MaybeGetter, _events: MaybeGetter, - 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); + } }); }