From 9262b644cf4dbfc28cdd123f7f3db588a56f6f1d Mon Sep 17 00:00:00 2001 From: Abdelrahman Bahaa Date: Mon, 30 Dec 2024 12:45:02 +0200 Subject: [PATCH 1/3] remove IsSupported --- .../IsSupported/IsSupported.svelte.ts | 20 -------------- .../src/lib/utilities/IsSupported/index.ts | 1 - packages/runed/src/lib/utilities/index.ts | 1 - .../src/content/utilities/is-supported.md | 27 ------------------- 4 files changed, 49 deletions(-) delete mode 100644 packages/runed/src/lib/utilities/IsSupported/IsSupported.svelte.ts delete mode 100644 packages/runed/src/lib/utilities/IsSupported/index.ts delete mode 100644 sites/docs/src/content/utilities/is-supported.md diff --git a/packages/runed/src/lib/utilities/IsSupported/IsSupported.svelte.ts b/packages/runed/src/lib/utilities/IsSupported/IsSupported.svelte.ts deleted file mode 100644 index 84ff892e..00000000 --- a/packages/runed/src/lib/utilities/IsSupported/IsSupported.svelte.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { browser } from "$lib/internal/utils/browser.js"; - -/** - * A class that takes a predicate to determine if a browser API is supported. - * - * Useful for checking if a browser API is supported before attempting to use it. - * - * @see {@link https://runed.dev/docs/utilities/supported} - */ -export class IsSupported { - #current: boolean = false; - - constructor(predicate: () => unknown) { - if (browser) this.#current = Boolean(predicate()); - } - - get current(): boolean { - return this.#current; - } -} diff --git a/packages/runed/src/lib/utilities/IsSupported/index.ts b/packages/runed/src/lib/utilities/IsSupported/index.ts deleted file mode 100644 index 9f31a9a7..00000000 --- a/packages/runed/src/lib/utilities/IsSupported/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./IsSupported.svelte.js"; diff --git a/packages/runed/src/lib/utilities/index.ts b/packages/runed/src/lib/utilities/index.ts index d07dce17..ca7ed246 100644 --- a/packages/runed/src/lib/utilities/index.ts +++ b/packages/runed/src/lib/utilities/index.ts @@ -5,7 +5,6 @@ export * from "./ElementSize/index.js"; export * from "./useEventListener/index.js"; export * from "./IsIdle/index.js"; export * from "./IsMounted/index.js"; -export * from "./IsSupported/index.js"; export * from "./StateHistory/index.js"; export * from "./Previous/index.js"; export * from "./watch/index.js"; diff --git a/sites/docs/src/content/utilities/is-supported.md b/sites/docs/src/content/utilities/is-supported.md deleted file mode 100644 index bf37adb1..00000000 --- a/sites/docs/src/content/utilities/is-supported.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: IsSupported -description: Determine if a feature is supported by the environment before using it. -category: Utilities ---- - -## Usage - -```svelte - -``` - -## Type Definition - -```ts -class IsSupported { - readonly current: boolean; -} -``` From c8955c5121581890d01fc7f17df343e7be44d4c2 Mon Sep 17 00:00:00 2001 From: Abdelrahman Bahaa Date: Mon, 30 Dec 2024 12:59:37 +0200 Subject: [PATCH 2/3] remove addEventListener --- .../runed/src/lib/internal/utils/event.ts | 96 ------------------- .../onClickOutside/onClickOutside.svelte.ts | 12 +-- .../useEventListener.svelte.ts | 27 ++++-- 3 files changed, 23 insertions(+), 112 deletions(-) delete mode 100644 packages/runed/src/lib/internal/utils/event.ts 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/onClickOutside/onClickOutside.svelte.ts b/packages/runed/src/lib/utilities/onClickOutside/onClickOutside.svelte.ts index eee0c46d..191223a7 100644 --- a/packages/runed/src/lib/utilities/onClickOutside/onClickOutside.svelte.ts +++ b/packages/runed/src/lib/utilities/onClickOutside/onClickOutside.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 "../useDebounce/useDebounce.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/useEventListener/useEventListener.svelte.ts b/packages/runed/src/lib/utilities/useEventListener/useEventListener.svelte.ts index d8487c7e..c63c07ea 100644 --- a/packages/runed/src/lib/utilities/useEventListener/useEventListener.svelte.ts +++ b/packages/runed/src/lib/utilities/useEventListener/useEventListener.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); + } }); } From c9a8e271704630d37d4a8876b4eb8a697e222062 Mon Sep 17 00:00:00 2001 From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> Date: Fri, 3 Jan 2025 14:04:15 -0500 Subject: [PATCH 3/3] add changeset --- .changeset/nasty-carrots-kick.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nasty-carrots-kick.md 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