index.js

"use strict";

(function(factory) {
  if (typeof exports !== 'undefined') {
    var React = require('react');
    var jsdom = require('jsdom').jsdom;
    var doc = jsdom('jsdom document');
    module.exports = factory(React, doc);
  } else {
    window.Normalizer = { Normalizer: factory(window.React, window.document) }; // jshint ignore:line
  }

}(function (React, doc) {
  var defaultStyles = ["display"];
  var defaultAttributes = ["style", "class"];

  function normalizeHTML(node, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider) {
    var html = "";

    // An Element node such as <p> or <div>.
    if (node.nodeType === 1) {
      var tagName = node.tagName.toLowerCase();
      html += "<"+tagName;
      html += normalizeAttributes(node, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider);
      html += ">";

      if(node.hasChildNodes()){
        Array.prototype.slice.call(node.childNodes,0).forEach(node => {html += normalizeHTML(node, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider);});
      }
      html += "</"+tagName+">";
    }
    // The actual Text of Element or Attr.
    else if (node.nodeType === 3 && node.nodeName !== "#comment") {
      var nodeValue = node.nodeValue.replace(/\s+/g, ' ');

      if(nodeValue.trim()){
        html += nodeValue;
      }
    }

    return html;
  }

  function normalizeAttributes(node, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider) {
    var attributes = "";
    var attributeList = Array.prototype.slice.call(node.attributes, 0).reduce(((map, attribute) => {
      map[attribute.nodeName] = attribute.nodeValue;
      return map;
    }),{});

    Object.keys(attributeList).sort().forEach((attributeKey) => {
      var value = attributeList[attributeKey];
      var lowerCasedAttributeKey = attributeKey.toLowerCase();

      if (!attributesToExclude[lowerCasedAttributeKey] && // checking blacklist
        (!attributesToConsider || attributesToConsider[lowerCasedAttributeKey])) {

          if(attributeKey === "style"){
            attributes += normalizeStyle(value, stylesToConsider);
          }
          else if(classNamesToConsider && attributeKey === "class"){
            attributes += normalizeClass(value, classNamesToConsider);
          }
          else if(attributeKey !== "data-reactid"){
            attributes += " ";
            attributes += attributeKey + "=\"" + value + "\"";
          }
      }
    });

    return attributes;
  }

  function normalizeClass(value, classNamesToConsider){
    var retVal = "";

    if(value && value.trim()){
      var classNames = value.replace(/\s+/g, " ").split(" ").sort();

      retVal = classNames.reduce((normalized, className) => {

        //if classNamesToConsider is null use them all
        if(!classNamesToConsider || classNamesToConsider[className]){
          if(!normalized){
            normalized = "class=\"";
          }

          normalized += className + " ";
        }

        return normalized;
      }, "");

      if(retVal){
        retVal = retVal.trim();
        retVal = " " + retVal + "\"";
      }
    }

    return retVal;
  }

  function normalizeStyle(style, stylesToConsider){
    var normalized = "";
    var styleGroups = style.split(";");

    var styleMap = styleGroups.filter(group => {return !!group;})
    .reduce((map, group) => {
      if(group.trim()){
          var styleGroup = group.split(":");
          var key = styleGroup[0].trim();
          var value = styleGroup[1].trim();

          //if styles to consider is null consider them all
          if(!stylesToConsider || stylesToConsider[key.toLowerCase()]){
              map[key] = value;
          }
      }

      return map;
    }, {});

    var keys = Object.keys(styleMap);
    var lastKeyIndex = keys.length-1;

    keys.sort().forEach((key, i) => {
      var value = styleMap[key];

      if(!i){
        normalized += " style=\"";
      }

      normalized += key + ":";
      normalized += value;

      if(i !== lastKeyIndex){
        normalized += "; ";
      }
      else {
        normalized += "\"";
      }

    });
    return normalized;
  }

  function normalizedHTMLFromReactComponent(reactComponent, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider) {
    var domString = React.renderToStaticMarkup(reactComponent);

    return normalizeHTMLString(domString, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider);
  }

  function convertStringToDOM(html){
    var wrapMap = {
        option: [ 1, "<select multiple='multiple'>", "</select>" ],
        legend: [ 1, "<fieldset>", "</fieldset>" ],
        area: [ 1, "<map>", "</map>" ],
        param: [ 1, "<object>", "</object>" ],
        thead: [ 1, "<table>", "</table>" ],
        tr: [ 2, "<table><tbody>", "</tbody></table>" ],
        col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
        td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
        body: [0, "", ""],
        _default: [ 1, "<div>", "</div>"  ]
    };
    wrapMap.optgroup = wrapMap.option;
    wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
    wrapMap.th = wrapMap.td;
    var match = /<\s*\w.*?>/g.exec(html);
    var node = doc.createElement('div');

    if(match != null) {
        var tag = match[0].replace(/</g, '').replace(/>/g, '').split(' ')[0];

        if(tag.toLowerCase() === 'body') {
            // var dom = doc.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
            var body = doc.createElement("body");
            // keeping the attributes
            node.innerHTML = html.replace(/<body/g, '<div').replace(/<\/body>/g, '</div>');
            var attrs = node.firstChild.attributes;
            body.innerHTML = html;
            for(var i=0; i<attrs.length; i++) {
                body.setAttribute(attrs[i].name, attrs[i].value);
            }
            return body;
        } else {
            var map = wrapMap[tag] || wrapMap._default;
            html = map[1] + html + map[2];
            node.innerHTML = html;
            // Descend through wrappers to the right content
            var j = map[0]+1;
            while(j--) {
                return node.lastChild.childNodes;
            }
        }
    } else {
        node.innerHTML = html;
        return node.childNodes;
    }
  }

  function normalizeHTMLString(domString, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider) {
    var domNodes = convertStringToDOM(domString);

    return [].slice.call(domNodes).map(domNode =>
        normalizeHTML(domNode, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider)
    ).join('');
  }

  function normalizeHTMLFromReactView(reactView, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider) {
      var domNode;

      try {
        domNode = React.findDOMNode(reactView);
      }
      catch(e) {
        domNode = reactView.getDOMNode();
      }

      return normalizeHTML(domNode, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider);
  }

  function toLowerMap(array){
      return array.reduce((map, item) => {
          map[item.toLowerCase()] = true;
          return map;
      }, {});
  }

  function toMap(array){
      return array.reduce((map, item) => {
          map[item] = true;
          return map;
      }, {});
  }

  function isReactComponent(component){
    return  component &&
            typeof component === "object" &&
            component.key !== undefined &&
            component.props !== undefined &&
            component.ref !== undefined;
  }

  function isReactView(view){
    return  view &&
            typeof view === "object" &&
            view.state !== undefined &&
            view.props !== undefined &&
            view.refs !== undefined;
  }

  return function(options) {
    if(!options){
      options = {};
    }

    if(!options.hasOwnProperty("attributes")){
      options.attributes = defaultAttributes;
    }

    if (!options.hasOwnProperty("attributesExcluded") || options.attributesExcluded === null) {
      options.attributesExcluded = [];
    }

    if(!options.hasOwnProperty("styles")){
      options.styles = defaultStyles;
    }

    if(!options.hasOwnProperty("classNames")){
      options.classNames = null; //consider all class names by default
    }

    var attributesToConsider = options.attributes ? toLowerMap(options.attributes) : null;
    var attributesToExclude = options.attributesExcluded ? toLowerMap(options.attributesExcluded) : null;
    var classNamesToConsider = options.classNames ? toMap(options.classNames) : null;
    var stylesToConsider = options.styles ? toLowerMap(options.styles) : null;

    return {
        reactView(view){
          if(isReactComponent(view)){
            throw new Error("Looks like you passed in a react component.  Try using .reactComponent instead of .reactView.");
          }
          else if(!isReactView(view)){
            throw new Error("This function takes one argument.  It must be a react view and can not be null.");
          }

          return normalizeHTMLFromReactView(view, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider);
        },
        reactComponent(component){
            if(isReactView(component)){
              throw new Error("Looks like you passed in a react view.  Try using .reactView instead of .reactComponent.");
            }
            else if(!isReactComponent(component)){
              throw new Error("This function takes one argument.  It must be a react component and can not be null.");
            }

            return normalizedHTMLFromReactComponent(component, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider);
        },
        domNode(node){
            if(!node || typeof node !== "object" || node.innerHTML === undefined){
              throw new Error("This function takes one argument.  It must be a dom node and can not be null.");
            }

            return normalizeHTML(node, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider);
        },
        domString(string){
            if(!string || typeof string !== "string" ){
              throw new Error("This function takes one argument.  It must be a dom string and can not be empty.");
            }

            return normalizeHTMLString(string, attributesToConsider, attributesToExclude, stylesToConsider, classNamesToConsider);
        },
        normalize(objectWithHTML){
          if(objectWithHTML && typeof objectWithHTML === "string" ){
            return this.domString(objectWithHTML);
          }else if(objectWithHTML && typeof objectWithHTML === "object" && objectWithHTML.innerHTML !== undefined){
            return this.domNode(objectWithHTML);
          }
          else if(isReactComponent(objectWithHTML)){
            return this.reactComponent(objectWithHTML);
          }
          else if(isReactView(objectWithHTML)){
            return this.reactView(objectWithHTML);
          }
          else {
            throw new Error("This function takes one argument.  It must either be an HTML string, DOM node, react componenet or react element.");
          }

        }
    };
  };
}));