virtua 0.40.4 → 0.41.1

package/lib/solid/index.jsx

@@ -1,4 +1,4 @@
-import { mergeProps, createEffect, onCleanup, createMemo, createRoot, createSignal, onMount, createComputed, on } from 'solid-js';
+import { mergeProps, createEffect, onCleanup, createMemo, createSignal, onMount, createComputed, on, untrack, For, splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 
 /** @internal */
@@ -1272,65 +1272,11 @@ const ListItem = (props) => {
         }
         return style;
     });
-    return (<Dynamic component={props._as} ref={elementRef} style={style()}>
+    return (<Dynamic component={props._as} index={props._index} ref={elementRef} style={style()}>
       {props._children}
     </Dynamic>);
 };
 
-/**
- * @jsxImportSource solid-js
- */
-/**
- * https://github.com/solidjs/solid/blob/main/packages/solid/src/reactive/array.ts
- * https://github.com/solidjs/solid/blob/main/packages/solid/src/render/flow.ts
- * https://github.com/solidjs/solid/discussions/366
- * @internal
- */
-const RangedFor = (props) => {
-    let prev = new Map();
-    onCleanup(() => {
-        for (const node of prev.values()) {
-            node._dispose();
-        }
-    });
-    return createMemo(() => {
-        const list = props._each;
-        const [start, end] = props._range;
-        const current = new Map();
-        const items = [];
-        for (let i = start; i <= end; i++) {
-            const newData = list[i];
-            const lookup = prev.get(i);
-            items.push(lookup
-                ? lookup._element
-                : createRoot((dispose) => {
-                    const data = createSignal(newData);
-                    const result = props._render(data[0], i);
-                    current.set(i, {
-                        _data: data,
-                        _element: result,
-                        _dispose: dispose,
-                    });
-                    return result;
-                }));
-            if (lookup) {
-                if (newData !== lookup._data) {
-                    lookup._data[1](newData // TODO improve type
-                    );
-                }
-                current.set(i, lookup);
-            }
-        }
-        for (const [key, node] of prev.entries()) {
-            if (!current.has(key)) {
-                node._dispose();
-            }
-        }
-        prev = current;
-        return items;
-    }); // TODO improve type
-};
-
 /**
  * @internal
  */
