Needing some guidance using the new runes

[dimitarnikolovv]

So basically I have two components that share a state. One for a data table, and one for rendering each row, and editing the information.

//+page.svelte

<script lang="ts">
	...
	import Table from './table.svelte';
        ...

	let { data, form } = $props();

	...
</script>

...

<Table
        ...
        attributesArray={$formData.attribures}
        attributesTypes={data.attributeTypes}
	bind:variantsArray={$formData.variants}
	bind:basePrice={$formData.skuObject.price}
	bind:baseQuantity={$formData.skuObject.quantity}
	bind:baseSKU={$formData.skuObject.sku}
	...				
></Table>

...

//Table.svelte

<script lang="ts">
        ...
	import Row from './row.svelte';

	let {
		attributesArray,
		attributesTypes,
		variantsArray = $bindable(),
		basePrice = $bindable(),
		baseQuantity = $bindable(),
		baseSKU = $bindable(),
		...
	}: {
		attributesArray: AttributesSchema;
		attributesTypes: AttributeTypeFilter[];
		variantsArray: VariantsSchema;
		basePrice: number;
		baseQuantity: number;
		baseSKU: string;
		...
	} = $props();

	let variants = $state(generateVariants(attributesArray));

	function updateVariants() {
		if (attributesArray) {
			const newVariants = generateVariants(attributesArray);

			// Check for structural differences or new attributes to replace `variants`
			if (JSON.stringify(newVariants) !== JSON.stringify(variants)) {
				variants = newVariants;
				variantsArray = newVariants;
			}
		}
	}

	$effect(() => {
		if (attributesArray) updateVariants();
	});

	function generateVariants(attributes: AttributesSchema) {
		...
		return finalCombinations;
	}
</script>

...

<Table.Body>
	{#each variants as variant, i}
		<Row
			{form}
			{disabled}
			bind:variant={variants[i]}
			index={i}
			{availabilityOptions}
			variantRemove={() => variants.splice(i, 1)}
		></Row>
	{/each}
</Table.Body>

...

//Row.svelte

<script lang="ts">
	...

	let {
		form,
		index,
		variant = $bindable(),
		availabilityOptions,
		disabled,
		variantRemove
	}: {
		form: any;
		variant: VariantSchema;
		index: number;
		availabilityOptions: AvailabilityOption[];
		disabled: boolean;
		variantRemove: () => {};
	} = $props();

	...
</script>

<Table.Row>
	<Table.Cell class="font-semibold">
		...
		<Input
			...
			bind:value={variant.skuObject.sku}
		/>
		
	</Table.Cell>
	<Table.Cell>
		...
		<Input
			...
			bind:value={variant.skuObject.quantity}
		/>
	</Table.Cell>
	<Table.Cell>
		...
		<Input
			...
			bind:value={variant.skuObject.price}
		/>
	</Table.Cell>

	....

	<Table.Cell>
		<Button variant="destructive" size="sm" onclick={variantRemove}>
			<Trash_2 class="w-4 h-4 pointer-events-none"></Trash_2>
		</Button>
	</Table.Cell>
	<Table.Cell></Table.Cell>
</Table.Row>

The problem I am facing is that if the variantsArray binding in the Table.svelte components change everything is rendering and updating as expected, but when I change some of the bindings in the Row.svelte component through the input fields, the value in the inputs does not change, as, the whole table rerenders before the values are stored in the $formData.variants array. I really can't figure out a way to implement this functionality correctly. Any feedback is appreciated.

[Leonidaz]

would really help if you create a reproduction either on https://svelte.dev/playground or if you have a sveltekit project on https://www.sveltelab.dev/

[dimitarnikolovv]

Here is a minimal reproduction. But I already fixed the issue by simplifying the whole form.