Hyphenate camelCased Preact props

As HTML attributes are not case sensitive and `setAttribute` converts
camel case attributes to lower case we should use hyphens instead for
compound words. However Preact/React convention is to use camel case
for props.

This converts hyphenated WC attributes to camel cased prop names.

Author: tyom

src/index.js

@@ -45,7 +45,12 @@ function toVdom(element, nodeName) {
 		i = 0,
 		a = element.attributes,
 		cn = element.childNodes;
-	for (i = a.length; i--; ) props[a[i].name] = a[i].value;
+	for (i = a.length; i--; ) {
+	  var propName = a[i].name.replace(/-(\w)/, function(_, c) {
+	    return c ? c.toUpperCase() : ''
+	  });
+	  props[propName] = a[i].value;
+  }
 	for (i = cn.length; i--; ) children[i] = toVdom(cn[i]);
 	return h(nodeName || element.nodeName.toLowerCase(), props, children);
 }

src/index.test.js

@@ -2,30 +2,28 @@ import assert from 'assert';
 import { h } from 'preact';
 import registerElement from './index';
 
-function Clock ({ time }) {
-	return <span>{time}</span>;
-}
-
-registerElement(Clock, 'x-clock', ['time']);
+registerElement(Clock, 'x-clock', ['time', 'custom-date']);
 
 it('renders ok, updates on attr change', () => {
 	const root = document.createElement('div');
 	const el = document.createElement('x-clock');
 	el.setAttribute('time', '10:28:57 PM');
+	el.setAttribute('custom-date', '11/11/2011');
 
 	root.appendChild(el);
 	document.body.appendChild(root);
 
 	assert.equal(
 		root.innerHTML,
-		'<x-clock time="10:28:57 PM"><span>10:28:57 PM</span></x-clock>'
+		'<x-clock time="10:28:57 PM" custom-date="11/11/2011"><span>10:28:57 PM, 11/11/2011</span></x-clock>'
 	);
 
 	el.setAttribute('time', '11:01:10 AM');
+	el.setAttribute('custom-date', '01/01/2001');
 
 	assert.equal(
 		root.innerHTML,
-		'<x-clock time="11:01:10 AM"><span>11:01:10 AM</span></x-clock>'
+		'<x-clock time="11:01:10 AM" custom-date="01/01/2001"><span>11:01:10 AM, 01/01/2001</span></x-clock>'
 	);
 
 	document.body.removeChild(root);