Merge pull request #432 from nwalters512/pretty-format-preserve-whitespace

Preserve whitespace for pre/textarea when pretty-printing

Author: rschristian

.changeset/rude-apes-taste.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Preserve whitespace in `<pre>`/`<textarea>` when using `pretty: true`

package-lock.json

@@ -24,6 +24,7 @@ const UNNAMED = [];
 
 const EMPTY_ARR = [];
 const EMPTY_STR = '';
+const PRESERVE_WHITESPACE_TAGS = new Set(['pre', 'textarea']);
 
 /**
  * Render Preact JSX + Components to a pretty-printed HTML-like string.
@@ -216,6 +217,11 @@ function _renderToStringPretty(
 		propChildren,
 		html;
 
+	const shouldPreserveWhitespace =
+		pretty &&
+		typeof nodeName === 'string' &&
+		PRESERVE_WHITESPACE_TAGS.has(nodeName);
+
 	if (props) {
 		let attrs = Object.keys(props);
 
@@ -349,15 +355,17 @@ function _renderToStringPretty(
 	let children;
 	if (html) {
 		// if multiline, indent.
-		if (pretty && isLargeString(html)) {
+		if (pretty && !shouldPreserveWhitespace && isLargeString(html)) {
 			html = '\n' + indentChar + indent(html, indentChar);
 		}
 		s = s + html;
 	} else if (
 		propChildren != null &&
 		getChildren((children = []), propChildren).length
 	) {
-		let hasLarge = pretty && ~s.indexOf('\n');
+		const shouldPrettyFormatChildren =
+			pretty && !shouldPreserveWhitespace && typeof nodeName === 'string';
+		let hasLarge = shouldPrettyFormatChildren && ~s.indexOf('\n');
 		let lastWasText = false;
 
 		for (let i = 0; i < children.length; i++) {
@@ -379,11 +387,12 @@ function _renderToStringPretty(
 						selectValue
 					);
 
-				if (pretty && !hasLarge && isLargeString(ret)) hasLarge = true;
+				if (shouldPrettyFormatChildren && !hasLarge && isLargeString(ret))
+					hasLarge = true;
 
 				// Skip if we received an empty string
 				if (ret) {
-					if (pretty) {
+					if (shouldPrettyFormatChildren) {
 						let isText = ret.length > 0 && ret[0] != '<';
 
 						// We merge adjacent text nodes, otherwise each piece would be printed
@@ -401,7 +410,7 @@ function _renderToStringPretty(
 				}
 			}
 		}
-		if (pretty && hasLarge) {
+		if (shouldPrettyFormatChildren && hasLarge) {
 			for (let i = pieces.length; i--; ) {
 				pieces[i] = '\n' + indentChar + indent(pieces[i], indentChar);
 			}
@@ -419,7 +428,7 @@ function _renderToStringPretty(
 	if (isVoid && !children && !html) {
 		s = s.replace(/>$/, ' />');
 	} else {
-		if (pretty && ~s.indexOf('\n')) s = s + '\n';
+		if (pretty && !shouldPreserveWhitespace && ~s.indexOf('\n')) s = s + '\n';
 		s = s + `</${nodeName}>`;
 	}
 

src/pretty.js

@@ -215,6 +215,25 @@ describe('pretty', () => {
 		);
 	});
 
+	it('should not add whitespace to pre tag children', () => {
+		let rendered = prettyRender(
+			<pre>
+				<code>hello</code>
+			</pre>,
+			{ jsx: false }
+		);
+
+		expect(rendered).to.equal(`<pre><code>hello</code></pre>`);
+	});
+
+	it('should maintain whitespace in textarea tag', () => {
+		let rendered = prettyRender(<textarea>{'  hello\nworld  '}</textarea>, {
+			jsx: false
+		});
+
+		expect(rendered).to.equal(`<textarea>  hello\nworld  </textarea>`);
+	});
+
 	describe('Attribute casing', () => {
 		it('should have correct SVG casing', () => {
 			for (let name in svgAttributes) {

test/pretty.test.jsx

@@ -243,6 +243,13 @@ describe('render', () => {
 			expect(rendered).to.equal(expected);
 		});
 
+		it('should serialize textarea value with leading/trailing whitespace', () => {
+			let rendered = render(<textarea value={`  a\nb  `} />),
+				expected = `<textarea>  a\nb  </textarea>`;
+
+			expect(rendered).to.equal(expected);
+		});
+
 		it('should escape textarea value', () => {
 			let rendered = render(<textarea value={`a&b"c`} />),
 				expected = `<textarea>a&amp;b&quot;c</textarea>`;