Add option to preserve whitespace for certain elements

Add an option to preserve whitespace/indentation for certain elements. Defaults to `['pre']`

Signed-off-by: Sven Tschui <[email protected]>

Author: sventschui

src/index.js

@@ -20,6 +20,7 @@ const noop = () => {};
  *	@param {Boolean} [options.shallow=false]	If `true`, renders nested Components as HTML elements (`<Foo a="b" />`).
  *	@param {Boolean} [options.xml=false]		If `true`, uses self-closing tags for elements without children.
  *	@param {Boolean} [options.pretty=false]		If `true`, adds whitespace for readability
+ *	@param {Boolean} [options.preserveWhitespace=['pre']]		Array of HTML tags for which to preserve indentation.
  */
 renderToString.render = renderToString;
 
@@ -51,7 +52,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 	context = context || {};
 	opts = opts || {};
 
-	let pretty = opts.pretty,
+	let pretty = (opts.preserveWhitespace || ['pre']).indexOf(nodeName) === -1 && opts.pretty,
 		indentChar = pretty && typeof pretty==='string' ? pretty : '\t';
 
 	// #text nodes
@@ -73,7 +74,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 			for (let i = 0; i < children.length; i++) {
 				rendered += (i > 0 && pretty ? '\n' : '') + renderToString(children[i], context, opts, opts.shallowHighOrder!==false, isSvgMode, selectValue);
 			}
-			return rendered;
+			return indent(rendered, indentChar);
 		}
 		else {
 			let rendered;
@@ -269,7 +270,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 		}
 		if (pretty && hasLarge) {
 			for (let i=pieces.length; i--; ) {
-				pieces[i] = '\n' + indentChar + indent(pieces[i], indentChar);
+				pieces[i] = '\n' + indentChar + pieces[i];
 			}
 		}
 	}

test/pretty.js

@@ -21,6 +21,19 @@ describe('pretty', () => {
 		expect(rendered).to.equal(`<section><a href="/foo">foo</a>bar<p>hello</p></section>`);
 	});
 
+	it('should preserve indentation of pre content', () => {
+		let rendered = prettyRender(
+			<div>
+				<pre dangerouslySetInnerHTML={{ __html: 'foo\nbar' }} />
+			</div>
+		);
+
+		expect(rendered).to.equal(`<div>
+	<pre>foo
+bar</pre>
+</div>`);
+	});
+
 	it('should render whitespace when pretty=true', () => {
 		let rendered = prettyRender(
 			<section>

test/render.js

@@ -712,6 +712,17 @@ describe('render', () => {
 			expect(html).to.equal('<div>\n\t<div>foo</div>\n\t<div>bar</div>\n\t<div>\n\t\t<div>baz</div>\n\t\t<div>quux</div>\n\t</div>\n</div>');
 		});
 
+		it('should preserve indentation of pre content', () => {
+			let rendered = render(
+				<div>
+					<pre dangerouslySetInnerHTML={{ __html: 'foo\nbar' }} />
+				</div>
+			);
+	
+			expect(rendered).to.equal(`<div><pre>foo
+bar</pre></div>`);
+		});
+
 		it('should skip Fragment even if it has props', () => {
 			let html = render(
 				<div>