From e569f0a5c7b56c4cce7afe95335b0aee6ac3d298 Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Fri, 5 Aug 2022 10:35:47 -0500
Subject: [PATCH] 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             |  5 +++
 packages/astro/src/runtime/server/jsx.ts      |  4 +--
 .../mdx-escape/src/components/Em.astro        |  7 ++++
 .../mdx-escape/src/components/P.astro         |  1 +
 .../mdx-escape/src/components/Title.astro     |  1 +
 .../mdx-escape/src/pages/html-tag.mdx         |  5 +++
 .../fixtures/mdx-escape/src/pages/index.mdx   | 13 ++++++++
 .../integrations/mdx/test/mdx-escape.test.js  | 32 +++++++++++++++++++
 8 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/hungry-vans-deliver.md
 create mode 100644 packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Em.astro
 create mode 100644 packages/integrations/mdx/test/fixtures/mdx-escape/src/components/P.astro
 create mode 100644 packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Title.astro
 create mode 100644 packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/html-tag.mdx
 create mode 100644 packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/index.mdx
 create mode 100644 packages/integrations/mdx/test/mdx-escape.test.js

diff --git a/.changeset/hungry-vans-deliver.md b/.changeset/hungry-vans-deliver.md
new file mode 100644
index 000000000..09640c012
--- /dev/null
+++ b/.changeset/hungry-vans-deliver.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix edge case where MDX components would be escaped
diff --git a/packages/astro/src/runtime/server/jsx.ts b/packages/astro/src/runtime/server/jsx.ts
index a284b061f..7bdafe7a2 100644
--- a/packages/astro/src/runtime/server/jsx.ts
+++ b/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) {
diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Em.astro b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Em.astro
new file mode 100644
index 000000000..8166c0586
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Em.astro
@@ -0,0 +1,7 @@
+<em><slot/></em>
+
+<style>
+  em {
+    color: red;
+  }
+</style>
diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/P.astro b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/P.astro
new file mode 100644
index 000000000..e29ac6d8f
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/P.astro
@@ -0,0 +1 @@
+<p><slot /></p>
diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Title.astro b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Title.astro
new file mode 100644
index 000000000..333ec04a2
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Title.astro
@@ -0,0 +1 @@
+<h1><slot/></h1>
diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/html-tag.mdx b/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/html-tag.mdx
new file mode 100644
index 000000000..e668c0dc7
--- /dev/null
+++ b/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>
diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/index.mdx
new file mode 100644
index 000000000..d1c6cec9d
--- /dev/null
+++ b/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_
diff --git a/packages/integrations/mdx/test/mdx-escape.test.js b/packages/integrations/mdx/test/mdx-escape.test.js
new file mode 100644
index 000000000..d2a4e79ca
--- /dev/null
+++ b/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');
+	});
+});