virtua 0.49.2 → 0.49.3

package/lib/svelte/ListItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T">
   import { type Snippet, onDestroy } from "svelte";
   import { type ItemResizeObserver } from "../core/index.js";
-  import { styleToString } from "./utils.js";
+  import { styleToString, type ItemAttrs } from "./utils.js";
   import type { SvelteHTMLElements } from "svelte/elements";
 
   interface Props {
@@ -13,6 +13,7 @@
     hide: boolean;
     horizontal: boolean;
     resizer: ItemResizeObserver;
+    itemProps?: ItemAttrs | undefined;
   }
 
   let {
@@ -24,6 +25,7 @@
     hide,
     horizontal,
     resizer,
+    itemProps,
   }: Props = $props();
 
   let elementRef: HTMLDivElement;
@@ -48,6 +50,7 @@
       [horizontal ? "top" : "left"]: "0px",
       [horizontal ? "left" : "top"]: offset + "px",
       visibility: hide ? "hidden" : undefined,
+      ...itemProps?.style,
     };
     if (horizontal) {
       _style["display"] = "inline-flex";
@@ -55,8 +58,15 @@
 
     return styleToString(_style);
   });
+
+  // `style` is applied separately above, the rest (e.g. `class`) is spread onto the element
+  let itemRest = $derived.by(() => {
+    if (!itemProps) return undefined;
+    const { style: _style, ...rest } = itemProps;
+    return rest;
+  });
 </script>
 
-<svelte:element this={as} bind:this={elementRef} {style}>
+<svelte:element this={as} bind:this={elementRef} {style} {...itemRest}>
   {@render children(item, index)}
 </svelte:element>

package/lib/svelte/VList.svelte

@@ -15,6 +15,7 @@
     horizontal,
     keepMounted,
     cache,
+    itemProps,
     children,
     onscroll,
     onscrollend,
@@ -82,6 +83,7 @@
     {horizontal}
     {keepMounted}
     {cache}
+    {itemProps}
     {onscroll}
     {onscrollend}
   />

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

@@ -3,7 +3,7 @@ import type { VirtualizerHandle, VirtualizerProps } from "./Virtualizer.type.js"
 /**
  * Props of {@link VList}.
  */
