Update to preact 6.1 and fix class/className massaging, fix class being left as an Object due to changes in Preact 6.1.

Author: developit

package.json

@@ -46,7 +46,7 @@
     "chai": "^3.5.0",
     "eslint": "^3.2.2",
     "mocha": "^3.0.0",
-    "preact": "^5.5.0",
+    "preact": "^6.1.0",
     "rollup": "^0.34.3",
     "rollup-plugin-babel": "^2.6.1",
     "rollup-plugin-commonjs": "^3.3.1",

src/index.js

@@ -1,4 +1,4 @@
-import { objectKeys, encodeEntities, falsey, memoize, indent, isLargeString, styleObjToCss, assign, getNodeProps } from './util';
+import { objectKeys, encodeEntities, falsey, memoize, indent, isLargeString, styleObjToCss, hashToClassName, assign, getNodeProps } from './util';
 
 const SHALLOW = { shallow: true };
 
@@ -123,7 +123,11 @@ export default function renderToString(vnode, context, opts, inner) {
 				if (attributes['class']) continue;
 				name = 'class';
 			}
-			if (name==='style' && v && typeof v==='object') {
+
+			if (name==='class' && v && typeof v==='object') {
+				v = hashToClassName(v);
+			}
+			else if (name==='style' && v && typeof v==='object') {
 				v = styleObjToCss(v);
 			}
 

src/util.js

@@ -30,6 +30,7 @@ export let indent = (s, char) => String(s).replace(/(\n+)/g, '$1' + (char || '\t
 
 export let isLargeString = (s, length, ignoreLines) => (String(s).length>(length || 40) || (!ignoreLines && String(s).indexOf('\n')!==-1) || String(s).indexOf('<')!==-1);
 
+// Convert an Object style to a CSSText string
 export function styleObjToCss(s) {
 	let str = '';
 	for (let prop in s) {
@@ -48,6 +49,19 @@ export function styleObjToCss(s) {
 	return str;
 }
 
+
+// See https://github.com/developit/preact/blob/master/src/util.js#L61
+export function hashToClassName(c) {
+	let str = '';
+	for (let prop in c) {
+		if (c[prop]) {
+			if (str) str += ' ';
+			str += prop;
+		}
+	}
+	return str;
+}
+
 // Convert a JavaScript camel-case CSS property name to a CSS property name
 export let jsToCss = memoize( s => s.replace(/([A-Z])/g,'-$1').toLowerCase() );
 

test/render.js

@@ -401,9 +401,17 @@ describe('render', () => {
 			expect(rendered).to.equal('<div class="foo bar"></div>');
 		});
 
-		it('should prefer className over class', () => {
+		it('should prefer class over className', () => {
 			let rendered = render(<div class="foo" className="foo bar" />);
-			expect(rendered).to.equal('<div class="foo bar"></div>');
+			expect(rendered).to.equal('<div class="foo"></div>');
+		});
+
+		it('should stringify object classNames', () => {
+			let rendered = render(<div class={{ foo:1, bar:0, baz:true, buzz:false }} />);
+			expect(rendered, 'class').to.equal('<div class="foo baz"></div>');
+
+			rendered = render(<div className={{ foo:1, bar:0, baz:true, buzz:false }} />);
+			expect(rendered, 'className').to.equal('<div class="foo baz"></div>');
 		});
 	});