fix: Support dangerouslySetInnerHTML={undefined} with renderToStringAsync (#381)

Author: rschristian

.changeset/chilly-ladybugs-think.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Support `dangerouslySetInnerHTML={undefined}` with `renderToStringAsync`

src/index.js

@@ -125,7 +125,9 @@ export async function renderToStringAsync(vnode, context) {
 
 			// Resolving nested Promises with a maximum depth of 25
 			while (
-				resolved.some((element) => typeof element.then === 'function') &&
+				resolved.some(
+					(element) => element && typeof element.then === 'function'
+				) &&
 				count++ < 25
 			) {
 				resolved = (await Promise.all(resolved)).flat();

test/compat/async.test.jsx

@@ -226,4 +226,47 @@ describe('Async renderToString', () => {
 
 		expect(rendered).to.equal(`<div>2</div>`);
 	});
+
+	describe('dangerouslySetInnerHTML', () => {
+		it('should support dangerouslySetInnerHTML', async () => {
+			// some invalid HTML to make sure we're being flakey:
+			let html = '<a href="foo">asdf</a> some text <ul><li>foo<li>bar</ul>';
+			let rendered = await renderToStringAsync(
+				<div id="f" dangerouslySetInnerHTML={{ __html: html }} />
+			);
+			expect(rendered).to.equal(`<div id="f">${html}</div>`);
+		});
+
+		it('should accept undefined dangerouslySetInnerHTML', async () => {
+			const Test = () => (
+				<Fragment>
+					<div>hi</div>
+					<div dangerouslySetInnerHTML={undefined} />
+				</Fragment>
+			);
+
+			const rendered = await renderToStringAsync(<Test />);
+			expect(rendered).to.equal('<div>hi</div><div></div>');
+		});
+
+		it('should accept null __html', async () => {
+			const Test = () => (
+				<Fragment>
+					<div>hi</div>
+					<div dangerouslySetInnerHTML={{ __html: null }} />
+				</Fragment>
+			);
+			const rendered = await renderToStringAsync(<Test />);
+			expect(rendered).to.equal('<div>hi</div><div></div>');
+		});
+
+		it('should override children', async () => {
+			let rendered = await renderToStringAsync(
+				<div dangerouslySetInnerHTML={{ __html: 'foo' }}>
+					<b>bar</b>
+				</div>
+			);
+			expect(rendered).to.equal('<div>foo</div>');
+		});
+	});
 });

test/render.test.jsx

@@ -387,16 +387,6 @@ describe('render', () => {
 			);
 		});
 
-		it('should accept nullish __html', () => {
-			const Test = (props) => (
-				<Fragment>
-					<div>hi</div>
-					<div dangerouslySetInnerHTML={{ __html: null }} />
-				</Fragment>
-			);
-			expect(render(<Test />)).to.equal('<div>hi</div><div></div>');
-		});
-
 		it('should apply defaultProps', () => {
 			const Test = (props) => <div {...props} />;
 			Test.defaultProps = {
@@ -835,6 +825,26 @@ describe('render', () => {
 			expect(rendered).to.equal(`<div id="f">${html}</div>`);
 		});
 
+		it('should accept undefined dangerouslySetInnerHTML', () => {
+			const Test = () => (
+				<Fragment>
+					<div>hi</div>
+					<div dangerouslySetInnerHTML={undefined} />
+				</Fragment>
+			);
+			expect(render(<Test />)).to.equal('<div>hi</div><div></div>');
+		});
+
+		it('should accept null __html', () => {
+			const Test = () => (
+				<Fragment>
+					<div>hi</div>
+					<div dangerouslySetInnerHTML={{ __html: null }} />
+				</Fragment>
+			);
+			expect(render(<Test />)).to.equal('<div>hi</div><div></div>');
+		});
+
 		it('should override children', () => {
 			let rendered = render(
 				<div dangerouslySetInnerHTML={{ __html: 'foo' }}>