@legendapp/list 1.0.9 → 1.0.11

package/CHANGELOG.md

@@ -1,5 +1,51 @@
-# 1.0.0
+## 1.0.10
+- Fix: Removed an optimization that only checked newly visible items, which could sometimes cause gaps in lists
+- Fix: Scroll history resets properly during scroll operations, which was causing gaps after scroll
+- Fix: Made scroll buffer calculations and scroll jump handling more reliable
 
+## 1.0.9
+- Fix: Use the `use-sync-external-store` shim to support older versions of react
+- Fix: Lists sometimes leaving some gaps when reordering a list
+- Fix: Sometimes precomputing next scroll position for calculation incorrectly
+
+## 1.0.8
+- Perf: The scroll buffering algorithm is smarter and adjusts based on scroll direction for better performance
+- Perf: The container-finding logic keeps index order, reducing gaps in rendering
+- Perf: Combine multiple hooks in Container to a single `useArray$` hook
+
+## 1.0.7
+- Fix: Containers that move out of view are handled better
+
+## 1.0.6
+- Fix: Average item size calculations are more accurate while scrolling
+- Fix: Items in view are handled better when data changes
+- Fix: Scroll position is maintained more accurately during updates
+
+## 1.0.5
+- Fix: Fast scrolling sometimes caused elements to disappear
+- Fix: Out-of-range `scrollToIndex` calls are handled better
+
+## 1.0.4
+- Fix: Container allocation is more efficient
+- Fix: Bidirectional infinite lists scroll better on the old architecture
+- Fix: Item size updates are handled more reliably
+- Fix: Container reuse logic is more accurate
+- Fix: Zero-size layouts are handled better in the old architecture
+
+## 1.0.3
+- Fix: Items that are larger than the estimated size are handled correctly
+
+## 1.0.2
+- Fix: Initial layout works better in the old architecture
+- Fix: Average size calculations are more accurate for bidirectional scrolling
+- Fix: Initial scroll index behavior is more precise
+- Fix: Item size calculations are more accurate overall
+
+## 1.0.1
+- Fix: Total size calculations are correct when using average sizes
+- Fix: Keyboard avoiding behavior is improved for a smoother experience
+
+## 1.0.0
 Initial release! Major changes if you're coming from a beta version:
 
-- Item hooks like `useRecyclingState` are no longer render props, but can be imported from `@legendapp/list`
+- Item hooks like `useRecyclingState` are no longer render props, but can be imported directly from `@legendapp/list`.

package/index.js

@@ -80,12 +80,6 @@ function createSelectorFunctionsArr(ctx, signalNames) {
     }
   };
 }
-function useArr$(signalNames) {
-  const ctx = React2__namespace.useContext(ContextState);
-  const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
-  const value = shim.useSyncExternalStore(subscribe, get);
-  return value;
-}
 function listen$(ctx, signalName, cb) {
   const { listeners } = ctx;
   let setListeners = listeners.get(signalName);
@@ -120,6 +114,12 @@ function getContentSize(ctx) {
   const totalSize = values.get("totalSize") || 0;
   return headerSize + footerSize + totalSize + stylePaddingTop;
 }
+function useArr$(signalNames) {
+  const ctx = React2__namespace.useContext(ContextState);
+  const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const value = shim.useSyncExternalStore(subscribe, get);
+  return value;
+}
 
 // src/DebugView.tsx
 var DebugRow = ({ children }) => {
@@ -1546,8 +1546,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         maxSizeInRow = 0;
       }
     }
