virtua 0.33.5 → 0.33.7

package/README.md

@@ -263,18 +263,18 @@ export const App = () => {
 
   const sizes = [20, 40, 180, 77];
 
-  const data = Array.from({ length: 1000 }).map((_, i) =>  ({ id: i, size: sizes[i % 4] + "px" }));
+  const data = Array.from({ length: 1000 }).map((_, i) => sizes[i % 4] );
 </script>
 
-<VList {data} let:item style={`height: 100vh;`} getKey={(d) => d.id}>
+<VList {data} let:item let:index style={`height: 100vh;`} getKey={(d) => d.id}>
   <div
     style={`
-      height: ${item.size};
+      height: ${item}px;
       background: white;
       border-bottom: solid 1px #ccc;
     `}
   >
-    {item.id}
+    {index}
   </div>
 </VList>
 ```

package/lib/svelte/ListItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+  import { afterUpdate, onDestroy } from "svelte";
   import { isRTLDocument, type ItemResizeObserver } from "./core";
-  import { effect, styleToString } from "./utils";
+  import { styleToString } from "./utils";
 
   export let index: number;
   export let offset: number;
@@ -10,11 +11,16 @@
 
   let elementRef: HTMLDivElement;
 
+  let cleanupResizer: (() => void) | undefined;
   // The index may be changed if elements are inserted to or removed from the start of props.children
   let prevIndex: number | undefined;
-  effect(() => {
+  afterUpdate(() => {
     if (prevIndex === index) return;
-    return resizer(elementRef, (prevIndex = index));
+    if (cleanupResizer) cleanupResizer();
+    cleanupResizer = resizer(elementRef, (prevIndex = index));
+  });
+  onDestroy(() => {
+    if (cleanupResizer) cleanupResizer();
   });
 
   let style: string;

package/lib/svelte/VList.svelte

@@ -25,7 +25,7 @@
     SCROLL_TO_INDEX,
   } from "./core";
   import {
-    effect,
+    onUpdate,
     type UnwrapCustomEvents,
     defaultGetKey,
     styleToString,
@@ -33,6 +33,9 @@
   import ListItem from "./ListItem.svelte";
 
   // https://github.com/sveltejs/rfcs/pull/38
+  interface $$Slots {
+    default: { item: T; index: number };
+  }
   interface $$Props extends HTMLAttributes<HTMLDivElement> {
     /**
      * The data items rendered by this component.
@@ -131,20 +134,20 @@
   });
 
   let prevLength = data.length;
-  effect(() => {
+  onUpdate(() => {
     if (prevLength === data.length) return;
     virtualizer[CHANGE_ITEM_LENGTH]((prevLength = data.length), shift);
   }, true);
 
   let prevJumpCount: number | undefined;
-  effect(() => {
+  onUpdate(() => {
     if (prevJumpCount === jumpCount) return;
     prevJumpCount = jumpCount;
     virtualizer[FIX_SCROLL_JUMP]();
   });
 
   let prevRange: typeof range | undefined;
-  effect(() => {
+  onUpdate(() => {
     if (prevRange && prevRange[0] === range[0] && prevRange[1] === range[1])
       return;
     prevRange = range;
@@ -222,16 +225,16 @@
     bind:this={containerRef}
     style={`${containerStyle} ${dynamicContainerStyle}`}
   >
-    {#each items as item, index (getKey(item, index + extendedRange[0]))}
+    {#each items as item, i (getKey(item, i + extendedRange[0]))}
+      {@const index = i + extendedRange[0]}
       <ListItem
-        index={index + extendedRange[0]}
-        offset={rerender &&
-          virtualizer[GET_ITEM_OFFSET](index + extendedRange[0])}
-        hide={rerender && virtualizer[IS_ITEM_HIDDEN](index + extendedRange[0])}
+        {index}
+        offset={rerender && virtualizer[GET_ITEM_OFFSET](index)}
+        hide={rerender && virtualizer[IS_ITEM_HIDDEN](index)}
         {horizontal}
         resizer={virtualizer[OBSERVE_ITEM_RESIZE]}
       >
-        <slot {item} />
+        <slot {item} {index} />
       </ListItem>
     {/each}
   </div>

package/lib/svelte/VList.svelte.d.ts

@@ -73,6 +73,7 @@ declare class __sveltets_Render<T> {
     slots(): {
         default: {
             item: T;
+            index: number;
         };
     };
 }

package/lib/svelte/utils.d.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-export declare const effect: (cb: () => (() => void) | void, before?: boolean) => void;
+export declare const onUpdate: (cb: () => void, before?: boolean) => void;
 export declare const styleToString: (obj: Record<string, string>) => string;
 export declare const defaultGetKey: (_data: unknown, i: number) => string;
 /**

package/lib/svelte/utils.js

@@ -1,14 +1,7 @@
-import { afterUpdate, beforeUpdate, onDestroy } from "svelte";
-export const effect = (cb, before) => {
-    let cleanup;
+import { afterUpdate, beforeUpdate } from "svelte";
+export const onUpdate = (cb, before) => {
     (before ? beforeUpdate : afterUpdate)(() => {
-        if (cleanup)
-            cleanup();
-        cleanup = cb();
-    });
-    onDestroy(() => {
-        if (cleanup)
-            cleanup();
+        cb();
     });
 };
 export const styleToString = (obj) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtua",
-  "version": "0.33.5",
+  "version": "0.33.7",
   "description": "A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",