Join adjacent text nodes (#109)

* Join adjacent text nodes in pretty mode

* Refactor pretty printing of adjacent text nodes

Author: marvinhagemeister

src/index.js

@@ -200,13 +200,37 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	}
 	else if (props && getChildren(children = [], props.children).length) {
 		let hasLarge = pretty && ~s.indexOf('\n');
+		let lastWasText = false;
+
 		for (let i=0; i<children.length; i++) {
 			let child = children[i];
+
 			if (child!=null && child!==false) {
 				let childSvgMode = nodeName==='svg' ? true : nodeName==='foreignObject' ? false : isSvgMode,
 					ret = renderToString(child, context, opts, true, childSvgMode, selectValue);
+
 				if (pretty && !hasLarge && isLargeString(ret)) hasLarge = true;
-				if (ret) pieces.push(ret);
+
+				// Skip if we received an empty string
+				if (ret) {
+					if (pretty) {
+						let isText = ret.length > 0 && ret[0]!='<';
+						
+						// We merge adjacent text nodes, otherwise each piece would be printed
+						// on a new line.
+						if (lastWasText && isText) {
+							pieces[pieces.length -1] += ret;
+						}
+						else {
+							pieces.push(ret);
+						}
+
+						lastWasText = isText;
+					}
+					else {
+						pieces.push(ret);
+					}
+				}
 			}
 		}
 		if (pretty && hasLarge) {

test/jsx.js

@@ -5,7 +5,7 @@ import sinonChai from 'sinon-chai';
 chai.use(sinonChai);
 
 // tag to remove leading whitespace from tagged template literal
-function dedent([str]) {
+export function dedent([str]) {
 	return str.split( '\n'+str.match(/^\n*(\s+)/)[1] ).join('\n').replace(/(^\n+|\n+\s*$)/g, '');
 }
 

test/pretty.js

@@ -3,6 +3,7 @@ import { render } from '../src/jsx';
 import { h, Fragment } from 'preact';
 import chai, { expect } from 'chai';
 import sinonChai from 'sinon-chai';
+import { dedent } from './jsx';
 chai.use(sinonChai);
 
 describe('pretty', () => {
@@ -96,4 +97,91 @@ describe('pretty', () => {
 			</div>
 		)).to.equal(`<div>\n\t<div>A</div>\n\t<div>B</div>\n</div>`);
 	});
+
+	it('should join adjacent text nodes', () => {
+		expect(prettyRender(
+			<div>hello{' '} <b /></div>
+		)).to.equal(dedent`
+			<div>
+				hello  
+				<b></b>
+			</div>
+		`);
+
+		expect(prettyRender(
+			<div>hello{' '} <b />{'a'}{'b'}</div>
+		)).to.equal(dedent`
+			<div>
+				hello  
+				<b></b>
+				ab
+			</div>
+		`);
+	});
+
+	it('should join adjacent text nodeswith Fragments', () => {
+		expect(prettyRender(
+			<div><Fragment>foo</Fragment>bar{' '} <b /></div>
+		)).to.equal(dedent`
+			<div>
+				foobar  
+				<b></b>
+			</div>
+		`);
+	});
+
+	it('should collapse whitespace', () => {
+		expect(prettyRender(
+			<p>a<a>b</a></p>
+		)).to.equal(dedent`
+			<p>
+				a
+				<a>b</a>
+			</p>
+		`);
+
+		expect(prettyRender(
+			<p>
+				a{' '}
+				<a>b</a>
+			</p>
+		)).to.equal(dedent`
+			<p>
+				a 
+				<a>b</a>
+			</p>
+		`);
+
+		expect(prettyRender(
+			<p>
+				a{''}
+				<a>b</a>
+			</p>
+		)).to.equal(dedent`
+			<p>
+				a
+				<a>b</a>
+			</p>
+		`);
+
+		expect(prettyRender(
+			<p>a <a>b</a></p>
+		)).to.equal(dedent`
+			<p>
+				a\ 
+				<a>b</a>
+			</p>
+		`);
+
+		expect(prettyRender(<a> b </a>)).to.equal(dedent`
+			<a> b </a>
+		`);
+
+		expect(prettyRender(<p><b /> a </p>)).to.equal(dedent`
+			<p>
+				<b></b>
+				\ a\ 
+			</p>
+		`);
+	});
 });