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

MoustaphaDev · natemoo-re · web-flow · commit 8ce40a417c85 · 2024-01-18T13:56:49.000-06:00
* 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 &lt;natemoo-re@users.noreply.github.com&gt;
Co-authored-by: Nate Moore &lt;nate@astro.build&gt;
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

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"astro": patch
 +---
++
 +Adds support for dynamic slot names
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<h1>{// comment`
	`1`	`+<h1>{while (true){}}</h1>`