fix: prevent whitespaces merging across component boundaries (#12449)

* fix: prevent whitespaces merging across component boundaries

The logic that was there didn't take components into account. The underlying problem is that the parent isn't properly set to `Fragment` in all cases because of nested `visit` calls we do in some places.

Fixes #12447

* update test

.changeset/perfect-hats-dance.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent whitespaces merging across component boundaries

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

@@ -288,7 +288,11 @@ export function clean_nodes(
 					))),
 		/** if a component or snippet starts with text, we need to add an anchor comment so that its text node doesn't get fused with its surroundings */
 		is_text_first:
-			(parent.type === 'Fragment' || parent.type === 'SnippetBlock') &&
+			(parent.type === 'Fragment' ||
+				parent.type === 'SnippetBlock' ||
+				parent.type === 'SvelteComponent' ||
+				parent.type === 'Component' ||
+				parent.type === 'SvelteSelf') &&
 			first &&
 			(first?.type === 'Text' || first?.type === 'ExpressionTag')
 	};

packages/svelte/tests/runtime-runes/samples/component-dont-fuse-whitespace/Child.svelte

@@ -0,0 +1,5 @@
+<script>
+	const { children } = $props();
+</script>
+
+<p>text before the render tag {@render children()}</p>

packages/svelte/tests/runtime-runes/samples/component-dont-fuse-whitespace/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<p>text before the render tag dont fuse this text with the one from the child</p>`
+});

packages/svelte/tests/runtime-runes/samples/component-dont-fuse-whitespace/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	import Child from './Child.svelte';
+	let text = $state('dont fuse this text with the one from the child');
+</script>
+
+<Child>{text}</Child>

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js

@@ -15,6 +15,8 @@ export default function Function_prop_no_getter($$anchor) {
 		onmouseup,
 		onmouseenter: () => $.set(count, $.proxy(plusOne($.get(count)))),
 		children: ($$anchor, $$slotProps) => {
+			$.next();
+
 			var text = $.text();
 
 			$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ""}`));

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js

@@ -14,7 +14,7 @@ export default function Function_prop_no_getter($$payload) {
 		onmouseup,
 		onmouseenter: () => count = plusOne(count),
 		children: ($$payload, $$slotProps) => {
-			$$payload.out += `clicks: ${$.escape(count)}`;
+			$$payload.out += `<!---->clicks: ${$.escape(count)}`;
 		},
 		$$slots: { default: true }
 	});