Merge pull request #52 from phawxby/master

remarkablemark · web-flow · commit 05750239f9b2 · 2018-05-12T22:31:00.000-04:00
Some SVG attributes aren't correctly handled, for example viewBox
diff --git a/index.js b/index.js
@@ -7,7 +7,7 @@ var domToReact = require('./lib/dom-to-react');
 var htmlToDOM = require('html-dom-parser');
 
 // decode HTML entities by default for `htmlparser2`
-var domParserOptions = { decodeEntities: true };
+var domParserOptions = { decodeEntities: true, lowerCaseAttributeNames: false };
 
 /**
  * Convert HTML string to React elements.
diff --git a/test/dom-to-react.js b/test/dom-to-react.js
@@ -128,4 +128,14 @@ describe('dom-to-react parser', function() {
         );
     });
 
+    
+    it('handles svg\'s with a viewBox', function() {
+        var html = mocks.svg.simple;
+        var reactElement = domToReact(htmlToDOM(html, { lowerCaseAttributeNames: false }));
+
+        assert.deepEqual(
+            reactElement,
+            React.createElement('svg', { viewBox: '0 0 512 512', id: 'foo' }, 'Inner')
+        );
+    });
 });
diff --git a/test/helpers/mocks.json b/test/helpers/mocks.json
@@ -14,6 +14,7 @@
     "doctype": "<!DOCTYPE html>"
   },
   "svg": {
+    "simple": "<svg viewBox=\"0 0 512 512\" id=\"foo\">Inner</svg>",
     "complex": "<svg height=\"400\" width=\"450\"><path id=\"lineAB\" d=\"M 100 350 l 150 -300\" stroke=\"red\" stroke-width=\"3\" fill=\"none\"></path><g stroke=\"black\" stroke-width=\"3\" fill=\"black\"><circle id=\"pointA\" cx=\"100\" cy=\"350\" r=\"3\"></circle></g><g font-size=\"30\" font-family=\"sans-serif\" fill=\"black\" stroke=\"none\" text-anchor=\"middle\"><text x=\"100\" y=\"350\" dx=\"-30\">A</text></g>Your browser does not support inline SVG.</svg>"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`"doctype": "<!DOCTYPE html>"`
`15`	`15`	`},`
`16`	`16`	`"svg": {`
	`17`	`+ "simple": "<svg viewBox=\"0 0 512 512\" id=\"foo\">Inner</svg>",`
`17`	`18`	`"complex": "<svg height=\"400\" width=\"450\"><path id=\"lineAB\" d=\"M 100 350 l 150 -300\" stroke=\"red\" stroke-width=\"3\" fill=\"none\"></path><g stroke=\"black\" stroke-width=\"3\" fill=\"black\"><circle id=\"pointA\" cx=\"100\" cy=\"350\" r=\"3\"></circle></g><g font-size=\"30\" font-family=\"sans-serif\" fill=\"black\" stroke=\"none\" text-anchor=\"middle\"><text x=\"100\" y=\"350\" dx=\"-30\">A</text></g>Your browser does not support inline SVG.</svg>"`
`18`	`19`	`}`
`19`	`20`	`}`