@legendapp/list 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Moo.do LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# Legend List
+
+Legend List aims to be a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.
+
+## Caution: Experimental
+
+This is an early release to test and gather feedback. It's not used in production yet and needs more work to reach parity with FlatList features.
+
+## Features
+
+In addition to normal FlatList features:
+
+-   Dynamic layouts supported. Just use the `estimatedItemLength` prop to give a close estimate so that layouts aren't too far off, and positions will adjust while rendering.
+-   `autoScrollToBottom`: If true and scroll is within `autoScrollToBottomThreshold * screen height` then changing items or heights will scroll to the bottom. This can be useful for chat interfaces.
+-   `recycleItems` prop enables toggling recycling of list items. If enabled it will reuse item components for improved performance, but it will reuse any local state in items. So if you have local state in items you likely want this disabled.
+
+## Usage
+
+### Props
+
+We suggest using all of the required props and additionally `keyExtractor` to improve performance when adding/removing items.
+
+#### Required
+
+```ts
+interface PropsRequired {
+    data: ArrayLike<any> & T[];
+    renderItem: (props: LegendListRenderItemInfo<T>) => ReactNode;
+    estimatedItemLength: (index: number) => number;
+}
+```
+
+#### Optional
+
+```ts
+interface PropsOptional {
+    initialScrollOffset?: number;
+    initialScrollIndex?: number;
+    drawDistance?: number;
+    initialContainers?: number;
+    recycleItems?: boolean;
+    onEndReachedThreshold?: number | null | undefined;
+    autoScrollToBottom?: boolean;
+    autoScrollToBottomThreshold?: number;
+    onEndReached?: ((info: { distanceFromEnd: number }) => void) | null | undefined;
+    keyExtractor?: (item: T, index: number) => string;
+    onViewableRangeChanged?: (range: ViewableRange<T>) => void;
+}
+```
+
+## How to build
+
+`npm run build` will build the package to the `dist` folder.
+
+## How to run example
+
+1. `cd example`
+2. `npm i`
+3. `npm run bootstrap-start`
+
+## PRs gladly accepted!
+
+There's not a lot of code here so hopefully it's easy to contribute. If you want to add a missing feature or fix a bug please post an issue to see if development is already in progress so we can make sure to not duplicate work 😀.
+
+## TODO list
+
+-   onViewableItemsChanged
+-   Adjust scroll when item heights change above the viewable area so they don't jump
+-   A prop to start with items at the bottom like a chat interface, just needs to pad the top with screen height - items height
+-   Other important missing features from FlatList or other lists libraries
+-   Optimizations:
+    -   Loop over only potentially changed items when adjusting heights rather than data array

package/index.d.mts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { ScrollView } from 'react-native';
+
+type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset'> & {
+    data: ArrayLike<any> & T[];
+    initialScrollOffset?: number;
+    initialScrollIndex?: number;
+    drawDistance?: number;
+    initialContainers?: number;
+    recycleItems?: boolean;
+    onEndReachedThreshold?: number | null | undefined;
+    autoScrollToBottom?: boolean;
+    autoScrollToBottomThreshold?: number;
+    estimatedItemLength: (index: number) => number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    keyExtractor?: (item: T, index: number) => string;
+    renderItem?: (props: LegendListRenderItemInfo<T>) => ReactNode;
+    onViewableRangeChanged?: (range: ViewableRange<T>) => void;
+};
+interface ViewableRange<T> {
+    startBuffered: number;
+    start: number;
+    endBuffered: number;
+    end: number;
+    items: T[];
+}
+interface LegendListRenderItemInfo<ItemT> {
+    item: ItemT;
+    index: number;
+}
+
+declare function LegendList<T>(props: LegendListProps<T>): React.JSX.Element;
+
+export { LegendList, type LegendListProps, type LegendListRenderItemInfo, type ViewableRange };

