virtua 0.40.4 → 0.41.0

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, For, untrack } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 
 /** @internal */
@@ -1277,60 +1277,6 @@ const ListItem = (props) => {
     </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,10 @@ const Virtualizer = (props) => {
     createEffect(on(stateVersion, () => {
         scroller.$fixScrollJump();
     }));
+    const dataSlice = createMemo(() => {
+        const [start, end] = range();
+        return end >= 0 ? props.data.slice(start, end + 1) : [];
+    });
     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,17 +1384,23 @@ const Virtualizer = (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 _as={props.item} _index={index} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={props.children(data(), index)} _isHorizontal={horizontal}/>);
-        }}/>
+            return (<ListItem _as={props.item} _index={itemIndex()} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal}/>);
+        }}
+      </For>
     </Dynamic>);
 };
 
@@ -1449,7 +1408,7 @@ const Virtualizer = (props) => {
  * 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;
+    const { ref, data, children, overscan, itemSize, shift, horizontal, cache, onScroll, onScrollEnd, style, ...attrs } = props;
     return (<div {...attrs} style={{
             display: horizontal ? "inline-block" : "block",
             [horizontal ? "overflow-x" : "overflow-y"]: "auto",
@@ -1458,7 +1417,7 @@ const VList = (props) => {
             height: "100%",
             ...props.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}>
+      <Virtualizer ref={props.ref} data={props.data} overscan={props.overscan} itemSize={props.itemSize} shift={props.shift} horizontal={horizontal} cache={cache} onScroll={props.onScroll} onScrollEnd={props.onScrollEnd}>
         {props.children}
       </Virtualizer>
     </div>);
@@ -1472,8 +1431,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 +1461,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 +1490,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 +1504,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>);
 };