fix: create wrapper template for components in HMR mode (#12304)

Author: Rich-Harris

packages/svelte/src/compiler/phases/3-transform/utils.js

@@ -137,7 +137,7 @@ function sort_const_tags(nodes, state) {
  * @param {Compiler.SvelteNode[]} nodes
  * @param {Compiler.SvelteNode[]} path
  * @param {Compiler.Namespace} namespace
- * @param {TransformState} state
+ * @param {TransformState & { options: Compiler.ValidatedCompileOptions }} state
  * @param {boolean} preserve_whitespace
  * @param {boolean} preserve_comments
  */
@@ -279,6 +279,7 @@ export function clean_nodes(
 		trimmed.length === 1 &&
 		((first.type === 'RenderTag' && !first.metadata.dynamic) ||
 			(first.type === 'Component' &&
+				!state.options.hmr &&
 				!first.attributes.some(
 					(attribute) => attribute.type === 'Attribute' && attribute.name.startsWith('--')
 				)));

packages/svelte/tests/runtime-runes/samples/hmr-each-keyed-unshift/Child.svelte

@@ -0,0 +1 @@
+<p>child</p>

packages/svelte/tests/runtime-runes/samples/hmr-each-keyed-unshift/_config.js

@@ -0,0 +1,34 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>unshift</button>`,
+
+	compileOptions: {
+		dev: true,
+		hmr: true
+	},
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>unshift</button>
+				<p>child</p>
+			`
+		);
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>unshift</button>
+				<p>child</p>
+				<p>child</p>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/hmr-each-keyed-unshift/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Child from './Child.svelte';
+
+	let uid = 0;
+
+	/** @type {Array<{ id: number }>} */
+	let items = $state([]);
+</script>
+
+<button onclick={() => items.unshift({ id: uid++ })}>unshift</button>
+
+{#each items as item (item.id)}
+	<Child />
+{/each}