fix(astro): Fix isHTMLString check failing in multi-realm environments (#16142)

* fix(container): don't escape slot HTML in renderToString during build

* performance issue

* oops

* apply Erika's suggestion

* use `isHTMLString` within `markHTMLString`

* simplify test fixtures

* format

* remove the no longer used `Symbol.toStringTag` from `HTMLString`

* rename to `htmlStringSymbol`

* update changeset

* Apply suggestion from @ematipico

---------

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

Author: rururux

.changeset/jolly-ideas-sell.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes HTML content being incorrectly escaped as plain text when rendering a MDX component using the `AstroContainer` APIs.

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

@@ -14,14 +14,14 @@ Object.defineProperty(HTMLBytes.prototype, Symbol.toStringTag, {
 	},
 });
 
+const htmlStringSymbol = Symbol.for('astro:html-string');
+
 /**
  * A "blessed" extension of String that tells Astro that the string
  * has already been escaped. This helps prevent double-escaping of HTML.
  */
 export class HTMLString extends String {
-	get [Symbol.toStringTag]() {
-		return 'HTMLString';
-	}
+	[htmlStringSymbol] = true;
 }
 
 type BlessedType = string | HTMLBytes;
@@ -33,7 +33,7 @@ type BlessedType = string | HTMLBytes;
  */
 export const markHTMLString = (value: any) => {
 	// If value is already marked as an HTML string, there is nothing to do.
-	if (value instanceof HTMLString) {
+	if (isHTMLString(value)) {
 		return value;
 	}
 	// Cast to `HTMLString` to mark the string as valid HTML. Any HTML escaping
@@ -48,7 +48,7 @@ export const markHTMLString = (value: any) => {
 };
 
 export function isHTMLString(value: any): value is HTMLString {
-	return value instanceof HTMLString;
+	return !!value?.[htmlStringSymbol];
 }
 
 function markHTMLBytes(bytes: Uint8Array) {

packages/integrations/mdx/test/fixtures/mdx-astro-container-escape/astro.config.mjs

@@ -0,0 +1,6 @@
+import mdx from '@astrojs/mdx';
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+	integrations: [mdx()],
+});

packages/integrations/mdx/test/fixtures/mdx-astro-container-escape/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@test/mdx-astro-container-escape",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/mdx": "workspace:*",
+    "astro": "workspace:*"
+  },
+  "scripts": {
+    "dev": "astro dev"
+  }
+}

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

@@ -0,0 +1 @@
+<div class="div"><slot /></div>

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

@@ -0,0 +1,12 @@
+---
+import { experimental_AstroContainer } from "astro/container";
+import { loadRenderers } from "astro:container";
+import { getContainerRenderer } from "@astrojs/mdx";
+import { Content } from '../posts/post.mdx'
+
+const renderers = await loadRenderers([getContainerRenderer()]);
+const contentContainer = await experimental_AstroContainer.create({ renderers });
+const html = await contentContainer.renderToString(Content);
+---
+
+<Fragment set:html={html} />

packages/integrations/mdx/test/fixtures/mdx-astro-container-escape/src/posts/post.mdx

@@ -0,0 +1,9 @@
+---
+title: Example
+---
+
+import Div from '../components/Div.astro'
+
+<Div>
+  Hello, World!
+</Div>

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

@@ -0,0 +1,27 @@
+import assert from 'node:assert/strict';
+import { before, describe, it } from 'node:test';
+import * as cheerio from 'cheerio';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX Component & Astro Container escape issue', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-astro-container-escape/', import.meta.url),
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('should render elements inside component without escaping', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			assert.equal($('.div').text().includes('<p>'), false);
+		});
+	});
+});