Fix slot attribute inside expressions (withastro#3837)

* fix: use slots inside expressions * test: add test for conditional named slots * test: fix incorrect test fixture * chore: update `@astrojs/compiler` * chore: add test coverage for `switch` Co-authored-by: Nate Moore <nate@astro.build>
SiriousHunter · Jul 7, 2022 · 5afb807 · 5afb807
1 parent c191098
commit 5afb807
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 5 deletions.
diff --git a/.changeset/smooth-files-attend.md b/.changeset/smooth-files-attend.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix usage of slots inside expressions
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -80,7 +80,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.17.1",
+    "@astrojs/compiler": "^0.18.0",
     "@astrojs/language-server": "^0.13.4",
     "@astrojs/markdown-remark": "^0.11.3",
     "@astrojs/prism": "0.4.1",

diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -142,6 +142,19 @@ export async function renderSlot(_result: any, slotted: string, fallback?: any):
 	return fallback;
 }
 
+export function mergeSlots(...slotted: unknown[]) {
+	const slots: Record<string, () => any> = {};
+	for (const slot of slotted) {
+		if (!slot) continue;
+		if (typeof slot === 'object') {
+			Object.assign(slots, slot);
+		} else if (typeof slot === 'function') {
+			Object.assign(slots, mergeSlots(slot()));
+		}
+	}
+	return slots;
+}
+
 export const Fragment = Symbol('Astro.Fragment');
 
 function guessRenderers(componentUrl?: string): string[] {

diff --git a/packages/astro/test/astro-expr.test.js b/packages/astro/test/astro-expr.test.js
@@ -114,4 +114,13 @@ describe('Expressions', () => {
 
 		expect($('#single-escape').html()).to.equal('Astro &amp; Vite');
 	});
+
+	it('Handles switch statements', async () => {
+		const html = await fixture.readFile('/switch/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('#red').length).to.equal(0);
+		expect($('#yellow').length).to.equal(1);
+		expect($('#blue').length).to.equal(0);
+	});
 });
diff --git a/packages/astro/test/astro-slots.test.js b/packages/astro/test/astro-slots.test.js
@@ -30,6 +30,16 @@ describe('Slots', () => {
 		expect($('#default').text().trim()).to.equal('Default');
 	});
 
+	it('Conditional named slots work', async () => {
+		const html = await fixture.readFile('/conditional/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('#a').text().trim()).to.equal('A');
+		expect($('#b').text().trim()).to.equal('B');
+		expect($('#c').text().trim()).to.equal('C');
+		expect($('#default').text().trim()).to.equal('Default');
+	});
+
 	it('Slots render fallback content by default', async () => {
 		const html = await fixture.readFile('/fallback/index.html');
 		const $ = cheerio.load(html);

diff --git a/packages/astro/test/fixtures/astro-expr/src/pages/switch.astro b/packages/astro/test/fixtures/astro-expr/src/pages/switch.astro
@@ -0,0 +1,20 @@
+---
+let title = 'Switch';
+let colors = ['red', 'yellow', 'blue'];
+---
+
+<html>
+<head>
+  <title>{title}</title>
+</head>
+<body>
+	{() => {
+		const color = colors[1];
+		switch (color) {
+			case 'red': return <div id="red">red</div>;
+			case 'yellow': return <div id="yellow">yellow</div>
+			case 'blue': return <div id="blue">blue</div>
+		}
+	}}
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/astro-slots/src/pages/conditional.astro b/packages/astro/test/fixtures/astro-slots/src/pages/conditional.astro
@@ -0,0 +1,27 @@
+---
+import Slotted from '../components/Slotted.astro';
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+    <Slotted>
+      {true && <span slot="a">A</span>}
+			{true ? <span slot="b">B</span> : null}
+			{() => <span slot="c">C</span>}
+			{() => {
+				const value = 0.33;
+				if (value > 0.25) {
+					return <span>Default</span>
+				} else if (value > 0.5) {
+					return <span>Another</span>
+				} else if (value > 0.75) {
+					return <span>Other</span>
+				}
+				return <span>Yet Another</span>
+			}}
+    </Slotted>
+  </body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml