Reactivity stops triggering

[inzanez]

Describe the bug

Hi

I am not 100% sure if this is really a bug or if I am misinterpreting something here.
I had to create a REPL to reproduce the issue and I think that something with how reactivity triggers is not right.

The description within the REPL explains what happens in detail, but:
Using <button disabled={original?.name === to_edit.name}>click</button> stops re-evaluating under some circumstances.
Extracting this into a derived statement like:

let disabled = $derived(disabled={original?.name === to_edit.name});
<button {disabled}>click</button>

fixes things.

Reproduction

All in all it seems more complex, as even the use of the loading variable in Dialog.svelte changes the behavior (removing it from the disabled={loading || disabled} will fix things too).
And it also only appears to be the case for such nested components. If one changes all the <Button... components in the Dialog.svelte to <button> --> one level less nesting, reactivity works again.

https://svelte.dev/playground/87f3c3d1769d4236bc31b0d340462e50?version=5.35.0

Logs

System Info

System:
    OS: Linux 6.12 Void
    CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
    Memory: 35.38 GB / 62.73 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.15.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 11.4.1 - /usr/bin/npm
    pnpm: 10.11.0 - /usr/bin/pnpm
  Browsers:
    Brave Browser: 137.1.79.126
    Chromium: 138.0.7204.92
  npmPackages:
    svelte: ^5.35.0 => 5.35.0

Severity

annoyance

[MotionlessTrain]

Interestingly, it seems to work when you add $: console.log(‘disabled’, disabled) within Dialog.svelte
So for some reason, it doesn’t listen to changes of disabled without that console.log

[inzanez]

Yes, indeed. There are many things that are weird with that one...

[Ocean-OS]

It also appears to work when the components are migrated to runes mode...

[inzanez]

Yeah, seems to be mixed mode related. Still, there are many legacy components around I assume? At least my base is not fully Svelte 5 /runes mode yet.
And I think that used to work at some point, as I got some additional bugs in my codebase because of that. In components that have worked for a long time.

[paoloricciuti]

I've investigate this a bit...the problem seems to be that when you are passing disabled down in the Button component that derived (that is created since the expression is not a single Identifier) is read immediately by the component so the derived is UNOWNED (because it's first read in a non reactive context).

I need to go so I can't investigate further but I think that the problem is that since you don't change a dependency of that derived by not writing the new name when you Cancel and open the dialog back again the derived is still MAYBE_DIRTY which means is not marked as DIRTY.

As a workaround you can do this for the moment

<script>
	import { onMount } from 'svelte';
	import { fade } from 'svelte/transition';
	import Button from './Button.svelte';

	export let active = false;
	export let disabled = false;
	let loading = false;

+	$: dis = loading || disabled;
</script>
{#if active}
<div in:fade style:border="1px solid red" style:height="500px" style:width="500px">
	<slot/>
	<br/>
	<Button on:click={() => active = false}>Cancel</Button>
-	<Button on:click={() => active = false} disabled={loading || disabled}>Save</Button>
+	<Button on:click={() => active = false} disabled={dis}>Save</Button>
</div>
{/if}

I'll try to continue exploring this tomorrow if somebody doesn't beat me to it.

[paoloricciuti]

Aight this is basically the same bug that i initially fixed with #16110 (and then never got around to actually fixing it) DAMN