Decamelize html attributes

Author: gpoitch

src/index.js

@@ -17,6 +17,9 @@ const UNNAMED = [];
 
 const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
 
+const DASHED_ATTRS = /^(acceptC|httpE)/;
+const CAMEL_ATTRS = /^(viewB)/;
+
 const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 
 const noop = () => {};
@@ -250,9 +253,13 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 				name = 'class';
 			} else if (isSvgMode && name.match(/^xlink:?./)) {
 				name = name.toLowerCase().replace(/^xlink:?/, 'xlink:');
+			} else if (DASHED_ATTRS.test(name)) {
+				name = name.replace(/([A-Z])/g, (l) => '-' + l.toLowerCase());
+			} else if (!CAMEL_ATTRS.test(name)) {
+				name = name.toLowerCase();
 			}
 
-			if (name === 'htmlFor') {
+			if (name === 'htmlfor') {
 				if (props.for) continue;
 				name = 'for';
 			}
@@ -275,7 +282,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 				continue;
 			}
 
-			if (name === 'dangerouslySetInnerHTML') {
+			if (name === 'dangerouslysetinnerhtml') {
 				html = v && v.__html;
 			} else if (nodeName === 'textarea' && name === 'value') {
 				// <textarea value="a&b"> --> <textarea>a&amp;b</textarea>

test/jsx.test.js

@@ -74,6 +74,16 @@ describe('jsx', () => {
 		`);
 	});
 
+	it('should decamelize attributes', () => {
+		expect(renderJsx(<img srcSet="foo.png, foo2.png 2x" />)).to.equal(
+			`<img srcset="foo.png, foo2.png 2x" />`
+		);
+	});
+
+	it('should dasherize certain attributes', () => {
+		expect(renderJsx(<meta httpEquiv="" />)).to.equal(`<meta http-equiv="" />`);
+	});
+
 	it('should skip null and undefined attributes', () => {
 		expect(renderJsx(<a b={null}>bar</a>)).to.equal(`<a>bar</a>`);
 
@@ -151,11 +161,11 @@ describe('jsx', () => {
 	it('should skip function names if functionNames=false', () => {
 		expect(
 			renderJsx(<div onClick={() => {}} />, { functionNames: false })
-		).to.equal('<div onClick={Function}></div>');
+		).to.equal('<div onclick={Function}></div>');
 
 		expect(
 			renderJsx(<div onClick={function foo() {}} />, { functionNames: false })
-		).to.equal('<div onClick={Function}></div>');
+		).to.equal('<div onclick={Function}></div>');
 	});
 
 	it('should render self-closing elements', () => {

test/render.test.js

@@ -265,7 +265,7 @@ describe('render', () => {
 
 		it('should render SVG elements', () => {
 			let rendered = render(
-				<svg>
+				<svg viewBox="0 0 100 100">
 					<image xlinkHref="#" />
 					<foreignObject>
 						<div xlinkHref="#" />
@@ -277,7 +277,7 @@ describe('render', () => {
 			);
 
 			expect(rendered).to.equal(
-				`<svg><image xlink:href="#"></image><foreignObject><div xlinkHref="#"></div></foreignObject><g><image xlink:href="#"></image></g></svg>`
+				`<svg viewBox="0 0 100 100"><image xlink:href="#"></image><foreignObject><div xlinkhref="#"></div></foreignObject><g><image xlink:href="#"></image></g></svg>`
 			);
 		});
 	});