diff --git a/.changeset/large-cougars-cough.md b/.changeset/large-cougars-cough.md new file mode 100644 index 0000000000..a11a8053a2 --- /dev/null +++ b/.changeset/large-cougars-cough.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix Astro-in-MDX dashes in slot attr diff --git a/packages/astro/src/jsx-runtime/index.ts b/packages/astro/src/jsx-runtime/index.ts index d010348e7d..bbef1f2f52 100644 --- a/packages/astro/src/jsx-runtime/index.ts +++ b/packages/astro/src/jsx-runtime/index.ts @@ -10,7 +10,7 @@ export interface AstroVNode { props: Record; } -const toSlotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase()); +const toSlotName = (slotAttr: string) => slotAttr; export function isVNode(vnode: any): vnode is AstroVNode { return vnode && typeof vnode === 'object' && vnode[AstroJSX]; diff --git a/packages/astro/test/units/render/jsx.test.js b/packages/astro/test/units/render/jsx.test.js index 8a45fb3f3e..739bc794e4 100644 --- a/packages/astro/test/units/render/jsx.test.js +++ b/packages/astro/test/units/render/jsx.test.js @@ -49,5 +49,44 @@ describe('core/render', () => { const html = await response.text(); expect(html).to.include('

works

'); }); + + it('Can render slots with a dash in the name', async () => { + const Wrapper = createComponent((result, _props, slots = {}) => { + return render`
${renderSlot(result, slots['my-slot'])}
`; + }); + + const Page = createAstroJSXComponent(() => { + return jsx('main', { + children: [ + jsx(Wrapper, { + // Children as an array + children: [ + jsx('p', { + slot: 'my-slot', + className: 'n', + children: 'works' + }) + ] + }), + jsx(Wrapper, { + // Children as a VNode + children: jsx('p', { + slot: 'my-slot', + className: 'p', + children: 'works' + }) + }) + ] + }) + }); + + const ctx = createRenderContext({ request: new Request('http://example.com/' )}); + const response = await renderPage(createAstroModule(Page), ctx, env); + + expect(response.status).to.equal(200); + + const html = await response.text(); + expect(html).to.include('

works

works

'); + }); }); });