-export interface VListProps<T> extends Pick<VirtualizerProps<T>, "data" | "getKey" | "bufferSize" | "itemSize" | "ssrCount" | "shift" | "horizontal" | "children" | "onscroll" | "onscrollend" | "keepMounted" | "cache">, ViewportComponentAttributes {
+export interface VListProps<T> extends Pick<VirtualizerProps<T>, "data" | "getKey" | "bufferSize" | "itemSize" | "ssrCount" | "shift" | "horizontal" | "children" | "onscroll" | "onscrollend" | "keepMounted" | "cache" | "itemProps">, ViewportComponentAttributes {
 }
 /**
  * Methods of {@link VList}.

package/lib/svelte/Virtualizer.svelte

@@ -27,6 +27,7 @@
     getKey = defaultGetKey,
     as = "div",
     item: itemAs,
+    itemProps,
     scrollRef,
     bufferSize,
     itemSize,
@@ -187,6 +188,7 @@
       hide={stateVersion && store.$isUnmeasuredItem(index)}
       {horizontal}
       resizer={resizer.$observeItem}
+      itemProps={itemProps?.({ item, index })}
     />
   {/each}
 </svelte:element>

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

@@ -1,6 +1,7 @@
 import { type Snippet } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 import { type CacheSnapshot, type ScrollToIndexOpts } from "../core/index.js";
+import { type ItemProps } from "./utils.js";
 /**
  * Props of {@link Virtualizer}.
  */
@@ -28,6 +29,10 @@ export interface VirtualizerProps<T> {
      * @defaultValue "div"
      */
     item?: keyof SvelteHTMLElements;
+    /**
+     * A function that provides properties/attributes for item element
+     */
+    itemProps?: ItemProps<T>;
     /**
      * Extra item space in pixels to render before/after the viewport. The minimum value is 0. Lower value will give better performance but you can increase to avoid showing blank items in fast scrolling.
      * @defaultValue 200

package/lib/svelte/utils.d.ts

@@ -1,2 +1,9 @@
 export declare const styleToString: (obj: Record<string, string | undefined>) => string;
 export declare const defaultGetKey: (_data: unknown, i: number) => string;
+/**
+ * A function that provides properties/attributes for item element
+ */
+export type ItemProps<T = unknown> = (payload: {
+    item: T;
+    index: number;
+}) => ItemAttrs | undefined;

package/lib/svelte/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/svelte/utils.ts"],"sourcesContent":["export const styleToString = (\n  obj: Record<string, string | undefined>,\n): string => {\n  return Object.keys(obj).reduce((acc, k) => {\n    const value = obj[k];\n    if (value == null) {\n      return acc;\n    }\n    return acc + `${k}:${value};`;\n  }, \"\");\n};\n\nexport const defaultGetKey = (_data: unknown, i: number) => \"_\" + i;\n"],"names":[],"mappings":"AAAO,MAAM,aAAa,GAAG,CAC3B,GAAuC,KAC7B;AACV,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;AACxC,QAAA,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC;AACpB,QAAA,IAAI,KAAK,IAAI,IAAI,EAAE;AACjB,YAAA,OAAO,GAAG;QACZ;AACA,QAAA,OAAO,GAAG,GAAG,CAAA,EAAG,CAAC,CAAA,CAAA,EAAI,KAAK,GAAG;IAC/B,CAAC,EAAE,EAAE,CAAC;AACR;AAEO,MAAM,aAAa,GAAG,CAAC,KAAc,EAAE,CAAS,KAAK,GAAG,GAAG;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/svelte/utils.ts"],"sourcesContent":["export const styleToString = (\n  obj: Record<string, string | undefined>,\n): string => {\n  return Object.keys(obj).reduce((acc, k) => {\n    const value = obj[k];\n    if (value == null) {\n      return acc;\n    }\n    return acc + `${k}:${value};`;\n  }, \"\");\n};\n\nexport const defaultGetKey = (_data: unknown, i: number) => \"_\" + i;\n\n/**\n * @internal\n */\nexport type ItemAttrs = {\n  [key: string]: any;\n  style?: Record<string, string | undefined>;\n  class?: string;\n};\n\n/**\n * A function that provides properties/attributes for item element\n */\nexport type ItemProps<T = unknown> = (payload: {\n  item: T;\n  index: number;\n}) => ItemAttrs | undefined;\n"],"names":[],"mappings":"AAAO,MAAM,aAAa,GAAG,CAC3B,GAAuC,KAC7B;AACV,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;AACxC,QAAA,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC;AACpB,QAAA,IAAI,KAAK,IAAI,IAAI,EAAE;AACjB,YAAA,OAAO,GAAG;QACZ;AACA,QAAA,OAAO,GAAG,GAAG,CAAA,EAAG,CAAC,CAAA,CAAA,EAAI,KAAK,GAAG;IAC/B,CAAC,EAAE,EAAE,CAAC;AACR;AAEO,MAAM,aAAa,GAAG,CAAC,KAAc,EAAE,CAAS,KAAK,GAAG,GAAG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtua",
-  "version": "0.49.2",
+  "version": "0.49.3",
   "description": "A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.",
   "main": "lib/index.cjs",
   "module": "lib/index.js",
@@ -140,7 +140,7 @@
     "typedoc-plugin-markdown": "^4.6.3",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.46.2",
-    "unplugin-vue-jsx": "^0.9.0",
+    "unplugin-vue-jsx": "^0.10.0",
     "virtua": "^0.49.0",
     "vite": "^8.0.13",
     "vite-plugin-solid": "^2.11.12",