virtua 0.33.6 → 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/VList.svelte

@@ -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.
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtua",
-  "version": "0.33.6",
+  "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",