Svelte 5 binding is not binding to nested Objects

Question

I have problems binding to nested after migrating from svelte4 to svelte5 I have a nested object that i want to manipulate in Svelte JS why do i need to create the Outer? Link to see Svelte Playground

<script>
import { writable } from "svelte/store"
import Toggle from "./Toggle.svelte"
import OuterToggle from "./OuterToggle.svelte"

let condition = $state({name: "app"});

let store = writable({data: {enabled : true}})
</script>
<br>
Not working 
{JSON.stringify($store)}- {$store.data.enabled}
<Toggle bind:data={$store.data}></Toggle><br> // Works in svelte4
<br>
Working <OuterToggle bind:data={$store}></OuterToggle>

the first one has binding that works but the other does not why is that

Toggle:

<script>
let {data = $bindable({enabled:true})} = $props()
function change(e) {
    data.enabled = e.target.checked
}
</script>
<input type="checkbox" checked={data.enabled} onchange={change}>

OuterToggle:

<script>
import Toggle from "./Toggle.svelte"
let {data = $bindable({data :{enabled:true}})} = $props()
</script>
{JSON.stringify(data)}
<Toggle bind:data={data.data}></Toggle>

brunnerh · Accepted Answer · 2025-05-16 12:30:12Z

This looks like a bug.

Stores have coarse reactivity: When anything in the store is modified, they have to be invalidated; the binding needs to take care of that.

For the OuterToggle instance, this code is generated:

OuterToggle(node_1, {
    get data() {
        $.mark_store_binding();
        return $store();
    },
    set data($$value) {
        $.store_set(store, $$value);
    }
});

For Toggle it's this:

Toggle(node, {
    get data() {
        return $store().data;
    },
    set data($$value) {
        $.store_mutate(store, $.untrack($store).data = $$value, $.untrack($store));
    }
});

The $.mark_store_binding(); missing from the getter in Toggle seems a bit suspicious, unless that is only required when binding directly to the store of course...

In any case, would recommend opening an issue in the Svelte repository if there is none already.

Edit: Adding mark_store_binding to the binding getter appears to fix the issue.

Collectives™ on Stack Overflow

Svelte 5 binding is not binding to nested Objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related