virtua 0.53.0 → 0.53.1

package/lib/svelte/VMasonry.svelte

@@ -15,6 +15,7 @@
     scrollTo as _scrollTo,
     scrollBy as _scrollBy,
     scrollToIndex as _scrollToIndex,
+    sort,
   } from "../core/index.js";
   import { defaultGetKey, isSameRange, styleToString } from "./utils.js";
   import MasonryItem from "./MasonryItem.svelte";
@@ -32,6 +33,7 @@
     gap: gapProp,
     itemSize,
     bufferSize,
+    keepMounted,
     cache,
     children,
     onscroll,
@@ -82,11 +84,23 @@
     const len = data.length;
     const [start, end] = range;
     const arr: number[] = [];
-    for (let i = start; i <= end; i++) {
-      // Guard for experimental.async: true, which runs the each block before $effect.pre
-      // https://github.com/inokawa/virtua/pull/847
-      if (i < len) {
-        arr.push(i);
+    if (keepMounted) {
+      const mounted = new Set(keepMounted);
+      for (let i = start; i <= end; i++) {
+        mounted.add(i);
+      }
+      for (const index of sort([...mounted])) {
+        if (index < len) {
+          arr.push(index);
+        }
+      }
+    } else {
+      for (let i = start; i <= end; i++) {
+        // Guard for experimental.async: true, which runs the each block before $effect.pre
+        // https://github.com/inokawa/virtua/pull/847
+        if (i < len) {
+          arr.push(i);
+        }
       }
     }
     return arr;

package/lib/svelte/VMasonry.type.d.ts

@@ -39,6 +39,10 @@ export interface VMasonryProps<T> extends ViewportComponentAttributes {
      * @defaultValue 200
      */
     bufferSize?: number;
+    /**
+     * List of indexes that should be always mounted, even when off screen.
+     */
+    keepMounted?: readonly number[];
     /**
      * You can restore cache by passing a {@link CacheSnapshot} on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from {@link VMasonryHandle.getCache}.
      *

package/lib/vue/VMasonry.d.ts

@@ -76,6 +76,10 @@ export interface VMasonryProps<T> extends PublicProps {
      * @defaultValue 200
      */
     bufferSize?: number;
+    /**
+     * List of indexes that should be always mounted, even when off screen.
+     */
+    keepMounted?: readonly number[];
     /**
      * You can restore cache by passing a {@link CacheSnapshot} on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from {@link VMasonryHandle.cache}.
      *

package/lib/vue/index.cjs

@@ -1282,6 +1282,7 @@ e.defineComponent)(t => {
         gap: Number,
         itemSize: Number,
         bufferSize: Number,
+        keepMounted: Array,
         cache: Object
     },
     emits: [ "scroll", "scrollEnd" ],
@@ -1408,14 +1409,13 @@ e.defineComponent)(t => {
             scrollTo: e => C(f, e),
             scrollBy: e => j(f, a, e)
         }), () => {
-            const o = _.value, r = [];
-            for (let [o, n] = p.value; o <= n; o++) {
-                const n = l.default({
+            const o = _.value, r = [], n = o => {
+                const r = l.default({
                     item: t.data[o],
                     index: o
                 });
-                r.push((0, e.createVNode)(K, {
-                    key: V(n, o),
+                return (0, e.createVNode)(K, {
+                    key: V(r, o),
                     ne: d,
                     se: a,
                     Be: u,
@@ -1423,8 +1423,15 @@ e.defineComponent)(t => {
                     ce: t.data[o],
                     ue: f.ee,
                     le: o
-                }, null, 8, [ "ne", "se", "Be", "ie", "ce", "ue", "le" ]));
-            }
+                }, null, 8, [ "ne", "se", "Be", "ie", "ce", "ue", "le" ]);
+            };
+            if (t.keepMounted) {
+                const e = t.data.length, o = new Set(t.keepMounted);
+                for (let [e, t] = p.value; e <= t; e++) o.add(e);
+                c([ ...o ]).forEach(t => {
+                    t < e && r.push(n(t));
+                });
+            } else for (let [e, t] = p.value; e <= t; e++) r.push(n(e));
             return (0, e.createVNode)("div", {
                 style: {
                     display: "block",