Fixes JSX usage of slots with dashes in their name (#5080)

* Fixes JSX usage of slots with dashes in their name

* Adding a changeset

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>');
+		});
 	});
 });