fix(compiler): Support dynamic slot names (#9605)

* chore: try new compiler version * update mergeSlots function * chore: update lock file * add tests * simplify `mergeSlots` code * update compiler version * update lock file * fix failing test We were expecting the source code to produce an error, but in 2.4.0 of the compiler, that generates valid code * chore: changeset * chore: update deps --------- Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Nate Moore <nate@astro.build>
withastro · Jan 18, 2024 · 8ce40a4 · 8ce40a4
1 parent 07f13e6
commit 8ce40a4
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 9 deletions.
diff --git a/.changeset/red-carrots-fail.md b/.changeset/red-carrots-fail.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Adds support for dynamic slot names
diff --git a/packages/astro/e2e/errors.test.js b/packages/astro/e2e/errors.test.js
@@ -25,7 +25,7 @@ test.describe('Error display', () => {
 		await page.goto(astro.resolveUrl('/astro-syntax-error'), { waitUntil: 'networkidle' });
 
 		const message = (await getErrorOverlayContent(page)).message;
-		expect(message).toMatch('Unexpected "}"');
+		expect(message).toMatch('Unexpected "while"');
 
 		await Promise.all([
 			// Wait for page reload

diff --git a/packages/astro/e2e/fixtures/errors/src/pages/astro-syntax-error.astro b/packages/astro/e2e/fixtures/errors/src/pages/astro-syntax-error.astro
@@ -1 +1 @@
-<h1>{// comment
+<h1>{while (true){}}</h1>
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -114,7 +114,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^2.3.4",
+    "@astrojs/compiler": "^2.5.0",
     "@astrojs/internal-helpers": "workspace:*",
     "@astrojs/markdown-remark": "workspace:*",
     "@astrojs/telemetry": "workspace:*",

diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -45,8 +45,11 @@ import { addAttribute, Renderer } from './render/index.js';
 
 export function mergeSlots(...slotted: unknown[]) {
 	const slots: Record<string, () => any> = {};
-	for (const slot of slotted) {
+	for (let slot of slotted) {
 		if (!slot) continue;
+		if (Array.isArray(slot)) {
+			slot = mergeSlots(...slot);
+		}
 		if (typeof slot === 'object') {
 			Object.assign(slots, slot);
 		} else if (typeof slot === 'function') {

diff --git a/packages/astro/test/astro-slots.test.js b/packages/astro/test/astro-slots.test.js
@@ -30,6 +30,26 @@ describe('Slots', () => {
 		expect($('#default').text().trim()).to.equal('Default');
 	});
 
+	it('Dynamic named slots work with map work', async () => {
+		const html = await fixture.readFile('/dynamic-map/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('Dynamic named slots work with for loop', async () => {
+		const html = await fixture.readFile('/dynamic-for/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('Conditional named slots work', async () => {
 		const html = await fixture.readFile('/conditional/index.html');
 		const $ = cheerio.load(html);

diff --git a/packages/astro/test/fixtures/astro-slots/src/pages/dynamic-for.astro b/packages/astro/test/fixtures/astro-slots/src/pages/dynamic-for.astro
@@ -0,0 +1,24 @@
+---
+import Slotted from '../components/Slotted.astro';
+
+const slotNames = ['a', 'b', 'c']
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+    <Slotted>
+      {()=>{
+        const slots:any[] = [];
+        for (const slotName of slotNames) {
+          slots.push(<span slot={slotName}>{slotName.toUpperCase()}</span>);
+        }
+        return slots;
+      }
+      }
+    <span>Default</span>
+    </Slotted>
+  </body>
+</html>
diff --git a/packages/astro/test/fixtures/astro-slots/src/pages/dynamic-map.astro b/packages/astro/test/fixtures/astro-slots/src/pages/dynamic-map.astro
@@ -0,0 +1,17 @@
+---
+import Slotted from '../components/Slotted.astro';
+
+const slots = ['a', 'b', 'c']
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+    <Slotted>
+      {slots.map((slotName)=><span slot={slotName}>{slotName.toUpperCase()}</span>)}
+      <span>Default</span>
+    </Slotted>
+  </body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml