Merge branch 'main' into feat/event-listener

.changeset/thin-chefs-mix.md

@@ -0,0 +1,5 @@
+---
+"runed": patch
+---
+
+fix element size & improve JSDoc

packages/runed/package.json

@@ -50,7 +50,7 @@
 		"@types/node": "^20.10.6",
 		"jsdom": "^24.0.0",
 		"publint": "^0.1.9",
-		"svelte": "^5.0.0-next.75",
+		"svelte": "^5.0.0-next.110",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts

@@ -10,30 +10,30 @@ type Options = {
 };
 
 
+
 /**
  * Returns a reactive value holding the size of `node`.
- *
- * @export
- * @param {ValueOrGetter<HTMLElement | undefined>} node
- * @param {Options} [options={
- * 		box: "border-box",
- * 	}]
- * @returns {*}
+ * 
+ * Accepts an `options` object with the following properties:
+ * - `initialSize`: The initial size of the element. Defaults to `{ width: 0, height: 0 }`.
+ * - `box`: The box model to use. Can be either `"content-box"` or `"border-box"`. Defaults to `"border-box"`.
+ * 
+ * @returns an object with `width` and `height` properties.
  */
 export function useElementSize(
-	node: ValueOrGetter<HTMLElement | undefined>,
+	_node: ValueOrGetter<HTMLElement | undefined>,
 	options: Options = {
 		box: "border-box",
 	}
-) {
-	const $node = boxed(node);
+): { width: number; height: number; } {
+	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) {
@@ -44,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();