cbvirtua 1.0.0

package/core/cache.js

@@ -0,0 +1,142 @@
+import { clamp, median, min } from "./utils";
+/** @internal */
+export const UNCACHED = -1;
+const fill = (array, length, prepend) => {
+    const key = prepend ? "unshift" : "push";
+    for (let i = 0; i < length; i++) {
+        array[key](UNCACHED);
+    }
+    return array;
+};
+/**
+ * @internal
+ */
+export const getItemSize = (cache, index) => {
+    const size = cache._sizes[index];
+    return size === UNCACHED ? cache._defaultItemSize : size;
+};
+/**
+ * @internal
+ */
+export const setItemSize = (cache, index, size) => {
+    const isInitialMeasurement = cache._sizes[index] === UNCACHED;
+    cache._sizes[index] = size;
+    // mark as dirty
+    cache._computedOffsetIndex = min(index, cache._computedOffsetIndex);
+    return isInitialMeasurement;
+};
+/**
+ * @internal
+ */
+export const computeOffset = (cache, index) => {
+    if (!cache._length)
+        return 0;
+    if (cache._computedOffsetIndex >= index) {
+        return cache._offsets[index];
+    }
+    if (cache._computedOffsetIndex < 0) {
+        // first offset must be 0 to avoid returning NaN, which can cause infinite rerender.
+        // https://github.com/inokawa/virtua/pull/160
+        cache._offsets[0] = 0;
+        cache._computedOffsetIndex = 0;
+    }
+    let i = cache._computedOffsetIndex;
+    let top = cache._offsets[i];
+    while (i < index) {
+        top += getItemSize(cache, i);
+        cache._offsets[++i] = top;
+    }
+    // mark as measured
+    cache._computedOffsetIndex = index;
+    return top;
+};
+/**
+ * @internal
+ */
+export const computeTotalSize = (cache) => {
+    if (!cache._length)
+        return 0;
+    return (computeOffset(cache, cache._length - 1) +
+        getItemSize(cache, cache._length - 1));
+};
+/**
+ * @internal
+ */
+export const findIndex = (cache, offset, i) => {
+    let sum = computeOffset(cache, i);
+    while (i >= 0 && i < cache._length) {
+        if (sum <= offset) {
+            const next = getItemSize(cache, i);
+            if (sum + next > offset) {
+                break;
+            }
+            else {
+                sum += next;
+                i++;
+            }
+        }
+        else {
+            sum -= getItemSize(cache, --i);
+        }
+    }
+    return clamp(i, 0, cache._length - 1);
+};
+/**
+ * @internal
+ */
+export const computeRange = (cache, scrollOffset, prevStartIndex, viewportSize) => {
+    const start = findIndex(cache, scrollOffset, 
+    // Clamp because prevStartIndex may exceed the limit when children decreased a lot after scrolling
+    min(prevStartIndex, cache._length - 1));
+    return [start, findIndex(cache, scrollOffset + viewportSize, start)];
+};
+/**
+ * @internal
+ */
+export const estimateDefaultItemSize = (cache) => {
+    const measuredSizes = cache._sizes.filter((s) => s !== UNCACHED);
+    // This function will be called after measurement so measured size array must be longer than 0
+    const startItemSize = measuredSizes[0];
+    cache._defaultItemSize = measuredSizes.every((s) => s === startItemSize)
+        ? // Maybe a fixed size array
+            startItemSize
+        : // Maybe a variable size array
+            median(measuredSizes);
+};
+/**
+ * @internal
+ */
+export const initCache = (length, itemSize) => {
+    return {
+        _defaultItemSize: itemSize,
+        _length: length,
+        _computedOffsetIndex: -1,
+        _sizes: fill([], length),
+        _offsets: fill([], length),
+    };
+};
+/**
+ * @internal
+ */
+export const updateCacheLength = (cache, length, isShift) => {
+    const diff = length - cache._length;
+    const isAdd = diff > 0;
+    let shift;
+    if (isAdd) {
+        // Added
+        shift = cache._defaultItemSize * diff;
+        fill(cache._sizes, diff, isShift);
+        fill(cache._offsets, diff);
+    }
+    else {
+        // Removed
+        shift = (isShift ? cache._sizes.splice(0, -diff) : cache._sizes.splice(diff)).reduce((acc, removed) => acc + (removed === UNCACHED ? cache._defaultItemSize : removed), 0);
+        cache._offsets.splice(diff);
+    }
+    cache._computedOffsetIndex = isShift
+        ? // Discard cache for now
+            -1
+        : min(length - 1, cache._computedOffsetIndex);
+    cache._length = length;
+    return [shift, isAdd];
+};

package/core/environment.js

@@ -0,0 +1,36 @@
+import { once } from "./utils";
+/**
+ * @internal
+ */
+export const isBrowser = typeof window !== "undefined";
+const getDocumentElement = () => document.documentElement;
+/**
+ * @internal
+ */
+export const getCurrentDocument = (node) => node.ownerDocument;
+/**
+ * @internal
+ */
+export const getCurrentWindow = (doc) => doc.defaultView;
+/**
+ * @internal
+ */
+export const isRTLDocument = /*#__PURE__*/ once(() => {
+    // TODO support SSR in rtl
+    return isBrowser
+        ? getComputedStyle(getDocumentElement()).direction === "rtl"
+        : false;
+});
+/**
+ * Currently, all browsers on iOS/iPadOS are WebKit, including WebView.
+ * @internal
+ */
+export const isIOSWebKit = /*#__PURE__*/ once(() => {
+    return /iP(hone|od|ad)/.test(navigator.userAgent);
+});
+/**
+ * @internal
+ */
+export const isSmoothScrollSupported = /*#__PURE__*/ once(() => {
+    return "scrollBehavior" in getDocumentElement().style;
+});

package/core/resizer.js

