Edit: it is a bug https://github.com/sveltejs/svelte/pull/7043
Considering the following example one would expect 'bar' to be rendered under the second horizontal rule whenever foo is false and bar[0] is true.
<script>
let foo = true
let bar = [false];
</script>
<button on:click={() => foo = !foo}>
Toggle foo
</button>
<button on:click={() => bar[0] = !bar[0]}>
Toggle bar
</button>
<hr>
{@html `foo: ${foo}, bar: ${bar.every(x => x)}`}
<hr>
{#if foo}
foo!
{:else if bar.every(x => x)}
bar!
{/if}
However, if the following steps are executed, the reactivity seemingly breaks:
foo to truebar[0] to truefoo to falseNothing is rendered under the horizontal rule even though the else if block condition is satisfied. This is not the case if the else if condition is simply bar[0], so it seems like using a function is the cause for it not being evaluated. Similar behavior when bar is true before foo is toggled and false after foo is toggled again, unexpectedly 'bar' is rendered at the bottom.
The same effect can be observed when foo is switched between null and [] with the else if condition being Array.isArray(bar).
Is this a bug or am I missing something?
Its not really a bug, its kinda expected behaviour in your scenario, when you changed foo to true then bar to true now bar is set and when changed foo to false again bar didn't change if you think about it to trigger reactivity!
the fix for that is to trigger it yourself once any of the values changes:
{#key foo || bar}
{#if foo}
foo!
{:else if bar.every(x => x)}
bar!
{/if}
{/key}
Here is a working repl