Handle edge case in jsx-runtime (#4158)

* fix(#4135): handle edge case in jsx-runtime

* test: add mdx test case

* chore: fix utils reference

* test: fix mdx escape test

Co-authored-by: Nate Moore <nate@astro.build>

.changeset/hungry-vans-deliver.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix edge case where MDX components would be escaped

packages/astro/src/runtime/server/jsx.ts

@@ -51,12 +51,12 @@ export async function renderJSX(result: SSRResult, vnode: any): Promise<any> {
 						props[key] = value;
 					}
 				}
-				return await renderToString(result, vnode.type as any, props, slots);
+				return markHTMLString(await renderToString(result, vnode.type as any, props, slots));
 			}
 			case !vnode.type && (vnode.type as any) !== 0:
 				return '';
 			case typeof vnode.type === 'string' && vnode.type !== ClientOnlyPlaceholder:
-				return await renderElement(result, vnode.type as string, vnode.props ?? {});
+				return markHTMLString(await renderElement(result, vnode.type as string, vnode.props ?? {}));
 		}
 
 		if (vnode.type) {

packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Em.astro

@@ -0,0 +1,7 @@
+<em><slot/></em>
+
+<style>
+  em {
+    color: red;
+  }
+</style>

packages/integrations/mdx/test/fixtures/mdx-escape/src/components/P.astro

@@ -0,0 +1 @@
+<p><slot /></p>

packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Title.astro

@@ -0,0 +1 @@
+<h1><slot/></h1>

packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/html-tag.mdx

@@ -0,0 +1,5 @@
+import P from '../components/P.astro';
+import Em from '../components/Em.astro';
+
+<P>Render <Em>Me</Em></P>
+<P><Em>Me</Em></P>

packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/index.mdx

@@ -0,0 +1,13 @@
+import P from '../components/P.astro';
+import Em from '../components/Em.astro';
+import Title from '../components/Title.astro';
+
+export const components = { p: P, em: Em, h1: Title };
+
+# Hello _there_
+
+# _there_
+
+Hello _there_
+
+_there_

packages/integrations/mdx/test/mdx-escape.test.js

@@ -0,0 +1,32 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-escape/', import.meta.url);
+
+describe('MDX frontmatter', () => {
+	let fixture;
+	before(async () => {
+		fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+	});
+
+	it('does not have unescaped HTML at top-level', async () => {
+		const html = await fixture.readFile('/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.body.textContent).to.not.include('<em');
+	});
+
+	it('does not have unescaped HTML inside html tags', async () => {
+		const html = await fixture.readFile('/html-tag/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.body.textContent).to.not.include('<em');
+	});
+});