@@ -0,0 +1,219 @@
+import { getCurrentDocument, getCurrentWindow } from "./environment";
+import { ACTION_ITEM_RESIZE, ACTION_VIEWPORT_RESIZE, } from "./store";
+import { exists, max } from "./utils";
+const createResizeObserver = (cb) => {
+    let ro;
+    return {
+        _observe(e) {
+            // Initialize ResizeObserver lazily for SSR
+            // https://www.w3.org/TR/resize-observer/#intro
+            (ro ||
+                (ro = new (getCurrentWindow(getCurrentDocument(e)).ResizeObserver)(cb))).observe(e);
+        },
+        _unobserve(e) {
+            ro.unobserve(e);
+        },
+        _dispose() {
+            ro && ro.disconnect();
+        },
+    };
+};
+/**
+ * @internal
+ */
+export const createResizer = (store, isHorizontal) => {
+    let viewportElement;
+    const sizeKey = isHorizontal ? "width" : "height";
+    const mountedIndexes = new WeakMap();
+    const resizeObserver = createResizeObserver((entries) => {
+        const resizes = [];
+        for (const { target, contentRect } of entries) {
+            // Skip zero-sized rects that may be observed under `display: none` style
+            if (!target.offsetParent)
+                continue;
+            if (target === viewportElement) {
+                store._update(ACTION_VIEWPORT_RESIZE, contentRect[sizeKey]);
+            }
+            else {
+                const index = mountedIndexes.get(target);
+                if (exists(index)) {
+                    resizes.push([index, contentRect[sizeKey]]);
+                }
+            }
+        }
+        if (resizes.length) {
+            store._update(ACTION_ITEM_RESIZE, resizes);
+        }
+    });
+    return {
+        _observeRoot(viewport) {
+            resizeObserver._observe((viewportElement = viewport));
+        },
+        _observeItem: (el, i) => {
+            mountedIndexes.set(el, i);
+            resizeObserver._observe(el);
+            return () => {
+                mountedIndexes.delete(el);
+                resizeObserver._unobserve(el);
+            };
+        },
+        _dispose: resizeObserver._dispose,
+    };
+};
+/**
+ * @internal
+ */
+export const createWindowResizer = (store, isHorizontal) => {
+    const sizeKey = isHorizontal ? "width" : "height";
+    const windowSizeKey = isHorizontal ? "innerWidth" : "innerHeight";
+    const mountedIndexes = new WeakMap();
+    const resizeObserver = createResizeObserver((entries) => {
+        const resizes = [];
+        for (const { target, contentRect } of entries) {
+            // Skip zero-sized rects that may be observed under `display: none` style
+            if (!target.offsetParent)
+                continue;
+            const index = mountedIndexes.get(target);
+            if (exists(index)) {
+                resizes.push([index, contentRect[sizeKey]]);
+            }
+        }
+        if (resizes.length) {
+            store._update(ACTION_ITEM_RESIZE, resizes);
+        }
+    });
+    let cleanupOnWindowResize;
+    return {
+        _observeRoot(container) {
+            const window = getCurrentWindow(getCurrentDocument(container));
+            const onWindowResize = () => {
+                store._update(ACTION_VIEWPORT_RESIZE, window[windowSizeKey]);
+            };
+            window.addEventListener("resize", onWindowResize);
+            onWindowResize();
+            cleanupOnWindowResize = () => {
+                window.removeEventListener("resize", onWindowResize);
+            };
+        },
+        _observeItem: (el, i) => {
+            mountedIndexes.set(el, i);
+            resizeObserver._observe(el);
+            return () => {
+                mountedIndexes.delete(el);
+                resizeObserver._unobserve(el);
+            };
+        },
+        _dispose() {
+            cleanupOnWindowResize && cleanupOnWindowResize();
+            resizeObserver._dispose();
+        },
+    };
+};
+/**
+ * @internal
+ */
+export const createGridResizer = (vStore, hStore) => {
+    let viewportElement;
+    const heightKey = "height";
+    const widthKey = "width";
+    const mountedIndexes = new WeakMap();
+    const maybeCachedRowIndexes = new Set();
+    const maybeCachedColIndexes = new Set();
+    const sizeCache = new Map();
+    const getKey = (rowIndex, colIndex) => `${rowIndex}-${colIndex}`;
+    const resizeObserver = createResizeObserver((entries) => {
+        const resizedRows = new Set();
+        const resizedCols = new Set();
+        for (const { target, contentRect } of entries) {
+            // Skip zero-sized rects that may be observed under `display: none` style
+            if (!target.offsetParent)
+                continue;
+            if (target === viewportElement) {
+                vStore._update(ACTION_VIEWPORT_RESIZE, contentRect[heightKey]);
+                hStore._update(ACTION_VIEWPORT_RESIZE, contentRect[widthKey]);
+            }
+            else {
+                const cell = mountedIndexes.get(target);
+                if (cell) {
+                    const [rowIndex, colIndex] = cell;
+                    const key = getKey(rowIndex, colIndex);
+                    const prevSize = sizeCache.get(key);
+                    const size = [
+                        contentRect[heightKey],
+                        contentRect[widthKey],
+                    ];
+                    let rowResized;
+                    let colResized;
+                    if (!prevSize) {
+                        rowResized = colResized = true;
+                    }
+                    else {
+                        if (prevSize[0] !== size[0]) {
+                            rowResized = true;
+                        }
+                        if (prevSize[1] !== size[1]) {
+                            colResized = true;
+                        }
+                    }
+                    if (rowResized) {
+                        resizedRows.add(rowIndex);
+                    }
+                    if (colResized) {
+                        resizedCols.add(colIndex);
+                    }
+                    if (rowResized || colResized) {
+                        sizeCache.set(key, size);
+                    }
+                }
+            }
+        }
+        if (resizedRows.size) {
+            const heightResizes = [];
+            resizedRows.forEach((rowIndex) => {
+                let maxHeight = 0;
+                maybeCachedColIndexes.forEach((colIndex) => {
+                    const size = sizeCache.get(getKey(rowIndex, colIndex));
+                    if (size) {
+                        maxHeight = max(maxHeight, size[0]);
+                    }
+                });
+                if (maxHeight) {
+                    heightResizes.push([rowIndex, maxHeight]);
+                }
+            });
+            vStore._update(ACTION_ITEM_RESIZE, heightResizes);
+        }
+        if (resizedCols.size) {
+            const widthResizes = [];
+            resizedCols.forEach((colIndex) => {
+                let maxWidth = 0;
+                maybeCachedRowIndexes.forEach((rowIndex) => {
+                    const size = sizeCache.get(getKey(rowIndex, colIndex));
+                    if (size) {
+                        maxWidth = max(maxWidth, size[1]);
+                    }
+                });
+                if (maxWidth) {
+                    widthResizes.push([colIndex, maxWidth]);
+                }
+            });
+            hStore._update(ACTION_ITEM_RESIZE, widthResizes);
+        }
+    });
+    return {
+        _observeRoot(viewport) {
+            resizeObserver._observe((viewportElement = viewport));
+        },
+        _observeItem(el, rowIndex, colIndex) {
+            mountedIndexes.set(el, [rowIndex, colIndex]);
+            maybeCachedRowIndexes.add(rowIndex);
+            maybeCachedColIndexes.add(colIndex);
+            resizeObserver._observe(el);
+            return () => {
+                mountedIndexes.delete(el);
+                resizeObserver._unobserve(el);
+            };
+        },
+        _dispose: resizeObserver._dispose,
+    };
+};

