Add pretty-format for handling complex JSX attribute values beautifully

Author: developit

package.json

@@ -50,5 +50,8 @@
     "rollup-plugin-memory": "^1.0.0",
     "sinon": "^1.17.1",
     "sinon-chai": "^2.8.0"
+  },
+  "dependencies": {
+    "pretty-format": "^3.5.0"
   }
 }

src/index.js

@@ -1,3 +1,4 @@
+import prettyFormat from 'pretty-format';
 
 const SHALLOW = { shallow: true };
 
@@ -53,7 +54,7 @@ let memoize = (fn, mem={}) => v => mem[v] || (mem[v] = fn(v));
 
 let indent = (s, char) => String(s).replace(/(\n+)/g, '$1' + (char || '\t'));
 
-let isLargeString = s => (String(s).length>40 || String(s).indexOf('\n')!==-1 || String(s).indexOf('<')!==-1);
+let isLargeString = (s, length, ignoreLines) => (String(s).length>(length || 40) || (!ignoreLines && String(s).indexOf('\n')!==-1) || String(s).indexOf('<')!==-1);
 
 function styleObjToCss(s) {
 	let str = '';
@@ -89,6 +90,27 @@ function getNodeProps(vnode) {
 	return props;
 }
 
+// we have to patch in Array support, Possible issue in npm.im/pretty-format
+let preactPlugin = {
+	test(object) {
+		if (Array.isArray(object)) {
+			return preactPlugin.test(object[0]);
+		}
+		// return object && Object.prototype.toString.call(object)==='[object VNode]';
+		return object && typeof object==='object' && 'nodeName' in object && 'attributes' in object && 'children' in object;
+	},
+	print(val, print, indent) {
+		if (Array.isArray(val)) {
+			return 'Array [\n  ' + val.map( v => preactPlugin.test(v) ? renderToString(v, preactPlugin.context, preactPlugin.opts, true) : v ).join(',\n  ') + '\n]';
+		}
+		return renderToString(val, preactPlugin.context, preactPlugin.opts, true);
+	}
+};
+
+let prettyFormatOpts = {
+	plugins: [preactPlugin]
+};
+
 /** Render Preact JSX + Components to an HTML string.
  *	@name render
  *	@function
@@ -165,8 +187,7 @@ export default function renderToString(vnode, context, opts, inner) {
 	}
 
 	// render JSX to HTML
-	let s = `<${nodeName}`,
-		html;
+	let s = '', html;
 
 	if (attributes) {
 		let attrs = objectKeys(attributes);
@@ -179,13 +200,31 @@ export default function renderToString(vnode, context, opts, inner) {
 				v = attributes[name];
 			if (name==='children') continue;
 			if (!(opts && opts.allAttributes) && (name==='key' || name==='ref')) continue;
+
+			if (opts.jsx) {
+				if (typeof v!=='string') {
+					preactPlugin.context = context;
+					preactPlugin.opts = opts;
+					v = prettyFormat(v, prettyFormatOpts);
+					if (~v.indexOf('\n')) {
+						v = `${indent('\n'+v, indentChar)}\n`;
+					}
+					s += indent(`\n${name}={${v}}`, indentChar);
+				}
+				else {
+					s += `\n${indentChar}${name}="${encodeEntities(v)}"`;
+				}
+				continue;
+			}
+
 			if (name==='className') {
 				if (attributes['class']) continue;
 				name = 'class';
 			}
 			if (name==='style' && v && typeof v==='object') {
 				v = styleObjToCss(v);
 			}
+
 			if (name==='dangerouslySetInnerHTML') {
 				html = v && v.__html;
 			}
@@ -203,7 +242,25 @@ export default function renderToString(vnode, context, opts, inner) {
 		}
 	}
 
-	s += '>';
+	// account for >1 multiline attribute
+	let sub = s.replace(/^\n\s*/, ' ');
+	if (sub!==s && !~sub.indexOf('\n')) s = sub;
+	else if (~s.indexOf('\n')) s += '\n';
+	// s += '>';
+
+	s = `<${nodeName}${s}>`;
+
+	// if (opts && opts.jsx) {
+	// 	if (isLargeString(s, 80, true) || s.split('\n').length>3) {
+	// 		s = `<${nodeName}${s}\n>`;
+	// 	}
+	// 	else {
+	// 		s = `<${nodeName}${s}\n>`;
+	// 	}
+	// }
+	// else {
+	// 	s = `<${nodeName}${s}>`;
+	// }
 
 	if (html) {
 		// if multiline, indent.
@@ -216,7 +273,7 @@ export default function renderToString(vnode, context, opts, inner) {
 		let len = children && children.length;
 		if (len) {
 			let pieces = [],
-				hasLarge = false;
+				hasLarge = ~s.indexOf('\n');
 			for (let i=0; i<len; i++) {
 				let child = children[i];
 				if (!falsey(child)) {

test/jsx.js

@@ -0,0 +1,100 @@
+import { render, shallowRender } from '../src';
+import { h, Component } from 'preact';
+import chai, { expect } from 'chai';
+import { spy, match } from 'sinon';
+import sinonChai from 'sinon-chai';
+chai.use(sinonChai);
+
+// remove leading whitespace from tagged template literal
+// let dedent = ([str]) => str.replace(/^\n+/g,'').split( '\n'+str.match(/^\n+?(\s+)/)[1] ).join('\n');
+function dedent([str]) {
+	// str = str.replace(/^\n+/g,'\n');
+	return str.split( '\n'+str.match(/^\n*(\s+)/)[1] ).join('\n').replace(/(^\n+|\n+\s*$)/g, '');
+}
+
+describe('jsx', () => {
+	let renderJsx = jsx => render(jsx, {}, { jsx:true, xml:true, pretty:'  ' }).replace(/ {2}/g, '\t');
+
+	it('should render as JSX', () => {
+		let rendered = renderJsx(
+			<section>
+				<a href="/foo">foo</a>
+				bar
+				<p>hello</p>
+			</section>
+		);
+
+		expect(rendered).to.equal(dedent`
+			<section>
+				<a href="/foo">foo</a>
+				bar
+				<p>hello</p>
+			</section>
+		`);
+	});
+
+	it('should render JSX attributes inline if short enough', () => {
+		expect(renderJsx(
+			<a b="c">bar</a>
+		)).to.equal(dedent`
+			<a b="c">bar</a>
+		`);
+
+		expect(renderJsx(
+			<a b>bar</a>
+		)).to.equal(dedent`
+			<a b={true}>bar</a>
+		`);
+
+		expect(renderJsx(
+			<a b={false}>bar</a>
+		)).to.equal(dedent`
+			<a b={false}>bar</a>
+		`);
+	});
+
+	it('should render JSX attributes as multiline if complex', () => {
+		expect(renderJsx(
+			<a b={['a','b','c','d']}>bar</a>
+		)).to.equal(dedent`
+			<a
+				b={
+					Array [
+						"a",
+						"b",
+						"c",
+						"d"
+					]
+				}
+			>
+				bar
+			</a>
+		`);
+	});
+
+	it('should render attributes containing VNodes', () => {
+		expect(renderJsx(
+			<a b={<c />}>bar</a>
+		)).to.equal(dedent`
+			<a b={<c />}>bar</a>
+		`);
+
+		expect(renderJsx(
+			<a b={[
+				<c />,
+				<d f="g" />
+			]}>bar</a>
+		)).to.equal(dedent`
+			<a
+				b={
+					Array [
+						<c />,
+						<d f="g" />
+					]
+				}
+			>
+				bar
+			</a>
+		`);
+	});
+});