Merge pull request #10 from remarkablemark/html-to-dom-client

remarkablemark · web-flow · commit becc168a04e0 · 2016-08-24T18:50:09.000-04:00
Fix HTML to DOM client parser
diff --git a/index.js b/index.js
@@ -51,6 +51,9 @@
      * @return {ReactElement|Array}
      */
     function HTMLReactParser(html, options) {
+        if (typeof html !== 'string') {
+            throw new Error('`HTMLReactParser`: The first argument must be a string.');
+        }
         return domToReact(htmlToDOM(html), options);
     }
 
diff --git a/lib/html-to-dom-client.js b/lib/html-to-dom-client.js
@@ -102,22 +102,45 @@ function formatDOM(nodes, parentNode) {
  * @return {Object}      - The DOM nodes.
  */
 function htmlToDOMClient(html) {
-    var root;
+    var match = typeof html === 'string' ? html.match(/<(.+?)>/) : null;
+    var tagName;
+    var parentNode;
+    var nodes;
+
+    if (match && typeof match[1] === 'string') {
+        tagName = match[1].toLowerCase();
+    }
 
     // `DOMParser` can parse full HTML
     // https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
-    if (window.DOMParser) {
+    if (tagName && window.DOMParser) {
         var parser = new window.DOMParser();
-        root = parser.parseFromString(html, 'text/html');
+        var doc = parser.parseFromString(html, 'text/html');
+
+        // <head> and <body> are siblings
+        if (tagName === 'head' || tagName === 'body') {
+            nodes = doc.getElementsByTagName(tagName);
+
+        // document's child nodes
+        } else if (tagName === 'html') {
+            nodes = doc.childNodes;
+
+        // get the element's parent's child nodes
+        // do this in case of adjacent elements
+        } else {
+            parentNode = doc.getElementsByTagName(tagName)[0].parentNode;
+            nodes = parentNode.childNodes;
+        }
 
     // otherwise, use `innerHTML`
     // but this will strip out tags like <html> and <body>
     } else {
-        root = document.createElement('div');
-        root.innerHTML = html;
+        parentNode = document.createElement('div');
+        parentNode.innerHTML = html;
+        nodes = parentNode.childNodes;
     }
 
-    return formatDOM(root.childNodes);
+    return formatDOM(nodes);
 }
 
 /**
diff --git a/test/html-to-react.js b/test/html-to-react.js
@@ -29,6 +29,18 @@ describe('html-to-react', function() {
      */
     describe('parser', function() {
 
+        it('throws an error if first argument is not a string', function() {
+            assert.throws(function() { Parser(); });
+
+            [undefined, null, {}, [], 42].forEach(function(arg) {
+                assert.throws(function() { Parser(arg); });
+            });
+        });
+
+        it('returns string if cannot be parsed to HTML', function() {
+            assert.equal(Parser('foo'), 'foo');
+        });
+
         it('converts single HTML element to React', function() {
             var html = data.html.single;
             var reactElement = Parser(html);

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,9 @@`
`51`	`51`	`* @return {ReactElement\|Array}`
`52`	`52`	`*/`
`53`	`53`	`function HTMLReactParser(html, options) {`
	`54`	`+ if (typeof html !== 'string') {`
	`55`	+ throw new Error('`HTMLReactParser`: The first argument must be a string.');
	`56`	`+ }`
`54`	`57`	`return domToReact(htmlToDOM(html), options);`
`55`	`58`	`}`
`56`	`59`