package/core/scroller.js

@@ -0,0 +1,273 @@
+import { getCurrentDocument, getCurrentWindow, isIOSWebKit, isRTLDocument, isSmoothScrollSupported, } from "./environment";
+import { ACTION_SCROLL, ACTION_SCROLL_END, UPDATE_SIZE_STATE, ACTION_MANUAL_SCROLL, SCROLL_IDLE, ACTION_BEFORE_MANUAL_SMOOTH_SCROLL, } from "./store";
+import { debounce, timeout, clamp } from "./utils";
+/**
+ * scrollLeft is negative value in rtl direction.
+ *
+ * left  right
+ * -100  0      spec compliant
+ * https://github.com/othree/jquery.rtl-scroll-type
+ */
+const normalizeOffset = (offset, isHorizontal) => {
+    if (isHorizontal && isRTLDocument()) {
+        return -offset;
+    }
+    else {
+        return offset;
+    }
+};
+const createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, updateScrollOffset) => {
+    const now = Date.now;
+    let lastScrollTime = 0;
+    let wheeling = false;
+    let touching = false;
+    let justTouchEnded = false;
+    let stillMomentumScrolling = false;
+    const onScrollEnd = debounce(() => {
+        if (wheeling || touching) {
+            wheeling = false;
+            // Wait while wheeling or touching
+            onScrollEnd();
+            return;
+        }
+        justTouchEnded = false;
+        store._update(ACTION_SCROLL_END);
+    }, 150);
+    const onScroll = () => {
+        lastScrollTime = now();
+        if (justTouchEnded) {
+            stillMomentumScrolling = true;
+        }
+        store._update(ACTION_SCROLL, getScrollOffset());
+        onScrollEnd();
+    };
+    // Infer scroll state also from wheel events
+    // Sometimes scroll events do not fire when frame dropped even if the visual have been already scrolled
+    const onWheel = ((e) => {
+        if (wheeling ||
+            // Scroll start should be detected with scroll event
+            store._getScrollDirection() === SCROLL_IDLE ||
+            // Probably a pinch-to-zoom gesture
+            e.ctrlKey) {
+            return;
+        }
+        const timeDelta = now() - lastScrollTime;
+        if (
+        // Check if wheel event occurs some time after scrolling
+        150 > timeDelta &&
+            50 < timeDelta &&
+            // Get delta before checking deltaMode for firefox behavior
+            // https://github.com/w3c/uievents/issues/181#issuecomment-392648065
+            // https://bugzilla.mozilla.org/show_bug.cgi?id=1392460#c34
+            (isHorizontal ? e.deltaX : e.deltaY)) {
+            wheeling = true;
+        }
+    }); // FIXME type error. why only here?
+    const onTouchStart = () => {
+        touching = true;
+        justTouchEnded = stillMomentumScrolling = false;
+    };
+    const onTouchEnd = () => {
+        touching = false;
+        if (isIOSWebKit()) {
+            justTouchEnded = true;
+        }
+    };
+    viewport.addEventListener("scroll", onScroll);
+    viewport.addEventListener("wheel", onWheel, { passive: true });
+    viewport.addEventListener("touchstart", onTouchStart, { passive: true });
+    viewport.addEventListener("touchend", onTouchEnd, { passive: true });
+    return {
+        _dispose: () => {
+            viewport.removeEventListener("scroll", onScroll);
+            viewport.removeEventListener("wheel", onWheel);
+            viewport.removeEventListener("touchstart", onTouchStart);
+            viewport.removeEventListener("touchend", onTouchEnd);
+            onScrollEnd._cancel();
+        },
+        _fixScrollJump: (jump) => {
+            updateScrollOffset(jump, stillMomentumScrolling);
+            stillMomentumScrolling = false;
+        },
+    };
+};
+/**
+ * @internal
+ */
+export const createScroller = (store, isHorizontal) => {
+    let viewportElement;
+    let scrollObserver;
+    let cancelScroll;
+    const scrollToKey = isHorizontal ? "scrollLeft" : "scrollTop";
+    const overflowKey = isHorizontal ? "overflowX" : "overflowY";
+    // The given offset will be clamped by browser
+    // https://drafts.csswg.org/cssom-view/#dom-element-scrolltop
+    const scheduleImperativeScroll = async (getTargetOffset, smooth) => {
+        if (!viewportElement)
+            return;
+        if (cancelScroll) {
+            // Cancel waiting scrollTo
+            cancelScroll();
+        }
+        const waitForMeasurement = () => {
+            // Wait for the scroll destination items to be measured.
+            // The measurement will be done asynchronously and the timing is not predictable so we use promise.
+            // For example, ResizeObserver may not fire when window is not visible.
+            let queue;
+            return [
+                new Promise((resolve, reject) => {
+                    queue = resolve;
+                    // Reject when items around scroll destination completely measured
+                    timeout((cancelScroll = reject), 150);
+                }),
+                store._subscribe(UPDATE_SIZE_STATE, () => {
+                    queue && queue();
+                }),
+            ];
+        };
+        if (smooth && isSmoothScrollSupported()) {
+            while (true) {
+                store._update(ACTION_BEFORE_MANUAL_SMOOTH_SCROLL, getTargetOffset());
+                if (!store._hasUnmeasuredItemsInFrozenRange()) {
+                    break;
+                }
+                const [promise, unsubscribe] = waitForMeasurement();
+                try {
+                    await promise;
+                }
+                catch (e) {
+                    // canceled
+                    return;
+                }
+                finally {
+                    unsubscribe();
+                }
+            }
+            viewportElement.scrollTo({
+                [isHorizontal ? "left" : "top"]: normalizeOffset(getTargetOffset(), isHorizontal),
+                behavior: "smooth",
+            });
+        }
+        else {
+            while (true) {
+                const [promise, unsubscribe] = waitForMeasurement();
+                try {
+                    viewportElement[scrollToKey] = normalizeOffset(getTargetOffset(), isHorizontal);
+                    store._update(ACTION_MANUAL_SCROLL);
+                    await promise;
+                }
+                catch (e) {
+                    // canceled or finished
+                    return;
+                }
+                finally {
+                    unsubscribe();
+                }
+            }
+        }
+    };
+    return {
+        _observe(viewport) {
+            viewportElement = viewport;
+            scrollObserver = createScrollObserver(store, viewport, isHorizontal, () => normalizeOffset(viewport[scrollToKey], isHorizontal), (jump, isMomentumScrolling) => {
+                // If we update scroll position while touching on iOS, the position will be reverted.
+                // However iOS WebKit fires touch events only once at the beginning of momentum scrolling.
+                // That means we have no reliable way to confirm still touched or not if user touches more than once during momentum scrolling...
+                // This is a hack for the suspectable situations, inspired by https://github.com/prud/ios-overflow-scroll-to-top
+                if (isMomentumScrolling) {
+                    const style = viewport.style;
+                    const prev = style[overflowKey];
+                    style[overflowKey] = "hidden";
+                    timeout(() => {
+                        style[overflowKey] = prev;
+                    });
+                }
+                viewport[scrollToKey] += normalizeOffset(jump, isHorizontal);
+            });
+        },
+        _dispose() {
+            scrollObserver && scrollObserver._dispose();
+        },
+        _scrollTo(offset) {
+            scheduleImperativeScroll(() => offset);
+        },
+        _scrollBy(offset) {
+            offset += store._getScrollOffset();
+            scheduleImperativeScroll(() => offset);
+        },
+        _scrollToIndex(index, { align, smooth } = {}) {
+            index = clamp(index, 0, store._getItemsLength() - 1);
+            if (align === "nearest") {
+                const itemOffset = store._getItemOffset(index);
+                const scrollOffset = store._getScrollOffset();
+                if (itemOffset < scrollOffset) {
+                    align = "start";
+                }
+                else if (itemOffset + store._getItemSize(index) >
+                    scrollOffset + store._getViewportSize()) {
+                    align = "end";
+                }
+                else {
+                    // already completely visible
+                    return;
+                }
+            }
+            scheduleImperativeScroll(() => {
+                return (store._getStartSpacerSize() +
+                    (align === "end"
+                        ? store._getItemOffset(index) +
+                            store._getItemSize(index) -
+                            store._getViewportSize()
+                        : align === "center"
+                            ? store._getItemOffset(index) +
+                                (store._getItemSize(index) - store._getViewportSize()) / 2
+                            : store._getItemOffset(index)));
+            }, smooth);
+        },
+        _fixScrollJump: (jump) => {
+            if (!scrollObserver)
+                return;
+            scrollObserver._fixScrollJump(jump);
+        },
+    };
+};
+/**
+ * @internal
+ */
+export const createWindowScroller = (store, isHorizontal) => {
+    let scrollObserver;
+    return {
+        _observe(container) {
+            const scrollToKey = isHorizontal ? "scrollX" : "scrollY";
+            const document = getCurrentDocument(container);
+            const window = getCurrentWindow(document);
+            const documentBody = document.body;
+            const calcOffsetToViewport = (node, viewport, isHorizontal, offset = 0) => {
+                // TODO calc offset only when it changes (maybe impossible)
+                const offsetKey = isHorizontal ? "offsetLeft" : "offsetTop";
+                const offsetSum = offset +
+                    (isHorizontal && isRTLDocument()
+                        ? window.innerWidth - node[offsetKey] - node.offsetWidth
+                        : node[offsetKey]);
+                const parent = node.offsetParent;
+                if (node === viewport || !parent) {
+                    return offsetSum;
+                }
+                return calcOffsetToViewport(parent, viewport, isHorizontal, offsetSum);
+            };
+            scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeOffset(window[scrollToKey], isHorizontal) -
+                calcOffsetToViewport(container, documentBody, isHorizontal), (jump) => {
+                // TODO support case two window scrollers exist in the same view
+                window.scrollBy(isHorizontal ? normalizeOffset(jump, isHorizontal) : 0, isHorizontal ? 0 : jump);
+            });
+        },
+        _dispose() {
+            scrollObserver && scrollObserver._dispose();
+        },
+        _fixScrollJump: (jump) => {
+            if (!scrollObserver)
+                return;
+            scrollObserver._fixScrollJump(jump);
+        },
+    };
+};

