Transform attribute names to proper casing

src/index.js

@@ -17,6 +17,12 @@ const UNNAMED = [];
 
 const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
 
+const DASHED_ATTRS = /^(acceptC|httpE|(clip|color|fill|font|glyph|marker|stop|stroke|text|vert)[A-Z])/;
+const CAMEL_ATTRS = /^(isP|viewB)/;
+const COLON_ATTRS = /^(xlink|xml|xmlns)[A-Z]/;
+
+const CAPITAL_REGEXP = /([A-Z])/g;
+
 const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 
 const noop = () => {};
@@ -281,6 +287,8 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 				// <textarea value="a&b"> --> <textarea>a&amp;b</textarea>
 				propChildren = v;
 			} else if ((v || v === 0 || v === '') && typeof v !== 'function') {
+				name = getAttributeNameInHtmlCase(name);
+
 				if (v === true || v === '') {
 					v = name;
 					// in non-xml mode, allow boolean attributes
@@ -298,6 +306,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 						s += ` selected`;
 					}
 				}
+
 				s += ` ${name}="${encodeEntities(v)}"`;
 			}
 		}
@@ -426,6 +435,19 @@ function getFallbackComponentName(component) {
 	}
 	return name;
 }
+
+function getAttributeNameInHtmlCase(name) {
+	if (CAMEL_ATTRS.test(name)) return name;
+
+	if (DASHED_ATTRS.test(name))
+		return name.replace(CAPITAL_REGEXP, (w) => '-' + w.toLowerCase());
+
+	if (COLON_ATTRS.test(name))
+		return name.replace(CAPITAL_REGEXP, (w) => ':' + w.toLowerCase());
+
+	return name.toLowerCase();
+}
+
 renderToString.shallowRender = shallowRender;
 
 export default renderToString;

test/render.test.js

@@ -89,6 +89,38 @@ describe('render', () => {
 			expect(rendered).to.equal(expected);
 		});
 
+		it('should decamelize attributes', () => {
+			let rendered = render(<img srcSet="foo.png, foo2.png 2x" />),
+				expected = `<img srcset="foo.png, foo2.png 2x" />`;
+
+			expect(rendered).to.equal(expected);
+		});
+
+		it('should decamelize bool attributes', () => {
+			let rendered = render(
+					<link rel="preconnect" href="https://foo.com" crossOrigin />
+				),
+				expected = `<link rel="preconnect" href="https://foo.com" crossorigin />`;
+
+			expect(rendered).to.equal(expected);
+		});
+
+		it('should dasherize certain attributes', () => {
+			let rendered = render(<meta httpEquiv="refresh" />),
+				expected = `<meta http-equiv="refresh" />`;
+
+			expect(rendered).to.equal(expected);
+		});
+
+		it('should colonize/dasherize certain attributes & leave certain attributes camelized', () => {
+			let rendered = render(
+					<svg xmlSpace="preserve" viewBox="0 0 10 10" fillRule="nonzero" />
+				),
+				expected = `<svg xml:space="preserve" viewBox="0 0 10 10" fill-rule="nonzero"></svg>`;
+
+			expect(rendered).to.equal(expected);
+		});
+
 		it('should include boolean aria-* attributes', () => {
 			let rendered = render(<div aria-hidden aria-whatever={false} />),
 				expected = `<div aria-hidden="true" aria-whatever="false"></div>`;
@@ -265,7 +297,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 +309,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 xlink:href="#"></div></foreignObject><g><image xlink:href="#"></image></g></svg>`
 			);
 		});
 	});