Do not expose default slot let bindings to named slots

scripts/compile-test.js

@@ -0,0 +1,28 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'fs';
+import path from 'path';
+import glob from 'tiny-glob/sync.js';
+import { compile } from '../src/compiler/index.js';
+
+const cwd = path.resolve(process.argv[2]);
+
+const options = [
+	['normal', {}],
+	['hydrate', { hydratable: true }],
+	['ssr', { generate: 'ssr' }]
+];
+for (const file of glob('**/*.svelte', { cwd })) {
+	const contents = readFileSync(`${cwd}/${file}`, 'utf-8').replace(/\r/g, '');
+
+	for (const [name, opts] of options) {
+		const dir = `${cwd}/_output/${name}`;
+
+		const { js, css } = compile(contents, {
+			...opts,
+			filename: file
+		});
+
+		mkdirSync(dir, { recursive: true });
+		js.code && writeFileSync(`${dir}/${file.replace(/\.svelte$/, '.js')}`, js.code);
+		css.code && writeFileSync(`${dir}/${file.replace(/\.svelte$/, '.css')}`, css.code);
+	}
+}

src/compiler/compile/nodes/InlineComponent.js

@@ -4,7 +4,6 @@ import map_children from './shared/map_children.js';
 import Binding from './Binding.js';
 import EventHandler from './EventHandler.js';
 import Expression from './shared/Expression.js';
-import Let from './Let.js';
 import compiler_errors from '../compiler_errors.js';
 import { regex_only_whitespaces } from '../../utils/patterns.js';
 