package/core/store.js

@@ -0,0 +1,345 @@
+import { initCache, getItemSize, computeTotalSize, computeOffset as computeStartOffset, UNCACHED, setItemSize, estimateDefaultItemSize, updateCacheLength, computeRange, } from "./cache";
+import { isIOSWebKit } from "./environment";
+import { abs, clamp, max, min } from "./utils";
+// Scroll offset and sizes can have sub-pixel value if window.devicePixelRatio has decimal value
+const SUBPIXEL_THRESHOLD = 1.5; // 0.5 * 3
+/** @internal */
+export const SCROLL_IDLE = 0;
+/** @internal */
+export const SCROLL_DOWN = 1;
+/** @internal */
+export const SCROLL_UP = 2;
+const SCROLL_BY_NATIVE = 0;
+const SCROLL_BY_MANUAL_SCROLL = 1;
+const SCROLL_BY_PREPENDING = 2;
+/** @internal */
+export const ACTION_ITEM_RESIZE = 1;
+/** @internal */
+export const ACTION_VIEWPORT_RESIZE = 2;
+/** @internal */
+export const ACTION_ITEMS_LENGTH_CHANGE = 3;
+/** @internal */
+export const ACTION_SCROLL = 4;
+/** @internal */
+export const ACTION_SCROLL_END = 5;
+/** @internal */
+export const ACTION_MANUAL_SCROLL = 6;
+/** @internal */
+export const ACTION_BEFORE_MANUAL_SMOOTH_SCROLL = 7;
+/** @internal */
+export const UPDATE_SCROLL_STATE = 0b0001;
+/** @internal */
+export const UPDATE_SIZE_STATE = 0b0010;
+/** @internal */
+export const UPDATE_SCROLL_EVENT = 0b0100;
+/** @internal */
+export const UPDATE_SCROLL_END_EVENT = 0b1000;
+/**
+ *  @internal
+ */
+export const getScrollSize = (store) => {
+    return max(store._getTotalSize(), store._getViewportSize());
+};
+/**
+ * @internal
+ */
+export const getMinContainerSize = (store) => {
+    return max(store._getTotalSize(), store._getViewportSize() -
+        store._getStartSpacerSize() -
+        store._getEndSpacerSize());
+};
+/**
+ * @internal
+ */
+export const overscanStartIndex = (startIndex, overscan, scrollDirection) => {
+    return max(startIndex - (scrollDirection === SCROLL_DOWN ? 1 : max(1, overscan)), 0);
+};
+/**
+ * @internal
+ */
+export const overscanEndIndex = (endIndex, overscan, scrollDirection, count) => {
+    return min(endIndex + (scrollDirection === SCROLL_UP ? 1 : max(1, overscan)), count - 1);
+};
+const calculateJump = (cache, items, keepEnd) => {
+    return items.reduce((acc, [index, size]) => {
+        const diff = size - getItemSize(cache, index);
+        if (!keepEnd || diff > 0) {
+            acc += diff;
+        }
+        return acc;
+    }, 0);
+};
+/**
+ * @internal
+ */
+export const createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSnapshot, shouldAutoEstimateItemSize, startSpacerSize = 0, endSpacerSize = 0) => {
+    let isSSR = !!ssrCount;
+    let stateVersion = [];
+    let viewportSize = 0;
+    let scrollOffset = 0;
+    let jumpCount = 0;
+    let jump = 0;
+    let pendingJump = 0;
+    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];
+    const cache = cacheSnapshot || initCache(elementsCount, itemSize);
+    const subscribers = new Set();
+    const getTotalSize = () => computeTotalSize(cache);
+    const getScrollableSize = () => getTotalSize() + startSpacerSize + endSpacerSize;
+    const getRelativeScrollOffset = () => scrollOffset - startSpacerSize;
+    const getMaxScrollOffset = () => 
+    // total size can become smaller than viewport size
+    max(0, getScrollableSize() - viewportSize);
+    const applyJump = (j) => {
+        // In iOS WebKit browsers, updating scroll position will stop scrolling so it have to be deferred during scrolling.
+        if (isIOSWebKit() && _scrollDirection !== SCROLL_IDLE) {
+            pendingJump += j;
+        }
+        else {
+            jump += j;
+            jumpCount++;
+        }
+    };
+    return {
+        _getStateVersion() {
+            return stateVersion;
+        },
+        _getCacheSnapshot() {
+            return JSON.parse(JSON.stringify(cache));
+        },
+        _getRange() {
+            if (_frozenRange) {
+                return [
+                    min(_prevRange[0], _frozenRange[0]),
+                    max(_prevRange[1], _frozenRange[1]),
+                ];
+            }
+            // Return previous range for consistent render until next scroll event comes in.
+            if (_flushedJump) {
+                return _prevRange;
+            }
+            return (_prevRange = computeRange(cache, getRelativeScrollOffset() + pendingJump + jump, _prevRange[0], viewportSize));
+        },
+        _isUnmeasuredItem(index) {
+            return cache._sizes[index] === UNCACHED;
+        },
+        _hasUnmeasuredItemsInFrozenRange() {
+            if (!_frozenRange)
+                return false;
+            return cache._sizes
+                .slice(max(0, _frozenRange[0] - 1), min(cache._length - 1, _frozenRange[1] + 1) + 1)
+                .includes(UNCACHED);
+        },
+        _getItemOffset(index) {
+            return computeStartOffset(cache, index) - pendingJump;
+        },
+        _getItemSize(index) {
+            return getItemSize(cache, index);
+        },
+        _getItemsLength() {
+            return cache._length;
+        },
+        _getScrollOffset() {
+            return scrollOffset;
+        },
+        _getScrollDirection() {
+            return _scrollDirection;
+        },
+        _getViewportSize() {
+            return viewportSize;
+        },
+        _getStartSpacerSize() {
+            return startSpacerSize;
+        },
+        _getEndSpacerSize() {
+            return endSpacerSize;
+        },
+        _getTotalSize: getTotalSize,
+        _getJumpCount() {
+            return jumpCount;
+        },
+        _flushJump() {
+            if (viewportSize > getScrollableSize()) {
+                // In this case applying jump will not cause scroll.
+                // Current logic expects scroll event occurs after applying jump so discard it.
+                return (jump = 0);
+            }
+            _flushedJump = jump;
+            jump = 0;
+            return _flushedJump;
+        },
+        _subscribe(target, cb) {
+            const sub = [target, cb];
+            subscribers.add(sub);
+            return () => {
+                subscribers.delete(sub);
+            };
+        },
+        _update(type, payload) {
+            let shouldFlushPendingJump;
+            let shouldSync;
+            let mutated = 0;
+            switch (type) {
+                case ACTION_ITEM_RESIZE: {
+                    const updated = payload.filter(([index, size]) => cache._sizes[index] !== size);
+                    // Skip if all items are cached and not updated
+                    if (!updated.length) {
+                        break;
+                    }
+                    // Calculate jump
+                    // Should maintain visible position to minimize junks in appearance
+                    let diff = 0;
+                    if (scrollOffset === 0) {
+                        // Do nothing to stick to the start
+                    }
+                    else if (scrollOffset > getMaxScrollOffset() - SUBPIXEL_THRESHOLD) {
+                        // Keep end to stick to the end
+                        diff = calculateJump(cache, updated, true);
+                    }
+                    else {
+                        if (_scrollMode === SCROLL_BY_PREPENDING) {
+                            // Keep distance from end immediately after prepending
+                            // We can assume jumps occurred on the upper outside
+                            diff = calculateJump(cache, updated);
+                        }
+                        else {
+                            // Keep start at mid
+                            const [startIndex] = _prevRange;
+                            diff = calculateJump(cache, updated.filter(([index]) => index < startIndex));
+                        }
+                    }
+                    if (diff) {
+                        applyJump(diff);
+                    }
+                    // Update item sizes
+                    let isNewItemMeasured = false;
+                    updated.forEach(([index, size]) => {
+                        if (setItemSize(cache, index, size)) {
+                            isNewItemMeasured = true;
+                        }
+                    });
+                    // Estimate initial item size from measured sizes
+                    if (shouldAutoEstimateItemSize &&
+                        isNewItemMeasured &&
+                        // TODO support reverse scroll also
+                        !scrollOffset) {
+                        estimateDefaultItemSize(cache);
+                    }
+                    mutated = UPDATE_SIZE_STATE;
+                    // Synchronous update is necessary in current design to minimize visible glitch in concurrent rendering.
+                    // However in React, synchronous update with flushSync after asynchronous update will overtake the asynchronous one.
+                    // If items resize happens just after scroll, race condition can occur depending on implementation.
+                    shouldSync = true;
+                    break;
+                }
+                case ACTION_VIEWPORT_RESIZE: {
+                    if (viewportSize !== payload) {
+                        viewportSize = payload;
+                        mutated = UPDATE_SIZE_STATE;
+                    }
+                    break;
+                }
+                case ACTION_ITEMS_LENGTH_CHANGE: {
+                    if (payload[1]) {
+                        // Calc distance before updating cache
+                        const distanceToEnd = getMaxScrollOffset() - scrollOffset;
+                        const [shift, isAdd] = updateCacheLength(cache, payload[0], true);
+                        applyJump(isAdd ? shift : -min(shift, distanceToEnd));
+                        if (isAdd) {
+                            _scrollMode = SCROLL_BY_PREPENDING;
+                        }
+                        mutated = UPDATE_SCROLL_STATE;
+                    }
+                    else {
+                        updateCacheLength(cache, payload[0]);
+                    }
+                    break;
+                }
+                case ACTION_SCROLL: {
+                    // Scroll offset may exceed min or max especially in Safari's elastic scrolling.
+                    const nextScrollOffset = clamp(payload, 0, getMaxScrollOffset());
+                    const flushedJump = _flushedJump;
+                    _flushedJump = 0;
+                    // Skip if offset is not changed
+                    if (nextScrollOffset === scrollOffset) {
+                        break;
+                    }
+                    const delta = nextScrollOffset - scrollOffset;
+                    const distance = abs(delta);
+                    // Scroll event after jump compensation is not reliable because it may result in the opposite direction.
+                    // The delta of artificial scroll may not be equal with the jump because it may be batched with other scrolls.
+                    // And at least in latest Chrome/Firefox/Safari in 2023, setting value to scrollTop/scrollLeft can lose subpixel because its integer (sometimes float probably depending on dpr).
+                    const isJustJumped = flushedJump && distance < abs(flushedJump) + 1;
+                    // Scroll events are dispatched enough so it's ok to skip some of them.
+                    if (!isJustJumped &&
+                        // Ignore until manual scrolling
+                        _scrollMode === SCROLL_BY_NATIVE) {
+                        _scrollDirection = delta < 0 ? SCROLL_UP : SCROLL_DOWN;
+                    }
+                    // TODO This will cause glitch in reverse infinite scrolling. Disable this until better solution is found.
+                    // if (
+                    //   pendingJump &&
+                    //   ((_scrollDirection === SCROLL_UP &&
+                    //     payload - max(pendingJump, 0) <= 0) ||
+                    //     (_scrollDirection === SCROLL_DOWN &&
+                    //       payload - min(pendingJump, 0) >= getScrollOffsetMax()))
+                    // ) {
+                    //   // Flush if almost reached to start or end
+                    //   shouldFlushPendingJump = true;
+                    // }
+                    if (isSSR) {
+                        _frozenRange = null;
+                        isSSR = false;
+                    }
+                    // Update synchronously if scrolled a lot
+                    shouldSync = distance > viewportSize;
+                    scrollOffset = nextScrollOffset;
+                    mutated = UPDATE_SCROLL_STATE + UPDATE_SCROLL_EVENT;
+                    break;
+                }
+                case ACTION_SCROLL_END: {
+                    mutated = UPDATE_SCROLL_END_EVENT;
+                    if (_scrollDirection !== SCROLL_IDLE) {
+                        shouldFlushPendingJump = true;
+                        mutated += UPDATE_SCROLL_STATE;
+                    }
+                    _scrollDirection = SCROLL_IDLE;
+                    _scrollMode = SCROLL_BY_NATIVE;
+                    _frozenRange = null;
+                    break;
+                }
+                case ACTION_MANUAL_SCROLL: {
+                    _scrollMode = SCROLL_BY_MANUAL_SCROLL;
+                    break;
+                }
+                case ACTION_BEFORE_MANUAL_SMOOTH_SCROLL: {
+                    _frozenRange = computeRange(cache, payload, _prevRange[0], viewportSize);
+                    mutated = UPDATE_SCROLL_STATE;
+                    break;
+                }
+            }
+            if (mutated) {
+                stateVersion = [];
+                if (shouldFlushPendingJump && pendingJump) {
+                    jump += pendingJump;
+                    pendingJump = 0;
+                    jumpCount++;
+                }
+                subscribers.forEach(([target, cb]) => {
+                    // Early return to skip React's computation
+                    if (!(mutated & target)) {
+                        return;
+                    }
+                    // https://github.com/facebook/react/issues/25191
+                    // https://github.com/facebook/react/blob/a5fc797db14c6e05d4d5c4dbb22a0dd70d41f5d5/packages/react-reconciler/src/ReactFiberWorkLoop.js#L1443-L1447
+                    cb(shouldSync);
+                });
+            }
+        },
+    };
+};