-    const prevStartBuffered = state.startBuffered;
-    const prevEndBuffered = state.endBuffered;
     Object.assign(state, {
       startBuffered,
       startBufferedId,
@@ -1564,34 +1562,19 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (startBuffered !== null && endBuffered !== null) {
       let numContainers = prevNumContainers;
       const needNewContainers = [];
-      if (isReset || startBuffered < prevStartBuffered || endBuffered > prevEndBuffered) {
-        const isContained = (i) => {
-          const id = getId(i);
-          for (let j = 0; j < numContainers; j++) {
-            const key = peek$(ctx, `containerItemKey${j}`);
-            if (key === id) {
-              return true;
-            }
-          }
-        };
-        if (isReset) {
-          for (let i = startBuffered; i <= endBuffered; i++) {
-            if (!isContained(i)) {
-              needNewContainers.push(i);
-            }
-          }
-        } else {
-          for (let i = startBuffered; i < prevStartBuffered; i++) {
-            if (!isContained(i)) {
-              needNewContainers.push(i);
-            }
-          }
-          for (let i = Math.max(prevEndBuffered + 1, startBuffered); i <= endBuffered; i++) {
-            if (!isContained(i)) {
-              needNewContainers.push(i);
-            }
+      const isContained = (i) => {
+        const id = getId(i);
+        for (let j = 0; j < numContainers; j++) {
+          const key = peek$(ctx, `containerItemKey${j}`);
+          if (key === id) {
+            return true;
           }
         }
+      };
+      for (let i = startBuffered; i <= endBuffered; i++) {
+        if (!isContained(i)) {
+          needNewContainers.push(i);
+        }
       }
       if (needNewContainers.length > 0) {
         const availableContainers = findAvailableContainers(
@@ -1710,6 +1693,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (state) {
       state.scrollingToOffset = void 0;
       state.scrollAdjustHandler.setDisableAdjust(false);
+      state.scrollHistory.length = 0;
       calculateItemsInView();
     }
   };
@@ -1717,6 +1701,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     var _a;
     const state = refState.current;
     state.scrollAdjustHandler.setDisableAdjust(true);
+    state.scrollHistory.length = 0;
     state.scrollingToOffset = offset;
     (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
       x: horizontal ? offset : 0,
@@ -1987,7 +1972,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
         if (__DEV__ && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
           console.warn(
-            "[legend-list] No container to recycle, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio."
+            "[legend-list] No unused container available, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio.",
+            {
+              debugInfo: {
+                numContainers,
+                numNeeded,
+                stillNeeded,
+                numContainersPooled: peek$(ctx, "numContainersPooled")
+              }
+            }
           );
         }
       }
@@ -2240,11 +2233,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         return;
       }
       const state = refState.current;
+      const scrollingToOffset = state.scrollingToOffset;
       const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
         return;
       }
-      if (state.scrollingToOffset !== void 0 && Math.abs(newScroll - state.scrollingToOffset) < 10) {
+      if (scrollingToOffset !== void 0 && Math.abs(newScroll - scrollingToOffset) < 10) {
         finishScrollTo();
       }
       if (state.disableScrollJumpsFrom !== void 0) {
@@ -2257,7 +2251,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.hasScrolled = true;
       state.lastBatchingAction = Date.now();
       const currentTime = performance.now();
-      if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
+      if (scrollingToOffset === void 0 && !(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
         state.scrollHistory.push({ scroll: newScroll, time: currentTime });
       }
       if (state.scrollHistory.length > 5) {
@@ -2272,10 +2266,19 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       let velocity = 0;
       if (state.scrollHistory.length >= 2) {
         const newest = state.scrollHistory[state.scrollHistory.length - 1];
-        const oldest = state.scrollHistory[0];
-        const scrollDiff = newest.scroll - oldest.scroll;
-        const timeDiff = newest.time - oldest.time;
-        velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
+        let oldest;
+        for (let i = 0; i < state.scrollHistory.length - 1; i++) {
+          const entry = state.scrollHistory[i];
+          if (newest.time - entry.time <= 100) {
+            oldest = entry;
+            break;
+          }
+        }
+        if (oldest) {
+          const scrollDiff = newest.scroll - oldest.scroll;
+          const timeDiff = newest.time - oldest.time;
+          velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
+        }
       }
       state.scrollPrev = state.scroll;
       state.scrollPrevTime = state.scrollTime;

package/index.mjs

@@ -59,12 +59,6 @@ function createSelectorFunctionsArr(ctx, signalNames) {
     }
   };
 }
-function useArr$(signalNames) {
-  const ctx = React2.useContext(ContextState);
-  const { subscribe, get } = React2.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
-  const value = useSyncExternalStore(subscribe, get);
-  return value;
-}
 function listen$(ctx, signalName, cb) {
   const { listeners } = ctx;
   let setListeners = listeners.get(signalName);
@@ -99,6 +93,12 @@ function getContentSize(ctx) {
   const totalSize = values.get("totalSize") || 0;
   return headerSize + footerSize + totalSize + stylePaddingTop;
 }
+function useArr$(signalNames) {
+  const ctx = React2.useContext(ContextState);
+  const { subscribe, get } = React2.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const value = useSyncExternalStore(subscribe, get);
+  return value;
+}
 
 // src/DebugView.tsx
 var DebugRow = ({ children }) => {
@@ -1525,8 +1525,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         maxSizeInRow = 0;
       }
     }
-    const prevStartBuffered = state.startBuffered;
-    const prevEndBuffered = state.endBuffered;
     Object.assign(state, {
       startBuffered,
       startBufferedId,
@@ -1543,34 +1541,19 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (startBuffered !== null && endBuffered !== null) {
       let numContainers = prevNumContainers;
       const needNewContainers = [];
-      if (isReset || startBuffered < prevStartBuffered || endBuffered > prevEndBuffered) {
-        const isContained = (i) => {
-          const id = getId(i);
-          for (let j = 0; j < numContainers; j++) {
-            const key = peek$(ctx, `containerItemKey${j}`);
-            if (key === id) {
-              return true;
-            }
-          }
-        };
-        if (isReset) {
-          for (let i = startBuffered; i <= endBuffered; i++) {
-            if (!isContained(i)) {
-              needNewContainers.push(i);
-            }
-          }
-        } else {
-          for (let i = startBuffered; i < prevStartBuffered; i++) {
-            if (!isContained(i)) {
-              needNewContainers.push(i);
-            }
-          }
-          for (let i = Math.max(prevEndBuffered + 1, startBuffered); i <= endBuffered; i++) {
-            if (!isContained(i)) {
-              needNewContainers.push(i);
-            }
+      const isContained = (i) => {
+        const id = getId(i);
+        for (let j = 0; j < numContainers; j++) {
+          const key = peek$(ctx, `containerItemKey${j}`);
+          if (key === id) {
+            return true;
           }
         }
+      };
+      for (let i = startBuffered; i <= endBuffered; i++) {
+        if (!isContained(i)) {
+          needNewContainers.push(i);
+        }
       }
       if (needNewContainers.length > 0) {
         const availableContainers = findAvailableContainers(
@@ -1689,6 +1672,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (state) {
       state.scrollingToOffset = void 0;
       state.scrollAdjustHandler.setDisableAdjust(false);
+      state.scrollHistory.length = 0;
       calculateItemsInView();
     }
   };
@@ -1696,6 +1680,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     var _a;
     const state = refState.current;
     state.scrollAdjustHandler.setDisableAdjust(true);
+    state.scrollHistory.length = 0;
     state.scrollingToOffset = offset;
     (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
       x: horizontal ? offset : 0,
@@ -1966,7 +1951,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
         if (__DEV__ && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
           console.warn(
-            "[legend-list] No container to recycle, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio."
+            "[legend-list] No unused container available, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio.",
+            {
+              debugInfo: {
+                numContainers,
+                numNeeded,
+                stillNeeded,
+                numContainersPooled: peek$(ctx, "numContainersPooled")
+              }
+            }
           );
         }
       }
@@ -2219,11 +2212,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         return;
       }
       const state = refState.current;
+      const scrollingToOffset = state.scrollingToOffset;
       const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
         return;
       }
-      if (state.scrollingToOffset !== void 0 && Math.abs(newScroll - state.scrollingToOffset) < 10) {
+      if (scrollingToOffset !== void 0 && Math.abs(newScroll - scrollingToOffset) < 10) {
         finishScrollTo();
       }
       if (state.disableScrollJumpsFrom !== void 0) {
@@ -2236,7 +2230,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.hasScrolled = true;
       state.lastBatchingAction = Date.now();
       const currentTime = performance.now();
-      if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
+      if (scrollingToOffset === void 0 && !(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
         state.scrollHistory.push({ scroll: newScroll, time: currentTime });
       }
       if (state.scrollHistory.length > 5) {
@@ -2251,10 +2245,19 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       let velocity = 0;
       if (state.scrollHistory.length >= 2) {
         const newest = state.scrollHistory[state.scrollHistory.length - 1];
-        const oldest = state.scrollHistory[0];
-        const scrollDiff = newest.scroll - oldest.scroll;
-        const timeDiff = newest.time - oldest.time;
-        velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
+        let oldest;
+        for (let i = 0; i < state.scrollHistory.length - 1; i++) {
+          const entry = state.scrollHistory[i];
+          if (newest.time - entry.time <= 100) {
+            oldest = entry;
+            break;
+          }
+        }
+        if (oldest) {
+          const scrollDiff = newest.scroll - oldest.scroll;
+          const timeDiff = newest.time - oldest.time;
+          velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
+        }
       }
       state.scrollPrev = state.scroll;
       state.scrollPrevTime = state.scrollTime;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,