fix: guard contents updated before the guard itself

.changeset/witty-seas-learn.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure guards (eg. if, each, key) run before their contents

packages/svelte/src/internal/client/reactivity/batch.js

@@ -626,8 +626,28 @@ function flush_queued_effects(effects) {
 				// TODO this feels incorrect! it gets the tests passing
 				old_values.clear();
 
-				for (const e of eager_block_effects) {
-					update_effect(e);
+				/**
+				 * @type {Array<{ effect: Effect; depth: number }>} sorted
+				 */
+				const sorted = Array(eager_block_effects.length);
+				for (let j = 0; j < eager_block_effects.length; j++) {
+					var depth = 0;
+					var parent = eager_block_effects[j].parent;
+
+					while (parent !== null) {
+						depth++;
+						parent = parent.parent;
+					}
+
+					sorted[j] = { effect: eager_block_effects[j], depth };
+				}
+
+				// Sort by depth
+				sorted.sort((a, b) => a.depth - b.depth);
+
+				// Update effects in reverse order to ensure outer guards are processed before their contents
+				for (const e of sorted) {
+					update_effect(e.effect);
 				}
 
 				eager_block_effects = [];

packages/svelte/tests/runtime-runes/samples/guard-else-effect/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target, assert }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+
+		assert.notInclude(target.textContent?.trim(), 'hit: true');
+	}
+});

packages/svelte/tests/runtime-runes/samples/guard-else-effect/main.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import {untrack} from 'svelte';
+
+	let b = $state(false);
+	let v = $state("one");
+	let hit = $state(false);
+
+	function hitElse(){
+		$effect.root(()=>{
+			if (!untrack(()=>hit)){
+				hit = true
+			}
+		})
+	}
+
+	$effect(() => {
+		v = b ? "one" : "two";
+	})
+</script>
+
+
+<button onclick={() => b = !b}>Trigger</button>
+
+hit: {hit}
+
+{#if v === "one"}
+	<div>if1 matched!</div>
+{:else if v === "two"}
+	<div>if2 matched!</div>
+{:else}
+	<div>nothing matched {hitElse()}</div>
+{/if}

packages/svelte/tests/runtime-runes/samples/guard-if-nested/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target, assert }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+
+		assert.equal(target.textContent?.trim(), 'Trigger');
+	}
+});

packages/svelte/tests/runtime-runes/samples/guard-if-nested/main.svelte

@@ -0,0 +1,19 @@
+<script>
+	let centerRow = $state({ nested: { optional: 2, required: 3 } },
+		);
+
+	let someChange = $state(false);
+	$effect(() => {
+		if (someChange) centerRow = undefined;
+	});
+</script>
+
+	{#if centerRow?.nested}
+		{#if centerRow?.nested?.optional != undefined && centerRow.nested.optional > 0}
+			op: {centerRow.nested.optional}<br />
+		{:else}
+			req: {centerRow.nested.required}<br />
+		{/if}
+	{/if}
+
+<button onclick={() => (someChange = true)}>Trigger</button>