Binding a nested writable $store value doesn't work

[0xDjole]

Describe the bug

Binding a nested writable $store value doesn't work with the error saying in the browser that the value is not bindable.

Reproduction

// Parent

<Preview
	bind:contactInfo={$store.contactInfo}
</Preview>

// Preview

Here contactInfo is a property, but it's coming from the store. This breaks my app on 200 places.

let {
    contactInfo = $bindable()
} = $props();

<PhoneNumber
    bind:value={contactInfo.phoneNumber.value}
/>

Logs

bind:value={contactInfo.phoneNumber.value}` (src/lib/reservation/components/Reservation/Preview/Preview/index.svelte:128:5) is binding to a non-reactive property

System Info

Arch linux, google chrome, svelte5 with sveltekit.

Severity

blocking an upgrade

[mloodberg]

I do not think this is a bug, it is rather the expected behavior in Svelte 5.

Nevertheless, it affects us.

I have run into the same issue. It is probably because the ContactInfo and/or PhoneNumber don’t use runes (in the class definition?). If they were standard javascript objects, it will probably work out of the box.

In my projects, I solved this by

1. skipping the store and expose a shared object directly (you can do that in the same file where you have the store, but the code gets a lot cleaner). You can now replace the ”$store” variable with simply ”store” everywhere in your code.
2. ensuring the class is reactive ($state on relevant member variables) and all referenced objects to also be reactive. You need to rename the file to .svelte.js/ts first

It requires a lot of refactoring but it is probably worthwhile. In the end, the code gets cleaner and more understandable (you are in control), except you end up with a lot of .svelte-files. But, you now have deep reactivity so you can skip a lot of the previous ”dummy” lines (e.g. variable = variable) forcing other components to update, it just works.

(If the objects are from class definitions outside your main codebase you could wrap them with $state.raw() and update the entire object with some logic to ensure reactivity for that variable.)

Disclaimer: This is according to my understanding from my experience when migrating, maybe there are better ways.

[brunnerh]

This should be a bug. Stores do not have fine-grained reactivity, and implementations of the store contract might not have access to rune-based reactivity either. Any invalidation of the store should trigger updates.

From what I could tell, the only issue is that the binding is not marked correctly as a store binding when binding to a property of a store.

E.g.

<Preview bind:contactInfo={$store} />

Becomes:

Preview(node, {
	get contactInfo() {
		$.mark_store_binding();
		return $store();
	},
	set contactInfo($$value) {
		$.store_set(store, $$value);
	}
});

But this:

<Preview bind:contactInfo={$sub.contactInfo} />

Becomes:

Preview(node_1, {
	get contactInfo() {
		return $sub().contactInfo;
	},
	set contactInfo($$value) {
		$.store_mutate(sub, $.untrack($sub).contactInfo = $$value, $.untrack($sub));
	}
});

Adding the missing call makes the updates work as expected and gets rid of the warning.
Playground