fix: ensure component root effect updates occur first

.changeset/kind-schools-share.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure component root effect updates occur first

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

@@ -32,7 +32,8 @@ import {
 	HEAD_EFFECT,
 	MAYBE_DIRTY,
 	EFFECT_HAS_DERIVED,
-	BOUNDARY_EFFECT
+	BOUNDARY_EFFECT,
+	DISCONNECTED
 } from '../constants.js';
 import { set } from './sources.js';
 import * as e from '../errors.js';
@@ -229,7 +230,7 @@ export function inspect_effect(fn) {
  * @returns {() => void}
  */
 export function effect_root(fn) {
-	const effect = create_effect(ROOT_EFFECT, fn, true);
+	const effect = create_effect(ROOT_EFFECT | DISCONNECTED, fn, true);
 
 	return () => {
 		destroy_effect(effect);

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

@@ -738,7 +738,14 @@ export function schedule_effect(signal) {
 		}
 	}
 
-	queued_root_effects.push(effect);
+	// Schedule the root effect for component trees first so any updates
+	// that affect the component tree occur first. Root effects that are
+	// not for component trees (i.e. $effect.root) will be marked as disconnected
+	if ((effect.f & DISCONNECTED) === 0) {
+		queued_root_effects.unshift(effect);
+	} else {
+		queued_root_effects.push(effect);
+	}
 }
 
 /**

packages/svelte/tests/runtime-runes/samples/toStore-teardown/_config.js

@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		let [, btn2] = target.querySelectorAll('button');
+
+		btn2.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>Set data</button><button>Clear data</button>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/toStore-teardown/child.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { toStore } from 'svelte/store'
+
+	let { data } = $props()
+	const currentValue = toStore(() => data.value)
+</script>
+
+<p>
+	Current value:
+	<span>{$currentValue}</span>
+</p>

packages/svelte/tests/runtime-runes/samples/toStore-teardown/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Child from './child.svelte'
+
+	let data = $state({ value: 'hello' });
+
+	const setData = () => (data = { value: 'hello' })
+	const clearData = () => (data = undefined)
+</script>
+
+<button onclick={setData}>Set data</button>
+<button onclick={clearData}>Clear data</button>
+
+{#if data}
+  <Child {data} />
+{/if}