@@ -22,9 +21,6 @@ export default class InlineComponent extends Node {
 	/** @type {import('./EventHandler.js').default[]} */
 	handlers = [];
 
-	/** @type {import('./Let.js').default[]} */
-	lets = [];
-
 	/** @type {import('./Attribute.js').default[]} */
 	css_custom_properties = [];
 
@@ -58,6 +54,8 @@ export default class InlineComponent extends Node {
 			this.name === 'svelte:component'
 				? new Expression(component, this, scope, info.expression)
 				: null;
+
+		const let_attributes = [];
 		info.attributes.forEach(
 			/** @param {any} node */ (node) => {
 				/* eslint-disable no-fallthrough */
@@ -82,7 +80,7 @@ export default class InlineComponent extends Node {
 						this.handlers.push(new EventHandler(component, this, scope, node));
 						break;
 					case 'Let':
-						this.lets.push(new Let(component, this, scope, node));
+						let_attributes.push(node);
 						break;
 					case 'Transition':
 						return component.error(node, compiler_errors.invalid_transition);
@@ -94,21 +92,9 @@ export default class InlineComponent extends Node {
 				/* eslint-enable no-fallthrough */
 			}
 		);
-		if (this.lets.length > 0) {
-			this.scope = scope.child();
-			this.lets.forEach(
-				/** @param {any} l */ (l) => {
-					const dependencies = new Set([l.name.name]);
-					l.names.forEach(
-						/** @param {any} name */ (name) => {
-							this.scope.add(name, dependencies, this);
-						}
-					);
-				}
-			);
-		} else {
-			this.scope = scope;
-		}
+
+		this.scope = scope;
+
 		this.handlers.forEach(
 			/** @param {any} handler */ (handler) => {
 				handler.modifiers.forEach(
@@ -174,6 +160,18 @@ export default class InlineComponent extends Node {
 				children: info.children
 			});
 		}
+
+		if (let_attributes.length) {
+			// copy let: attribute from <Component /> to <svelte:fragment slot="default" />
+			// as they are for `slot="default"` only
+			children.forEach((child) => {
+				const slot = child.attributes.find((attribute) => attribute.name === 'slot');
+				if (!slot || slot.value[0].data === 'default') {
+					child.attributes.push(...let_attributes);
+				}
+			});
+		}
+
 		this.children = map_children(component, this, this.scope, children);
 	}
 	get slot_template_name() {

src/compiler/compile/nodes/Slot.js

@@ -40,39 +40,7 @@ export default class Slot extends Element {
 			}
 		);
 		if (!this.slot_name) this.slot_name = 'default';
-		if (this.slot_name === 'default') {
-			// if this is the default slot, add our dependencies to any
-			// other slots (which inherit our slot values) that were
-			// previously encountered
-			component.slots.forEach(
-				/** @param {any} slot */ (slot) => {
-					this.values.forEach(
-						/**
-						 * @param {any} attribute
-						 * @param {any} name
-						 */ (attribute, name) => {
-							if (!slot.values.has(name)) {
-								slot.values.set(name, attribute);
-							}
-						}
-					);
-				}
-			);
-		} else if (component.slots.has('default')) {
-			// otherwise, go the other way — inherit values from
-			// a previously encountered default slot
-			const default_slot = component.slots.get('default');
-			default_slot.values.forEach(
-				/**
-				 * @param {any} attribute
-				 * @param {any} name
-				 */ (attribute, name) => {
-					if (!this.values.has(name)) {
-						this.values.set(name, attribute);
-					}
-				}
-			);
-		}
+
 		component.slots.set(this.slot_name, this);
 		this.cannot_use_innerhtml();
 		this.not_static_content();

src/compiler/compile/nodes/shared/Expression.js

@@ -376,8 +376,9 @@ export default class Expression {
 								node = node.parent;
 							}
 							const func_expression = func_declaration[0];
-							if (node.type === 'InlineComponent' || node.type === 'SlotTemplate') {
-								// <Comp let:data />
+
+							if (node.type === 'SlotTemplate') {
+								// <svelte:fragment let:data />
 								this.replace(func_expression);
 							} else {
 								// {#each}, {#await}

src/compiler/compile/render_dom/wrappers/InlineComponent/index.js

@@ -1,19 +1,18 @@
-import Wrapper from '../shared/Wrapper.js';
-import BindingWrapper from '../Element/Binding.js';
-import SlotTemplateWrapper from '../SlotTemplate.js';
+import { b, p, x } from 'code-red';
+import { extract_ignores_above_node } from '../../../../utils/extract_svelte_ignore.js';
 import { sanitize } from '../../../../utils/names.js';
+import { namespaces } from '../../../../utils/namespaces.js';
+import compiler_warnings from '../../../compiler_warnings.js';
 import add_to_set from '../../../utils/add_to_set.js';
-import { b, x, p } from 'code-red';
-import is_dynamic from '../shared/is_dynamic.js';
-import bind_this from '../shared/bind_this.js';
-import EventHandler from '../Element/EventHandler.js';
-import { extract_names } from 'periscopic';
-import mark_each_block_bindings from '../shared/mark_each_block_bindings.js';
 import { string_to_member_expression } from '../../../utils/string_to_member_expression.js';
+import BindingWrapper from '../Element/Binding.js';
+import EventHandler from '../Element/EventHandler.js';
+import SlotTemplateWrapper from '../SlotTemplate.js';
+import Wrapper from '../shared/Wrapper.js';
+import bind_this from '../shared/bind_this.js';
+import is_dynamic from '../shared/is_dynamic.js';
 import { is_head } from '../shared/is_head.js';
-import compiler_warnings from '../../../compiler_warnings.js';
-import { namespaces } from '../../../../utils/namespaces.js';
-import { extract_ignores_above_node } from '../../../../utils/extract_svelte_ignore.js';
+import mark_each_block_bindings from '../shared/mark_each_block_bindings.js';
 
 const regex_invalid_variable_identifier_characters = /[^a-zA-Z_$]/g;
 
@@ -77,11 +76,6 @@ export default class InlineComponentWrapper extends Wrapper {
 			).toLowerCase()
 		};
 		if (this.node.children.length) {
-			this.node.lets.forEach((l) => {
-				extract_names(l.value || l.name).forEach((name) => {
-					renderer.add_to_context(name, true);
-				});
-			});
 			this.children = this.node.children.map(
 				(child) =>
 					new SlotTemplateWrapper(

src/compiler/compile/render_dom/wrappers/SlotTemplate.js

@@ -38,10 +38,7 @@ export default class SlotTemplateWrapper extends Wrapper {
 			type: 'slot'
 		});
 		this.renderer.blocks.push(this.block);
-		const seen = new Set(lets.map((l) => l.name.name));
-		this.parent.node.lets.forEach((l) => {
-			if (!seen.has(l.name.name)) lets.push(l);
-		});
+
 		/** @type {import('./InlineComponent/index.js').default} */ (this.parent).set_slot(
 			slot_template_name,
 			get_slot_definition(this.block, scope, lets)

src/compiler/compile/render_ssr/handlers/Slot.js

@@ -25,11 +25,6 @@ export default function (node, renderer, options) {
 			: ${result}
 	`);
 	if (slot && nearest_inline_component) {
-		const lets = node.lets;
-		const seen = new Set(lets.map((l) => l.name.name));
-		nearest_inline_component.lets.forEach((l) => {
-			if (!seen.has(l.name.name)) lets.push(l);
-		});
 		options.slot_scopes.set(slot, {
 			input: get_slot_scope(node.lets),
 			output: renderer.pop()

src/compiler/compile/render_ssr/handlers/SlotTemplate.js

@@ -20,11 +20,7 @@ export default function (node, renderer, options) {
 	);
 	renderer.push();
 	renderer.render(children, options);
-	const lets = node.lets;
-	const seen = new Set(lets.map((l) => l.name.name));
-	parent_inline_component.lets.forEach((l) => {
-		if (!seen.has(l.name.name)) lets.push(l);
-	});
+
 	const slot_fragment_content = renderer.pop();
 	if (!is_empty_template_literal(slot_fragment_content)) {
 		if (options.slot_scopes.has(node.slot_template_name)) {

test/runtime/samples/component-slot-default-in-each/Nested.svelte

@@ -0,0 +1,11 @@
+<script>
+	let promise = new Promise(resolve => resolve(10));
+</script>
+
+{#each {length: 3} as _, i}
+	<slot item={i}/>
+{/each}
+
+{#await promise then value}
+	<slot {value}/>
+{/await}

test/runtime/samples/component-slot-default-in-each/_config.js

@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<div>0 - undefined</div>
+		<div>1 - undefined</div>
+		<div>2 - undefined</div>
+	`
+};

test/runtime/samples/component-slot-default-in-each/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:item let:value>
+	<div>{item} - {value}</div>
+</Nested>

test/runtime/samples/component-slot-let-scope-2/Nested.svelte

@@ -0,0 +1,3 @@
+<slot />
+<slot thing={2} name="thing"/>
+

test/runtime/samples/component-slot-let-scope-2/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: '<span>undefined</span><span>2</span>'
+};

test/runtime/samples/component-slot-let-scope-2/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:thing>
+	<span>{thing}</span>
+	<svelte:fragment slot="thing" let:thing><span>{thing}</span></svelte:fragment>
+</Nested>

test/runtime/samples/component-slot-named-inherits-default-lets/Nested.svelte → test/runtime/samples/component-slot-let-scope-3/Nested.svelte

@@ -1,6 +1,4 @@
 <script>
-	import { onDestroy } from 'svelte';
-
 	let count = 0;
 
 	function increment() {

test/runtime/samples/component-slot-named-inherits-default-lets/_config.js → test/runtime/samples/component-slot-let-scope-3/_config.js

@@ -3,7 +3,7 @@ export default {
 		<div>
 			<p>count in default slot: 0</p>
 			<p slot="foo">count in foo slot: 0</p>
-			<p slot="bar">count in bar slot: 0</p>
+			<p slot="bar">count in bar slot: 42</p>
 			<button>+1</button>
 		</div>
 	`,
@@ -19,7 +19,7 @@ export default {
 			<div>
 				<p>count in default slot: 1</p>
 				<p slot="foo">count in foo slot: 1</p>
-				<p slot="bar">count in bar slot: 1</p>
+				<p slot="bar">count in bar slot: 42</p>
 				<button>+1</button>
 			</div>
 		`

test/runtime/samples/component-slot-named-inherits-default-lets/main.svelte → test/runtime/samples/component-slot-let-scope-3/main.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Nested from './Nested.svelte';
+	let count = 42;
 </script>
 
 <Nested let:count>

test/runtime/samples/component-slot-let-scope/Nested.svelte

@@ -0,0 +1,2 @@
+<slot thing={2} name="thing"/>
+

test/runtime/samples/component-slot-let-scope/_config.js

@@ -0,0 +1,3 @@
+export default {
+	error: 'thing is not defined'
+};

test/runtime/samples/component-slot-let-scope/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+
+</script>
+
+<Nested let:thing>
+	<svelte:fragment slot="thing"><span>{thing}</span></svelte:fragment>
+</Nested>

test/runtime/samples/component-slot-nested-in-slot/One.svelte

@@ -3,6 +3,8 @@
 	export let a, b;
 </script>
 
-<Two {b} let:two>
-	<slot name="one" slot="two" one={a} two={two}></slot>
+<Two {b}>
+	<svelte:fragment slot="two" let:two>
+		<slot name="one" one={a} two={two}></slot>
+	</svelte:fragment>
 </Two>

test/runtime/samples/component-svelte-fragment-let-aliased/main.svelte

@@ -4,8 +4,8 @@
 	export let things;
 </script>
 
-<Nested {things} let:thing={x}>
-	<svelte:fragment slot="main">
+<Nested {things}>
+	<svelte:fragment slot="main" let:thing={x}>
 		<span>{x}</span>
 	</svelte:fragment>
 </Nested>

test/runtime/samples/component-svelte-fragment-let-b/main.svelte

@@ -2,8 +2,8 @@
 	import Nested from './Nested.svelte';
 </script>
 
-<Nested let:count>
-	<svelte:fragment slot="main">
+<Nested>
+	<svelte:fragment slot="main" let:count>
 		<span>{count}</span>
 	</svelte:fragment>
 </Nested>

test/runtime/samples/component-svelte-fragment-let-e/A.svelte

@@ -3,8 +3,8 @@
 	export let x;
 </script>
 
-<B {x} let:reflected>
-	<svelte:fragment slot="main">
+<B {x}>
+	<svelte:fragment slot="main" let:reflected>
 		<span>{reflected}</span>
 		<slot name="main" {reflected} />
 	</svelte:fragment>