package/core/types.js

@@ -0,0 +1 @@
+export {};

package/core/utils.js

@@ -0,0 +1,73 @@
+/** @internal */
+export const min = Math.min;
+/** @internal */
+export const max = Math.max;
+/** @internal */
+export const abs = Math.abs;
+/** @internal */
+export const values = Object.values;
+/** @internal */
+export const isArray = Array.isArray;
+/** @internal */
+export const timeout = setTimeout;
+/**
+ * @internal
+ */
+export const clamp = (value, minValue, maxValue) => min(maxValue, max(minValue, value));
+/**
+ * @internal
+ */
+export const exists = (v) => v != null;
+/**
+ * @internal
+ */
+export const median = (arr) => {
+    const s = [...arr].sort((a, b) => a - b);
+    const mid = (arr.length / 2) | 0;
+    return s.length % 2 === 0 ? (s[mid - 1] + s[mid]) / 2 : s[mid];
+};
+/**
+ * @internal
+ */
+export const debounce = (fn, ms) => {
+    let id;
+    const cancel = () => {
+        if (exists(id)) {
+            clearTimeout(id);
+        }
+    };
+    const debouncedFn = () => {
+        cancel();
+        id = timeout(() => {
+            id = null;
+            fn();
+        }, ms);
+    };
+    debouncedFn._cancel = cancel;
+    return debouncedFn;
+};
+/**
+ * @internal
+ */
+export const once = (fn) => {
+    let called;
+    let cache;
+    return ((...args) => {
+        if (!called) {
+            called = true;
+            cache = fn(...args);
+        }
+        return cache;
+    });
+};
+/**
+ * @internal
+ */
+export const getStyleNumber = (v) => {
+    if (v) {
+        return parseFloat(v);
+    }
+    else {
+        return 0;
+    }
+};

