virtua 0.45.2 → 0.46.0

package/lib/solid/index.jsx

@@ -132,20 +132,20 @@ const findIndex = (cache, offset, low = 0, high = cache._length - 1) => {
 /**
  * @internal
  */
-const computeRange = (cache, scrollOffset, viewportSize, prevStartIndex) => {
+const computeRange = (cache, startOffset, endOffset, prevStartIndex) => {
     // Clamp because prevStartIndex may exceed the limit when children decreased a lot after scrolling
     prevStartIndex = min(prevStartIndex, cache._length - 1);
-    if (computeOffset(cache, prevStartIndex) <= scrollOffset) {
+    if (computeOffset(cache, prevStartIndex) <= startOffset) {
         // search forward
         // start <= end, prevStartIndex <= start
-        const end = findIndex(cache, scrollOffset + viewportSize, prevStartIndex);
-        return [findIndex(cache, scrollOffset, prevStartIndex, end), end];
+        const end = findIndex(cache, endOffset, prevStartIndex);
+        return [findIndex(cache, startOffset, prevStartIndex, end), end];
     }
     else {
         // search backward
         // start <= end, start <= prevStartIndex
-        const start = findIndex(cache, scrollOffset, undefined, prevStartIndex);
-        return [start, findIndex(cache, scrollOffset + viewportSize, start)];
+        const start = findIndex(cache, startOffset, undefined, prevStartIndex);
+        return [start, findIndex(cache, endOffset, start)];
     }
 };
 /**
@@ -302,7 +302,7 @@ const getScrollSize = (store) => {
 /**
  * @internal
  */
-const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount = 0, cacheSnapshot, shouldAutoEstimateItemSize = false) => {
+const createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSnapshot, shouldAutoEstimateItemSize = false) => {
     let isSSR = !!ssrCount;
     let stateVersion = 1;
     let viewportSize = 0;
@@ -313,17 +313,15 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
     let _flushedJump = 0;
     let _scrollDirection = SCROLL_IDLE;
     let _scrollMode = SCROLL_BY_NATIVE;
-    let _frozenRange = isSSR
-        ? [0, max(ssrCount - 1, 0)]
-        : NULL;
-    let _prevRange = [0, 0];
+    let _frozenRange = NULL;
+    let _prevRange = [0, isSSR ? max(ssrCount - 1, 0) : -1];
     let _totalMeasuredSize = 0;
     const cache = initCache(elementsCount, itemSize, cacheSnapshot);
     const subscribers = new Set();
     const getRelativeScrollOffset = () => scrollOffset - startSpacerSize;
     const getVisibleOffset = () => getRelativeScrollOffset() + pendingJump + jump;
-    const getRange = (offset) => {
-        return computeRange(cache, offset, viewportSize, _prevRange[0]);
+    const getRange = (startOffset, endOffset) => {
+        return computeRange(cache, startOffset, endOffset, _prevRange[0]);
     };
     const getTotalSize = () => computeTotalSize(cache);
     const getItemOffset = (index) => {
@@ -332,6 +330,9 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
     const getItemSize$1 = (index) => {
         return getItemSize(cache, index);
     };
+    const isSizeEqual = (index, value = UNCACHED) => {
+        return cache._sizes[index] === value;
+    };
     const applyJump = (j) => {
         if (j) {
             if (
@@ -352,7 +353,13 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
         $getCacheSnapshot: () => {
             return takeCacheSnapshot(cache);
         },
-        $getRange: () => {
+        $getRange: (bufferSize = 200) => {
+            if (!viewportSize || isSSR) {
+                // Empty viewportSize means the first render.
+                // We return range for SSR here, or return [0, -1] to render nothing, until the scroll offset and viewport size are determined.
+                // https://github.com/inokawa/virtua/issues/415
+                return _prevRange;
+            }
             let startIndex;
             let endIndex;
             if (_flushedJump) {
@@ -361,23 +368,29 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
                 [startIndex, endIndex] = _prevRange;
             }
             else {
-                [startIndex, endIndex] = _prevRange = getRange(max(0, getVisibleOffset()));
+                bufferSize = max(0, bufferSize);
+                let startOffset = max(0, getVisibleOffset());
+                let endOffset = startOffset + viewportSize;
+                // For faster initial render pass, returns without buffer if measurement seems to be in progress.
+                if (!shouldAutoEstimateItemSize) {
+                    if (_scrollDirection !== SCROLL_DOWN) {
+                        startOffset -= bufferSize;
+                    }
+                    if (_scrollDirection !== SCROLL_UP) {
+                        endOffset += bufferSize;
+                    }
+                }
+                [startIndex, endIndex] = _prevRange = getRange(max(0, startOffset), max(0, endOffset));
                 if (_frozenRange) {
                     startIndex = min(startIndex, _frozenRange[0]);
                     endIndex = max(endIndex, _frozenRange[1]);
                 }
             }
-            if (_scrollDirection !== SCROLL_DOWN) {
-                startIndex -= max(0, overscan);
-            }
-            if (_scrollDirection !== SCROLL_UP) {
-                endIndex += max(0, overscan);
-            }
             return [max(startIndex, 0), min(endIndex, cache._length - 1)];
         },
         $findStartIndex: () => findIndex(cache, getVisibleOffset()),
         $findEndIndex: () => findIndex(cache, getVisibleOffset() + viewportSize),
-        $isUnmeasuredItem: (index) => cache._sizes[index] === UNCACHED,
+        $isUnmeasuredItem: isSizeEqual,
         $getItemOffset: getItemOffset,
         $getItemSize: getItemSize$1,
         $getItemsLength: () => cache._length,
@@ -430,7 +443,6 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
                     //   shouldFlushPendingJump = true;
                     // }
                     if (isSSR) {
-                        _frozenRange = NULL;
                         isSSR = false;
                     }
                     scrollOffset = payload;
@@ -458,7 +470,7 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
                     break;
                 }
                 case ACTION_ITEM_RESIZE: {
-                    const updated = payload.filter(([index, size]) => cache._sizes[index] !== size);
+                    const updated = payload.filter(([index, size]) => !isSizeEqual(index, size));
                     // Skip if all items are cached and not updated
                     if (!updated.length) {
                         break;
@@ -542,7 +554,7 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
                     break;
                 }
                 case ACTION_BEFORE_MANUAL_SMOOTH_SCROLL: {
-                    _frozenRange = getRange(payload);
+                    _frozenRange = getRange(payload, payload + viewportSize);
                     mutated = UPDATE_VIRTUAL_STATE;
                     break;
                 }
@@ -911,13 +923,20 @@ const createWindowScroller = (store, isHorizontal) => {
             const scrollOffsetKey = isHorizontal ? "scrollX" : "scrollY";
             const document = getCurrentDocument(container);
             const window = getCurrentWindow(document);
-            scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeOffset(window[scrollOffsetKey], isHorizontal), (jump) => {
-                // Use absolute position not to exceed scrollable bounds
-                // https://github.com/inokawa/virtua/discussions/475
+            scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeOffset(window[scrollOffsetKey], isHorizontal), (jump, shift) => {
                 // TODO support case two window scrollers exist in the same view
-                window.scroll({
-                    [scrollToKey]: store.$getScrollOffset() + jump,
-                });
+                if (shift) {
+                    // Use absolute position not to exceed scrollable bounds
+                    window.scroll({
+                        [scrollToKey]: store.$getScrollOffset() + jump,
+                    });
+                }
+                else {
+                    // Use window.scrollBy here, which causes less layout shift for some reason.
+                    window.scrollBy({
+                        [scrollToKey]: jump,
+                    });
+                }
             }, () => calcOffsetToViewport(container, document.body, window, isHorizontal));
             initialized[1](true);
         },
@@ -1284,9 +1303,9 @@ const isSameRange = (prev, next) => {
  */
 const Virtualizer = (props) => {
     let containerRef;
-    const { itemSize, horizontal = false, overscan, cache } = props;
+    const { itemSize, horizontal = false, cache } = props;
     props = mergeProps({ as: "div" }, props);
-    const store = createVirtualStore(props.data.length, itemSize, overscan, undefined, cache, !itemSize);
+    const store = createVirtualStore(props.data.length, itemSize, undefined, cache, !itemSize);
     const resizer = createResizer(store, horizontal);
     const scroller = createScroller(store, horizontal);
     const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
@@ -1303,7 +1322,7 @@ const Virtualizer = (props) => {
     });
     const range = createMemo((prev) => {
         stateVersion();
-        const next = store.$getRange();
+        const next = store.$getRange(props.bufferSize);
         if (prev && isSameRange(prev, next)) {
             return prev;
         }
@@ -1364,12 +1383,11 @@ const Virtualizer = (props) => {
                 store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
             }
         });
-        const [startIndex, endIndex] = range();
         const items = [];
         const indexes = [];
         if (props.keepMounted) {
             const mounted = new Set(props.keepMounted);
-            for (let i = startIndex, j = endIndex; i <= j; i++) {
+            for (let [i, j] = range(); i <= j; i++) {
                 mounted.add(i);
             }
             sort([...mounted]).forEach((index) => {
@@ -1378,7 +1396,7 @@ const Virtualizer = (props) => {
             });
         }
         else {
-            for (let i = startIndex, j = endIndex; i <= j; i++) {
+            for (let [i, j] = range(); i <= j; i++) {
                 items.push(props.data[i]);
                 indexes.push(i);
             }
@@ -1430,7 +1448,7 @@ const VList = (props) => {
         "ref",
         "data",
         "children",
-        "overscan",
+        "bufferSize",
         "itemSize",
         "shift",
         "horizontal",
@@ -1449,7 +1467,7 @@ const VList = (props) => {
             height: "100%",
             ...local.style,
         }}>
-      <Virtualizer ref={local.ref} data={local.data} overscan={local.overscan} itemSize={local.itemSize} shift={local.shift} horizontal={local.horizontal} keepMounted={local.keepMounted} cache={local.cache} item={local.item} onScroll={local.onScroll} onScrollEnd={local.onScrollEnd}>
+      <Virtualizer ref={local.ref} data={local.data} bufferSize={local.bufferSize} itemSize={local.itemSize} shift={local.shift} horizontal={local.horizontal} keepMounted={local.keepMounted} cache={local.cache} item={local.item} onScroll={local.onScroll} onScrollEnd={local.onScrollEnd}>
         {local.children}
       </Virtualizer>
     </div>);
@@ -1463,8 +1481,8 @@ const VList = (props) => {
  */
 const WindowVirtualizer = (props) => {
     let containerRef;
-    const { ref: _ref, data: _data, children: _children, overscan, itemSize, shift: _shift, horizontal = false, cache, onScrollEnd: _onScrollEnd, } = props;
-    const store = createVirtualStore(props.data.length, itemSize, overscan, undefined, cache, !itemSize);
+    const { ref: _ref, data: _data, children: _children, itemSize, shift: _shift, horizontal = false, cache, onScrollEnd: _onScrollEnd, } = props;
+    const store = createVirtualStore(props.data.length, itemSize, undefined, cache, !itemSize);
     const resizer = createWindowResizer(store, horizontal);
     const scroller = createWindowScroller(store, horizontal);
     const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
@@ -1482,7 +1500,7 @@ const WindowVirtualizer = (props) => {
     });
     const range = createMemo((prev) => {
         stateVersion();
-        const next = store.$getRange();
+        const next = store.$getRange(props.bufferSize);
         if (prev && isSameRange(prev, next)) {
             return prev;
         }
@@ -1524,9 +1542,8 @@ const WindowVirtualizer = (props) => {
                 store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
             }
         });
-        const [startIndex, endIndex] = range();
         const items = [];
-        for (let i = startIndex, j = endIndex; i <= j; i++) {
+        for (let [i, j] = range(); i <= j; i++) {
             items.push(props.data[i]);
         }
         return items;