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

This reverts commit 95e5175581.

.changeset/few-geese-itch.md

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

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

@@ -34,6 +34,11 @@ 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();
@@ -51,11 +56,6 @@ 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

@@ -1,8 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<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 />