package/index.js

@@ -0,0 +1 @@
+export * from "./react";

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "cbvirtua",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/vue/ListItem.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "vue/jsx-runtime";
+/** @jsxImportSource vue */
+import { ref, defineComponent, watch } from "vue";
+import { isRTLDocument } from "../core/environment";
+/**
+ * @internal
+ */
+export const ListItem = /*#__PURE__*/ defineComponent({
+    props: {
+        _children: { type: Object, required: true },
+        _resizer: { type: Object, required: true },
+        _index: { type: Number, required: true },
+        _offset: { type: Number, required: true },
+        _hide: { type: Boolean },
+        _isHorizontal: { type: Boolean },
+        _element: { type: String, required: true },
+    },
+    setup(props) {
+        const elementRef = ref();
+        // The index may be changed if elements are inserted to or removed from the start of props.children
+        watch(() => elementRef.value && props._index, (_, __, onCleanup) => {
+            const cleanupObserver = props._resizer(elementRef.value, props._index);
+            onCleanup(cleanupObserver);
+        }, {
+            flush: "post",
+        });
+        return () => {
+            const { _children: children, _offset: offset, _hide: hide, _element: Element, _isHorizontal: isHorizontal, } = props;
+            const style = {
+                margin: 0,
+                padding: 0,
+                position: "absolute",
+                [isHorizontal ? "height" : "width"]: "100%",
+                [isHorizontal ? "top" : "left"]: "0px",
+                [isHorizontal ? (isRTLDocument() ? "right" : "left") : "top"]: offset + "px",
+                visibility: hide ? "hidden" : "visible",
+            };
+            if (isHorizontal) {
+                style.display = "flex";
+            }
+            return (_jsx(Element, { ref: elementRef, style: style, children: children }));
+        };
+    },
+});