package/index.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { ScrollView } from 'react-native';
+
+type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset'> & {
+    data: ArrayLike<any> & T[];
+    initialScrollOffset?: number;
+    initialScrollIndex?: number;
+    drawDistance?: number;
+    initialContainers?: number;
+    recycleItems?: boolean;
+    onEndReachedThreshold?: number | null | undefined;
+    autoScrollToBottom?: boolean;
+    autoScrollToBottomThreshold?: number;
+    estimatedItemLength: (index: number) => number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    keyExtractor?: (item: T, index: number) => string;
+    renderItem?: (props: LegendListRenderItemInfo<T>) => ReactNode;
+    onViewableRangeChanged?: (range: ViewableRange<T>) => void;
+};
+interface ViewableRange<T> {
+    startBuffered: number;
+    start: number;
+    endBuffered: number;
+    end: number;
+    items: T[];
+}
+interface LegendListRenderItemInfo<ItemT> {
+    item: ItemT;
+    index: number;
+}
+
+declare function LegendList<T>(props: LegendListProps<T>): React.JSX.Element;
+
+export { LegendList, type LegendListProps, type LegendListRenderItemInfo, type ViewableRange };

package/index.js

@@ -0,0 +1,393 @@
+'use strict';
+
+var React2 = require('react');
+var state = require('@legendapp/state');
+var enableReactNativeComponents = require('@legendapp/state/config/enableReactNativeComponents');
+var react = require('@legendapp/state/react');
+var reactNative = require('react-native');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+// src/LegendList.tsx
+enableReactNativeComponents.enableReactNativeComponents();
+var Container = ({
+  $container,
+  recycleItems,
+  listProps,
+  getRenderedItem,
+  onLayout
+}) => {
+  const { horizontal } = listProps;
+  const { id } = $container.peek();
+  const itemIndex = react.use$($container.itemIndex);
+  const key = recycleItems ? void 0 : itemIndex;
+  const createStyle = () => horizontal ? {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: $container.position.get(),
+    opacity: $container.position.get() < 0 ? 0 : 1
+  } : {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: $container.position.get(),
+    opacity: $container.position.get() < 0 ? 0 : 1
+  };
+  return itemIndex < 0 ? null : /* @__PURE__ */ React2__namespace.createElement(
+    react.Reactive.View,
+    {
+      key: id,
+      $style: createStyle,
+      onLayout: (event) => {
+        const index = $container.itemIndex.peek();
+        const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
+        onLayout(index, length);
+      }
+    },
+    /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { key }, getRenderedItem(itemIndex))
+  );
+};
+
+// src/LegendList.tsx
+enableReactNativeComponents.enableReactNativeComponents();
+var DEFAULT_SCROLL_BUFFER = 0;
+var POSITION_OUT_OF_VIEW = -1e4;
+function LegendList(props) {
+  const {
+    data,
+    initialScrollIndex,
+    initialScrollOffset,
+    horizontal,
+    style,
+    contentContainerStyle,
+    initialContainers,
+    drawDistance,
+    recycleItems = true,
+    onEndReachedThreshold,
+    autoScrollToBottom = false,
+    autoScrollToBottomThreshold = 0.1,
+    keyExtractor,
+    renderItem,
+    estimatedItemLength,
+    onEndReached,
+    onViewableRangeChanged,
+    ...rest
+  } = props;
+  const refScroller = React2.useRef(null);
+  const containers$ = react.useObservable(() => []);
+  const visibleRange$ = react.useObservable(() => ({
+    start: 0,
+    end: 0,
+    totalLength: 0,
+    scroll: 0,
+    topPad: 0
+  }));
+  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_SCROLL_BUFFER;
+  const refPositions = React2.useRef();
+  const getId = (index) => {
+    var _a;
+    const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
+    if (!data2) {
+      return "";
+    }
+    const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
+    return ret + "";
+  };
+  if (!refPositions.current) {
+    refPositions.current = {
+      lengths: /* @__PURE__ */ new Map(),
+      positions: /* @__PURE__ */ new Map(),
+      pendingAdjust: 0,
+      animFrame: null,
+      isStartReached: false,
+      isEndReached: false,
+      isAtBottom: false,
+      data,
+      idsInFirstRender: void 0,
+      hasScrolled: false
+    };
+    refPositions.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
+  }
+  refPositions.current.data = data;
+  const SCREEN_LENGTH = reactNative.Dimensions.get("window")[horizontal ? "width" : "height"];
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : initialScrollIndex ? initialScrollIndex * estimatedItemLength(initialScrollIndex) : void 0;
+  const allocateContainers = React2.useCallback(() => {
+    const numContainers = initialContainers || Math.ceil((SCREEN_LENGTH + scrollBuffer * 2) / estimatedItemLength(0)) + 4;
+    const containers2 = [];
+    for (let i = 0; i < numContainers; i++) {
+      containers2.push({
+        id: i,
+        itemIndex: -1,
+        position: POSITION_OUT_OF_VIEW
+      });
+    }
+    containers$.set(containers2);
+  }, []);
+  const getRenderedItem = React2.useCallback(
+    (index) => {
+      var _a;
+      const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
+      if (!data2) {
+        return null;
+      }
+      const renderedItem = renderItem == null ? void 0 : renderItem({
+        item: data2[index],
+        index
+      });
+      return renderedItem;
+    },
+    [renderItem]
+  );
+  const calculateItemsInView = React2.useCallback(() => {
+    var _a, _b;
+    const data2 = refPositions.current.data;
+    if (!data2) {
+      return;
+    }
+    const scroll = visibleRange$.scroll.peek() - visibleRange$.topPad.peek();
+    const containers2 = containers$.peek();
+    const { lengths, positions } = refPositions.current;
+    let top = 0;
+    let startNoBuffer = null;
+    let startBuffered = null;
+    let endNoBuffer = null;
+    let endBuffered = null;
+    const prevRange = onViewableRangeChanged ? { ...visibleRange$.peek() } : void 0;
+    for (let i = 0; i < data2.length; i++) {
+      const id = getId(i);
+      const length = (_a = lengths.get(id)) != null ? _a : estimatedItemLength(i);
+      if (positions.get(id) !== top) {
+        positions.set(id, top);
+      }
+      if (startNoBuffer === null && top + length > scroll) {
+        startNoBuffer = i;
+      }
+      if (startBuffered === null && top + length > scroll - scrollBuffer) {
+        startBuffered = i;
+      }
+      if (startNoBuffer !== null) {
+        if (top <= scroll + SCREEN_LENGTH) {
+          endNoBuffer = i;
+        }
+        if (top <= scroll + SCREEN_LENGTH + scrollBuffer) {
+          endBuffered = i;
+        } else {
+          break;
+        }
+      }
+      top += length;
+    }
+    visibleRange$.assign({
+      startBuffered,
+      startNoBuffer,
+      endBuffered,
+      endNoBuffer
+    });
+    state.beginBatch();
+    if (startBuffered !== null && endBuffered !== null) {
+      for (let i = startBuffered; i <= endBuffered; i++) {
+        let isContained = false;
+        for (let j = 0; j < containers2.length; j++) {
+          const container = containers2[j];
+          if (container.itemIndex === i) {
+            isContained = true;
+            break;
+          }
+        }
+        if (!isContained) {
+          let didRecycle = false;
+          for (let u = 0; u < containers2.length; u++) {
+            const container = containers2[u];
+            if (container.itemIndex < startBuffered || container.itemIndex > endBuffered) {
+              containers$[u].itemIndex.set(i);
+              didRecycle = true;
+              break;
+            }
+          }
+          if (!didRecycle) {
+            if (__DEV__) {
+              console.warn(
+                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemLength",
+                i
+              );
+            }
+            containers$.push({
+              id: containers$.peek().length,
+              itemIndex: i,
+              position: POSITION_OUT_OF_VIEW
+            });
+          }
+        }
+      }
+      for (let i = 0; i < containers2.length; i++) {
+        const container = containers2[i];
+        const item = data2[container.itemIndex];
+        if (item) {
+          const id = getId(container.itemIndex);
+          if (container.itemIndex < startBuffered || container.itemIndex > endBuffered) {
+            containers$[i].position.set(POSITION_OUT_OF_VIEW);
+          } else {
+            const pos = (_b = positions.get(id)) != null ? _b : -1;
+            if (pos >= 0 && pos !== containers$[i].position.peek()) {
+              containers$[i].position.set(pos);
+            }
+          }
+        }
+      }
+      if (onViewableRangeChanged) {
+        if (startNoBuffer !== (prevRange == null ? void 0 : prevRange.startNoBuffer) || startBuffered !== (prevRange == null ? void 0 : prevRange.startBuffered) || endNoBuffer !== (prevRange == null ? void 0 : prevRange.endNoBuffer) || endBuffered !== (prevRange == null ? void 0 : prevRange.endBuffered)) {
+          onViewableRangeChanged({
+            start: startNoBuffer,
+            startBuffered,
+            end: endNoBuffer,
+            endBuffered,
+            items: data2.slice(startNoBuffer, endNoBuffer + 1)
+          });
+        }
+      }
+    }
+    state.endBatch();
+  }, [data]);
+  React2.useMemo(() => {
+    var _a, _b;
+    allocateContainers();
+    calculateItemsInView();
+    const lengths = (_a = refPositions.current) == null ? void 0 : _a.lengths;
+    let totalLength = 0;
+    for (let i = 0; i < data.length; i++) {
+      const id = getId(i);
+      totalLength += (_b = lengths.get(id)) != null ? _b : estimatedItemLength(i);
+    }
+    visibleRange$.totalLength.set(totalLength);
+  }, []);
+  React2.useMemo(() => {
+    if (refPositions.current) {
+      refPositions.current.isEndReached = false;
+    }
+  }, [data]);
+  const containers = react.use$(containers$, { shallow: true });
+  const updateItemLength = React2.useCallback((index, length) => {
+    var _a, _b, _c, _d, _e;
+    const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
+    if (!data2) {
+      return;
+    }
+    const lengths = (_b = refPositions.current) == null ? void 0 : _b.lengths;
+    const id = getId(index);
+    const wasInFirstRender = (_c = refPositions.current) == null ? void 0 : _c.idsInFirstRender.has(id);
+    const prevLength = lengths.get(id) || (wasInFirstRender ? estimatedItemLength(index) : 0);
+    if (!prevLength || prevLength !== length) {
+      state.beginBatch();
+      lengths.set(id, length);
+      visibleRange$.totalLength.set((prevTotal) => prevTotal + (length - prevLength));
+      if (((_d = refPositions.current) == null ? void 0 : _d.isAtBottom) && autoScrollToBottom) {
+        requestAnimationFrame(() => {
+          var _a2;
+          (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
+            animated: true
+          });
+        });
+      }
+      if (!((_e = refPositions.current) == null ? void 0 : _e.animFrame)) {
+        calculateItemsInView();
+      }
+      state.endBatch();
+    }
+  }, []);
+  const handleScrollDebounced = React2.useCallback(() => {
+    var _a;
+    const newScroll = visibleRange$.scroll.peek();
+    calculateItemsInView();
+    const distanceFromEnd = visibleRange$.totalLength.peek() - newScroll - SCREEN_LENGTH;
+    if (refPositions.current) {
+      refPositions.current.isAtBottom = distanceFromEnd < SCREEN_LENGTH * autoScrollToBottomThreshold;
+    }
+    if (onEndReached && !((_a = refPositions.current) == null ? void 0 : _a.isEndReached)) {
+      if (distanceFromEnd < (onEndReachedThreshold || 0.5) * SCREEN_LENGTH) {
+        if (refPositions.current) {
+          refPositions.current.isEndReached = true;
+        }
+        onEndReached({ distanceFromEnd });
+      }
+    }
+    if (refPositions.current) {
+      refPositions.current.animFrame = null;
+    }
+  }, []);
+  const handleScroll = React2.useCallback((event) => {
+    refPositions.current.hasScrolled = true;
+    const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+    visibleRange$.scroll.set(newScroll);
+    if (refPositions.current && !refPositions.current.animFrame) {
+      refPositions.current.animFrame = requestAnimationFrame(handleScrollDebounced);
+    }
+  }, []);
+  React2.useEffect(() => {
+    if (initialContentOffset) {
+      handleScroll({
+        nativeEvent: { contentOffset: { y: initialContentOffset } }
+      });
+      calculateItemsInView();
+    }
+  }, []);
+  return /* @__PURE__ */ React2__namespace.createElement(
+    react.Reactive.ScrollView,
+    {
+      style,
+      contentContainerStyle: [
+        contentContainerStyle,
+        horizontal ? {
+          height: "100%"
+        } : {}
+      ],
+      onScroll: handleScroll,
+      scrollEventThrottle: 32,
+      horizontal,
+      contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
+      ...rest,
+      ref: refScroller
+    },
+    /* @__PURE__ */ React2__namespace.createElement(
+      react.Reactive.View,
+      {
+        $style: () => horizontal ? {
+          width: visibleRange$.totalLength.get()
+        } : {
+          height: visibleRange$.totalLength.get()
+        }
+      },
+      containers.map((container, i) => /* @__PURE__ */ React2__namespace.createElement(
+        Container,
+        {
+          key: container.id,
+          recycleItems,
+          $container: containers$[i],
+          listProps: props,
+          getRenderedItem,
+          onLayout: updateItemLength
+        }
+      ))
+    )
+  );
+}
+
+exports.LegendList = LegendList;

