with element size

packages/withrunes/src/lib/functions/index.ts

@@ -1 +1,2 @@
 export * from "./withDebounce.svelte.js";
+export * from "./withElementSize.svelte.js";

packages/withrunes/src/lib/functions/withElementSize.svelte.ts

@@ -0,0 +1,43 @@
+import type { ValueOrGetter } from "$lib/internal/types.js";
+import { boxed } from "$lib/internal/utils/boxed.svelte.js";
+
+type Options = {
+	initialSize?: {
+		width: number;
+		height: number;
+	};
+	box?: "content-box" | "border-box";
+};
+
+export function withElementSize(
+	_node: ValueOrGetter<HTMLElement | undefined>,
+	options: Options = {
+		box: "border-box",
+	}
+) {
+	const node = boxed(_node);
+	const size = $state({
+		width: options.initialSize?.width ?? 0,
+		height: options.initialSize?.height ?? 0,
+	});
+
+	$effect(() => {
+		if (!node.value) return;
+
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const boxSize = options.box === "content-box" ? entry.contentBoxSize : entry.borderBoxSize;
+				const boxSizeArr = Array.isArray(boxSize) ? boxSize : [boxSize];
+				size.width = boxSizeArr.reduce((acc, size) => Math.max(acc, size.inlineSize), 0);
+				size.height = boxSizeArr.reduce((acc, size) => Math.max(acc, size.blockSize), 0);
+			}
+		});
+		observer.observe(node.value);
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	return size;
+}

packages/withrunes/src/lib/internal/types.ts

@@ -1,4 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type FunctionArgs<Args extends any[] = any[], Return = void> = (...args: Args) => Return;
 
+export type Getter<T> = () => T;
 export type ValueOrGetter<T> = T | (() => T);

packages/withrunes/src/lib/internal/utils/boxed.svelte.ts

@@ -0,0 +1,10 @@
+import type { ValueOrGetter } from "../types.js";
+import { isFunction } from "./is.js";
+
+export function boxed<T>(value: ValueOrGetter<T>) {
+	return {
+		get value() {
+			return isFunction(value) ? value() : value;
+		},
+	};
+}

packages/withrunes/src/lib/internal/utils/is.ts

@@ -0,0 +1,3 @@
+export function isFunction(value: unknown): value is (...args: unknown[]) => unknown {
+	return typeof value === "function";
+}

sites/docs/content/functions/with-element-size.md

@@ -0,0 +1,44 @@
+---
+title: WithElementSize
+description: A higher-order function that debounces the execution of a function.
+---
+
+<script>
+import { WithElementSizeDemo } from '$lib/components/demos';
+</script>
+
+## Demo
+
+<WithElementSizeDemo />
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { withElementSize } from "withrunes";
+
+	let count = $state(0);
+	let logged = $state("");
+	let isFirstTime = $state(true);
+
+	const logCount = withElementSize(() => {
+		if (isFirstTime) {
+			isFirstTime = false;
+			logged = `You pressed the button ${count} times!`;
+		} else {
+			logged = `You pressed the button ${count} times since last time!`;
+		}
+		count = 0;
+	}, 1000);
+
+	function ding() {
+		count++;
+		logCount();
+	}
+</script>
+
+<div>
+	<button onclick={ding}>DING DING DING</button>
+	<p>{logged || "Press the button!"}</p>
+</div>
+```

sites/docs/src/lib/components/demos/index.ts

@@ -1 +1,2 @@
 export { default as WithDebounceDemo } from "./with-debounce.svelte";
+export { default as WithElementSizeDemo } from "./with-element-size.svelte";

sites/docs/src/lib/components/demos/with-element-size.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { withElementSize } from "withrunes";
+
+	let el: HTMLElement | undefined = $state(undefined);
+	const size = withElementSize(() => el);
+	const text = $derived(`Width: ${size.width}\nHeight: ${size.height}`);
+</script>
+
+<div class="bg-card rounded-md p-8">
+	<textarea
+		bind:this={el}
+		class="h-[200px] min-h-[100px] w-[300px] min-w-[200px] resize rounded-md bg-neutral-800 p-4"
+		value={text}
+	/>
+</div>

sites/docs/src/lib/config/navigation.ts

@@ -66,6 +66,11 @@ export const navigation: Navigation = {
 					href: "/docs/functions/with-debounce",
 					items: [],
 				},
+				{
+					title: "withElementSize",
+					href: "/docs/functions/with-element-size",
+					items: [],
+				},
 			],
 		},
 	],