package/vue/VList.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "vue/jsx-runtime";
+/** @jsxImportSource vue */
+import { ref, onMounted, defineComponent, onUnmounted, watch, } from "vue";
+import { SCROLL_IDLE, UPDATE_SCROLL_STATE, UPDATE_SCROLL_EVENT, UPDATE_SCROLL_END_EVENT, UPDATE_SIZE_STATE, overscanEndIndex, overscanStartIndex, createVirtualStore, ACTION_ITEMS_LENGTH_CHANGE, getScrollSize, getMinContainerSize, } from "../core/store";
+import { createResizer } from "../core/resizer";
+import { createScroller } from "../core/scroller";
+import { ListItem } from "./ListItem";
+import { exists } from "../core/utils";
+const props = {
+    /**
+     * The data items rendered by this component.
+     */
+    data: { type: Array, required: true },
+    /**
+     * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
+     * @defaultValue 4
+     */
+    overscan: { type: Number, default: 4 },
+    /**
+     * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
+     *
+     * - If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
+     * - If set, you can opt out estimation and use the value as initial item size.
+     */
+    itemSize: Number,
+    /**
+     * While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
+     */
+    shift: Boolean,
+    /**
+     * If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
+     */
+    horizontal: Boolean,
+};
+export const VList = /*#__PURE__*/ defineComponent({
+    props: props,
+    emits: ["scroll", "scrollEnd", "rangeChange"],
+    setup(props, { emit, expose, slots }) {
+        var _a;
+        const isHorizontal = props.horizontal;
+        const rootRef = ref();
+        const store = createVirtualStore(props.data.length, (_a = props.itemSize) !== null && _a !== void 0 ? _a : 40, undefined, undefined, !props.itemSize);
+        const resizer = createResizer(store, isHorizontal);
+        const scroller = createScroller(store, isHorizontal);
+        const rerender = ref(store._getStateVersion());
+        const unsubscribeStore = store._subscribe(UPDATE_SCROLL_STATE + UPDATE_SIZE_STATE, () => {
+            rerender.value = store._getStateVersion();
+        });
+        const unsubscribeOnScroll = store._subscribe(UPDATE_SCROLL_EVENT, () => {
+            emit("scroll", store._getScrollOffset());
+        });
+        const unsubscribeOnScrollEnd = store._subscribe(UPDATE_SCROLL_END_EVENT, () => {
+            emit("scrollEnd");
+        });
+        onMounted(() => {
+            const root = rootRef.value;
+            if (!root)
+                return;
+            resizer._observeRoot(root);
+            scroller._observe(root);
+        });
+        onUnmounted(() => {
+            unsubscribeStore();
+            unsubscribeOnScroll();
+            unsubscribeOnScrollEnd();
+            resizer._dispose();
+            scroller._dispose();
+        });
+        watch(() => props.data.length, (count) => {
+            store._update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
+        });
+        watch([rerender, store._getJumpCount], ([, count], [, prevCount]) => {
+            if (count === prevCount)
+                return;
+            const jump = store._flushJump();
+            if (!jump)
+                return;
+            scroller._fixScrollJump(jump);
+        }, { flush: "post" });
+        watch([rerender, store._getRange], ([, [start, end]], [, [prevStart, prevEnd]]) => {
+            if (prevStart === start && prevEnd === end)
+                return;
+            emit("rangeChange", start, end);
+        }, { flush: "post" });
+        expose({
+            get scrollOffset() {
+                return store._getScrollOffset();
+            },
+            get scrollSize() {
+                return getScrollSize(store);
+            },
+            get viewportSize() {
+                return store._getViewportSize();
+            },
+            scrollToIndex: scroller._scrollToIndex,
+            scrollTo: scroller._scrollTo,
+            scrollBy: scroller._scrollBy,
+        });
+        return () => {
+            rerender.value;
+            const count = props.data.length;
+            const [startIndex, endIndex] = store._getRange();
+            const scrollDirection = store._getScrollDirection();
+            const totalSize = store._getTotalSize();
+            // https://github.com/inokawa/virtua/issues/252#issuecomment-1822861368
+            const minSize = getMinContainerSize(store);
+            const items = [];
+            for (let i = overscanStartIndex(startIndex, props.overscan, scrollDirection), j = overscanEndIndex(endIndex, props.overscan, scrollDirection, count); i <= j; i++) {
+                const e = slots.default(props.data[i])[0];
+                const key = e.key;
+                items.push(_jsx(ListItem, { _resizer: resizer._observeItem, _index: i, _offset: store._getItemOffset(i), _hide: store._isUnmeasuredItem(i), _element: "div", _children: e, _isHorizontal: isHorizontal }, exists(key) ? key : "_" + i));
+            }
+            return (_jsx("div", { ref: rootRef, style: {
+                    display: isHorizontal ? "inline-block" : "block",
+                    [isHorizontal ? "overflowX" : "overflowY"]: "auto",
+                    overflowAnchor: "none",
+                    contain: "strict",
+                    width: "100%",
+                    height: "100%",
+                }, children: _jsx("div", { style: {
+                        // contain: "content",
+                        overflowAnchor: "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
+                        flex: "none", // flex style on parent can break layout
+                        position: "relative",
+                        visibility: "hidden",
+                        width: isHorizontal ? totalSize + "px" : "100%",
+                        height: isHorizontal ? "100%" : totalSize + "px",
+                        [isHorizontal ? "minWidth" : "minHeight"]: minSize + "px",
+                        pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto",
+                    }, children: items }) }));
+        };
+    },
+});

package/vue/index.js

@@ -0,0 +1,4 @@
+/**
+ * @module vue
+ */
+export { VList } from "./VList";