fix: ensure child effects are destroyed before their deriveds

.changeset/khaki-carrots-mix.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure child effects are destroyed before their deriveds

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

@@ -437,8 +437,8 @@ export function destroy_effect(effect, remove_dom = true) {
 		removed = true;
 	}
 
-	destroy_effect_deriveds(effect);
 	destroy_effect_children(effect, remove_dom && !removed);
+	destroy_effect_deriveds(effect);
 	remove_reactions(effect, 0);
 	set_signal_status(effect, DESTROYED);
 

packages/svelte/tests/runtime-legacy/samples/props-reactive-destroy/Child.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { onDestroy } from 'svelte';
+
+	export let data;
+
+	onDestroy(() => {
+		data;
+	});
+</script>
+
+{data ? '' : null}

packages/svelte/tests/runtime-legacy/samples/props-reactive-destroy/_config.js

@@ -0,0 +1,10 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs, target }) {
+		target.querySelector('button')?.click();
+		flushSync();
+		assert.deepEqual(logs, ['should fire once']);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/props-reactive-destroy/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let active = true;
+	let data = { example: 'This is some example data' };
+
+	function log(data) {
+		console.log('should fire once');
+		return data;
+	}
+</script>
+
+<button on:click={() => active = false}>Hide</button>
+
+{#if active}
+	<Child data={log(data)} />
+{/if}

packages/svelte/tests/runtime-runes/samples/props-reactive-destroy/Child.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { onDestroy } from 'svelte';
+
+	const { data = 123 } = $props();
+
+	onDestroy(() => {
+		data;
+	});
+</script>
+
+{data ? '' : null}

packages/svelte/tests/runtime-runes/samples/props-reactive-destroy/_config.js

@@ -0,0 +1,10 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs, target }) {
+		target.querySelector('button')?.click();
+		flushSync();
+		assert.deepEqual(logs, ['should fire once']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/props-reactive-destroy/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let active = $state(true);
+	let data = $state({ example: 'This is some example data' });
+
+	function log(data) {
+		console.log('should fire once');
+		return data;
+	}
+</script>
+
+<button onclick={() => (active = false)}>Hide</button>
+
+{#if active}
+	<Child data={log(data)} />
+{/if}