diff options
| -rw-r--r-- | .changeset/large-cougars-cough.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/jsx-runtime/index.ts | 2 | ||||
| -rw-r--r-- | packages/astro/test/units/render/jsx.test.js | 39 |
3 files changed, 45 insertions, 1 deletions
diff --git a/.changeset/large-cougars-cough.md b/.changeset/large-cougars-cough.md new file mode 100644 index 000000000..a11a8053a --- /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 d010348e7..bbef1f2f5 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<string, any>; } -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 8a45fb3f3..739bc794e 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('<div><p class="n">works</p></div>'); }); + + it('Can render slots with a dash in the name', async () => { + const Wrapper = createComponent((result, _props, slots = {}) => { + return render`<div>${renderSlot(result, slots['my-slot'])}</div>`; + }); + + 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('<main><div><p class="n">works</p></div><div><p class="p">works</p></div></main>'); + }); }); }); |