diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts index 72bf6f2c..f463a411 100644 --- a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts +++ b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts @@ -1,5 +1,13 @@ import { isBrowser } from "$lib/internal/utils/browser.js"; + +/** + * Returns a reactive value that is equal to `document.activeElement`. + * It automatically listens for changes, keeping the reference up to date. + * + * @export + * @returns {{ value: Readonly }} + */ export function useActiveElement(): { value: Readonly } { const activeElement = $state({ value: isBrowser() ? document.activeElement : null }); diff --git a/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts b/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts index 786171df..ec21be5f 100644 --- a/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts +++ b/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts @@ -12,10 +12,6 @@ import type { FunctionArgs, ValueOrGetter } from "$lib/internal/types.js"; * The second parameter is the time to wait before calling the original callback. * Alternatively, it can also be a getter function that returns the time to wait. * - * @export - * @template {FunctionArgs} Callback - * @param {Callback} callback - * @param {number} wait */ export function useDebounce( callback: Callback, diff --git a/packages/runed/src/lib/functions/useDebounce/useDebounce.test.ts b/packages/runed/src/lib/functions/useDebounce/useDebounce.test.ts deleted file mode 100644 index 3c40f2c0..00000000 --- a/packages/runed/src/lib/functions/useDebounce/useDebounce.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { describe, expect, it } from "vitest"; - -describe("sum test", () => { - it("adds 1 + 2 to equal 3", () => { - expect(1 + 2).toBe(3); - }); -}); diff --git a/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts b/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts index de11423c..803a716c 100644 --- a/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts +++ b/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts @@ -9,20 +9,31 @@ type Options = { box?: "content-box" | "border-box"; }; + +/** + * Returns a reactive value holding the size of `node`. + * + * @export + * @param {ValueOrGetter} node + * @param {Options} [options={ + * box: "border-box", + * }] + * @returns {*} + */ export function useElementSize( - _node: ValueOrGetter, + node: ValueOrGetter, options: Options = { box: "border-box", } ) { - const node = boxed(_node); + const $node = boxed(node); const size = $state({ width: options.initialSize?.width ?? 0, height: options.initialSize?.height ?? 0, }); $effect(() => { - if (!node.value) return; + if (!$node.value) return; const observer = new ResizeObserver((entries) => { for (const entry of entries) { @@ -33,7 +44,7 @@ export function useElementSize( size.height = boxSizeArr.reduce((acc, size) => Math.max(acc, size.blockSize), 0); } }); - observer.observe(node.value); + observer.observe($node.value); return () => { observer.disconnect(); diff --git a/packages/runed/src/lib/functions/useElementSize/useElementSize.test.ts b/packages/runed/src/lib/functions/useElementSize/useElementSize.test.ts deleted file mode 100644 index 3c40f2c0..00000000 --- a/packages/runed/src/lib/functions/useElementSize/useElementSize.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { describe, expect, it } from "vitest"; - -describe("sum test", () => { - it("adds 1 + 2 to equal 3", () => { - expect(1 + 2).toBe(3); - }); -}); diff --git a/sites/docs/content/functions/use-active-element.md b/sites/docs/content/functions/use-active-element.md index 0c986d0c..4a7949f1 100644 --- a/sites/docs/content/functions/use-active-element.md +++ b/sites/docs/content/functions/use-active-element.md @@ -20,14 +20,8 @@ import { UseActiveElementDemo } from '$lib/components/demos'; const activeElement = useActiveElement(); -
-

- Currently active element: - - {activeElement.value !== null - ? activeElement.value.localName - : "No active element found"} - -

-
+

+ Currently active element: + {activeElement.value?.localName ?? 'No active element found'} +

``` diff --git a/sites/docs/src/lib/components/demos/use-active-element.svelte b/sites/docs/src/lib/components/demos/use-active-element.svelte index 469cf300..3953d1d0 100644 --- a/sites/docs/src/lib/components/demos/use-active-element.svelte +++ b/sites/docs/src/lib/components/demos/use-active-element.svelte @@ -8,9 +8,7 @@

Currently active element: - {activeElement.value !== null - ? activeElement.value.localName - : "No active element found"} + {activeElement.value?.localName ?? "No active element found"}

diff --git a/sites/docs/src/lib/components/demos/use-debounce.svelte b/sites/docs/src/lib/components/demos/use-debounce.svelte index 17df660c..2781ef55 100644 --- a/sites/docs/src/lib/components/demos/use-debounce.svelte +++ b/sites/docs/src/lib/components/demos/use-debounce.svelte @@ -23,7 +23,8 @@

{logged || "Press the button!"}