fix: improve internal render effect sequencing (#10769)

We need to additionally check the levels to not accidentally insert a higher level before a lower level
fixes #10741

.changeset/smooth-rings-rush.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve internal render effect sequencing

packages/svelte/src/internal/client/runtime.js

@@ -519,16 +519,19 @@ export function schedule_effect(signal, sync) {
 				const target_block = signal.block;
 				const is_pre_effect = (flags & PRE_EFFECT) !== 0;
 				let target_signal;
+				let target_signal_level;
 				let is_target_pre_effect;
 				let i = length;
 				while (true) {
 					target_signal = current_queued_pre_and_render_effects[--i];
-					if (target_signal.l <= target_level) {
+					target_signal_level = target_signal.l;
+					if (target_signal_level <= target_level) {
 						if (i + 1 === length) {
 							should_append = true;
 						} else {
 							is_target_pre_effect = (target_signal.f & PRE_EFFECT) !== 0;
 							if (
+								target_signal_level < target_level ||
 								target_signal.block !== target_block ||
 								(is_target_pre_effect && !is_pre_effect)
 							) {

packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/Seo.svelte

@@ -0,0 +1,9 @@
+<script>
+	let { post } = $props();
+</script>
+
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>
+
+<p>{post.title}</p>

packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/_config.js

@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, window }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		assert.htmlEqual(window.document.head.innerHTML, ``);
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(window.document.head.innerHTML, `<title>hello world</title>`);
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(window.document.head.innerHTML, `<title>hello world</title>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/if-dependency-order-2/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Seo from './Seo.svelte';
+
+	let post = $state(null);
+
+	function toggle() {
+		post = post ? null : { title: 'hello world' };
+	}
+</script>
+
+<button onclick={toggle}>
+	toggle
+</button>
+
+{#if post}
+	<Seo {post} />
+{/if}