feat: sort eager_block_effects by depth before updating

Author: hmnd

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

@@ -626,9 +626,28 @@ function flush_queued_effects(effects) {
 				// TODO this feels incorrect! it gets the tests passing
 				old_values.clear();
 
+				/**
+				 * @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 (let i = eager_block_effects.length - 1; i >= 0; i--) {
-					update_effect(eager_block_effects[i]);
+				for (const e of sorted) {
+					update_effect(e.effect);
 				}
 
 				eager_block_effects = [];