package/index.mjs

@@ -0,0 +1,372 @@
+import * as React2 from 'react';
+import { useRef, useCallback, useMemo, useEffect } from 'react';
+import { beginBatch, endBatch } from '@legendapp/state';
+import { enableReactNativeComponents } from '@legendapp/state/config/enableReactNativeComponents';
+import { useObservable, use$, Reactive } from '@legendapp/state/react';
+import { Dimensions, View } from 'react-native';
+
+// src/LegendList.tsx
+enableReactNativeComponents();
+var Container = ({
+  $container,
+  recycleItems,
+  listProps,
+  getRenderedItem,
+  onLayout
+}) => {
+  const { horizontal } = listProps;
+  const { id } = $container.peek();
+  const itemIndex = use$($container.itemIndex);
+  const key = recycleItems ? void 0 : itemIndex;
+  const createStyle = () => horizontal ? {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: $container.position.get(),
+    opacity: $container.position.get() < 0 ? 0 : 1
+  } : {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: $container.position.get(),
+    opacity: $container.position.get() < 0 ? 0 : 1
+  };
+  return itemIndex < 0 ? null : /* @__PURE__ */ React2.createElement(
+    Reactive.View,
+    {
+      key: id,
+      $style: createStyle,
+      onLayout: (event) => {
+        const index = $container.itemIndex.peek();
+        const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
+        onLayout(index, length);
+      }
+    },
+    /* @__PURE__ */ React2.createElement(View, { key }, getRenderedItem(itemIndex))
+  );
+};
+
+// src/LegendList.tsx
+enableReactNativeComponents();
+var DEFAULT_SCROLL_BUFFER = 0;
+var POSITION_OUT_OF_VIEW = -1e4;
+function LegendList(props) {
+  const {
+    data,
+    initialScrollIndex,
+    initialScrollOffset,
+    horizontal,
+    style,
+    contentContainerStyle,
+    initialContainers,
+    drawDistance,
+    recycleItems = true,
+    onEndReachedThreshold,
+    autoScrollToBottom = false,
+    autoScrollToBottomThreshold = 0.1,
+    keyExtractor,
+    renderItem,
+    estimatedItemLength,
+    onEndReached,
+    onViewableRangeChanged,
+    ...rest
+  } = props;
+  const refScroller = useRef(null);
+  const containers$ = useObservable(() => []);
+  const visibleRange$ = useObservable(() => ({
+    start: 0,
+    end: 0,
+    totalLength: 0,
+    scroll: 0,
+    topPad: 0
+  }));
+  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_SCROLL_BUFFER;
+  const refPositions = useRef();
+  const getId = (index) => {
+    var _a;
+    const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
+    if (!data2) {
+      return "";
+    }
+    const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
+    return ret + "";
+  };
+  if (!refPositions.current) {
+    refPositions.current = {
+      lengths: /* @__PURE__ */ new Map(),
+      positions: /* @__PURE__ */ new Map(),
+      pendingAdjust: 0,
+      animFrame: null,
+      isStartReached: false,
+      isEndReached: false,
+      isAtBottom: false,
+      data,
+      idsInFirstRender: void 0,
+      hasScrolled: false
+    };
+    refPositions.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
+  }
+  refPositions.current.data = data;
+  const SCREEN_LENGTH = Dimensions.get("window")[horizontal ? "width" : "height"];
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : initialScrollIndex ? initialScrollIndex * estimatedItemLength(initialScrollIndex) : void 0;
+  const allocateContainers = useCallback(() => {
+    const numContainers = initialContainers || Math.ceil((SCREEN_LENGTH + scrollBuffer * 2) / estimatedItemLength(0)) + 4;
+    const containers2 = [];
+    for (let i = 0; i < numContainers; i++) {
+      containers2.push({
+        id: i,
+        itemIndex: -1,
+        position: POSITION_OUT_OF_VIEW
+      });
+    }
+    containers$.set(containers2);
+  }, []);
+  const getRenderedItem = useCallback(
+    (index) => {
+      var _a;
+      const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
+      if (!data2) {
+        return null;
+      }
+      const renderedItem = renderItem == null ? void 0 : renderItem({
+        item: data2[index],
+        index
+      });
+      return renderedItem;
+    },
+    [renderItem]
+  );
+  const calculateItemsInView = useCallback(() => {
+    var _a, _b;
+    const data2 = refPositions.current.data;
+    if (!data2) {
+      return;
+    }
+    const scroll = visibleRange$.scroll.peek() - visibleRange$.topPad.peek();
+    const containers2 = containers$.peek();
+    const { lengths, positions } = refPositions.current;
+    let top = 0;
+    let startNoBuffer = null;
+    let startBuffered = null;
+    let endNoBuffer = null;
+    let endBuffered = null;
+    const prevRange = onViewableRangeChanged ? { ...visibleRange$.peek() } : void 0;
+    for (let i = 0; i < data2.length; i++) {
+      const id = getId(i);
+      const length = (_a = lengths.get(id)) != null ? _a : estimatedItemLength(i);
+      if (positions.get(id) !== top) {
+        positions.set(id, top);
+      }
+      if (startNoBuffer === null && top + length > scroll) {
+        startNoBuffer = i;
+      }
+      if (startBuffered === null && top + length > scroll - scrollBuffer) {
+        startBuffered = i;
+      }
+      if (startNoBuffer !== null) {
+        if (top <= scroll + SCREEN_LENGTH) {
+          endNoBuffer = i;
+        }
+        if (top <= scroll + SCREEN_LENGTH + scrollBuffer) {
+          endBuffered = i;
+        } else {
+          break;
+        }
+      }
+      top += length;
+    }
+    visibleRange$.assign({
+      startBuffered,
+      startNoBuffer,
+      endBuffered,
+      endNoBuffer
+    });
+    beginBatch();
+    if (startBuffered !== null && endBuffered !== null) {
+      for (let i = startBuffered; i <= endBuffered; i++) {
+        let isContained = false;
+        for (let j = 0; j < containers2.length; j++) {
+          const container = containers2[j];
+          if (container.itemIndex === i) {
+            isContained = true;
+            break;
+          }
+        }
+        if (!isContained) {
+          let didRecycle = false;
+          for (let u = 0; u < containers2.length; u++) {
+            const container = containers2[u];
+            if (container.itemIndex < startBuffered || container.itemIndex > endBuffered) {
+              containers$[u].itemIndex.set(i);
+              didRecycle = true;
+              break;
+            }
+          }
+          if (!didRecycle) {
+            if (__DEV__) {
+              console.warn(
+                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemLength",
+                i
+              );
+            }
+            containers$.push({
+              id: containers$.peek().length,
+              itemIndex: i,
+              position: POSITION_OUT_OF_VIEW
+            });
+          }
+        }
+      }
+      for (let i = 0; i < containers2.length; i++) {
+        const container = containers2[i];
+        const item = data2[container.itemIndex];
+        if (item) {
+          const id = getId(container.itemIndex);
+          if (container.itemIndex < startBuffered || container.itemIndex > endBuffered) {
+            containers$[i].position.set(POSITION_OUT_OF_VIEW);
+          } else {
+            const pos = (_b = positions.get(id)) != null ? _b : -1;
+            if (pos >= 0 && pos !== containers$[i].position.peek()) {
+              containers$[i].position.set(pos);
+            }
+          }
+        }
+      }
+      if (onViewableRangeChanged) {
+        if (startNoBuffer !== (prevRange == null ? void 0 : prevRange.startNoBuffer) || startBuffered !== (prevRange == null ? void 0 : prevRange.startBuffered) || endNoBuffer !== (prevRange == null ? void 0 : prevRange.endNoBuffer) || endBuffered !== (prevRange == null ? void 0 : prevRange.endBuffered)) {
+          onViewableRangeChanged({
+            start: startNoBuffer,
+            startBuffered,
+            end: endNoBuffer,
+            endBuffered,
+            items: data2.slice(startNoBuffer, endNoBuffer + 1)
+          });
+        }
+      }
+    }
+    endBatch();
+  }, [data]);
+  useMemo(() => {
+    var _a, _b;
+    allocateContainers();
+    calculateItemsInView();
+    const lengths = (_a = refPositions.current) == null ? void 0 : _a.lengths;
+    let totalLength = 0;
+    for (let i = 0; i < data.length; i++) {
+      const id = getId(i);
+      totalLength += (_b = lengths.get(id)) != null ? _b : estimatedItemLength(i);
+    }
+    visibleRange$.totalLength.set(totalLength);
+  }, []);
+  useMemo(() => {
+    if (refPositions.current) {
+      refPositions.current.isEndReached = false;
+    }
+  }, [data]);
+  const containers = use$(containers$, { shallow: true });
+  const updateItemLength = useCallback((index, length) => {
+    var _a, _b, _c, _d, _e;
+    const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
+    if (!data2) {
+      return;
+    }
+    const lengths = (_b = refPositions.current) == null ? void 0 : _b.lengths;
+    const id = getId(index);
+    const wasInFirstRender = (_c = refPositions.current) == null ? void 0 : _c.idsInFirstRender.has(id);
+    const prevLength = lengths.get(id) || (wasInFirstRender ? estimatedItemLength(index) : 0);
+    if (!prevLength || prevLength !== length) {
+      beginBatch();
+      lengths.set(id, length);
+      visibleRange$.totalLength.set((prevTotal) => prevTotal + (length - prevLength));
+      if (((_d = refPositions.current) == null ? void 0 : _d.isAtBottom) && autoScrollToBottom) {
+        requestAnimationFrame(() => {
+          var _a2;
+          (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
+            animated: true
+          });
+        });
+      }
+      if (!((_e = refPositions.current) == null ? void 0 : _e.animFrame)) {
+        calculateItemsInView();
+      }
+      endBatch();
+    }
+  }, []);
+  const handleScrollDebounced = useCallback(() => {
+    var _a;
+    const newScroll = visibleRange$.scroll.peek();
+    calculateItemsInView();
+    const distanceFromEnd = visibleRange$.totalLength.peek() - newScroll - SCREEN_LENGTH;
+    if (refPositions.current) {
+      refPositions.current.isAtBottom = distanceFromEnd < SCREEN_LENGTH * autoScrollToBottomThreshold;
+    }
+    if (onEndReached && !((_a = refPositions.current) == null ? void 0 : _a.isEndReached)) {
+      if (distanceFromEnd < (onEndReachedThreshold || 0.5) * SCREEN_LENGTH) {
+        if (refPositions.current) {
+          refPositions.current.isEndReached = true;
+        }
+        onEndReached({ distanceFromEnd });
+      }
+    }
+    if (refPositions.current) {
+      refPositions.current.animFrame = null;
+    }
+  }, []);
+  const handleScroll = useCallback((event) => {
+    refPositions.current.hasScrolled = true;
+    const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+    visibleRange$.scroll.set(newScroll);
+    if (refPositions.current && !refPositions.current.animFrame) {
+      refPositions.current.animFrame = requestAnimationFrame(handleScrollDebounced);
+    }
+  }, []);
+  useEffect(() => {
+    if (initialContentOffset) {
+      handleScroll({
+        nativeEvent: { contentOffset: { y: initialContentOffset } }
+      });
+      calculateItemsInView();
+    }
+  }, []);
+  return /* @__PURE__ */ React2.createElement(
+    Reactive.ScrollView,
+    {
+      style,
+      contentContainerStyle: [
+        contentContainerStyle,
+        horizontal ? {
+          height: "100%"
+        } : {}
+      ],
+      onScroll: handleScroll,
+      scrollEventThrottle: 32,
+      horizontal,
+      contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
+      ...rest,
+      ref: refScroller
+    },
+    /* @__PURE__ */ React2.createElement(
+      Reactive.View,
+      {
+        $style: () => horizontal ? {
+          width: visibleRange$.totalLength.get()
+        } : {
+          height: visibleRange$.totalLength.get()
+        }
+      },
+      containers.map((container, i) => /* @__PURE__ */ React2.createElement(
+        Container,
+        {
+          key: container.id,
+          recycleItems,
+          $container: containers$[i],
+          listProps: props,
+          getRenderedItem,
+          onLayout: updateItemLength
+        }
+      ))
+    )
+  );
+}
+
+export { LegendList };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@legendapp/list",
+  "version": "0.1.0",
+  "description": "legend-list",
+  "sideEffects": false,
+  "private": false,
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "types": "./index.d.ts",
+  "files": [
+    "**"
+  ],
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "@legendapp/state": "^3.0.0-beta.19"
+  },
+  "author": "Legend <contact@legendapp.com> (https://github.com/LegendApp)",
+  "keywords": [
+    "react",
+    "react-native",
+    "list"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LegendApp/legend-list.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/LegendApp/legend-list/issues"
+  },
+  "homepage": "https://github.com/LegendApp/legend-list#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}