From 0d8330703d2b9d68ad50cd48e1270bb418687974 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 1 Jul 2024 10:44:32 +0200
Subject: [PATCH] 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
---
 .changeset/tough-buckets-thank.md               |  5 +++++
 packages/svelte/src/internal/client/dev/hmr.js  |  2 +-
 .../svelte-component-switch-dev/A.svelte        |  1 +
 .../svelte-component-switch-dev/B.svelte        |  1 +
 .../svelte-component-switch-dev/_config.js      | 17 +++++++++++++++++
 .../svelte-component-switch-dev/main.svelte     |  9 +++++++++
 6 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tough-buckets-thank.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/A.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/B.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/main.svelte

diff --git a/.changeset/tough-buckets-thank.md b/.changeset/tough-buckets-thank.md
new file mode 100644
index 0000000000..539010d4a3
--- /dev/null
+++ b/.changeset/tough-buckets-thank.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure HMR doesn't mess with anchor nodes
diff --git a/packages/svelte/src/internal/client/dev/hmr.js b/packages/svelte/src/internal/client/dev/hmr.js
index e9b4a60bbf..b0ea23df8c 100644
--- a/packages/svelte/src/internal/client/dev/hmr.js
+++ b/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) {
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/A.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/A.svelte
new file mode 100644
index 0000000000..f70f10e4db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/A.svelte
@@ -0,0 +1 @@
+A
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/B.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/B.svelte
new file mode 100644
index 0000000000..223b7836fb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/B.svelte
@@ -0,0 +1 @@
+B
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/_config.js
new file mode 100644
index 0000000000..09df4ef683
--- /dev/null
+++ 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`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-component-switch-dev/main.svelte
new file mode 100644
index 0000000000..69f8728bc2
--- /dev/null
+++ 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} />