Svelte 5: `$:` generates wrong effect dependencies causing infinite loops.

[brunnerh]

Describe the bug

When setting a property on an object in a reactive statement, the object becomes a dependency. This can easily cause infinite loop issues if multiple such statements exist, breaking compatibility with v4.

(Found by @kitschpatrol, relevant to svelte-tweakpane-ui)

Reproduction

<script>
    let button = { title: '', label: '' };
    let title = '';
    let label = '';

    title = label = ''; // to add dependencies/generate update block

    $: button.title = title;
    $: button.label = label;
</script>

REPL

Generated code:

$.pre_effect(() => {
    ($.get(button), $.get(title));
    $.untrack(() => {
        $.mutate(button, $.get(button).title = $.get(title));
    });
});
$.pre_effect(() => {
    ($.get(button), $.get(label));
    $.untrack(() => {
        $.mutate(button, $.get(button).label = $.get(label));
    });
});

Note the button dependency that is being added.

---

Same code in v4: REPL

$$self.$$.update = () => {
    if ($$self.$$.dirty & /*title*/ 1) {
        $: button.title = title;
    }
    if ($$self.$$.dirty & /*label*/ 2) {
        $: button.label = label;
    }
};

Logs

Uncaught Error: ERR_SVELTE_TOO_MANY_UPDATES: Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops.
    at infinite_loop_guard (playground:output:445:10)
    at flush_queued_effects (playground:output:462:4)
    at process_microtask (playground:output:489:3)

System Info

REPL - v5.0.0-next.26

Severity

blocking an upgrade

[kitschpatrol]

Thanks for this fix!

The simple test case is resolved by #10128, but I'm still seeing infinite loops in my library against 5.0.0-next.31. It seems like the loops are coming from existence checks in reactive statements.

Here's a slightly more complex test case with an existence check to only update the object's members if the object itself is defined:

<script>
    // Button object is initially undefined
    let button;
    let title = '';
    let label = '';

    // Simulate button becoming defined
    // (In practice, this would be be set elsewhere, e.g by a wrapped vanilla JS library)
    button = { label: 'foo', title: 'bar' };

    // Reactive statements need to check for button's existence before setting keys
    // works fine in Svelte 4, `ERR_SVELTE_TOO_MANY_UPDATES` in Svelte 5
    $: button && (button.title = title);
    $: button && (button.label = label);
    $: console.log(button);
</script>

Svelte 5 REPL vs Svelte 4 REPL

It seems like maybe button is firing a reactive event on the object when its members change, even if the identity of the object itself is unchanged.

[dummdidumm]

Given REPL now works.