Merge pull request #192 from remarkablemark/refactor/dom-to-react

refactor(dom-to-react): rename function, tidy module, add tests

Author: remarkablemark

lib/dom-to-react.js

@@ -1,22 +1,23 @@
+var React = require('react');
 var attributesToProps = require('./attributes-to-props');
 var utilities = require('./utilities');
 
 /**
  * Converts DOM nodes to React elements.
  *
- * @param {DomElement[]} nodes - The DOM nodes.
- * @param {Object} [options={}] - The additional options.
- * @param {Function} [options.replace] - The replacer.
- * @param {Object} [options.library] - The library (React, Preact, etc.).
- * @return {String|ReactElement|ReactElement[]}
+ * @param  {DomElement[]} nodes             - DOM nodes.
+ * @param  {object}       [options={}]      - Options.
+ * @param  {Function}     [options.replace] - Replacer.
+ * @param  {object}       [options.library] - Library (React/Preact/etc.).
+ * @return {string|ReactElement|ReactElement[]}
  */
 function domToReact(nodes, options) {
   options = options || {};
 
-  var React = options.library || require('react');
-  var cloneElement = React.cloneElement;
-  var createElement = React.createElement;
-  var isValidElement = React.isValidElement;
+  var library = options.library || React;
+  var cloneElement = library.cloneElement;
+  var createElement = library.createElement;
+  var isValidElement = library.isValidElement;
 
   var result = [];
   var node;
@@ -61,7 +62,7 @@ function domToReact(nodes, options) {
     }
 
     props = node.attribs;
-    if (!shouldPassAttributesUnaltered(node)) {
+    if (!skipAttributesToProps(node)) {
       props = attributesToProps(node.attribs);
     }
 
@@ -108,12 +109,13 @@ function domToReact(nodes, options) {
 }
 
 /**
- * Determines whether attributes should be altered or not.
+ * Determines whether DOM element attributes should be transformed to props.
+ * Web Components (custom elements) should not have their attributes transformed.
  *
- * @param {React.ReactElement} node
- * @return {Boolean}
+ * @param  {DomElement} node
+ * @return {boolean}
  */
-function shouldPassAttributesUnaltered(node) {
+function skipAttributesToProps(node) {
   return (
     utilities.PRESERVE_CUSTOM_ATTRIBUTES &&
     node.type === 'tag' &&

test/dom-to-react.test.js

@@ -8,6 +8,18 @@ const { render } = require('./helpers');
 const { html, svg } = require('./data');
 
 describe('domToReact', () => {
+  it.each([
+    ['comment', html.comment],
+    ['doctype', html.doctype]
+  ])('skips %s', (type, value) => {
+    expect(domToReact(htmlToDOM(value))).toEqual([]);
+  });
+
+  it('converts "text" to "text"', () => {
+    const text = 'text';
+    expect(domToReact(htmlToDOM(text))).toBe(text);
+  });
+
   it('converts single DOM node to React', () => {
     const reactElement = domToReact(htmlToDOM(html.single));
     expect(reactElement).toMatchSnapshot();