Merge pull request #453 from preactjs/fragment-html

feat: support `dangerouslySetInnerHTML` on Fragments

Author: marvinhagemeister

.changeset/neat-books-remain.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': minor
+---
+
+Add support for `dangerouslySetInnerHTML` on Fragments. This allows you to insert unsafe raw HTML content without a wrapping container element.

src/index.js

@@ -346,6 +346,9 @@ function _renderToString(
 				// Fragments are the least used components of core that's why
 				// branching here for comments has the least effect on perf.
 				return '<!--' + encodeEntities(props.UNSTABLE_comment) + '-->';
+			} else if (props.dangerouslySetInnerHTML) {
+				let html = props.dangerouslySetInnerHTML.__html || '';
+				return '<!--$h-->' + html + '<!--/$h-->';
 			}
 
 			rendered = props.children;

test/render.test.jsx

@@ -857,6 +857,59 @@ describe('render', () => {
 			);
 			expect(rendered).to.equal('<div>foo</div>');
 		});
+
+		it('should support dangerouslySetInnerHTML on Fragments', () => {
+			let rendered = render(
+				<div>
+					foo
+					<Fragment dangerouslySetInnerHTML={{ __html: 'bar' }} />
+					baz
+				</div>
+			);
+			expect(rendered).to.equal('<div>foo<!--$h-->bar<!--/$h-->baz</div>');
+		});
+
+		it('should ignore children on Fragments with dangerouslySetInnerHTML', () => {
+			let rendered = render(
+				<div>
+					foo
+					<Fragment dangerouslySetInnerHTML={{ __html: 'bar' }}>
+						<p>ignored</p>
+					</Fragment>
+					baz
+				</div>
+			);
+			expect(rendered).to.equal('<div>foo<!--$h-->bar<!--/$h-->baz</div>');
+		});
+
+		it('should support falsy dangerouslySetInnerHTML on Fragments', () => {
+			let rendered = render(
+				<div>
+					foo
+					<Fragment dangerouslySetInnerHTML={{ __html: null }} />
+					baz
+				</div>
+			);
+			expect(rendered).to.equal('<div>foo<!--$h--><!--/$h-->baz</div>');
+
+			rendered = render(
+				<div>
+					foo
+					<Fragment dangerouslySetInnerHTML={{ __html: undefined }} />
+					baz
+				</div>
+			);
+			expect(rendered).to.equal('<div>foo<!--$h--><!--/$h-->baz</div>');
+
+			rendered = render(
+				<div>
+					foo
+					<Fragment dangerouslySetInnerHTML={{ __html: false }} />
+					baz
+				</div>
+			);
+			expect(rendered).to.equal('<div>foo<!--$h--><!--/$h-->baz</div>');
+		});
 	});
 
 	describe('className / class massaging', () => {