Add support for Fragments (#79)

* Add support for Fragments

* Add test for sibling Fragments

Author: marvinhagemeister

src/index.js

@@ -1,6 +1,6 @@
 import { encodeEntities, indent, isLargeString, styleObjToCss, assign, getChildren } from './util';
 import { ENABLE_PRETTY } from '../env';
-import { options } from 'preact';
+import { options, Fragment } from 'preact';
 
 const SHALLOW = { shallow: true };
 
@@ -59,6 +59,16 @@ function renderToString(vnode, context, opts, inner, isSvgMode) {
 		if (opts.shallow && (inner || opts.renderRootComponent===false)) {
 			nodeName = getComponentName(nodeName);
 		}
+		else if (nodeName===Fragment) {
+			let rendered = '';
+			let children = [];
+			getChildren(children, vnode.props.children);
+
+			for (let i = 0; i < children.length; i++) {
+				rendered += renderToString(children[i], context, opts, opts.shallowHighOrder!==false, isSvgMode);
+			}
+			return rendered;
+		}
 		else {
 			let rendered;
 

test/pretty.js

@@ -1,6 +1,6 @@
 import { render as basicRender } from '../src';
 import { render } from '../src/jsx';
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import chai, { expect } from 'chai';
 import sinonChai from 'sinon-chai';
 chai.use(sinonChai);
@@ -65,4 +65,35 @@ describe('pretty', () => {
 			</div>
 		)).to.equal(`<div>\n\t<span></span>\n</div>`);
 	});
+
+	it('should not increase indentation with Fragments', () => {
+		expect(prettyRender(
+			<div>
+				<Fragment><span /></Fragment>
+			</div>
+		)).to.equal(`<div>\n\t<span></span>\n</div>`);
+	});
+
+	it('should not increase indentation with nested Fragments', () => {
+		expect(prettyRender(
+			<div>
+				<Fragment>
+					<Fragment><span /></Fragment>
+				</Fragment>
+			</div>
+		)).to.equal(`<div>\n\t<span></span>\n</div>`);
+	});
+
+	it('should not increase indentation with sibling Fragments', () => {
+		expect(prettyRender(
+			<div>
+				<Fragment>
+					<div>A</div>
+				</Fragment>
+				<Fragment>
+					<div>B</div>
+				</Fragment>
+			</div>
+		)).to.equal(`<div>\n\t<div>A</div>\n\t<div>B</div>\n</div>`);
+	});
 });

test/render.js

@@ -1,5 +1,5 @@
 import { render, shallowRender } from '../src';
-import { h, Component, createContext } from 'preact';
+import { h, Component, createContext, Fragment } from 'preact';
 import { useState, useContext, useEffect } from 'preact/hooks';
 import chai, { expect } from 'chai';
 import { spy, stub, match } from 'sinon';
@@ -608,6 +608,67 @@ describe('render', () => {
 		});
 	});
 
+	describe('Fragments', () => {
+		it('should skip Fragment node', () => {
+			let html = render(<div><Fragment>foo</Fragment></div>);
+			expect(html).to.equal('<div>foo</div>');
+		});
+
+		it('should skip Fragment node with multiple children', () => {
+			let html = render(
+				<div>
+					<Fragment>
+						foo
+						<span>bar</span>
+					</Fragment>
+				</div>
+			);
+			expect(html).to.equal('<div>foo<span>bar</span></div>');
+		});
+
+		it('should skip Fragment node with multiple children #2', () => {
+			let html = render(
+				<div>
+					<Fragment>
+						<div>foo</div>
+						<div>bar</div>
+					</Fragment>
+				</div>
+			);
+			expect(html).to.equal('<div><div>foo</div><div>bar</div></div>');
+		});
+
+		it('should skip Fragment even if it has props', () => {
+			let html = render(
+				<div>
+					<Fragment key="2">foo</Fragment>
+				</div>
+			);
+			expect(html).to.equal('<div>foo</div>');
+		});
+
+		it('should skip sibling Fragments', () => {
+			let html = render(
+				<div>
+					<Fragment>foo</Fragment>
+					<Fragment>bar</Fragment>
+				</div>
+			);
+			expect(html).to.equal('<div>foobar</div>');
+		});
+
+		it('should skip nested Fragments', () => {
+			let html = render(
+				<div>
+					<Fragment>
+						<Fragment>foo</Fragment>
+					</Fragment>
+				</div>
+			);
+			expect(html).to.equal('<div>foo</div>');
+		});
+	});
+
 	describe('hooks', () => {
 		it('should not crash with hooks', () => {
 			function Foo() {

test/shallowRender.js

@@ -1,5 +1,5 @@
 import { shallowRender } from '../src';
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import chai, { expect } from 'chai';
 import { spy } from 'sinon';
 import sinonChai from 'sinon-chai';
@@ -33,4 +33,13 @@ describe('shallowRender()', () => {
 		expect(rendered).to.equal(`<div bar="1"><b>test child</b><span>asdf</span></div>`);
 		expect(Test).to.have.been.calledOnce;
 	});
+
+	it('should ignore Fragments', () => {
+		let rendered = shallowRender(
+			<Fragment>
+				<div>foo</div>
+			</Fragment>
+		);
+		expect(rendered).to.equal(`<div>foo</div>`);
+	});
 });