fix: do not defer unmount; immediately unmount components (#16624)

* fix: do not defer unmount; immediately unmount components

* fix: add changeset

* Update .changeset/few-geese-itch.md

Co-authored-by: Jeremiasz Major <[email protected]>

* add test

* update changeset

---------

Co-authored-by: Simon H <[email protected]>
Co-authored-by: Jeremiasz Major <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: 4 people

.changeset/few-geese-itch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: destroy dynamic component instance before creating new one

packages/svelte/src/internal/client/dom/blocks/svelte-component.js

@@ -34,11 +34,6 @@ export function component(node, get_component, render_fn) {
 	var pending_effect = null;
 
 	function commit() {
-		if (effect) {
-			pause_effect(effect);
-			effect = null;
-		}
-
 		if (offscreen_fragment) {
 			// remove the anchor
 			/** @type {Text} */ (offscreen_fragment.lastChild).remove();
@@ -56,6 +51,11 @@ export function component(node, get_component, render_fn) {
 
 		var defer = should_defer_append();
 
+		if (effect) {
+			pause_effect(effect);
+			effect = null;
+		}
+
 		if (component) {
 			var target = anchor;
 

packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/A.svelte

@@ -0,0 +1,8 @@
+<script>
+	$effect.pre(() => {
+		console.log('create A');
+		return () => console.log('destroy A');
+	});
+</script>
+
+<h1>A</h1>

packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/B.svelte

@@ -0,0 +1,8 @@
+<script>
+	$effect.pre(() => {
+		console.log('create B');
+		return () => console.log('destroy B');
+	});
+</script>
+
+<h1>B</h1>

packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client', 'hydrate'],
+
+	async test({ assert, target, logs }) {
+		const [button] = target.querySelectorAll('button');
+
+		flushSync(() => button.click());
+		assert.deepEqual(logs, ['create A', 'destroy A', 'create B']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-component-destroy-then-create/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	let condition = $state(true);
+	let Component = $derived(condition ? A : B);
+</script>
+
+<button onclick={() => condition = !condition}>
+	toggle ({condition})
+</button>
+
+<Component />