@humanspeak/svelte-virtual-list 0.2.6-beta.0 → 0.2.6-beta.2

package/dist/utils/virtualList.js

@@ -35,6 +35,17 @@ export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, tot
     if (mode === 'bottomToTop') {
         const visibleCount = Math.ceil(viewportHeight / itemHeight) + 1;
         const bottomIndex = totalItems - Math.floor(scrollTop / itemHeight);
+        // Safeguard: if bottomIndex is negative, it means scrollTop is too large for current itemHeight
+        // This can happen when itemHeight changes but scrollTop hasn't been corrected yet
+        if (bottomIndex < 0) {
+            // Calculate what scrollTop should be and use that for visible range
+            const totalHeight = totalItems * itemHeight;
+            const correctedScrollTop = Math.max(0, totalHeight - viewportHeight);
+            const correctedBottomIndex = totalItems - Math.floor(correctedScrollTop / itemHeight);
+            const start = Math.max(0, correctedBottomIndex - visibleCount - bufferSize);
+            const end = Math.min(totalItems, correctedBottomIndex + bufferSize);
+            return { start, end };
+        }
         // Add buffer to both ends
         const start = Math.max(0, bottomIndex - visibleCount - bufferSize);
         const end = Math.min(totalItems, bottomIndex + bufferSize);
@@ -43,6 +54,23 @@ export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, tot
     else {
         const start = Math.floor(scrollTop / itemHeight);
         const end = Math.min(totalItems, start + Math.ceil(viewportHeight / itemHeight) + 1);
+        // Safeguard for topToBottom: ensure last item is fully visible when at max scroll
+        const totalHeight = totalItems * itemHeight;
+        const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+        // Add dynamic tolerance based on item height for browser rendering precision
+        const tolerance = Math.max(itemHeight, 10); // At least one full item height or 10px minimum
+        const isAtBottom = Math.abs(scrollTop - maxScrollTop) <= tolerance;
+        if (isAtBottom) {
+            // When at the bottom, ensure we include all items up to the end
+            const adjustedEnd = totalItems;
+            const visibleItemCount = Math.ceil(viewportHeight / itemHeight) + bufferSize + 1;
+            const adjustedStart = Math.max(0, adjustedEnd - visibleItemCount);
+            // TopToBottom safeguard is now active
+            return {
+                start: adjustedStart,
+                end: adjustedEnd
+            };
+        }
         // Add buffer to both ends
         return {
             start: Math.max(0, start - bufferSize),
@@ -65,9 +93,15 @@ export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, tot
  * @returns {number} The calculated transform Y value in pixels
  */
 export const calculateTransformY = (mode, totalItems, visibleEnd, visibleStart, itemHeight) => {
-    return mode === 'bottomToTop'
-        ? (totalItems - visibleEnd) * itemHeight
-        : visibleStart * itemHeight;
+    if (mode === 'bottomToTop') {
+        // In bottomToTop mode, we need to position the container so that
+        // the first visible item (visibleStart) aligns with its correct position
+        // from the bottom of the total content
+        return (totalItems - visibleEnd) * itemHeight;
+    }
+    else {
+        return visibleStart * itemHeight;
+    }
 };
 /**
  * Updates the virtual list's height and scroll position when necessary.
@@ -124,39 +158,89 @@ export const updateHeightAndScroll = (state, setters, immediate = false) => {
  *   40
  * )
  */
-export const calculateAverageHeight = (itemElements, visibleRange, heightCache, currentItemHeight) => {
+export const calculateAverageHeight = (itemElements, visibleRange, heightCache, currentItemHeight, dirtyItems) => {
     const validElements = itemElements.filter((el) => el);
     if (validElements.length === 0) {
         return {
             newHeight: currentItemHeight,
             newLastMeasuredIndex: visibleRange.start,
-            updatedHeightCache: heightCache
+            updatedHeightCache: heightCache,
+            clearedDirtyItems: new Set()
         };
     }
     const newHeightCache = { ...heightCache };
-    // Cache heights for new items
-    validElements.forEach((el, i) => {
-        const itemIndex = visibleRange.start + i;
-        if (!newHeightCache[itemIndex]) {
-            try {
-                const height = el.getBoundingClientRect().height;
-                if (Number.isFinite(height) && height > 0) {
-                    newHeightCache[itemIndex] = height;
+    const clearedDirtyItems = new Set();
+    // Initialize running totals for O(1) average calculation
+    let totalValidHeight = 0;
+    let validHeightCount = 0;
+    // Calculate initial totals from existing cache
+    for (const height of Object.values(heightCache)) {
+        if (Number.isFinite(height) && height > 0) {
+            totalValidHeight += height;
+            validHeightCount++;
+        }
+    }
+    // Process only dirty items if they exist, otherwise process all visible items
+    if (dirtyItems.size > 0) {
+        // Process only dirty items
+        dirtyItems.forEach((itemIndex) => {
+            const elementIndex = itemIndex - visibleRange.start;
+            const element = validElements[elementIndex];
+            if (element && elementIndex >= 0 && elementIndex < validElements.length) {
+                try {
+                    const height = element.getBoundingClientRect().height;
+                    if (Number.isFinite(height) && height > 0) {
+                        const oldHeight = newHeightCache[itemIndex];
+                        // Only update if height actually changed (use smaller tolerance for precision)
+                        if (!oldHeight || Math.abs(oldHeight - height) >= 0.1) {
+                            // Update running totals
+                            if (oldHeight && Number.isFinite(oldHeight) && oldHeight > 0) {
+                                // Replace old height with new height in running total
+                                totalValidHeight = totalValidHeight - oldHeight + height;
+                            }
+                            else {
+                                // Add new height to running total
+                                totalValidHeight += height;
+                                validHeightCount++;
+                            }
+                            newHeightCache[itemIndex] = height;
+                        }
+                    }
+                    clearedDirtyItems.add(itemIndex);
+                }
+                catch {
+                    // Skip invalid measurements but still clear from dirty
+                    clearedDirtyItems.add(itemIndex);
                 }
             }
-            catch {
-                // Skip invalid measurements
+        });
+    }
+    else {
+        // Original behavior: process all visible items
+        validElements.forEach((el, i) => {
+            const itemIndex = visibleRange.start + i;
+            if (!newHeightCache[itemIndex]) {
+                try {
+                    const height = el.getBoundingClientRect().height;
+                    if (Number.isFinite(height) && height > 0) {
+                        // Add new height to running totals
+                        totalValidHeight += height;
+                        validHeightCount++;
+                        newHeightCache[itemIndex] = height;
+                    }
+                }
+                catch {
+                    // Skip invalid measurements
+                }
             }
-        }
-    });
-    // Calculate average from valid cached heights
-    const validHeights = Object.values(newHeightCache).filter((h) => Number.isFinite(h) && h > 0);
+        });
+    }
+    // O(1) average calculation using running totals!
     return {
-        newHeight: validHeights.length > 0
-            ? validHeights.reduce((sum, h) => sum + h, 0) / validHeights.length
-            : currentItemHeight,
+        newHeight: validHeightCount > 0 ? totalValidHeight / validHeightCount : currentItemHeight,
         newLastMeasuredIndex: visibleRange.start,
-        updatedHeightCache: newHeightCache
+        updatedHeightCache: newHeightCache,
+        clearedDirtyItems
     };
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@humanspeak/svelte-virtual-list",
-    "version": "0.2.6-beta.0",
+    "version": "0.2.6-beta.2",
     "description": "A lightweight, high-performance virtual list component for Svelte 5 that renders large datasets with minimal memory usage. Features include dynamic height support, smooth scrolling, TypeScript support, and efficient DOM recycling. Ideal for infinite scrolling lists, data tables, chat interfaces, and any application requiring the rendering of thousands of items without compromising performance. Zero dependencies and fully customizable.",
     "keywords": [
         "svelte",
@@ -55,6 +55,7 @@
         "lint": "prettier --check . && eslint .",
         "lint:fix": "npm run format && eslint . --fix",
         "package": "svelte-kit sync && svelte-package && publint",
+        "prepare": "husky",
         "prepublishOnly": "npm run package",
         "preview": "vite preview",
         "test": "vitest run --coverage",
@@ -72,8 +73,7 @@
         }
     },
     "dependencies": {
-        "esm-env": "^1.2.2",
-        "runed": "^0.31.1"
+        "esm-env": "^1.2.2"
     },
     "devDependencies": {
         "@eslint/compat": "^1.3.1",
@@ -97,6 +97,7 @@
         "eslint-plugin-svelte": "^3.11.0",
         "eslint-plugin-unused-imports": "^4.1.4",
         "globals": "^16.3.0",
+        "husky": "^9.1.7",
         "jsdom": "^26.1.0",
         "prettier": "^3.6.2",
         "prettier-plugin-organize-imports": "^4.2.0",