refactor: fix some svelte errors

Author: jonasgeiler

src/lib/SizeAndPositionManager.js

@@ -220,9 +220,9 @@ export default class SizeAndPositionManager {
 	 * Determines a new offset that ensures a certain item is visible, given the alignment.
 	 *
 	 * @param {'auto' | 'start' | 'center' | 'end'} align Desired alignment within container
-	 * @param {number | undefined} containerSize Size (width or height) of the container viewport
-	 * @param {number | undefined} currentOffset
-	 * @param {number | undefined} targetIndex
+	 * @param {number} containerSize Size (width or height) of the container viewport
+	 * @param {number} currentOffset
+	 * @param {number} targetIndex
 	 * @return {number} Offset to use to ensure the specified item is visible
 	 */
 	getUpdatedOffsetForIndex(align, containerSize, currentOffset, targetIndex) {
@@ -259,7 +259,7 @@ export default class SizeAndPositionManager {
 	 * @param {number} containerSize
 	 * @param {number} offset
 	 * @param {number} overscanCount
-	 * @return {{start: number|undefined, end: number|undefined}}
+	 * @return {{start?: number, end?: number}}
 	 */
 	getVisibleRange(containerSize, offset, overscanCount) {
 		const totalSize = this.getTotalSize();

src/lib/SizeAndPositionManager.test.js

@@ -3,6 +3,10 @@ import { ALIGNMENT } from './constants.js';
 import SizeAndPositionManager from './SizeAndPositionManager.js';
 
 const ITEM_SIZE = 10;
+/**
+ * @param {number} N
+ * @returns {number[]}
+ */
 const range = (N) => Array.from({ length: N }, (_, k) => k + 1);
 
 describe('SizeAndPositionManager', () => {
@@ -36,7 +40,7 @@ describe('SizeAndPositionManager', () => {
 	 * @return {{sizeAndPositionManager: SizeAndPositionManager, totalSize: number, itemSize: number}}
 	 */
 	function getItemSizeAndPositionManagerNumber(itemCount = 100, itemSize = 50) {
-		const sizeAndPositionManager = new SizeAndPositionManager(itemSize, itemCount);
+		const sizeAndPositionManager = new SizeAndPositionManager(itemSize, itemCount, 50);
 
 		return {
 			sizeAndPositionManager,
@@ -54,7 +58,7 @@ describe('SizeAndPositionManager', () => {
 			return Math.max(Math.round(Math.random() * 100), 32);
 		});
 
-		const sizeAndPositionManager = new SizeAndPositionManager(itemSize, itemCount);
+		const sizeAndPositionManager = new SizeAndPositionManager(itemSize, itemCount, 66);
 
 		return {
 			sizeAndPositionManager,
@@ -232,13 +236,17 @@ describe('SizeAndPositionManager', () => {
 
 	describe('getUpdatedOffsetForIndex', () => {
 		/**
-		 * @param {'auto' | 'start' | 'center' | 'end'} align
-		 * @param {number} itemCount
-		 * @param {number} itemSize
-		 * @param {number} containerSize
-		 * @param {number} currentOffset
-		 * @param {number} estimatedItemSize
-		 * @param {number} targetIndex
+		 * @typedef {Object} GetUpdatedOffsetForIndexParams
+		 * @property {'auto' | 'start' | 'center' | 'end'} [align]
+		 * @property {number} [itemCount]
+		 * @property {number} [itemSize]
+		 * @property {number} [containerSize]
+		 * @property {number} [currentOffset]
+		 * @property {number} [estimatedItemSize]
+		 * @property {number} [targetIndex]
+		 */
+		/**
+		 * @param {GetUpdatedOffsetForIndexParams} params
 		 * @return {number}
 		 */
 		function getUpdatedOffsetForIndexHelper({

src/routes/demos/hacker-news/+page.svelte

@@ -10,8 +10,12 @@
 
 	let page = $state(1);
 	let listHeight = $state(0);
+	/** @type {{story_id: string, created_at: string, title: string, author: string, url: string, points: number, num_comments: number}[]} */
 	let list = $state([]);
 
+	/**
+	 * @param {CustomEvent<{ loaded: () => void; complete: () => void; error: () => void }>} event
+	 */
 	function infiniteHandler({ detail: { loaded, complete, error } }) {
 		fetch(`${api}&page=${page}`)
 			.then((response) => response.json())
@@ -27,15 +31,21 @@
 			.catch(() => error());
 	}
 
+	/**
+	 * @param {string} url
+	 */
 	function formatSite(url) {
 		const domain = new URL(url).hostname;
 		return domain.startsWith('www.') ? domain.slice(4) : domain;
 	}
 
 	const dateFormatter = new Intl.RelativeTimeFormat('en', { style: 'long' });
 
+	/**
+	 * @param {string} createdAt
+	 */
 	function formatCreatedAt(createdAt) {
-		const seconds = Math.floor((new Date() - new Date(createdAt)) / 1000);
+		const seconds = Math.floor((Date.now() - new Date(createdAt).getTime()) / 1000);
 		if (seconds <= 60) {
 			return dateFormatter.format(-seconds, 'second');
 		} else if (seconds <= 3600) {

src/routes/examples/controlled-scroll-offset/+page.svelte

@@ -1,6 +1,7 @@
 <script>
 	import VirtualList from '$lib/VirtualList.svelte';
 
+	/** @type {number[]} */
 	let rowHeights = $state([]);
 
 	let scrollOffset = $state();

src/routes/examples/scroll-to-index/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	import VirtualList from '$lib/VirtualList.svelte';
 
-	let virtualList = $state.raw();
+	/** @type {number[]} */
 	let rowHeights = $state.raw([]);
 
 	let scrollToIndex = $state();
@@ -58,7 +58,6 @@
 
 	<article>
 		<VirtualList
-			bind:this={virtualList}
 			height={500}
 			width="auto"
 			itemCount={10000}

src/routes/examples/variable-heights/+page.svelte

@@ -1,6 +1,7 @@
 <script>
 	import VirtualList from '$lib/VirtualList.svelte';
 
+	/** @type {number[]} */
 	let rowHeights = $state([]);
 
 	randomize();