Escape set:text values in Astro JSX (#17847)

* Align set:text rendering in Astro JSX

* Add set:text rendering changeset

Author: matthewp

.changeset/rare-gifts-show.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes `set:text` escaping in MDX script and style elements

packages/astro/src/jsx-runtime/index.ts

@@ -1,4 +1,4 @@
-import { Fragment, markHTMLString, Renderer } from '../runtime/server/index.js';
+import { escapeHTML, Fragment, markHTMLString, Renderer } from '../runtime/server/index.js';
 
 const AstroJSX = 'astro:jsx';
 const Empty = Symbol('empty');
@@ -65,7 +65,8 @@ function transformSetDirectives(vnode: AstroVNode) {
 		return;
 	}
 	if ('set:text' in vnode.props) {
-		const children = vnode.props['set:text'];
+		const value = vnode.props['set:text'];
+		const children = typeof value === 'string' ? markHTMLString(escapeHTML(value)) : value;
 		delete vnode.props['set:text'];
 		Object.assign(vnode.props, { children });
 		return;

packages/integrations/mdx/test/fixtures/mdx-basics/src/pages/set-text.mdx

@@ -0,0 +1,5 @@
+export const scriptText = '</script><p id="script-text-following">script text</p>';
+export const styleText = '</style><p id="style-text-following">style text</p>';
+
+<script id="script-text" type="application/json" set:text={scriptText} />
+<style id="style-text" set:text={styleText} />

packages/integrations/mdx/test/mdx-basics.test.ts

@@ -267,6 +267,16 @@ describe('MDX basics (merged fixture)', () => {
 					'style should not be html-escaped',
 				);
 			});
+
+			it('keeps set:text within script and style elements', async () => {
+				const html = await fixture.readFile('/set-text/index.html');
+				const { document } = parseHTML(html);
+
+				assert.match(document.getElementById('script-text')!.textContent, /^<\/script>/);
+				assert.match(document.getElementById('style-text')!.textContent, /^<\/style>/);
+				assert.equal(document.getElementById('script-text-following'), null);
+				assert.equal(document.getElementById('style-text-following'), null);
+			});
 		});
 	});
 
@@ -455,6 +465,19 @@ describe('MDX basics (merged fixture)', () => {
 					'style should not be html-escaped',
 				);
 			});
+
+			it('keeps set:text within script and style elements', async () => {
+				const res = await fixture.fetch('/set-text');
+				assert.equal(res.status, 200);
+
+				const html = await res.text();
+				const { document } = parseHTML(html);
+
+				assert.match(document.getElementById('script-text')!.textContent, /^<\/script>/);
+				assert.match(document.getElementById('style-text')!.textContent, /^<\/style>/);
+				assert.equal(document.getElementById('script-text-following'), null);
+				assert.equal(document.getElementById('style-text-following'), null);
+			});
 		});
 	});
 });