From 45eead9847d2be80bc1f059985a3d2c7acd1f9ae Mon Sep 17 00:00:00 2001 From: abdel-17 Date: Thu, 25 Apr 2024 23:16:38 +0200 Subject: [PATCH 1/5] tidy up addEventListener implementation --- .../useEventListener.svelte.ts | 1 + .../runed/src/lib/internal/utils/event.ts | 66 +++++++++---------- 2 files changed, 33 insertions(+), 34 deletions(-) diff --git a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts index 6505470a..76c75f92 100644 --- a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts +++ b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts @@ -1,6 +1,7 @@ import { box } from "../box/box.svelte.js"; import type { MaybeBoxOrGetter } from "$lib/internal/types.js"; import { addEventListener } from "$lib/internal/utils/event.js"; + export function useEventListener( target: MaybeBoxOrGetter, event: TEvent, diff --git a/packages/runed/src/lib/internal/utils/event.ts b/packages/runed/src/lib/internal/utils/event.ts index fa3f5f79..f12286f0 100644 --- a/packages/runed/src/lib/internal/utils/event.ts +++ b/packages/runed/src/lib/internal/utils/event.ts @@ -2,57 +2,55 @@ * Overloaded function signatures for addEventListener */ export function addEventListener( - target: Window, - event: TEvent, - handler: (this: Window, event: WindowEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + target: Window, + event: TEvent, + handler: (this: Window, event: WindowEventMap[TEvent]) => unknown, + options?: boolean | AddEventListenerOptions ): VoidFunction; export function addEventListener( - target: Document, - event: TEvent, - handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + target: Document, + event: TEvent, + handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown, + options?: boolean | AddEventListenerOptions ): VoidFunction; export function addEventListener< - TElement extends HTMLElement, - TEvent extends keyof HTMLElementEventMap, + TElement extends HTMLElement, + TEvent extends keyof HTMLElementEventMap, >( - target: TElement, - event: TEvent, - handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + target: TElement, + event: TEvent, + handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown, + options?: boolean | AddEventListenerOptions ): VoidFunction; export function addEventListener( - target: EventTarget, - event: string, - handler: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions + target: EventTarget, + event: string, + handler: EventListenerOrEventListenerObject, + options?: boolean | AddEventListenerOptions ): VoidFunction; /** - * Adds an event listener to the specified target element(s) for the given event(s), and returns a function to remove it. - * @param target The target element(s) to add the event listener to. - * @param event The event(s) to listen for. + * Adds an event listener to the specified target element for the given event, and returns a function to remove it. + * @param target The target element to add the event listener to. + * @param event The event 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 from the target element(s). + * @returns A function that removes the event listener from the target element. */ export function addEventListener( - target: Window | Document | EventTarget, - event: string | string[], - handler: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions + target: EventTarget, + event: string, + handler: EventListenerOrEventListenerObject, + options?: boolean | AddEventListenerOptions ) { - const events = Array.isArray(event) ? event : [event]; + // Add the event listener to each specified event for the target element. + target.addEventListener(event, handler, options); - // Add the event listener to each specified event for the target element(s). - events.forEach((_event) => target.addEventListener(_event, handler, options)); - - // Return a function that removes the event listener from the target element(s). - return () => { - events.forEach((_event) => target.removeEventListener(_event, handler, options)); - }; + // Return a function that removes the event listener from the target element(s). + return () => { + target.removeEventListener(event, handler, options); + }; } From 8560d5ddc015b860240381577ddec8105fdcf20c Mon Sep 17 00:00:00 2001 From: abdel-17 Date: Thu, 25 Apr 2024 23:27:03 +0200 Subject: [PATCH 2/5] shut up prettier --- .../runed/src/lib/internal/utils/event.ts | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/runed/src/lib/internal/utils/event.ts b/packages/runed/src/lib/internal/utils/event.ts index f12286f0..4c67e710 100644 --- a/packages/runed/src/lib/internal/utils/event.ts +++ b/packages/runed/src/lib/internal/utils/event.ts @@ -2,34 +2,34 @@ * Overloaded function signatures for addEventListener */ export function addEventListener( - target: Window, - event: TEvent, - handler: (this: Window, event: WindowEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + target: Window, + event: TEvent, + handler: (this: Window, event: WindowEventMap[TEvent]) => unknown, + options?: boolean | AddEventListenerOptions ): VoidFunction; export function addEventListener( - target: Document, - event: TEvent, - handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + target: Document, + event: TEvent, + handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown, + options?: boolean | AddEventListenerOptions ): VoidFunction; export function addEventListener< - TElement extends HTMLElement, - TEvent extends keyof HTMLElementEventMap, + TElement extends HTMLElement, + TEvent extends keyof HTMLElementEventMap, >( - target: TElement, - event: TEvent, - handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown, - options?: boolean | AddEventListenerOptions + target: TElement, + event: TEvent, + handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown, + options?: boolean | AddEventListenerOptions ): VoidFunction; export function addEventListener( - target: EventTarget, - event: string, - handler: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions + target: EventTarget, + event: string, + handler: EventListenerOrEventListenerObject, + options?: boolean | AddEventListenerOptions ): VoidFunction; /** @@ -41,16 +41,16 @@ export function addEventListener( * @returns A function that removes the event listener from the target element. */ export function addEventListener( - target: EventTarget, - event: string, - handler: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions + target: EventTarget, + event: string, + handler: EventListenerOrEventListenerObject, + options?: boolean | AddEventListenerOptions ) { - // Add the event listener to each specified event for the target element. - target.addEventListener(event, handler, options); + // Add the event listener to each specified event for the target element. + target.addEventListener(event, handler, options); - // Return a function that removes the event listener from the target element(s). - return () => { - target.removeEventListener(event, handler, options); - }; + // Return a function that removes the event listener from the target element(s). + return () => { + target.removeEventListener(event, handler, options); + }; } From a389077b6229990b9b1ee39970cdb20163d389bc Mon Sep 17 00:00:00 2001 From: abdel-17 Date: Fri, 26 Apr 2024 16:52:28 +0300 Subject: [PATCH 3/5] restore array behavior --- .../useEventListener.svelte.ts | 10 +-- .../runed/src/lib/internal/utils/event.ts | 61 +++++++++++++------ 2 files changed, 48 insertions(+), 23 deletions(-) diff --git a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts index 76c75f92..b1c53152 100644 --- a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts +++ b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts @@ -4,14 +4,14 @@ import { addEventListener } from "$lib/internal/utils/event.js"; export function useEventListener( target: MaybeBoxOrGetter, - event: TEvent, + event: TEvent | TEvent[], handler: (this: Window, event: WindowEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions ): void; export function useEventListener( target: MaybeBoxOrGetter, - event: TEvent, + event: TEvent | TEvent[], handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions ): void; @@ -21,21 +21,21 @@ export function useEventListener< TEvent extends keyof HTMLElementEventMap, >( target: MaybeBoxOrGetter, - event: TEvent, + event: TEvent | TEvent[], handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown, options?: boolean | AddEventListenerOptions ): void; export function useEventListener( target: MaybeBoxOrGetter, - event: string, + event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ): void; export function useEventListener( _target: MaybeBoxOrGetter, - event: string, + event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ) { diff --git a/packages/runed/src/lib/internal/utils/event.ts b/packages/runed/src/lib/internal/utils/event.ts index 4c67e710..c495b3f0 100644 --- a/packages/runed/src/lib/internal/utils/event.ts +++ b/packages/runed/src/lib/internal/utils/event.ts @@ -1,56 +1,81 @@ /** - * Overloaded function signatures for addEventListener + * 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, + 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, + 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, + 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: EventTarget, - event: string, + event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ): VoidFunction; -/** - * Adds an event listener to the specified target element for the given event, and returns a function to remove it. - * @param target The target element to add the event listener to. - * @param event The event 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 from the target element. - */ export function addEventListener( target: EventTarget, - event: string, + event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ) { - // Add the event listener to each specified event for the target element. - target.addEventListener(event, handler, options); + const events = Array.isArray(event) ? event : [event]; + + for (const event of events) { + target.addEventListener(event, handler, options); + } - // Return a function that removes the event listener from the target element(s). return () => { - target.removeEventListener(event, handler, options); + for (const event of events) { + target.removeEventListener(event, handler, options); + } }; } From 409ede27c02ee00643dbbcc2788231eb9508d71b Mon Sep 17 00:00:00 2001 From: abdel-17 Date: Fri, 26 Apr 2024 17:03:13 +0300 Subject: [PATCH 4/5] add jsdoc --- .../useEventListener.svelte.ts | 23 ++++++++++++++++++- .../runed/src/lib/internal/utils/event.ts | 2 +- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts index b1c53152..7e973331 100644 --- a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts +++ b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts @@ -2,6 +2,13 @@ import { box } from "../box/box.svelte.js"; import type { MaybeBoxOrGetter } from "$lib/internal/types.js"; import { addEventListener } from "$lib/internal/utils/event.js"; +/** + * 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. + */ export function useEventListener( target: MaybeBoxOrGetter, event: TEvent | TEvent[], @@ -16,6 +23,13 @@ export function useEventListener( options?: boolean | AddEventListenerOptions ): void; +/** + * 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. + */ export function useEventListener< TElement extends HTMLElement, TEvent extends keyof HTMLElementEventMap, @@ -26,6 +40,13 @@ export function useEventListener< options?: boolean | AddEventListenerOptions ): void; +/** + * 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. + */ export function useEventListener( target: MaybeBoxOrGetter, event: string | string[], @@ -38,7 +59,7 @@ export function useEventListener( event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions -) { +): void { const target = box.from(_target); $effect(() => { diff --git a/packages/runed/src/lib/internal/utils/event.ts b/packages/runed/src/lib/internal/utils/event.ts index c495b3f0..94a22626 100644 --- a/packages/runed/src/lib/internal/utils/event.ts +++ b/packages/runed/src/lib/internal/utils/event.ts @@ -66,7 +66,7 @@ export function addEventListener( event: string | string[], handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions -) { +): VoidFunction { const events = Array.isArray(event) ? event : [event]; for (const event of events) { From 5e9f3cd61f8180befa8f7215b3495252cb8ad48d Mon Sep 17 00:00:00 2001 From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com> Date: Sat, 27 Apr 2024 09:26:39 +0100 Subject: [PATCH 5/5] Create olive-rivers-try.md --- .changeset/olive-rivers-try.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/olive-rivers-try.md diff --git a/.changeset/olive-rivers-try.md b/.changeset/olive-rivers-try.md new file mode 100644 index 00000000..9ba953b1 --- /dev/null +++ b/.changeset/olive-rivers-try.md @@ -0,0 +1,5 @@ +--- +"runed": patch +--- + +Fix addEventListener overloads