Merge pull request #12 from svecosystem/event-listener-refactor

update stuff
svecosystem · Apr 22, 2024 · a0c0c15 · a0c0c15
2 parents e6b2b5e + 4d2a745
commit a0c0c15
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 13 deletions.
diff --git a/.changeset/big-pets-nail.md b/.changeset/big-pets-nail.md
@@ -0,0 +1,5 @@
+---
+"runed": patch
+---
+
+allow undefined | null in useEventListener
diff --git a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts
@@ -3,14 +3,14 @@ import { boxed } from "$lib/internal/utils/boxed.svelte.js";
 import { addEventListener } from "$lib/internal/utils/event.js";
 
 export function useEventListener<TEvent extends keyof WindowEventMap>(
-	target: ValueOrGetter<Window>,
+	target: ValueOrGetter<Window | null | undefined>,
 	event: TEvent,
 	handler: (this: Window, event: WindowEventMap[TEvent]) => unknown,
 	options?: boolean | AddEventListenerOptions
 ): void;
 
 export function useEventListener<TEvent extends keyof DocumentEventMap>(
-	target: ValueOrGetter<Document>,
+	target: ValueOrGetter<Document | null | undefined>,
 	event: TEvent,
 	handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown,
 	options?: boolean | AddEventListenerOptions
@@ -20,26 +20,29 @@ export function useEventListener<
 	TElement extends HTMLElement,
 	TEvent extends keyof HTMLElementEventMap,
 >(
-	target: ValueOrGetter<TElement>,
+	target: ValueOrGetter<TElement | null | undefined>,
 	event: TEvent,
 	handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown,
 	options?: boolean | AddEventListenerOptions
 ): void;
 
 export function useEventListener(
-	target: ValueOrGetter<EventTarget>,
+	target: ValueOrGetter<EventTarget | null | undefined>,
 	event: string,
 	handler: EventListenerOrEventListenerObject,
 	options?: boolean | AddEventListenerOptions
 ): void;
 
 export function useEventListener(
-	_target: ValueOrGetter<EventTarget>,
+	_target: ValueOrGetter<EventTarget | null | undefined>,
 	event: string,
 	handler: EventListenerOrEventListenerObject,
 	options?: boolean | AddEventListenerOptions
 ) {
 	const target = boxed(_target);
 
-	$effect(() => addEventListener(target.value, event, handler, options));
+	$effect(() => {
+		if (target.value === undefined || target.value === null) return;
+		return addEventListener(target.value, event, handler, options);
+	});
 }
diff --git a/sites/docs/content/functions/use-active-element.md b/sites/docs/content/functions/use-active-element.md
@@ -1,5 +1,5 @@
 ---
-title: UseActiveElement
+title: useActiveElement
 description: A function that returns the currently active element.
 ---
 

diff --git a/sites/docs/content/functions/use-event-listener.md b/sites/docs/content/functions/use-event-listener.md
@@ -1,5 +1,5 @@
 ---
-title: UseEventListener
+title: useEventListener
 description: A function that attaches an automatically disposed event listener.
 ---
 
@@ -22,8 +22,11 @@ import { UseEventListenerDemo } from '$lib/components/demos';
 		count++;
 	}
 
-	useEventListener(() => document, "click", increment);
+	let wrapper = $state<HTMLElement>();
+	useEventListener(() => wrapper, "click", increment);
 </script>
 
-<p>You've clicked {count} {count === 1 ? "Time" : "Times"}</p>
+<div bind:this={wrapper}>
+	<p>You've clicked {count} {count === 1 ? "time" : "times"}</p>
+</div>
 ```
diff --git a/sites/docs/src/lib/components/demos/use-event-listener.svelte b/sites/docs/src/lib/components/demos/use-event-listener.svelte
@@ -6,9 +6,10 @@
 		count++;
 	}
 
-	useEventListener(() => document, "click", increment);
+	let wrapper = $state<HTMLElement>();
+	useEventListener(() => wrapper, "click", increment);
 </script>
 
-<div class="select-none rounded-md bg-card p-8">
-	<p>You've clicked {count} {count === 1 ? "Time" : "Times"}</p>
+<div class="select-none rounded-md bg-card p-8" bind:this={wrapper}>
+	<p>You've clicked {count} {count === 1 ? "time" : "times"}</p>
 </div>