Add optional replace override to parser

Update `domToReact` and `htmlToReact` to have a second and optional
argument which is an object with a `replace` method.

The method will give the user access to the DOM node object and if
a valid React element is returned, then it will override the node.

Thus, the user can set the logic or condition in which a node is
replaced with a custom React element.

Add tests to check that the option works as expected.
Tidy up and organize HTML to React tests.

Author: remarkablemark

index.js

@@ -9,11 +9,13 @@ var domToReact = require('./lib/dom-to-react');
 /**
  * Convert HTML to React.
  *
- * @param  {String} html - The HTML.
+ * @param  {String}   html              - The HTML.
+ * @param  {Object}   [options]         - The additional options.
+ * @param  {Function} [options.replace] - The replace method.
  * @return {ReactElement|Array}
  */
-function htmlToReact(html) {
-    return domToReact(htmlToDOM(html));
+function htmlToReact(html, options) {
+    return domToReact(htmlToDOM(html), options);
 }
 
 /**

lib/dom-to-react.js

@@ -9,18 +9,33 @@ var attributesToProps = require('./attributes-to-props');
 /**
  * Convert DOM nodes to React elements.
  *
- * @param  {Array} nodes - The DOM nodes.
+ * @param  {Array}    nodes             - The DOM nodes.
+ * @param  {Object}   [options]         - The additional options.
+ * @param  {Function} [options.replace] - The replace method.
  * @return {ReactElement|Array}
  */
-function domToReact(nodes) {
+function domToReact(nodes, options) {
+    options = options || {};
     var result = [];
     var node;
+    var isReplacePresent = typeof options.replace === 'function';
+    var replacement;
     var props;
     var children;
 
     for (var i = 0, len = nodes.length; i < len; i++) {
         node = nodes[i];
 
+        // replace with custom React element (if applicable)
+        if (isReplacePresent) {
+            replacement = options.replace(node);
+
+            if (React.isValidElement(replacement)) {
+                result.push(replacement);
+                continue;
+            }
+        }
+
         if (node.type === 'text') {
             result.push(node.data);
             continue;

test/html-to-react.js

@@ -22,40 +22,94 @@ function render(reactElement) {
 /**
  * Tests for `htmlToReact`.
  */
-describe('html-to-react parser', function() {
+describe('html-to-react', function() {
 
-    it('converts single HTML element to React', function() {
-        var html = data.html.single;
-        var reactElement = Parser(html);
-        assert.equal(render(reactElement), html);
-    });
+    /**
+     * Parser conversion.
+     */
+    describe('parser', function() {
 
-    it('converts single HTML element and ignores comment', function() {
-        var html = data.html.single;
-        // comment should be ignored
-        var reactElement = Parser(html + data.html.comment);
-        assert.equal(render(reactElement), html);
-    });
+        it('converts single HTML element to React', function() {
+            var html = data.html.single;
+            var reactElement = Parser(html);
+            assert.equal(render(reactElement), html);
+        });
 
-    it('converts multiple HTML elements to React', function() {
-        var html = data.html.multiple;
-        var reactElements = Parser(html);
-        assert.equal(
-            render(React.createElement('div', {}, reactElements)),
-            '<div>' + html + '</div>'
-        );
-    });
+        it('converts single HTML element and ignores comment', function() {
+            var html = data.html.single;
+            // comment should be ignored
+            var reactElement = Parser(html + data.html.comment);
+            assert.equal(render(reactElement), html);
+        });
+
+        it('converts multiple HTML elements to React', function() {
+            var html = data.html.multiple;
+            var reactElements = Parser(html);
+            assert.equal(
+                render(React.createElement('div', {}, reactElements)),
+                '<div>' + html + '</div>'
+            );
+        });
+
+        it('converts complex HTML to React', function() {
+            var html = data.html.complex;
+            var reactElement = Parser(html);
+            assert.equal(render(reactElement), html);
+        });
+
+        it('converts SVG to React', function() {
+            var svg = data.svg.complex;
+            var reactElement = Parser(svg);
+            assert.equal(render(reactElement), svg);
+        });
 
-    it('converts complex HTML to React', function() {
-        var html = data.html.complex;
-        var reactElement = Parser(html);
-        assert.equal(render(reactElement), html);
     });
 
-    it('converts SVG to React', function() {
-        var svg = data.svg.complex;
-        var reactElement = Parser(svg);
-        assert.equal(render(reactElement), svg);
+    /**
+     * Options.
+     */
+    describe('options', function() {
+
+        describe('replace', function() {
+
+            it('overrides the element if replace is valid', function() {
+                var html = data.html.complex;
+                var reactElement = Parser(html, {
+                    replace: function(node) {
+                        if (node.name === 'title') {
+                            return React.createElement('meta', { charSet: 'utf-8' });
+                        }
+                    }
+                });
+                assert.equal(
+                    render(reactElement),
+                    html.replace('<title>Title</title>', '<meta charset="utf-8"/>')
+                );
+            });
+
+            it('does not override the element if replace is invalid', function() {
+                var html = data.html.complex;
+                var reactElement = Parser(html, {
+                    replace: function(node) {
+                        if (node.attribs && node.attribs.id === 'header') {
+                            return {
+                                type: 'h1',
+                                props: { children: 'Heading' }
+                            };
+                        }
+                    }
+                });
+                assert.notEqual(
+                    render(reactElement),
+                    html.replace(
+                        '<header id="header">Header</header>',
+                        '<h1>Heading</h1>'
+                    )
+                );
+            });
+
+        });
+
     });
 
 });