Merge pull request #301 from preactjs/comments

.changeset/shy-hotels-impress.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': minor
+---
+
+Add experimental ability to render HTML comments via `<Fragment UNSTABLE_comment="my-comment" />`. When the `UNSTABLE_comment` prop is present all children of that `Fragment` will be ignored and a HTML comment will be rendered instead. This feature is added to allow framework authors to experiment with marking DOM for hydration in the client. Note that it's marked as unstable and might change in the future.

src/index.js

@@ -165,6 +165,12 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 	// Invoke rendering on Components
 	if (typeof type === 'function') {
 		if (type === Fragment) {
+			// Fragments are the least used components of core that's why
+			// branching here for comments has the least effect on perf.
+			if (props.UNSTABLE_comment) {
+				return '<!--' + encodeEntities(props.UNSTABLE_comment || '') + '-->';
+			}
+
 			rendered = props.children;
 		} else {
 			contextType = type.contextType;

test/render.test.js

@@ -1309,6 +1309,24 @@ describe('render', () => {
 		expect(render(<div>{() => {}}</div>)).to.equal('<div></div>');
 	});
 
+	describe('HTML Comments', () => {
+		it('should render HTML comments via Fragments', () => {
+			expect(render(<Fragment UNSTABLE_comment="foo" />)).to.equal(
+				'<!--foo-->'
+			);
+		});
+
+		it('should ignore children with comment prop', () => {
+			expect(
+				render(
+					<Fragment UNSTABLE_comment="foo">
+						<p>foo</p>
+					</Fragment>
+				)
+			).to.equal('<!--foo-->');
+		});
+	});
+
 	describe('vnode masks (useId)', () => {
 		it('should skip component top level Fragment child', () => {
 			const Wrapper = ({ children }) => <Fragment>{children}</Fragment>;