fix: ensure HMR doesn't mess with anchor nodes (#12242)

The refactoring in #12215 didn't take HMR into account. As a result, the anchor was passed to the HMR block, which was subsequently cleaned up on destroy - but the anchor could be shared with other components and therefore needs to stay in the dom. Passing `null` instead solves the problem.
Fixes #12228
Fixes #12230
Fixes #12233

Author: dummdidumm

.changeset/tough-buckets-thank.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure HMR doesn't mess with anchor nodes

packages/svelte/src/internal/client/dev/hmr.js

@@ -18,7 +18,7 @@ export function hmr(source) {
 		/** @type {import("#client").Effect} */
 		let effect;
 
-		block(anchor, 0, () => {
+		block(null, 0, () => {
 			const component = get(source);
 
 			if (effect) {

packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/A.svelte

@@ -0,0 +1 @@
+A

packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/B.svelte

@@ -0,0 +1 @@
+B

packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/_config.js

@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		hmr: true,
+		dev: true
+	},
+	test({ target, assert }) {
+		assert.htmlEqual(target.innerHTML, `<button>switch</button> A`);
+
+		target.querySelector('button')?.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<button>switch</button> B`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	let component = $state(A);
+</script>
+
+<button onclick={() => (component = B)}>switch</button>
+<svelte:component this={component} />