fix allow let scoped to root element (#4266)

5 years ago · 8b9b2c266e
parent bfff7a9d0e
commit 8b9b2c266e
5 changed files with 63 additions and 16 deletions
--- 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))
--- 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();
--- 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}/>
--- 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
+		`);
+	}
+};
--- 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 }