Add support for deprecated camelCase'd SVG props. Fixes #222.

preactjs · Oct 5, 2016 · e0bc12c · billneff79 · Oct 6, 2016 · developit
1 parent 7402873
commit e0bc12c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/index.js b/src/index.js
@@ -22,6 +22,9 @@ const AUTOBIND_BLACKLIST = {
 };
 
 
+const CAMEL_PROPS = /^(accent|alignment|arabic|baseline|cap|clip|color|fill|flood|font|glyph|horiz|marker|overline|paint|stop|strikethrough|stroke|text|underline|unicode|units|v|vert|word|writing|x)[A-Z]/g;
+
+
 const BYPASS_HOOK = {};
 
 /*global process*/
@@ -96,6 +99,15 @@ function handleVNode(vnode) {
 
 		if (vnode.children) a.children = vnode.children;
 	}
+	else if (a) {
+		for (let i in a) {
+			if (a.hasOwnProperty(i) && i.match(CAMEL_PROPS)) {
+				a[i.replace(/([A-Z0-9])/g, '-$1').toLowerCase()] = a[i];
+				delete a[i];
+			}
+		}
+	}
+}
 
 
 

diff --git a/test/svg.js b/test/svg.js
@@ -39,4 +39,14 @@ describe('svg', () => {
 
 		expect(scratch.innerHTML).to.equal('<svg viewBox="0 0 360 360"><path stroke="white" fill="black" d="M347.1 357.9L183.3 256.5 13 357.9V1.7h334.1v356.2zM58.5 47.2v231.4l124.8-74.1 118.3 72.8V47.2H58.5z"></path></svg>');
 	});
+
+	it('should render SVG to DOM', () => {
+		React.render((
+			<svg viewBox="0 0 100 100">
+				<text textAnchor="mid">foo</text>
+			</svg>
+		), scratch);
+
+		expect(scratch.innerHTML).to.equal('<svg viewBox="0 0 100 100"><text text-anchor="mid">foo</text></svg>');
+	});
 });