Refactor svelte range

Author: inokawa

src/svelte/Virtualizer.svelte

@@ -11,8 +11,9 @@
     createScroller,
     createVirtualStore,
     getScrollSize as _getScrollSize,
+    sort,
   } from "../core/index.js";
-  import { defaultGetKey, styleToString, iterRange } from "./utils.js";
+  import { defaultGetKey, styleToString } from "./utils.js";
   import ListItem from "./ListItem.svelte";
   import type {
     VirtualizerHandle,
@@ -66,6 +67,25 @@
   let isScrolling = $derived(stateVersion && store.$isScrolling());
   let totalSize = $derived(stateVersion && store.$getTotalSize());
 
+  let indexes = $derived.by(() => {
+    const [start, end] = range;
+    const arr: number[] = [];
+    if (keepMounted) {
+      const mounted = new Set(keepMounted);
+      for (let i = start; i <= end; i++) {
+        mounted.add(i);
+      }
+      for (const index of sort([...mounted])) {
+        arr.push(index);
+      }
+    } else {
+      for (let i = start; i <= end; i++) {
+        arr.push(i);
+      }
+    }
+    return arr;
+  });
+
   onMount(() => {
     const assignRef = (scrollable: HTMLElement) => {
       resizer.$observeRoot(scrollable);
@@ -146,7 +166,7 @@
   Customizable list virtualizer for advanced usage. See {@link VirtualizerProps} and {@link VirtualizerHandle}.
 -->
 <svelte:element this={as} bind:this={containerRef} style={containerStyle}>
-  {#each iterRange(range, keepMounted) as index (getKey(data[index]!, index))}
+  {#each indexes as index (getKey(data[index]!, index))}
     {@const item = data[index]!}
     <ListItem
       {children}

src/svelte/WindowVirtualizer.svelte

@@ -11,7 +11,7 @@
     createWindowResizer,
     createWindowScroller,
   } from "../core/index.js";
-  import { defaultGetKey, iterRange, styleToString } from "./utils.js";
+  import { defaultGetKey, styleToString } from "./utils.js";
   import ListItem from "./ListItem.svelte";
   import type {
     WindowVirtualizerHandle,
@@ -61,6 +61,15 @@
   let isScrolling = $derived(stateVersion && store.$isScrolling());
   let totalSize = $derived(stateVersion && store.$getTotalSize());
 
+  let indexes = $derived.by(() => {
+    const [start, end] = range;
+    const arr: number[] = [];
+    for (let i = start; i <= end; i++) {
+      arr.push(i);
+    }
+    return arr;
+  });
+
   onMount(() => {
     resizer.$observeRoot(containerRef!);
     scroller.$observe(containerRef!);
@@ -117,7 +126,7 @@
   {@link Virtualizer} controlled by the window scrolling. See {@link WindowVirtualizerProps} and {@link WindowVirtualizerHandle}.
 -->
 <div bind:this={containerRef} style={containerStyle}>
-  {#each iterRange(range) as index (getKey(data[index]!, index))}
+  {#each indexes as index (getKey(data[index]!, index))}
     {@const item = data[index]!}
     <ListItem
       {children}

src/svelte/utils.ts

@@ -1,5 +1,3 @@
-import { sort, type ItemsRange } from "../core/index.js";
-
 export const styleToString = (
   obj: Record<string, string | undefined>
 ): string => {
@@ -13,22 +11,3 @@ export const styleToString = (
 };
 
 export const defaultGetKey = (_data: unknown, i: number) => "_" + i;
-
-export function* iterRange(
-  [start, end]: ItemsRange,
-  keepMounted?: readonly number[]
-) {
-  if (keepMounted) {
-    const mounted = new Set(keepMounted);
-    for (let i = start; i <= end; i++) {
-      mounted.add(i);
-    }
-    for (const index of sort([...mounted])) {
-      yield index;
-    }
-  } else {
-    for (let i = start; i <= end; i++) {
-      yield i;
-    }
-  }
-}