Merge pull request #30 from preactjs/hyphenate-camelcased-props

src/index.js

@@ -25,10 +25,17 @@ function connectedCallback() {
 	(this.hasAttribute('hydrate') ? hydrate : render)(this._vdom, this._root);
 }
 
+function toCamelCase(str) {
+	return str.replace(/-(\w)/g, function(_, c) {
+		return c ? c.toUpperCase() : ''
+	});
+}
+
 function attributeChangedCallback(name, oldValue, newValue) {
 	if (!this._vdom) return;
 	const props = {};
 	props[name] = newValue;
+	props[toCamelCase(name)] = newValue;
 	this._vdom = cloneElement(this._vdom, props);
 	render(this._vdom, this._root);
 }
@@ -45,7 +52,10 @@ 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--; ) {
+	  props[a[i].name] = a[i].value;
+	  props[toCamelCase(a[i].name)] = 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

@@ -6,7 +6,7 @@ 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');
@@ -30,3 +30,35 @@ it('renders ok, updates on attr change', () => {
 
 	document.body.removeChild(root);
 });
+
+const kebabName = 'custom-date-long-name';
+const camelName = 'customDateLongName';
+const lowerName = camelName.toLowerCase();
+function PropNameTransform (props) {
+	return <span>{props[kebabName]} {props[lowerName]} {props[camelName]}</span>;
+}
+registerElement(PropNameTransform , 'x-prop-name-transform', [kebabName, camelName]);
+
+it('handles kebab-case attributes with passthrough', () => {
+	const root = document.createElement('div');
+	const el = document.createElement('x-prop-name-transform');
+	el.setAttribute(kebabName, '11/11/2011');
+	el.setAttribute(camelName, 'pretended to be camel');
+
+	root.appendChild(el);
+	document.body.appendChild(root);
+
+	assert.equal(
+		root.innerHTML,
+		`<x-prop-name-transform ${kebabName}="11/11/2011" ${lowerName}="pretended to be camel"><span>11/11/2011 pretended to be camel 11/11/2011</span></x-prop-name-transform>`
+	);
+
+	el.setAttribute(kebabName, '01/01/2001');
+
+	assert.equal(
+		root.innerHTML,
+		`<x-prop-name-transform ${kebabName}="01/01/2001" ${lowerName}="pretended to be camel"><span>01/01/2001 pretended to be camel 01/01/2001</span></x-prop-name-transform>`
+	);
+
+	document.body.removeChild(root);
+});