Bind to nested reactive property

[SEUH]

I have an accessorKey "properties.amount" and i have an object "{properties: {amount: '123', ...}, ...}". Now i want to bind to the objects property. I haven't found any solution for this problem. Using $derived only the variable inside the component gets reactive but it doesn't bubble up to the parent. Any ideas? Because i don't want to write multiple components like the following for obvious reasons:

<script>
    import {Input} from '@/components/ui/input/index.js';

    // def.accessorKey = 'properties.amount'
    // cell.row.original = {properties: {amount: '123', ...}, ...}

    let {def, cell} = $props();
    let levels = def.accessorKey.split('.');
</script>

<div class="flex space-x-2">
    <span class="max-w-[500px] truncate font-medium">
        {#if levels.length === 1}
            <Input bind:value={cell.row.original[levels[0]]}/>
        {:else if levels.length === 2}
            <Input bind:value={cell.row.original[levels[0]][levels[1]]}/>
        {:else if levels.length === 3}
            <Input bind:value={cell.row.original[levels[0]][levels[1]][levels[2]]}/>
        {:else if levels.length === 4}
            <Input bind:value={cell.row.original[levels[0]][levels[1]][levels[2]][levels[3]]}/>
        {/if}
    </span>
</div>

[brunnerh]

If you make the binding interact with the source object and the source object is deeply stateful, this is possible.

Example:

<script>
	let { def, cell } = $props();

	let accessor = $derived.by(() => {
		const parts = def.accessorKey.split('.');
		const property = parts.at(-1);
		let o = cell.row.original;
		for (const key of parts.slice(0, -1))
			o = o[key];

		return {
			get value() { return o[property]; },
			set value(v) { o[property] = v; },
		}
	});
</script>

<input bind:value={accessor.value} />

Playground

In the case of shallow reactivity, the cell needs to be $bindable and the entire object has to be swapped out with an updated version, which is a bit more involved.

[SEUH]

This a great solution, i hadn't thought of abstracting behind a getter/setter. Thank you!

[gterras]

Really elegant solution indeed for a common problem, I wish there was a "recipies" part in the docs where one can browse useful tricks of this kind.