@@ -1346,9 +1292,9 @@ const isSameRange = (prev, next) => {
  */
 const Virtualizer = (props) => {
     let containerRef;
-    const { itemSize, horizontal = false, overscan } = props;
+    const { itemSize, horizontal = false, overscan, cache } = props;
     props = mergeProps({ as: "div" }, props);
-    const store = createVirtualStore(props.data.length, itemSize, overscan, undefined, undefined, !itemSize);
+    const store = createVirtualStore(props.data.length, itemSize, overscan, undefined, cache, !itemSize);
     const resizer = createResizer(store, horizontal);
     const scroller = createScroller(store, horizontal);
     const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
@@ -1376,6 +1322,9 @@ const Virtualizer = (props) => {
     onMount(() => {
         if (props.ref) {
             props.ref({
+                get cache() {
+                    return store.$getCacheSnapshot();
+                },
                 get scrollOffset() {
                     return store.$getScrollOffset();
                 },
@@ -1421,6 +1370,48 @@ const Virtualizer = (props) => {
     createEffect(on(stateVersion, () => {
         scroller.$fixScrollJump();
     }));
+    const dataSlice = createMemo(() => {
+        const [start, end] = range();
+        const items = end >= 0 ? props.data.slice(start, end + 1) : [];
+        const indexes = items.map((_, index) => start + index);
+        if (props.keepMounted) {
+            const startItems = [];
+            const startIndexes = [];
+            const endItems = [];
+            const endIndexes = [];
+            sort(props.keepMounted).forEach((index) => {
+                if (index < 0 || index >= props.data.length)
+                    return;
+                if (index < start) {
+                    startItems.push(props.data[index]);
+                    startIndexes.push(index);
+                }
+                if (index > end) {
+                    endItems.push(props.data[index]);
+                    endIndexes.push(index);
+                }
+            });
+            items.unshift(...startItems);
+            indexes.unshift(...startIndexes);
+            items.push(...endItems);
+            indexes.push(...endIndexes);
+        }
+        return { _items: items, _indexes: indexes };
+    });
+    const renderItem = (data, index) => {
+        const offset = createMemo(() => {
+            stateVersion();
+            return store.$getItemOffset(index());
+        });
+        const hide = createMemo(() => {
+            stateVersion();
+            return store.$isUnmeasuredItem(index());
+        });
+        const children = createMemo(() => {
+            return untrack(() => props.children(data, index));
+        });
+        return (<ListItem _as={props.item} _index={index()} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal}/>);
+    };
     return (<Dynamic component={props.as} ref={containerRef} style={{
             // contain: "content",
             "overflow-anchor": "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
@@ -1431,35 +1422,48 @@ const Virtualizer = (props) => {
             height: horizontal ? "100%" : totalSize() + "px",
             "pointer-events": isScrolling() ? "none" : undefined,
         }}>
-      <RangedFor _each={props.data} _range={range()} _render={(data, index) => {
-            const offset = createMemo(() => {
-                stateVersion();
-                return store.$getItemOffset(index);
-            });
-            const hide = createMemo(() => {
-                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}/>);
-        }}/>
+      <For each={dataSlice()._items}>
+        {(data, index) => {
+            const itemIndex = createMemo(() => dataSlice()._indexes[index()]);
+            // eslint-disable-next-line solid/reactivity
+            return renderItem(data, itemIndex);
+        }}
+      </For>
     </Dynamic>);
 };
 
+/**
+ * @jsxImportSource solid-js
+ */
 /**
  * Virtualized list component. See {@link VListProps} and {@link VListHandle}.
  */
 const VList = (props) => {
-    const { ref, data, children, overscan, itemSize, shift, horizontal, onScroll, onScrollEnd, style, ...attrs } = props;
-    return (<div {...attrs} style={{
-            display: horizontal ? "inline-block" : "block",
-            [horizontal ? "overflow-x" : "overflow-y"]: "auto",
+    const [local, others] = splitProps(props, [
+        "ref",
+        "data",
+        "children",
+        "overscan",
+        "itemSize",
+        "shift",
+        "horizontal",
+        "keepMounted",
+        "cache",
+        "item",
+        "onScroll",
+        "onScrollEnd",
+        "style",
+    ]);
+    return (<div {...others} style={{
+            display: local.horizontal ? "inline-block" : "block",
+            [local.horizontal ? "overflow-x" : "overflow-y"]: "auto",
             contain: "strict",
             width: "100%",
             height: "100%",
-            ...props.style,
+            ...local.style,
         }}>
-      <Virtualizer ref={props.ref} data={props.data} overscan={props.overscan} itemSize={props.itemSize} shift={props.shift} horizontal={horizontal} onScroll={props.onScroll} onScrollEnd={props.onScrollEnd}>
-        {props.children}
+      <Virtualizer ref={local.ref} data={local.data} overscan={local.overscan} itemSize={local.itemSize} shift={local.shift} horizontal={local.horizontal} keepMounted={local.keepMounted} cache={local.cache} item={local.item} onScroll={local.onScroll} onScrollEnd={local.onScrollEnd}>
+        {local.children}
       </Virtualizer>
     </div>);
 };
@@ -1472,8 +1476,8 @@ const VList = (props) => {
  */
 const WindowVirtualizer = (props) => {
     let containerRef;
-    const { ref: _ref, data: _data, children: _children, overscan, itemSize, shift: _shift, horizontal = false, onScrollEnd: _onScrollEnd, } = props;
-    const store = createVirtualStore(props.data.length, itemSize, overscan, undefined, undefined, !itemSize);
+    const { ref: _ref, data: _data, children: _children, overscan, itemSize, shift: _shift, horizontal = false, cache, onScrollEnd: _onScrollEnd, } = props;
+    const store = createVirtualStore(props.data.length, itemSize, overscan, undefined, cache, !itemSize);
     const resizer = createWindowResizer(store, horizontal);
     const scroller = createWindowScroller(store, horizontal);
     const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
@@ -1502,6 +1506,9 @@ const WindowVirtualizer = (props) => {
     onMount(() => {
         if (props.ref) {
             props.ref({
+                get cache() {
+                    return store.$getCacheSnapshot();
+                },
                 findStartIndex: store.$findStartIndex,
                 findEndIndex: store.$findEndIndex,
                 scrollToIndex: scroller.$scrollToIndex,
@@ -1528,6 +1535,10 @@ const WindowVirtualizer = (props) => {
     createEffect(on(stateVersion, () => {
         scroller.$fixScrollJump();
     }));
+    const dataSlice = createMemo(() => {
+        const [start, end] = range();
+        return end >= 0 ? props.data.slice(start, end + 1) : [];
+    });
     return (<div ref={containerRef} style={{
             // contain: "content",
             "overflow-anchor": "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
@@ -1538,17 +1549,23 @@ const WindowVirtualizer = (props) => {
             height: horizontal ? "100%" : totalSize() + "px",
             "pointer-events": isScrolling() ? "none" : undefined,
         }}>
-      <RangedFor _each={props.data} _range={range()} _render={(data, index) => {
+      <For each={dataSlice()}>
+        {(data, index) => {
+            const itemIndex = createMemo(() => range()[0] + index());
             const offset = createMemo(() => {
                 stateVersion();
-                return store.$getItemOffset(index);
+                return store.$getItemOffset(itemIndex());
             });
             const hide = createMemo(() => {
                 stateVersion();
-                return store.$isUnmeasuredItem(index);
+                return store.$isUnmeasuredItem(itemIndex());
+            });
+            const children = createMemo(() => {
+                return untrack(() => props.children(data, itemIndex));
             });
-            return (<ListItem _index={index} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={props.children(data(), index)} _isHorizontal={horizontal}/>);
-        }}/>
+            return (<ListItem _index={itemIndex()} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal}/>);
+        }}
+      </For>
     </div>);
 };