Partial fix for a component not properly retrieving let: bindings when it fills a named slot

Author: dimfeld

.changeset/swift-feet-juggle.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+Fix let: bindings on components filling a named slot

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

@@ -776,6 +776,7 @@ function serialize_inline_component(node, component_name, context) {
 		}
 	}
 
+	let is_named_parent_slot = false;
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'LetDirective') {
 			default_lets.push(
@@ -811,6 +812,10 @@ function serialize_inline_component(node, component_name, context) {
 				continue;
 			}
 
+			if (attribute.name === 'slot') {
+				is_named_parent_slot = true;
+			}
+
 			const [, value] = serialize_attribute_value(attribute.value, context);
 
 			if (attribute.metadata.dynamic) {
@@ -863,6 +868,12 @@ function serialize_inline_component(node, component_name, context) {
 		}
 	}
 
+	if (is_named_parent_slot) {
+		// This component is filling a named slot in its parent component, so get the relevant
+		// attributes from the parent slot.
+		context.state.init.push(...default_lets);
+	}
+
 	if (Object.keys(events).length > 0) {
 		const events_expression = b.object(
 			Object.keys(events).map((name) =>

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

@@ -826,6 +826,7 @@ function serialize_inline_component(node, component_name, context) {
 		}
 	}
 
+	let is_named_parent_slot = false;
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'LetDirective') {
 			default_lets.push(
@@ -840,6 +841,10 @@ function serialize_inline_component(node, component_name, context) {
 				continue;
 			}
 
+			if (attribute.name === 'slot') {
+				is_named_parent_slot = true;
+			}
+
 			const value = serialize_attribute_value(attribute.value, context, false, true);
 			push_prop(b.prop('init', b.key(attribute.name), value));
 		} else if (attribute.type === 'BindDirective') {
@@ -862,6 +867,12 @@ function serialize_inline_component(node, component_name, context) {
 		}
 	}
 
+	if (is_named_parent_slot) {
+		// This component is filling a named slot in its parent component, so get the relevant
+		// attributes from the parent slot.
+		context.state.init.push(...default_lets);
+	}
+
 	/** @type {import('estree').Statement[]} */
 	const snippet_declarations = [];
 

packages/svelte/tests/runtime-legacy/samples/component-slot-let-named-2/Nested.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot name="foo" {thing}/>
+	{/each}
+</div>

packages/svelte/tests/runtime-legacy/samples/component-slot-let-named-2/SlotInner.svelte

@@ -0,0 +1,4 @@
+<script>
+	export let thing;
+</script>
+<span>{thing}</span>

packages/svelte/tests/runtime-legacy/samples/component-slot-let-named-2/_config.js

@@ -0,0 +1,29 @@
+import { test } from '../../test';
+
+export default test({
+	get props() {
+		return { things: [1, 2, 3] };
+	},
+
+	html: `
+		<div>
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [1, 2, 3, 4];
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+				<span>4</span>
+			</div>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/component-slot-let-named-2/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+	import SlotInner from './SlotInner.svelte';
+
+	export let things;
+</script>
+
+<Nested {things}>
+	<SlotInner slot="foo" let:thing {thing} />
+</Nested>