fix: better children snippet / default slot interop (#13734)

- correctly assign children snippet to default slot, fixes #13067
- allow `svelte:fragment` without `let:` directives to be rendered by `@render children()`, fixes #13066

.changeset/tidy-spies-beg.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: better children snippet / default slot interop

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

@@ -231,7 +231,9 @@ export function build_component(node, component_name, context, anchor = context.
 			push_prop(b.prop('init', child.expression, child.expression));
 
 			// Interop: allows people to pass snippets when component still uses slots
-			serialized_slots.push(b.init(child.expression.name, b.true));
+			serialized_slots.push(
+				b.init(child.expression.name === 'children' ? 'default' : child.expression.name, b.true)
+			);
 
 			continue;
 		}
@@ -273,7 +275,14 @@ export function build_component(node, component_name, context, anchor = context.
 		);
 
 		if (slot_name === 'default' && !has_children_prop) {
-			if (lets.length === 0 && children.default.every((node) => node.type !== 'SvelteFragment')) {
+			if (
+				lets.length === 0 &&
+				children.default.every(
+					(node) =>
+						node.type !== 'SvelteFragment' ||
+						!node.attributes.some((attr) => attr.type === 'LetDirective')
+				)
+			) {
 				// create `children` prop...
 				push_prop(
 					b.init(

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

@@ -120,7 +120,9 @@ export function build_inline_component(node, expression, context) {
 			push_prop(b.prop('init', child.expression, child.expression));
 
 			// Interop: allows people to pass snippets when component still uses slots
-			serialized_slots.push(b.init(child.expression.name, b.true));
+			serialized_slots.push(
+				b.init(child.expression.name === 'children' ? 'default' : child.expression.name, b.true)
+			);
 
 			continue;
 		}
@@ -200,7 +202,11 @@ export function build_inline_component(node, expression, context) {
 		if (slot_name === 'default' && !has_children_prop) {
 			if (
 				lets.default.length === 0 &&
-				children.default.every((node) => node.type !== 'SvelteFragment')
+				children.default.every(
+					(node) =>
+						node.type !== 'SvelteFragment' ||
+						!node.attributes.some((attr) => attr.type === 'LetDirective')
+				)
 			) {
 				// create `children` prop...
 				push_prop(b.prop('init', b.id('children'), slot_fn));

packages/svelte/tests/runtime-runes/samples/slot-svelte-fragment-render-tag/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<p>bar</p>`
+});

packages/svelte/tests/runtime-runes/samples/slot-svelte-fragment-render-tag/child.svelte

@@ -0,0 +1,5 @@
+<script>
+    let { children } = $props();
+</script>
+
+{@render children()}

packages/svelte/tests/runtime-runes/samples/slot-svelte-fragment-render-tag/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Child from './child.svelte';
+</script>
+
+<Child>
+	<svelte:fragment>
+		<p>bar</p>
+	</svelte:fragment>
+</Child>

packages/svelte/tests/runtime-runes/samples/snippets-as-slots/_config.js

@@ -1,5 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	html: `<p>Default</p> <p>Named foo</p>`
+	html: `<p>Default foo</p> <p>Named bar</p>`
 });

packages/svelte/tests/runtime-runes/samples/snippets-as-slots/child.svelte

@@ -1,2 +1,2 @@
-<p><slot /></p>
+<p><slot foo="foo" /></p>
-<p><slot name="named" foo="foo" /></p>
+<p><slot name="named" bar="bar" /></p>

packages/svelte/tests/runtime-runes/samples/snippets-as-slots/main.svelte

@@ -3,8 +3,10 @@
 </script>
 
 <Child>
-	Default
+	{#snippet children({ foo })}
-	{#snippet named({ foo })}
+		Default {foo}
-		Named {foo}
+	{/snippet}
+	{#snippet named({ bar })}
+		Named {bar}
 	{/snippet}
 </Child>