fix allow let scoped to root element (sveltejs#4266)

taylorzane · Dec 17, 2020 · e1536d2 · e1536d2
1 parent 69bbbd7
commit e1536d2
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Allow access to `let:` variables in sibling attributes on slot root ([#4173](https://github.com/sveltejs/svelte/issues/4173))
+
 ## 3.17.1
 
 * Only attach SSR mode markers to a component's `<head>` elements when compiling with `hydratable: true` ([#4258](https://github.com/sveltejs/svelte/issues/4258))

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
@@ -151,6 +151,11 @@ export default class Element extends Node {
 			}
 		}
 
+		const has_let = info.attributes.some(node => node.type === 'Let');
+		if (has_let) {
+			scope = scope.child();
+		}
+
 		// Binding relies on Attribute, defer its evaluation
 		const order = ['Binding']; // everything else is -1
 		info.attributes.sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type));
@@ -181,9 +186,16 @@ export default class Element extends Node {
 					this.handlers.push(new EventHandler(component, this, scope, node));
 					break;
 
-				case 'Let':
-					this.lets.push(new Let(component, this, scope, node));
+				case 'Let': {
+					const l = new Let(component, this, scope, node);
+					this.lets.push(l);
+					const dependencies = new Set([l.name.name]);
+
+					l.names.forEach(name => {
+						scope.add(name, dependencies, this);
+					});
 					break;
+				}
 
 				case 'Transition':
 				{
@@ -202,20 +214,7 @@ export default class Element extends Node {
 			}
 		});
 
-		if (this.lets.length > 0) {
-			this.scope = scope.child();
-
-			this.lets.forEach(l => {
-				const dependencies = new Set([l.name.name]);
-
-				l.names.forEach(name => {
-					this.scope.add(name, dependencies, this);
-				});
-			});
-		} else {
-			this.scope = scope;
-		}
-
+		this.scope = scope;
 		this.children = map_children(component, this, this.scope, info.children);
 
 		this.validate();

diff --git a/test/runtime/samples/component-slot-let-g/A.svelte b/test/runtime/samples/component-slot-let-g/A.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<slot name="foo" reflected={x}/>
diff --git a/test/runtime/samples/component-slot-let-g/_config.js b/test/runtime/samples/component-slot-let-g/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<span slot="foo" class="1">1</span>
+		0
+	`,
+	async test({ assert, target, component, window }) {
+		component.x = 2;
+
+		assert.htmlEqual(target.innerHTML, `
+			<span slot="foo" class="2">2</span>
+			0
+		`);
+
+		const span = target.querySelector('span');
+		await span.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<span slot="foo" class="2">2</span>
+			2
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-g/main.svelte b/test/runtime/samples/component-slot-let-g/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import A from './A.svelte';
+	export let x = 1;
+	let y = 0;
+</script>
+
+<A {x}>
+	<span 
+		on:click={() => y = reflected}
+		slot="foo"
+		let:reflected
+		class={reflected}
+	>
+		{reflected}
+	</span>
+</A>
+{ y }