fix: ensure implicit children snippet renders correctly (#9706)

place anchors around render tags, not snippet tags
fixes #9678

Author: dummdidumm

.changeset/famous-knives-sneeze.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure implicit children snippet renders correctly

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

@@ -1125,11 +1125,17 @@ const template_visitors = {
 		);
 	},
 	RenderTag(node, context) {
-		const snippet_function = context.state.options.dev
+		const state = context.state;
+		const [anchor, anchor_id] = serialize_anchor(state);
+
+		state.init.push(anchor);
+		state.template.push(t_expression(anchor_id));
+
+		const snippet_function = state.options.dev
 			? b.call('$.validate_snippet', node.expression)
 			: node.expression;
 		if (node.argument) {
-			context.state.template.push(
+			state.template.push(
 				t_statement(
 					b.stmt(
 						b.call(
@@ -1141,8 +1147,10 @@ const template_visitors = {
 				)
 			);
 		} else {
-			context.state.template.push(t_statement(b.stmt(b.call(snippet_function, b.id('$$payload')))));
+			state.template.push(t_statement(b.stmt(b.call(snippet_function, b.id('$$payload')))));
 		}
+
+		state.template.push(t_expression(anchor_id));
 	},
 	ClassDirective(node) {
 		error(node, 'INTERNAL', 'Node should have been handled elsewhere');
@@ -1435,27 +1443,18 @@ const template_visitors = {
 		state.template.push(t_expression(id));
 	},
 	SnippetBlock(node, context) {
-		const [dec, id] = serialize_anchor(context.state);
-
 		// TODO hoist where possible
 		/** @type {import('estree').Pattern[]} */
 		const args = [b.id('$$payload')];
 		if (node.context) {
 			args.push(node.context);
 		}
 
-		const out = b.member_id('$$payload.out');
-
 		context.state.init.push(
 			b.function_declaration(
 				node.expression,
 				args,
-				b.block([
-					dec,
-					b.stmt(b.assignment('+=', out, id)),
-					.../** @type {import('estree').BlockStatement} */ (context.visit(node.body)).body,
-					b.stmt(b.assignment('+=', out, id))
-				])
+				/** @type {import('estree').BlockStatement} */ (context.visit(node.body))
 			)
 		);
 		if (context.state.options.dev) {

packages/svelte/tests/runtime-runes/samples/snippet-dynamic-children/Button.svelte

@@ -0,0 +1,7 @@
+<script>
+	const { children, change } = $props();
+</script>
+
+<button onclick={change}>
+	{@render children()}
+</button>

packages/svelte/tests/runtime-runes/samples/snippet-dynamic-children/_config.js

@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button><span>hidden</span></button>`,
+
+	async test({ assert, target }) {
+		const [b1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			b1?.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `<button><span>showing</span></button>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/snippet-dynamic-children/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import Button from "./Button.svelte";
+
+	let show = $state(false);
+</script>
+
+<Button change={() => show = true}>
+	{#if show}
+		<span>showing</span>
+	{:else}
+		<span>hidden</span>
+	{/if}
+</Button>