Svelte 5: cannot change nested objects if not binded

[frederikhors]

Describe the bug

If you change the text in the input the condition doesn't change.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACp2RS2uFMBCF_0oY7kJBdG9V6KaLS2kXXTZd-IhlQJOQjJdeQv57mWvRUvpeBDKTOZzzTQKMOCkP5WMA3c4KSri2FjKgs-XCn9RECjLwZnE9dyrfO7TUSC0JZ2sciVv0JEZnZiEhL7jKV52EK6mrYlfo6jLbGz0godF1COxaCgmttRJiFEUDGcxmwBHVACW5RcVsC8fyP6a7wYmU2_Ot9fuEPDwpEoEvkrZ0ohYhZtyMohYH64z1SfoRiSNlO1IpwvHh_i735FA_43hOtqc0Vp1r-FxW8RasQz2Uu-f3_Kvmtxv4AurAlm03qST9kW41_BcfaruQ4KC1BFIvJGGFPbXTouqw6XKG-_znn-IrrT-lT6ICAAA=

Severity

blocking all usage of svelte

[trueadm]

Your condition needs to be reactive, so you need to pass it in as state like shown. I wonder if we can detect this pattern in DEV and add a warning?

[frederikhors]

Yeah. I think we definitely need a warning in DEV.

[trueadm]

It seems related to #12320 too. We can probably either freeze the object if defined as an inline prop, or we can track it with a WeakMap in DEV and see where if it's used in a binding?

[Prinzhorn]

It seems related to #12320 too

Definitely, because removing bind:condition makes it reactive, which is completely counterintuitive (why would the default prop - a vanilla object - be reactive?)

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA52QT0vEMBDFv0oYPLRQ2nttF7x4ENGDR-Ohf1IZaJOQTBeXkO9uZyutiLjqIZCZeS_zfgkw4Kg8lM8BdDMpKOHGWsiATpYLf1QjqaX2ZnYddyrfObR0kFoSTtY4EvfoSQzOTEJCXnCVrz4J11JXxe7Q1VlbHJYXJ9PjgKqHktysYrYFYMkfE9zionF7hrX-nILFoyIR-CKpM7pHQqNFLa5a1H3TjioJMc14HrlrnbE-Sb8ScLpMbP5ShLunx4fck0P9isMp2UZprFp34HMm_8jIy8p9_c9fsXp--xkX-S7TrQv_xYfaziQ4aC2B1BtJWGGPzTirOmy-nOHit-Qv8R2mKxatkQIAAA==

$bindable does not matter either:

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA52QS2uFMBCF_0oY7kJBdG9V6KaLS2kXXTZd-IhlQJOQjJdeJP-9zrVoKX0vAnMmczLnyww9DspD_jiDrkcFOVxbCwnQ2bLwJzWQWrQ3k2u5U_jWoaVKakk4WuNI3KIn0TszCglpxipdfRKupC6y3aGLy2xWLS-OpsMeVQc5uUmFZAvAI39McIPLjNszrPp9Ch4eFImZC0mt0R0SGi1KMYeEm2EpD9YZ66P4Y2yOlIjNlIv5-HB_l3pyqJ-xP0fbVRyKxlV8LrhvwRrUXb7v_J5_9fz2B76AOvDKuhlUFP9Ity78Fx9qO5HgoKUEUi8kYYU91cOkynnzpQwXPiV_Cq8OhbKhhgIAAA==

[frederikhors]

But guys, one moment.

In App.svelte my intention is to pass some data (read-only) to List.svelte.

In List.svelte I would like to change that data (condition in this case).

Right now the only way is to create another variable inside List.svelte?

<script>
    import Filter from "./Filter.svelte";

    let { condition = {} } = $props();
    
    let new_condition_unfortunately = $state(condition)
</script>

Is there a way to avoid this new new_condition_unfortunately?

Also because I would like to reactively change new_condition_unfortunately if condition changes.

[frederikhors]

It would be amazing to have something like:

let { condition = $state({}) } = $props();

Is this possible?

[frederikhors]

Maybe we can do this instead:

• App.svelte: I'm passing condition read-only and if it changes in App.svelte I need it to change in List.svelte too:

<script>
    import List from "./List.svelte";
</script>

<List condition={{name: "app"}} />

• List.svelte: I can change condition freely in here, but I need to reflect the value in App.Svelte too if it changes

<script>
    import Filter from "./Filter.svelte";

    let {
        condition = $bindable({}),
    } = $props();
</script>

List, condition: {JSON.stringify(condition)}<br><br>

<Filter bind:condition />

Right now this doesn't work.

And I cannot use $derived neither

[frederikhors]

@Rich-Harris I think we need $state() rune for $props() too:

let {
    condition = $state({})
} = $props();

[Rich-Harris]

Yes, we reached the same conclusion this morning while investigating this issue. The summary:

• prop fallback values are not made deeply reactive unless declared with $state
• At dev time, we issue a warning if a bind: directive isn't used with something reactive. So in the bind:condition example above, we would check that the condition prop has a set accessor, and in a case like bind:x={y.z} we would check that y is a reactive state proxy, or that y.z is a setter

[frederikhors]

Ok. This is the current state of affairs, do I understand correctly?

And what do you intend to do?

[trueadm]

@frederikhors No, what Rich said is what we plan on doing next. We don't do either things yet.

[frederikhors]

Ok. So you're introducing:

let {
    condition = $state({})
} = $props();

Right?

[Rich-Harris]

That's the plan, yep