Allow passing promises to set:html (#4819)

* Allow passing promises to set:html * Adding a changeset
withastro · Sep 20, 2022 · 518e8f7 · 518e8f7
1 parent 666d98e
commit 518e8f7
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 4 deletions.
diff --git a/.changeset/popular-deers-grow.md b/.changeset/popular-deers-grow.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Allow passing promises to set:html
diff --git a/packages/astro/src/runtime/server/escape.ts b/packages/astro/src/runtime/server/escape.ts
@@ -29,3 +29,13 @@ export const markHTMLString = (value: any) => {
 	// The compiler will recursively stringify these correctly at a later stage.
 	return value;
 };
+
+export function unescapeHTML(str: any) {
+	// If a promise, await the result and mark that.
+	if(!!str && typeof str === 'object' && typeof str.then === 'function') {
+		return Promise.resolve(str).then(value => {
+			return markHTMLString(value);
+		});
+	}
+	return markHTMLString(str);
+}
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -4,7 +4,7 @@ export {
 	escapeHTML,
 	HTMLString,
 	markHTMLString,
-	markHTMLString as unescapeHTML,
+	unescapeHTML,
 } from './escape.js';
 export type { Metadata } from './metadata';
 export { createMetadata } from './metadata.js';

diff --git a/packages/astro/test/astro-slots.test.js b/packages/astro/test/astro-slots.test.js
@@ -148,6 +148,7 @@ describe('Slots', () => {
 			const $ = cheerio.load(html);
 
 			expect($('#render-args')).to.have.lengthOf(1);
+			expect($('#render-args span')).to.have.lengthOf(1);
 			expect($('#render-args').text()).to.equal('render-args');
 		}
 	});

diff --git a/packages/astro/test/fixtures/astro-slots/src/components/RenderArgs.astro b/packages/astro/test/fixtures/astro-slots/src/components/RenderArgs.astro
@@ -1,6 +1,5 @@
 ---
 const { id, text } = Astro.props;
-const content = await Astro.slots.render('default', [text]);
 ---
 
-<div id={id} set:html={content} />
+<div id={id} set:html={Astro.slots.render('default', [text])} />
diff --git a/packages/astro/test/fixtures/astro-slots/src/pages/slottedapi-render.astro b/packages/astro/test/fixtures/astro-slots/src/pages/slottedapi-render.astro
@@ -15,6 +15,6 @@ import RenderArgs from '../components/RenderArgs.astro';
   <body>
     <Render id="render">render</Render>
 		<RenderFn id="render-fn">{() => "render-fn"}</RenderFn>
-		<RenderArgs id="render-args" text="render-args">{(text: string) => text}</RenderArgs>
+		<RenderArgs id="render-args" text="render-args">{(text: string) => <span>{text}</span>}</RenderArgs>
   </body>
 </html>