@humanspeak/svelte-virtual-list 0.2.6-beta.6 → 0.2.6-beta.7

package/dist/utils/virtualList.js

@@ -31,31 +31,63 @@ export const calculateScrollPosition = (totalItems, itemHeight, containerHeight)
  * @param {SvelteVirtualListMode} mode - Scroll direction mode
  * @returns {SvelteVirtualListPreviousVisibleRange} Range of indices to render
  */
-export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, totalItems, bufferSize, mode) => {
+export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, totalItems, bufferSize, mode, atBottom, wasAtBottomBeforeHeightChange, lastVisibleRange, totalContentHeight) => {
     if (mode === 'bottomToTop') {
+        // if (wasAtBottomBeforeHeightChange && lastVisibleRange) {
+        //     // console.log('calculateVisibleRange:wasAtBottomBeforeHeightChange', {
+        //     //     lastVisibleRange,
+        //     //     atBottom,
+        //     //     wasAtBottomBeforeHeightChange
+        //     // })
+        //     return lastVisibleRange
+        // }
         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);
+        // In bottomToTop mode, scrollTop represents distance from the total content end
+        // scrollTop = 0 means we're at the beginning (showing first items)
+        // scrollTop = maxScrollTop means we're at the end (showing last items)
+        const totalHeight = totalContentHeight ?? totalItems * itemHeight;
+        const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+        // Convert scrollTop to "distance from start" for bottomToTop
+        const distanceFromStart = maxScrollTop - scrollTop;
+        const startIndex = Math.floor(distanceFromStart / itemHeight);
+        // console.log(
+        //     `[DEBUG] calculateVisibleRange bottomToTop: scrollTop=${scrollTop}, maxScrollTop=${maxScrollTop}, distanceFromStart=${distanceFromStart}, startIndex=${startIndex}`
+        // )
+        // Safeguard: handle edge cases
+        if (startIndex < 0) {
+            // We're scrolled beyond the maximum (showing first items)
+            const start = 0;
+            const end = Math.min(totalItems, visibleCount + bufferSize * 2);
+            // console.log(
+            //     `[DEBUG] calculateVisibleRange (startIndex < 0): start=${start}, end=${end}`
+            // )
+            // console.log('calculateVisibleRange:startIndex < 0', {
+            //     start,
+            //     end,
+            //     atBottom,
+            //     wasAtBottomBeforeHeightChange,
+            //     lastVisibleRange
+            // })
             return { start, end };
         }
         // Add buffer to both ends
-        const start = Math.max(0, bottomIndex - visibleCount - bufferSize);
-        const end = Math.min(totalItems, bottomIndex + bufferSize);
+        const start = Math.max(0, startIndex - bufferSize);
+        const end = Math.min(totalItems, startIndex + visibleCount + bufferSize);
+        // console.log(`[DEBUG] calculateVisibleRange result: start=${start}, end=${end}`)
+        // console.log('calculateVisibleRange:startIndex >= 0', {
+        //     start,
+        //     end,
+        //     atBottom,
+        //     wasAtBottomBeforeHeightChange,
+        //     lastVisibleRange
+        // })
         return { start, end };
     }
     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 totalHeight = totalContentHeight ?? 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
@@ -65,16 +97,24 @@ export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, tot
             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
             };
         }
+        // console.log('calculateVisibleRange:isNotAtBottom', {
+        //     start: Math.max(0, start - bufferSize),
+        //     end: Math.min(totalItems, end + bufferSize),
+        //     atBottom,
+        //     wasAtBottomBeforeHeightChange,
+        //     lastVisibleRange
+        // })
         // Add buffer to both ends
+        const finalStart = Math.max(0, start - bufferSize);
+        const finalEnd = Math.min(totalItems, end + bufferSize);
         return {
-            start: Math.max(0, start - bufferSize),
-            end: Math.min(totalItems, end + bufferSize)
+            start: finalStart,
+            end: finalEnd
         };
     }
 };
