virtua 0.40.0 → 0.40.2

package/lib/solid/index.jsx

@@ -246,6 +246,7 @@ const isSmoothScrollSupported = /*#__PURE__*/ once(() => {
     return "scrollBehavior" in getDocumentElement().style;
 });
 
+const MAX_INT_32 = 0x7fffffff;
 const SCROLL_IDLE = 0;
 const SCROLL_DOWN = 1;
 const SCROLL_UP = 2;
@@ -293,11 +294,10 @@ const isInitialMeasurementDone = (store) => {
  */
 const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount = 0, cacheSnapshot, shouldAutoEstimateItemSize = false) => {
     let isSSR = !!ssrCount;
-    let stateVersion = [];
+    let stateVersion = 1;
     let viewportSize = 0;
     let startSpacerSize = 0;
     let scrollOffset = 0;
-    let jumpCount = 0;
     let jump = 0;
     let pendingJump = 0;
     let _flushedJump = 0;
@@ -330,7 +330,6 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
             }
             else {
                 jump += j;
-                jumpCount++;
             }
         }
     };
@@ -340,14 +339,19 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
             return takeCacheSnapshot(cache);
         },
         $getRange: () => {
-            // Return previous range for consistent render until next scroll event comes in.
+            let startIndex;
+            let endIndex;
             if (_flushedJump) {
-                return _prevRange;
+                // Return previous range for consistent render until next scroll event comes in.
+                // And it must be clamped. https://github.com/inokawa/virtua/issues/597
+                [startIndex, endIndex] = _prevRange;
             }
-            let [startIndex, endIndex] = getRange(max(0, getVisibleOffset()));
-            if (_frozenRange) {
-                startIndex = min(startIndex, _frozenRange[0]);
-                endIndex = max(endIndex, _frozenRange[1]);
+            else {
+                [startIndex, endIndex] = _prevRange = getRange(max(0, getVisibleOffset()));
+                if (_frozenRange) {
+                    startIndex = min(startIndex, _frozenRange[0]);
+                    endIndex = max(endIndex, _frozenRange[1]);
+                }
             }
             if (_scrollDirection !== SCROLL_DOWN) {
                 startIndex -= max(0, overscan);
@@ -355,10 +359,7 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
             if (_scrollDirection !== SCROLL_UP) {
                 endIndex += max(0, overscan);
             }
-            return (_prevRange = [
-                max(startIndex, 0),
-                min(endIndex, cache._length - 1),
-            ]);
+            return [max(startIndex, 0), min(endIndex, cache._length - 1)];
         },
         $findStartIndex: () => findIndex(cache, getVisibleOffset()),
         $findEndIndex: () => findIndex(cache, getVisibleOffset() + viewportSize),
@@ -378,7 +379,6 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
         $getViewportSize: () => viewportSize,
         $getStartSpacerSize: () => startSpacerSize,
         $getTotalSize: getTotalSize,
-        $getJumpCount: () => jumpCount,
         _flushJump: () => {
             _flushedJump = jump;
             jump = 0;
@@ -547,11 +547,10 @@ const createVirtualStore = (elementsCount, itemSize = 40, overscan = 4, ssrCount
                 }
             }
             if (mutated) {
-                stateVersion = [];
+                stateVersion = (stateVersion % MAX_INT_32) + 1;
                 if (shouldFlushPendingJump && pendingJump) {
                     jump += pendingJump;
                     pendingJump = 0;
-                    jumpCount++;
                 }
                 subscribers.forEach(([target, cb]) => {
                     // Early return to skip React's computation
@@ -1352,7 +1351,7 @@ const Virtualizer = (props) => {
     const store = createVirtualStore(props.data.length, itemSize, overscan, undefined, undefined, !itemSize);
     const resizer = createResizer(store, horizontal);
     const scroller = createScroller(store, horizontal);
-    const [rerender, setRerender] = createSignal(store.$getStateVersion());
+    const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
     const unsubscribeStore = store.$subscribe(UPDATE_VIRTUAL_STATE, () => {
         setRerender(store.$getStateVersion());
     });
@@ -1365,16 +1364,15 @@ const Virtualizer = (props) => {
         (_a = props.onScrollEnd) === null || _a === void 0 ? void 0 : _a.call(props);
     });
     const range = createMemo((prev) => {
-        rerender();
+        stateVersion();
         const next = store.$getRange();
         if (prev && isSameRange(prev, next)) {
             return prev;
         }
         return next;
     });
-    const isScrolling = createMemo(() => rerender() && store.$isScrolling());
-    const totalSize = createMemo(() => rerender() && store.$getTotalSize());
-    const jumpCount = createMemo(() => rerender() && store.$getJumpCount());
+    const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
+    const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
     onMount(() => {
         if (props.ref) {
             props.ref({
@@ -1420,7 +1418,7 @@ const Virtualizer = (props) => {
             store.$update(ACTION_START_OFFSET_CHANGE, value);
         }
     }));
-    createEffect(on(jumpCount, () => {
+    createEffect(on(stateVersion, () => {
         scroller.$fixScrollJump();
     }));
     return (<Dynamic component={props.as} ref={containerRef} style={{
@@ -1435,11 +1433,11 @@ const Virtualizer = (props) => {
         }}>
       <RangedFor _each={props.data} _range={range()} _render={(data, index) => {
             const offset = createMemo(() => {
-                rerender();
+                stateVersion();
                 return store.$getItemOffset(index);
             });
             const hide = createMemo(() => {
-                rerender();
+                stateVersion();
                 return store.$isUnmeasuredItem(index);
             });
             return (<ListItem _as={props.item} _index={index} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={props.children(data(), index)} _isHorizontal={horizontal}/>);
@@ -1478,7 +1476,7 @@ const WindowVirtualizer = (props) => {
     const store = createVirtualStore(props.data.length, itemSize, overscan, undefined, undefined, !itemSize);
     const resizer = createWindowResizer(store, horizontal);
     const scroller = createWindowScroller(store, horizontal);
-    const [rerender, setRerender] = createSignal(store.$getStateVersion());
+    const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
     const unsubscribeStore = store.$subscribe(UPDATE_VIRTUAL_STATE, () => {
         setRerender(store.$getStateVersion());
     });
@@ -1492,16 +1490,15 @@ const WindowVirtualizer = (props) => {
         (_a = props.onScrollEnd) === null || _a === void 0 ? void 0 : _a.call(props);
     });
     const range = createMemo((prev) => {
-        rerender();
+        stateVersion();
         const next = store.$getRange();
         if (prev && isSameRange(prev, next)) {
             return prev;
         }
         return next;
     });
-    const isScrolling = createMemo(() => rerender() && store.$isScrolling());
-    const totalSize = createMemo(() => rerender() && store.$getTotalSize());
-    const jumpCount = createMemo(() => rerender() && store.$getJumpCount());
+    const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
+    const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
     onMount(() => {
         if (props.ref) {
             props.ref({
@@ -1528,7 +1525,7 @@ const WindowVirtualizer = (props) => {
             store.$update(ACTION_ITEMS_LENGTH_CHANGE, [len, props.shift]);
         }
     }));
-    createEffect(on(jumpCount, () => {
+    createEffect(on(stateVersion, () => {
         scroller.$fixScrollJump();
     }));
     return (<div ref={containerRef} style={{
@@ -1543,11 +1540,11 @@ const WindowVirtualizer = (props) => {
         }}>
       <RangedFor _each={props.data} _range={range()} _render={(data, index) => {
             const offset = createMemo(() => {
-                rerender();
+                stateVersion();
                 return store.$getItemOffset(index);
             });
             const hide = createMemo(() => {
-                rerender();
+                stateVersion();
                 return store.$isUnmeasuredItem(index);
             });
             return (<ListItem _index={index} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={props.children(data(), index)} _isHorizontal={horizontal}/>);