Drive virtualized item attrs from Soma runtime

src/uix/morfo/components/virtual-grid.ts

@@ -1,4 +1,5 @@
 import type { Morfo } from '../types';
+import { v } from '../types';
 
 export const virtualGridMorfo = {
 	name: 'VirtualGrid',
@@ -15,8 +16,8 @@ export const virtualGridMorfo = {
 			defaultElement: 'div',
 			optional: false,
 			data: [
-				{ attr: 'data-row-index' },
-				{ attr: 'data-column-index' }
+				{ attr: 'data-row-index', value: v.propRef('rowIndex'), emit: 'value' },
+				{ attr: 'data-column-index', value: v.propRef('columnIndex'), emit: 'value' }
 			],
 			aria: []
 		}

src/uix/morfo/components/virtual-list.ts

@@ -1,4 +1,5 @@
 import type { Morfo } from '../types';
+import { v } from '../types';
 
 export const virtualListMorfo = {
 	name: 'VirtualList',
@@ -12,7 +13,13 @@ export const virtualListMorfo = {
 			kind: 'public',
 			defaultElement: 'div',
 			optional: false,
-			data: [{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }],
+			data: [
+				{
+					attr: 'data-orientation',
+					values: ['horizontal', 'vertical'],
+					value: v.propRef('orientation')
+				}
+			],
 			aria: []
 		},
 		{
@@ -22,7 +29,13 @@ export const virtualListMorfo = {
 			kind: 'public',
 			defaultElement: 'div',
 			optional: true,
-			data: [{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }],
+			data: [
+				{
+					attr: 'data-orientation',
+					values: ['horizontal', 'vertical'],
+					value: v.propRef('orientation')
+				}
+			],
 			aria: []
 		},
 		{
@@ -32,7 +45,13 @@ export const virtualListMorfo = {
 			kind: 'public',
 			defaultElement: 'div',
 			optional: true,
-			data: [{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }],
+			data: [
+				{
+					attr: 'data-orientation',
+					values: ['horizontal', 'vertical'],
+					value: v.propRef('orientation')
+				}
+			],
 			aria: []
 		},
 		{
@@ -43,8 +62,12 @@ export const virtualListMorfo = {
 			defaultElement: 'div',
 			optional: false,
 			data: [
-				{ attr: 'data-index' },
-				{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }
+				{ attr: 'data-index', value: v.propRef('index'), emit: 'value' },
+				{
+					attr: 'data-orientation',
+					values: ['horizontal', 'vertical'],
+					value: v.propRef('orientation')
+				}
 			],
 			aria: []
 		}

src/uix/soma/components/virtual-grid/virtual-grid-provider.svelte.ts

@@ -294,7 +294,12 @@ export class VirtualGridCellProvider {
 		this.runtimePart = this.provider.runtime.part('cell', {
 			id: opts.id,
 			ref: opts.ref,
-			owner: this
+			owner: this,
+			props: {
+				rowIndex: () => this.opts.rowIndex.current,
+				columnIndex: () => this.opts.columnIndex.current
+			},
+			syncAttrs: true
 		});
 	}
 
@@ -305,8 +310,6 @@ export class VirtualGridCellProvider {
 		const columnSize = this.opts.columnSize.current;
 		return this.runtimePart.assert({
 			...this.runtimePart.props,
-			'data-row-index': this.opts.rowIndex.current,
-			'data-column-index': this.opts.columnIndex.current,
 			style: {
 				position: 'absolute',
 				top: '0',

src/uix/soma/components/virtual-list/virtual-list-provider.svelte.ts

@@ -67,12 +67,17 @@ export class VirtualListProvider {
 	private constructor(opts: VirtualListOpts) {
 		this.opts = opts;
 		this.soma = Soma.require();
-		this.runtime = this.soma.runtime(virtualListMorfo, {});
+		this.runtime = this.soma.runtime(virtualListMorfo, {
+			props: {
+				orientation: () => this.opts.orientation.current
+			}
+		});
 		this.runtimePart = this.runtime.part('provider', {
 			id: opts.id,
 			ref: opts.ref,
 			owner: this,
-			context: VirtualListProvider.ctx
+			context: VirtualListProvider.ctx,
+			syncAttrs: true
 		});
 	}
 
@@ -293,8 +298,7 @@ export class VirtualListProvider {
 
 	readonly props = $derived.by(() =>
 		this.runtimePart.assert({
-			...this.runtimePart.props,
-			'data-orientation': this.opts.orientation.current
+			...this.runtimePart.props
 		} as const)
 	);
 }
@@ -321,7 +325,8 @@ export class VirtualListViewportProvider {
 			owner: this,
 			onRefChange: (el) => {
 				this.provider.viewportRef = el;
-			}
+			},
+			syncAttrs: true
 		});
 
 		$effect(() => {
@@ -355,7 +360,6 @@ export class VirtualListViewportProvider {
 	readonly props = $derived.by(() =>
 		this.runtimePart.assert({
 			...this.runtimePart.props,
-			'data-orientation': this.provider.opts.orientation.current,
 			style: {
 				position: 'relative',
 				overflow: this.provider.isHorizontal ? 'auto hidden' : 'hidden auto'
@@ -395,7 +399,8 @@ export class VirtualListWindowViewportProvider {
 			owner: this,
 			onRefChange: (el) => {
 				this.provider.windowHostRef = el;
-			}
+			},
+			syncAttrs: true
 		});
 
 		$effect(() => {
@@ -447,7 +452,6 @@ export class VirtualListWindowViewportProvider {
 	readonly props = $derived.by(() =>
 		this.runtimePart.assert({
 			...this.runtimePart.props,
-			'data-orientation': this.provider.opts.orientation.current,
 			style: {
 				position: 'relative'
 			}
@@ -475,7 +479,12 @@ export class VirtualListItemProvider {
 		this.runtimePart = this.provider.runtime.part('item', {
 			id: opts.id,
 			ref: opts.ref,
-			owner: this
+			owner: this,
+			props: {
+				index: () => this.opts.index.current,
+				orientation: () => this.provider.opts.orientation.current
+			},
+			syncAttrs: true
 		});
 
 		// ResizeObserver: report real rendered size back to the provider so
@@ -525,8 +534,6 @@ export class VirtualListItemProvider {
 			: { [crossAxis]: '100%' };
 		return this.runtimePart.assert({
 			...this.runtimePart.props,
-			'data-index': this.opts.index.current,
-			'data-orientation': this.provider.opts.orientation.current,
 			style: {
 				position: 'absolute',
 				top: '0',