Fix JSX rendering being non-deterministic about empty VNodes

Author: developit

src/index.js

@@ -57,6 +57,10 @@ export default function renderToString(vnode, context, opts, inner) {
 	let pretty = opts.pretty,
 		indentChar = typeof pretty==='string' ? pretty : '\t';
 
+	if (vnode==null) {
+		return '<!---->';
+	}
+
 	// #text nodes
 	if (!nodeName) {
 		return encodeEntities(vnode);
@@ -153,31 +157,31 @@ export default function renderToString(vnode, context, opts, inner) {
 		s += html;
 	}
 	else {
-		let len = children && children.length;
-		if (len) {
-			let pieces = [],
-				hasLarge = ~s.indexOf('\n');
-			for (let i=0; i<len; i++) {
-				let child = children[i];
-				if (!falsey(child)) {
-					let ret = renderToString(child, context, opts, true);
-					if (!hasLarge && pretty && isLargeString(ret)) hasLarge = true;
-					pieces.push(ret);
-				}
+		let len = children && children.length,
+			pieces = [],
+			hasLarge = ~s.indexOf('\n');
+		for (let i=0; i<len; i++) {
+			let child = children[i];
+			if (!falsey(child)) {
+				let ret = renderToString(child, context, opts, true);
+				if (!hasLarge && pretty && isLargeString(ret)) hasLarge = true;
+				pieces.push(ret);
 			}
-			if (hasLarge) {
-				for (let i=pieces.length; i--; ) {
-					pieces[i] = '\n' + indentChar + indent(pieces[i], indentChar);
-				}
+		}
+		if (hasLarge) {
+			for (let i=pieces.length; i--; ) {
+				pieces[i] = '\n' + indentChar + indent(pieces[i], indentChar);
 			}
+		}
+		if (pieces.length) {
 			s += pieces.join('');
 		}
 		else if (opts && opts.xml) {
 			return s.substring(0, s.length-1) + ' />';
 		}
 	}
 
-	if (VOID_ELEMENTS.indexOf(nodeName) === -1) {
+	if (opts.jsx || VOID_ELEMENTS.indexOf(nodeName)===-1) {
 		if (pretty && ~s.indexOf('\n')) s += '\n';
 		s += `</${nodeName}>`;
 	}

test/jsx.js

@@ -105,4 +105,23 @@ describe('jsx', () => {
 			</a>
 		`);
 	});
+
+	it('should render empty resolved children identically to no children', () => {
+		const Empty = () => null;
+		expect(renderJsx(
+			<div>
+				<a />
+				<b>{null}</b>
+				<c><Empty /></c>
+			</div>
+		)).to.equal(dedent`
+			<div>
+				<a />
+				<b />
+				<c>
+					<!---->
+				</c>
+			</div>
+		`);
+	});
 });