fix: add snippet symbol to children prop (#9395)

* add snippet symbol to children prop

* fix error message for snippet validation

* changeset

Author: gtm-nayan

.changeset/tall-shrimps-worry.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add snippet marker symbol to children prop

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -819,15 +819,21 @@ function serialize_inline_component(node, component_name, context) {
 		const body = create_block(node, `${node.name}_${slot_name}`, children[slot_name], context);
 		if (body.length === 0) continue;
 
-		const fn = b.arrow(
+		const slot_fn = b.arrow(
 			[b.id('$$anchor'), b.id('$$slotProps')],
 			b.block([...(slot_name === 'default' ? default_lets : []), ...body])
 		);
 
 		if (slot_name === 'default') {
-			push_prop(b.prop('init', b.id('children'), fn));
+			push_prop(
+				b.prop(
+					'init',
+					b.id('children'),
+					context.state.options.dev ? b.call('$.add_snippet_symbol', slot_fn) : slot_fn
+				)
+			);
 		} else {
-			serialized_slots.push(b.prop('init', b.key(slot_name), fn));
+			serialized_slots.push(b.prop('init', b.key(slot_name), slot_fn));
 		}
 	}
 

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

@@ -847,26 +847,21 @@ function serialize_inline_component(node, component_name, context) {
 		const body = create_block(node, children[slot_name], context);
 		if (body.length === 0) continue;
 
+		const slot_fn = b.arrow(
+			[b.id('$$payload'), b.id('$$slotProps')],
+			b.block([...(slot_name === 'default' ? default_lets : []), ...body])
+		);
+
 		if (slot_name === 'default') {
 			push_prop(
 				b.prop(
 					'init',
 					b.id('children'),
-					b.arrow(
-						[b.id('$$payload'), b.id('$$slotProps')],
-						b.block([...(slot_name === 'default' ? default_lets : []), ...body])
-					)
+					context.state.options.dev ? b.call('$.add_snippet_symbol', slot_fn) : slot_fn
 				)
 			);
 		} else {
-			const slot = b.prop(
-				'init',
-				b.literal(slot_name),
-				b.arrow(
-					[b.id('$$payload'), b.id('$$slotProps')],
-					b.block([...(slot_name === 'default' ? default_lets : []), ...body])
-				)
-			);
+			const slot = b.prop('init', b.literal(slot_name), slot_fn);
 			serialized_slots.push(slot);
 		}
 	}

packages/svelte/src/internal/client/validate.js

@@ -119,7 +119,7 @@ export function add_snippet_symbol(fn) {
 export function validate_snippet(snippet_fn) {
 	if (snippet_fn[symbol] !== true) {
 		throw new Error(
-			'The argument to `{@html ...}` must be a snippet function, not a component or some other kind of function. ' +
+			'The argument to `{@render ...}` must be a snippet function, not a component or some other kind of function. ' +
 				'If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`.'
 		);
 	}

packages/svelte/tests/runtime-runes/samples/snippet-validation-error/_config.js

@@ -5,6 +5,6 @@ export default test({
 		dev: true
 	},
 	error:
-		'The argument to `{@html ...}` must be a snippet function, not a component or some other kind of function. ' +
+		'The argument to `{@render ...}` must be a snippet function, not a component or some other kind of function. ' +
 		'If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`.'
 });