support string height in VirtualList

Author: TutorLatin

package-lock.json

@@ -31,23 +31,23 @@
 		"@sveltejs/package": "^2.3.10",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@types/eslint": "^9.6.1",
-		"beercss": "^3.8.0",
-		"eslint": "^9.17.0",
-		"eslint-config-prettier": "9.1.0",
-		"eslint-plugin-svelte": "2.46.0",
-		"marked": "12.0.2",
+		"beercss": "^3.9.6",
+		"eslint": "^9.21.0",
+		"eslint-config-prettier": "10.0.2",
+		"eslint-plugin-svelte": "3.0.2",
+		"marked": "15.0.7",
 		"marked-base-url": "1.1.6",
-		"marked-gfm-heading-id": "3.2.0",
-		"prettier": "3.4.1",
-		"prettier-plugin-svelte": "3.2.8",
-		"publint": "0.2.12",
-		"svelte": "4.2.19",
-		"svelte-check": "3.8.6",
-		"svelte-infinite-loading": "1.3.8",
-		"tslib": "2.6.3",
-		"typescript": "5.3.3",
-		"vite": "5.1.8",
-		"vitest": "1.6.1"
+		"marked-gfm-heading-id": "4.1.1",
+		"prettier": "3.5.2",
+		"prettier-plugin-svelte": "3.3.3",
+		"publint": "0.3.7",
+		"svelte": "5.20.5",
+		"svelte-check": "4.1.4",
+		"svelte-infinite-loading": "1.4.0",
+		"tslib": "2.8.1",
+		"typescript": "5.8.2",
+		"vite": "6.2.0",
+		"vitest": "3.0.7"
 	},
 	"files": [
 		"dist",
@@ -66,7 +66,7 @@
 	"engines": {
 		"node": ">=18"
 	},
-	"packageManager": "pnpm@9.0.6",
+	"packageManager": "pnpm@10.5.2",
 	"keywords": [
 		"svelte",
 		"virtual",

package.json

@@ -34,6 +34,9 @@
 	let wrapperStyle = $state.raw('');
 	let innerStyle = $state.raw('');
 
+	let wrapperHeight = $state(400);
+	let wrapperWidth = $state(400);
+
 	let items = $state.raw([]);
 
 	const _props = new ListProps(
@@ -66,7 +69,7 @@
 
 	// Effect 1: Update props from user provided props
 	$effect(() => {
-		_props.listen(scrollToIndex, scrollToAlignment, scrollOffset, itemCount, itemSize, estimatedItemSize, height, width, stickyIndices);
+		_props.listen(scrollToIndex, scrollToAlignment, scrollOffset, itemCount, itemSize, estimatedItemSize, Number.isFinite(height) ? height : wrapperHeight, Number.isFinite(width) ? width : wrapperWidth, stickyIndices);
 
 		untrack(() => {
 			let doRecomputeSizes = false;
@@ -109,7 +112,7 @@
 
 	const refresh = () => {
 		const { start, stop } = sizeAndPositionManager.getVisibleRange({
-			containerSize: scrollDirection === DIRECTION.VERTICAL ? height : width,
+			containerSize: scrollDirection === DIRECTION.VERTICAL ? _props.height : _props.width,
 			offset: _state.offset,
 			overscanCount
 		});
@@ -179,7 +182,7 @@
 
 		return sizeAndPositionManager.getUpdatedOffsetForIndex({
 			align,
-			containerSize: scrollDirection === DIRECTION.VERTICAL ? height : width,
+			containerSize: scrollDirection === DIRECTION.VERTICAL ? _props.height : _props.width,
 			currentOffset: _state.offset || 0,
 			targetIndex: index
 		});
@@ -232,6 +235,8 @@
 
 <div
 	bind:this={wrapper}
+	bind:offsetHeight={wrapperHeight}
+	bind:offsetWidth={wrapperWidth}
 	class="virtual-list-wrapper"
 	style={wrapperStyle}
 >

src/lib/VirtualList.svelte

@@ -18,8 +18,8 @@ export class ListProps {
         itemCount: 0,
         itemSize: 0,
         estimatedItemSize: 50,
-        height: 600,
-        width: "100%",
+        height: 400,
+        width: 400,
         stickyIndices: []
     });
 
@@ -83,10 +83,10 @@ export class ListProps {
         if (typeof estimatedItemSize === "number")
             this.estimatedItemSize = estimatedItemSize || this.itemSize || 50;
 
-        if (typeof height === "number" || typeof height === "string")
+        if (typeof height === "number")
             this.height = height;
 
-        if (typeof width === "number" || typeof width === "string")
+        if (typeof width === "number")
             this.width = width;
 
         if (Array.isArray(stickyIndices))