`#each` may not update when passed `$derived` containing `$store`

[dummdidumm]

Describe the bug

When a $derived that subscribes to a $store is passed to an #each, the contents of the each block may not properly update. That's because our static analysis (which was added in #12808) doesn't recognize that the array is coarse-grained

Reproduction

playground link

(it works when you make each aware of the store:
playground link)

Logs

No response

System Info

Svelte version: 5.0.0-next.264

Severity

annoyance

[buhrmi]

Funnily, the reproduction link shows a working version.

Here is a non-working version: playground link

[buhrmi]

And here is the same version, but with the incItem function changed to replace the item in the array, instead of updating it in-place: playground link

replacing the item in the store array triggers reactivity in the each block. updating in-place does not.

[cgalo5758]

I am having a similar issue with an #if block

In my SvelteKit +page.svelte file, I have two fields that should hide when certain conditions are met, but they use slightly different conditions. Only one field hides as expected, even though both should act similarly.

• Field One: Hides when selection does not match any of a set of ineligible options.
• Field Two: Hides based on a derived store, isEligible, which checks if selection is outside of these ineligible options.

These fields should both hide when an ineligible option is selected. However, only Field One hides consistently. Field Two remains visible when the variable is only referenced in the conditional. If I explicitly render {isEligible} in the template (e.g., within a <p> tag), then both fields hide as expected.

<script lang="ts">
    import * as Form from '$lib/components/ui/form';
    import { Input } from '$lib/components/ui/input';
    import { formSchema, type FormSchema } from './schema';
    import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
    import { zodClient } from 'sveltekit-superforms/adapters';

    let { data }: { data: SuperValidated<Infer<FormSchema>> } = $props();

    const form = superForm(data, {
        validators: zodClient(formSchema),
        dataType: 'json' // Set dataType to "json" to handle nested data
    });

    const { form: formData, enhance } = form;

    const ineligibleOptions = [
        'Option A',
        'Option B',
        'Option C'
    ];

    let isEligible = $derived(
        !ineligibleOptions.includes($formData.selection)
    );
</script>

<section>
    <!-- Field One -->
    {#if $formData.selection !== 'Option A' && $formData.selection !== 'Option B' && $formData.selection !== 'Option C'}
        <!-- Content for Field One -->
    {/if}

    <!-- Field Two -->
    {#if isEligible}
        <!-- Content for Field Two -->
    {/if}
</section>

It appears that Svelte’s reactivity isn't automatically recognizing updates to isEligible when it is only used in a conditional statement and not rendered directly in the template.