@infinite-list/data-model - npm Package Compare versions

Comparing version 0.2.20 to 0.2.21-stillness-a.0

dist/BaseLayout.d.ts

@@ -18,2 +18,3 @@ import SelectValue from '@x-oasis/select-value';
     readonly _fillingMode: FillingMode;
+    private _recycleBufferedCount;
     constructor(props: {
@@ -30,2 +31,3 @@ id: string;
         recycleThreshold?: number;
+        recycleBufferedCount?: number;
         recycleEnabled?: boolean;
@@ -36,2 +38,3 @@ });
     get reservedIndices(): any[];
+    get recycleBufferedCount(): number;
     updateReservedIndices(): void;
@@ -38,0 +41,0 @@ get persistanceIndices(): Array<number>;

dist/common.d.ts

@@ -11,2 +11,3 @@ export declare const DEFAULT_LAYOUT: {
 export declare const DISPATCH_METRICS_THRESHOLD = 50;
+export declare const RECYCLE_BUFFERED_COUNT = 2;
 export declare const ON_END_REACHED_THRESHOLD = 2;
@@ -13,0 +14,0 @@ export declare const WINDOW_SIZE = 5;

dist/ListDimensions.d.ts

@@ -38,2 +38,3 @@ import Batchinator from '@x-oasis/batchinator';
     private _offsetTriggerCachedState;
+    private _stillnessHelper;
     private memoizedResolveSpaceState;
@@ -112,2 +113,13 @@ private memoizedResolveRecycleState;
     getPosition(rowIndex: number, startIndex: number, endIndex: number): number;
+    getRecycleReuseOffsetBuilder(props: {
+        minIndex: number;
+        topStartOffset: number;
+        topStartIndex: number;
+        bottomStartOffset: number;
+        bottomStartIndex: number;
+    }): (info: {
+        currentIndex: number;
+        length: number;
+        velocity: number;
+    }) => number;
     resolveRecycleState(state: ListState<ItemT>): {
@@ -134,4 +146,6 @@ recycleState: any[];
     dispatchScrollMetricsEnabled(): boolean;
+    stillnessHandler(): void;
+    isStill(): void;
     updateScrollMetrics(scrollMetrics?: ScrollMetrics, useCache?: boolean): void;
 }
 export default ListDimensions;

dist/types/Dimensions.types.d.ts

@@ -62,2 +62,4 @@ import BaseDimensions from '../BaseDimensions';
     recycleEnabled?: boolean;
+    recycleBufferedCount?: number;
+    stillnessThreshold?: number;
     dispatchMetricsThreshold?: number;
@@ -180,2 +182,3 @@ } & BaseDimensionsProps & OnEndReachedHelperProps;
     targetKey: string;
+    targetIndex: number;
     offset: number;
@@ -182,0 +185,0 @@ } & SpaceStateToken<ItemT>;

