diff --git a/.changeset/red-carrots-fail.md b/.changeset/red-carrots-fail.md new file mode 100644 index 000000000000..caef47017deb --- /dev/null +++ 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 index 4cb1b02fb5c3..825fc7a9224c 100644 --- 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 index 4fd7b10a2a74..9747c4f8c7cd 100644 --- 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 @@ -

{// comment +

{while (true){}}

diff --git a/packages/astro/package.json b/packages/astro/package.json index 0453011d9c36..aeadbc8893f8 100644 --- 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 index 81d05987adb8..e92f33c842a7 100644 --- 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 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 index 69a0025e1f27..7610e73059b9 100644 --- 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 new file mode 100644 index 000000000000..f7e48735dfc5 --- /dev/null +++ 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'] +--- + + + + + + + + {()=>{ + const slots:any[] = []; + for (const slotName of slotNames) { + slots.push({slotName.toUpperCase()}); + } + return slots; + } + } + Default + + + 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 new file mode 100644 index 000000000000..3917d73dd860 --- /dev/null +++ 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'] +--- + + + + + + + + {slots.map((slotName)=>{slotName.toUpperCase()})} + Default + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 641f6e9b2662..521a110880b2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -489,8 +489,8 @@ importers: packages/astro: dependencies: '@astrojs/compiler': - specifier: ^2.3.4 - version: 2.3.4 + specifier: ^2.5.0 + version: 2.5.0 '@astrojs/internal-helpers': specifier: workspace:* version: link:../internal-helpers @@ -5308,8 +5308,8 @@ packages: resolution: {integrity: sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==} dev: true - /@astrojs/compiler@2.3.4: - resolution: {integrity: sha512-33/YtWoBCE0cBUNy1kh78FCDXBoBANX87ShgATlAHECYbG2+buNTAgq4Xgz4t5NgnEHPN21GIBC2Mvvwisoutw==} + /@astrojs/compiler@2.5.0: + resolution: {integrity: sha512-ZDluNgMIJT+z+HJcZ6QEJ/KqaFkTkrb+Za6c6VZs8G/nb1LBErL14/iU5EVJ9yu25i4QCLweuBJ3m5df34gZJg==} /@astrojs/language-server@2.5.5(prettier-plugin-astro@0.12.3)(prettier@3.1.1)(typescript@5.2.2): resolution: {integrity: sha512-hk7a8S7bpf//BOA6mMjiYqi/eiYtGPfUfw59eVXdutdRFdwDHtu4jcsLu43ZaId56pAcE8qFjIvJxySvzcxiUA==} @@ -5323,7 +5323,7 @@ packages: prettier-plugin-astro: optional: true dependencies: - '@astrojs/compiler': 2.3.4 + '@astrojs/compiler': 2.5.0 '@jridgewell/sourcemap-codec': 1.4.15 '@volar/kit': 1.10.10(typescript@5.2.2) '@volar/language-core': 1.10.10