@@ -90,14 +130,18 @@ export const calculateVisibleRange = (scrollTop, viewportHeight, itemHeight, tot
  * @param {number} visibleEnd - Index of the last visible item
  * @param {number} visibleStart - Index of the first visible item
  * @param {number} itemHeight - Height of each list item in pixels
+ * @param {number} viewportHeight - Height of the viewport in pixels
  * @returns {number} The calculated transform Y value in pixels
  */
-export const calculateTransformY = (mode, totalItems, visibleEnd, visibleStart, itemHeight) => {
+export const calculateTransformY = (mode, totalItems, visibleEnd, visibleStart, itemHeight, viewportHeight, totalContentHeight) => {
     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;
+        // In bottomToTop mode, position items so they stack from bottom up
+        const actualTotalHeight = totalContentHeight ?? totalItems * itemHeight;
+        // Calculate transform to position visible items correctly
+        const basicTransform = (totalItems - visibleEnd) * itemHeight;
+        // When content is smaller than viewport, push to bottom
+        const bottomOffset = Math.max(0, viewportHeight - actualTotalHeight);
+        return basicTransform + bottomOffset;
     }
     else {
         return visibleStart * itemHeight;
@@ -158,7 +202,7 @@ export const updateHeightAndScroll = (state, setters, immediate = false) => {
  *   40
  * )
  */
-export const calculateAverageHeight = (itemElements, visibleRange, heightCache, currentItemHeight, dirtyItems, currentTotalHeight = 0, currentValidCount = 0) => {
+export const calculateAverageHeight = (itemElements, visibleRange, heightCache, currentItemHeight, dirtyItems, currentTotalHeight = 0, currentValidCount = 0, mode = 'topToBottom') => {
     const validElements = itemElements.filter((el) => el);
     if (validElements.length === 0) {
         return {
@@ -167,11 +211,13 @@ export const calculateAverageHeight = (itemElements, visibleRange, heightCache,
             updatedHeightCache: heightCache,
             clearedDirtyItems: new Set(),
             newTotalHeight: currentTotalHeight,
-            newValidCount: currentValidCount
+            newValidCount: currentValidCount,
+            heightChanges: []
         };
     }
     const newHeightCache = { ...heightCache };
     const clearedDirtyItems = new Set();
+    const heightChanges = [];
     // Start with current running totals (O(1) instead of O(n))
     let totalValidHeight = currentTotalHeight;
     let validHeightCount = currentValidCount;
@@ -179,15 +225,36 @@ export const calculateAverageHeight = (itemElements, visibleRange, heightCache,
     if (dirtyItems.size > 0) {
         // Process only dirty items
         dirtyItems.forEach((itemIndex) => {
-            const elementIndex = itemIndex - visibleRange.start;
+            // Map original item index to position in itemElements array
+            let elementIndex;
+            if (mode === 'bottomToTop') {
+                // In bottomToTop, itemElements is reversed relative to the visible range
+                // elementIndex should be based on position within the actual array, not theoretical end
+                elementIndex = validElements.length - 1 - (itemIndex - visibleRange.start);
+            }
+            else {
+                // In topToBottom, itemElements is normal: [item0, item1, ..., item44, item45]
+                elementIndex = itemIndex - visibleRange.start;
+            }
             const element = validElements[elementIndex];
             if (element && elementIndex >= 0 && elementIndex < validElements.length) {
                 try {
+                    // await tick()
+                    void element.offsetHeight;
                     const height = element.getBoundingClientRect().height;
+                    const oldHeight = newHeightCache[itemIndex];
                     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) {
+                            // Track the height change for scroll correction
+                            const actualOldHeight = oldHeight || currentItemHeight;
+                            const delta = height - actualOldHeight;
+                            heightChanges.push({
+                                index: itemIndex,
+                                oldHeight: actualOldHeight,
+                                newHeight: height,
+                                delta
+                            });
                             // Update running totals
                             if (oldHeight && Number.isFinite(oldHeight) && oldHeight > 0) {
                                 // Replace old height with new height in running total
@@ -208,6 +275,9 @@ export const calculateAverageHeight = (itemElements, visibleRange, heightCache,
                     clearedDirtyItems.add(itemIndex);
                 }
             }
+            else {
+                clearedDirtyItems.add(itemIndex); // Still clear it from dirty items
+            }
         });
     }
     else {
@@ -237,7 +307,8 @@ export const calculateAverageHeight = (itemElements, visibleRange, heightCache,
         updatedHeightCache: newHeightCache,
         clearedDirtyItems,
         newTotalHeight: totalValidHeight,
-        newValidCount: validHeightCount
+        newValidCount: validHeightCount,
+        heightChanges
     };
 };
 /**
@@ -283,31 +354,6 @@ onComplete) => {
     };
     await processChunk(0);
 };
-/**
- * Builds a block sum array for fast offset calculation in large virtual lists.
- * Each entry in the array is the total height up to the end of that block (exclusive).
- *
- * @param {HeightCache} heightCache - Map of measured item heights with dirty tracking
- * @param {number} calculatedItemHeight - Estimated height for unmeasured items
- * @param {number} totalItems - Total number of items in the list
- * @param {number} blockSize - Number of items per block
- * @returns {number[]} Array of prefix sums at each block boundary
- */
-export const buildBlockSums = (heightCache, calculatedItemHeight, totalItems, blockSize = 1000) => {
-    const blockSums = [];
-    let sum = 0;
-    for (let i = 0; i < totalItems; i++) {
-        sum += heightCache[i] ?? calculatedItemHeight;
-        if ((i + 1) % blockSize === 0) {
-            blockSums.push(sum);
-        }
-    }
-    // Push the last partial block if needed
-    if (totalItems % blockSize !== 0) {
-        blockSums.push(sum);
-    }
-    return blockSums;
-};
 /**
  * Calculates the scroll offset (in pixels) needed to bring a specific item into view in a virtual list.
  *
@@ -336,7 +382,8 @@ export const getScrollOffsetForIndex = (heightCache, calculatedItemHeight, idx,
         // Fallback: O(n) for a single query
         let offset = 0;
         for (let i = 0; i < idx; i++) {
-            offset += heightCache[i] ?? calculatedItemHeight;
+            const height = heightCache[i] ?? calculatedItemHeight;
+            offset += height;
         }
         return offset;
     }

package/dist/utils/virtualListDebug.d.ts

@@ -74,4 +74,4 @@ export declare function shouldShowDebugInfo(prevRange: {
 export declare function createDebugInfo(visibleRange: {
     start: number;
     end: number;
-}, totalItems: number, processedItems: number, averageItemHeight: number, scrollTop: number, viewportHeight: number): SvelteVirtualListDebugInfo;
+}, totalItems: number, processedItems: number, averageItemHeight: number, scrollTop: number, viewportHeight: number, totalHeight: number): SvelteVirtualListDebugInfo;

package/dist/utils/virtualListDebug.js

@@ -70,8 +70,7 @@ export function shouldShowDebugInfo(prevRange, currentRange, prevHeight, current
  *
  * @throws {Error} Will throw if end index is less than start index in visibleRange
  */
-export function createDebugInfo(visibleRange, totalItems, processedItems, averageItemHeight, scrollTop, viewportHeight) {
-    const totalHeight = totalItems * averageItemHeight;
+export function createDebugInfo(visibleRange, totalItems, processedItems, averageItemHeight, scrollTop, viewportHeight, totalHeight) {
     const atTop = scrollTop <= 1; // Small tolerance for floating point precision
     const atBottom = scrollTop >= totalHeight - viewportHeight - 1; // Small tolerance
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@humanspeak/svelte-virtual-list",
-    "version": "0.2.6-beta.6",
+    "version": "0.2.6-beta.7",
     "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",
@@ -44,7 +44,8 @@
         "dist",
         "!dist/**/*.test.*",
         "!dist/**/*.spec.*",
-        "!dist/test/**/*"
+        "!dist/test/**/*",
+        "!dist/reactive-height-manager/test/**/*"
     ],
     "scripts": {
         "build": "vite build && npm run package",
@@ -58,14 +59,14 @@
         "prepare": "husky",
         "prepublishOnly": "npm run package",
         "preview": "vite preview",
-        "test": "vitest run --coverage",
+        "test": "vitest run --coverage --",
         "test:all": "npm run test && npm run test:e2e",
-        "test:e2e": "playwright test",
-        "test:e2e:debug": "playwright test --debug",
+        "test:e2e": "playwright test --",
+        "test:e2e:debug": "playwright test --debug --",
         "test:e2e:report": "playwright show-report",
-        "test:e2e:ui": "playwright test --ui",
-        "test:only": "vitest run",
-        "test:watch": "vitest"
+        "test:e2e:ui": "playwright test --ui --",
+        "test:only": "vitest run --",
+        "test:watch": "vitest --"
     },
     "overrides": {
         "@sveltejs/kit": {
@@ -79,17 +80,17 @@
         "@eslint/compat": "^1.3.1",
         "@eslint/js": "^9.32.0",
         "@faker-js/faker": "^9.9.0",
-        "@playwright/test": "^1.54.1",
-        "@sveltejs/adapter-auto": "^6.0.1",
-        "@sveltejs/kit": "^2.26.1",
-        "@sveltejs/package": "^2.4.0",
+        "@playwright/test": "^1.54.2",
+        "@sveltejs/adapter-auto": "^6.0.2",
+        "@sveltejs/kit": "^2.27.3",
+        "@sveltejs/package": "^2.4.1",
         "@sveltejs/vite-plugin-svelte": "^6.1.0",
         "@testing-library/jest-dom": "^6.6.4",
         "@testing-library/svelte": "^5.2.8",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^24.1.0",
-        "@typescript-eslint/eslint-plugin": "^8.38.0",
-        "@typescript-eslint/parser": "^8.38.0",
+        "@types/node": "^24.2.0",
+        "@typescript-eslint/eslint-plugin": "^8.39.0",
+        "@typescript-eslint/parser": "^8.39.0",
         "@vitest/coverage-v8": "^3.2.4",
         "eslint": "^9.32.0",
         "eslint-config-prettier": "^10.1.8",
@@ -105,11 +106,11 @@
         "prettier-plugin-svelte": "^3.4.0",
         "prettier-plugin-tailwindcss": "^0.6.14",
         "publint": "^0.3.12",
-        "svelte": "^5.37.1",
-        "svelte-check": "^4.3.0",
-        "typescript": "^5.8.3",
-        "typescript-eslint": "^8.38.0",
-        "vite": "^7.0.6",
+        "svelte": "^5.38.0",
+        "svelte-check": "^4.3.1",
+        "typescript": "^5.9.2",
+        "typescript-eslint": "^8.39.0",
+        "vite": "^7.1.0",
         "vitest": "^3.2.4"
     },
     "peerDependencies": {