package.json

 {
   "name": "@infinite-list/data-model",
-  "version": "0.2.20",
+  "version": "0.2.21-stillness-a.0",
   "files": [
@@ -19,2 +19,3 @@ "dist",
   "dependencies": {
+    "@x-oasis/batchinate-last": "^0.1.8",
     "@x-oasis/batchinator": "^0.0.13",
@@ -21,0 +22,0 @@ "@x-oasis/capitalize": "^0.0.6",

src/BaseLayout.ts

@@ -7,2 +7,3 @@ import {
   WINDOW_SIZE,
+  RECYCLE_BUFFERED_COUNT,
 } from './common';
@@ -31,2 +32,3 @@ import SelectValue, {
   readonly _fillingMode: FillingMode;
+  private _recycleBufferedCount: number;
 
@@ -45,2 +47,3 @@ constructor(props: {
     recycleThreshold?: number;
+    recycleBufferedCount?: number;
     recycleEnabled?: boolean;
@@ -57,2 +60,3 @@ }) {
       windowSize = WINDOW_SIZE,
+      recycleBufferedCount = RECYCLE_BUFFERED_COUNT,
       maxToRenderPerBatch = MAX_TO_RENDER_PER_BATCH,
@@ -76,2 +80,3 @@ initialNumToRender = INITIAL_NUM_TO_RENDER,
       : 0;
+    this._recycleBufferedCount = recycleBufferedCount;
     this._stickyHeaderIndices = stickyHeaderIndices;
@@ -81,2 +86,3 @@ this._maxToRenderPerBatch = maxToRenderPerBatch;
     this._onEndReachedThreshold = onEndReachedThreshold;
+    this._recycleBufferedCount = recycleBufferedCount;
     this.persistanceIndices = persistanceIndices;
@@ -98,2 +104,6 @@ this.stickyHeaderIndices = stickyHeaderIndices;
 
+  get recycleBufferedCount() {
+    return this._recycleBufferedCount;
+  }
+
   updateReservedIndices() {
@@ -100,0 +110,0 @@ const indices = new Set(

src/common.ts

@@ -12,2 +12,3 @@ export const DEFAULT_LAYOUT = {
 export const DISPATCH_METRICS_THRESHOLD = 50;
+export const RECYCLE_BUFFERED_COUNT = 2;
 
@@ -14,0 +15,0 @@ // 建议 ON_END_REACHED_THRESHOLD * VisibleLength > MAX_TO_RENDER_PER_BATCH * itemLength

src/ListDimensions.ts

@@ -50,2 +50,3 @@ import noop from '@x-oasis/noop';
 import shallowArrayEqual from '@x-oasis/shallow-array-equal';
+import StillnessHelper from './utils/StillnessHelper';
 
@@ -96,2 +97,3 @@ class ListDimensions<ItemT extends {} = {}> extends BaseDimensions {
   public updateStateBatchinator: Batchinator;
+
   private _recalculateRecycleResultStateBatchinator: Batchinator;
@@ -105,2 +107,4 @@
 
+  private _stillnessHelper: StillnessHelper;
+
   private memoizedResolveSpaceState: (
@@ -132,5 +136,6 @@ state: ListState<ItemT>
       persistanceIndices,
-      dispatchMetricsThreshold = DISPATCH_METRICS_THRESHOLD,
+      stillnessThreshold,
       onEndReachedTimeoutThreshold,
       onEndReachedHandlerTimeoutThreshold,
+      dispatchMetricsThreshold = DISPATCH_METRICS_THRESHOLD,
     } = props;
@@ -155,2 +160,8 @@ this._keyExtractor = keyExtractor;
 
+    this.stillnessHandler = this.stillnessHandler.bind(this);
+    this._stillnessHelper = new StillnessHelper({
+      stillnessThreshold,
+      handler: this.stillnessHandler,
+    });
+
     this._deps = deps;
@@ -968,2 +979,65 @@ this._isActive = this.resolveInitialActiveValue(active);
 
+  getRecycleReuseOffsetBuilder(props: {
+    minIndex: number;
+    topStartOffset: number;
+    topStartIndex: number;
+    bottomStartOffset: number;
+    bottomStartIndex: number;
+  }) {
+    const {
+      minIndex,
+      topStartOffset: _topStartOffset,
+      topStartIndex: _topStartIndex,
+      bottomStartOffset: _bottomStartOffset,
+      bottomStartIndex: _bottomStartIndex,
+    } = props;
+
+    let topStartIndex = _topStartIndex;
+    let topStartOffset = _topStartOffset;
+    let bottomStartIndex = _bottomStartIndex;
+    let bottomStartOffset = _bottomStartOffset;
+
+    const placeOnTop = (length: number) => {
+      let offset = 0;
+      if (topStartIndex < minIndex) {
+        offset = bottomStartOffset + length;
+        bottomStartIndex += 1;
+        bottomStartOffset = offset;
+      } else {
+        offset = topStartOffset - length;
+        if (offset >= 0) {
+          topStartIndex -= 1;
+          topStartOffset = offset;
+        }
+      }
+      return offset;
+    };
+
+    const placeOnBottom = (length: number) => {
+      let offset = 0;
+      offset = bottomStartOffset + length;
+      bottomStartIndex += 1;
+      bottomStartOffset = offset;
+      return offset;
+    };
+
+    return (info: {
+      currentIndex: number;
+      length: number;
+      velocity: number;
+    }) => {
+      const { velocity, currentIndex, length } = info;
+      // scroll up, preserve start
+      if (velocity < 0) {
+        return placeOnTop(length);
+      } else if (velocity > 0) {
+        return placeOnBottom(length);
+      }
+      if (currentIndex < _topStartIndex) {
+        return placeOnTop(length);
+      }
+      return placeOnBottom(length);
+    };
+  }
+
   resolveRecycleState(state: ListState<ItemT>) {
@@ -975,11 +1049,8 @@ const {
       bufferedStartIndex,
-      // actionType,
       data,
     } = state;
 
-    const targetIndices = this._bufferSet.indices.map((i) => parseInt(i));
+    const _targetIndices = this._bufferSet.indices.map((i) => parseInt(i));
+    const targetIndices = new Array(_targetIndices.length).fill(null);
 
-    // const scrolling = actionType === 'scrollDown' || actionType === 'scrollUp';
-    // const originalPositionSize = this._bufferSet.getSize();
-
     const recycleEnabled = this._recycleEnabled();
@@ -995,4 +1066,4 @@ const recycleStateResult = [];
             index,
-            visibleStartIndex,
-            visibleEndIndex
+            visibleStartIndex - this.recycleBufferedCount,
+            visibleEndIndex + this.recycleBufferedCount
           );
@@ -1007,2 +1078,5 @@ if (position !== null) targetIndices[position] = index;
 
+      let _beforeCount = 0;
+      let topStartIndex = visibleStartIndex;
+
       for (
@@ -1013,11 +1087,28 @@ let index = visibleStartIndex, size = beforeSize;
       ) {
-        const position = this.getPosition(
-          index,
-          bufferedStartIndex,
-          visibleStartIndex
-        );
+        const item = data[index];
+        if (!item) continue;
+        const itemMeta = this.getItemMeta(item, index);
+        const itemLayout = itemMeta?.getLayout();
 
-        if (position !== null) targetIndices[position] = index;
+        if (_beforeCount < this.recycleBufferedCount || !itemLayout) {
+          const position = this.getPosition(
+            index,
+            visibleStartIndex - this.recycleBufferedCount,
+            visibleEndIndex + this.recycleBufferedCount
+          );
+
+          topStartIndex = index;
+          if (position !== null) targetIndices[position] = index;
+        } else {
+          break;
+        }
+
+        if (index >= this.initialNumToRender) {
+          _beforeCount++;
+        }
       }
 
+      let _afterCount = 0;
+      let bottomStartIndex = visibleEndIndex + 1;
+
       for (
@@ -1028,8 +1119,22 @@ let index = visibleEndIndex + 1, size = afterSize;
       ) {
-        const position = this.getPosition(
-          index,
-          visibleEndIndex + 1,
-          bufferedEndIndex
-        );
-        if (position !== null) targetIndices[position] = index;
+        const item = data[index];
+        if (!item) continue;
+        const itemMeta = this.getItemMeta(item, index);
+        const itemLayout = itemMeta?.getLayout();
+
+        if (_afterCount < this.recycleBufferedCount || !itemLayout) {
+          const position = this.getPosition(
+            index,
+            visibleStartIndex - this.recycleBufferedCount,
+            visibleEndIndex + this.recycleBufferedCount
+          );
+          bottomStartIndex = index;
+          if (position !== null) targetIndices[position] = index;
+        } else {
+          break;
+        }
+
+        if (index >= this.initialNumToRender) {
+          _afterCount++;
+        }
       }
@@ -1045,3 +1150,46 @@
 
+      const getOffset = this.getRecycleReuseOffsetBuilder({
+        topStartOffset: indexToOffsetMap[Math.max(topStartIndex, 0)] || 0,
+        bottomStartOffset: indexToOffsetMap[Math.max(bottomStartIndex, 0)] || 0,
+        minIndex: 0,
+        topStartIndex,
+        bottomStartIndex,
+      });
+
       targetIndices.forEach((targetIndex, index) => {
+        if (targetIndex == null) {
+          targetIndex = _targetIndices[index];
+          const item = data[targetIndex];
+          if (!item) return;
+          const itemKey = this.getItemKey(item, targetIndex);
+          const itemMeta = this.getItemMeta(item, targetIndex);
+          const itemLayout = itemMeta?.getLayout();
+          const itemLength =
+            (itemLayout?.height || 0) + (itemMeta?.getSeparatorLength() || 0);
+
+          let offset = 0;
+
+          if (this._scrollMetrics && itemLayout) {
+            const velocity = this._scrollMetrics.velocity;
+            offset = getOffset({
+              currentIndex: targetIndex,
+              length: itemLength,
+              velocity,
+            });
+          }
+
+          recycleStateResult.push({
+            key: `recycle_${index}`,
+            targetKey: itemKey,
+            targetIndex,
+            length: itemLength,
+            isSpace: false,
+            isSticky: false,
+            item,
+            // 如果没有offset，说明item是新增的，那么它渲染就在最开始位置好了
+            offset: itemLayout ? offset : 0,
+            position: 'buffered',
+          });
+          return;
+        }
         const item = data[targetIndex];
@@ -1074,2 +1222,3 @@ if (!item) return;
           targetKey: itemKey,
+          targetIndex,
           length: itemLength,
@@ -1090,4 +1239,4 @@ isSpace: false,
     const stateResult = {
-      recycleState: recycleStateResult,
-      spaceState: spaceStateResult,
+      recycleState: recycleStateResult.filter((v) => v),
+      spaceState: spaceStateResult.filter((v) => v),
     };
@@ -1360,2 +1509,10 @@
 
+  stillnessHandler() {
+    this.dispatchMetrics(this._scrollMetrics);
+  }
+
+  isStill() {
+    this._stillnessHelper.isStill;
+  }
+
   /**
@@ -1384,2 +1541,6 @@ * When to trigger updateScrollMetrics..
 
+    if (this._scrollMetrics?.offset !== scrollMetrics?.offset) {
+      // this._stillnessHelper.startClockBatchinateLast.schedule();
+    }
+
     if (
@@ -1386,0 +1547,0 @@ !this._scrollMetrics ||

src/types/Dimensions.types.ts

@@ -79,5 +79,7 @@ import BaseDimensions from '../BaseDimensions';
   recycleThreshold?: number;
-
   recycleEnabled?: boolean;
+  recycleBufferedCount?: number;
 
+  stillnessThreshold?: number;
+
   dispatchMetricsThreshold?: number;
@@ -232,2 +234,3 @@ } & BaseDimensionsProps &
   targetKey: string;
+  targetIndex: number;
   offset: number;
@@ -234,0 +237,0 @@ } & SpaceStateToken<ItemT>;

No alert changes

Improved metrics

Total package byte prevSize

1696989

increased by3.57%

Number of package files

99

increased by2.06%

Lines of code

20188

increased by3.08%

Worsened metrics

Dependency count

16

increased by6.67%

Dependency changes

• + Added@x-oasis/batchinate-last@^0.1.8

• + Added@x-oasis/batchinate-last@0.1.35(transitive)