Merge pull request #49 from Shuhrat/master

Some refactoring

Author: eGavr

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
-.DS_Store
 coverage/
+
+.DS_Store
+.idea/

lib/cli.js

@@ -1,7 +1,7 @@
 var path = require('path'),
     vow = require('vow'),
     vfs = require('vow-fs'),
-    HtmlDiffer = require('./html-differ').HtmlDiffer,
+    HtmlDiffer = require('./index').HtmlDiffer,
     diffLogger = require('./diff-logger');
 
 module.exports = require('coa').Cmd()

lib/html-differ.js

@@ -0,0 +1,202 @@
+var utils = require('./utils'),
+
+    diff = require('diff'),
+    htmlParser = require('htmlparser'),
+    AST2Html = require('htmlparser-to-html'),
+    _ = require('lodash');
+
+/**
+ * Converts HTML to DOM Tree
+ * @param {String} HTML
+ * @param {Object} options
+ * @returns {AST}
+ */
+function htmlToAST(HTML, options) {
+    var parser,
+        parserHandler;
+
+    parserHandler = new htmlParser.DefaultHandler(function(err) {
+        if (err) console.log(err);
+    }, options);
+
+    parser = new htmlParser.Parser(parserHandler);
+    parser.parseComplete(HTML);
+
+    return parserHandler.dom;
+}
+
+/**
+ *
+ * @param {AST} tree
+ * @param {Object} options
+ * @returns {AST}
+ */
+function modifyASTTree(tree, options) {
+    _.each(tree, function(node) {
+        Object.keys(node).forEach(function(leaf) {
+            if (leaf === 'attribs') {
+                var attrs = utils.sortObj(node[leaf]);
+
+                if (attrs.hasOwnProperty('class')) {
+                    attrs['class'] = utils.sortCssClasses(attrs['class']);
+                }
+
+                _.each(options.compareHtmlAttrsAsJSON, function(attr) {
+                    var attrValue,
+                        isFunction = (attr === 'onclick' || attr === 'ondblclick'); // @FIXME: should be configurable
+
+                    if (attrs.hasOwnProperty(attr)) {
+
+                        attrValue = utils.parseAttr(attrs[attr].replace(/"/g, '"'), isFunction);
+                        attrValue = utils.sortObj(attrValue);
+                        attrValue = JSON.stringify(attrValue);
+
+                        attrs[attr] = (isFunction ? 'return ' : '') + attrValue.replace(/"/g, '"')
+                    }
+                });
+
+                _.each(options.ignoreHtmlAttrs, function(attr) {
+                    attrs.hasOwnProperty(attr) && (attrs[attr] = '');
+                });
+
+                node[leaf] = attrs;
+            }
+            else if (leaf === 'children') {
+                modifyASTTree(node.children, options);
+            }
+        });
+    });
+
+    return tree;
+}
+
+/**
+ *
+ * @param [options]
+ * @param {String[]} [options.ignoreHtmlAttrs]
+ * @param {String[]} [options.compareHtmlAttrsAsJSON]
+ * @param {Boolean} [options.verbose]
+ * @param {Boolean} [options.ignoreWhitespace=true]
+ * @param {Boolean} [options.bem=true]
+ * @constructor
+ */
+var HtmlDiff = function(options) {
+    this.options = utils.defaults(options);
+};
+
+var Diff = diff.Diff;
+
+HtmlDiff.prototype = Diff.prototype;
+
+/**
+ * Tokenizes a given string
+ * @param {String} value
+ * @returns {Array}
+ */
+HtmlDiff.prototype.tokenize = function(value) {
+    var options = this.options,
+        ASTTree = htmlToAST(value, options);
+
+    ASTTree = modifyASTTree(ASTTree, options);
+
+    /*
+     * Bug in 'html-parser-to-html'
+     * String '"' is converted into '"'
+     * Added issue => github.com/mixu/htmlparser-to-html/issues/1
+     */
+    value = AST2Html(ASTTree).replace(/"/g, '"');
+
+    return _.filter(value.split(/(\s+|\b)/));
+};
+
+/**
+ *
+ * @param [options]
+ * @param {String[]} [options.ignoreHtmlAttrs]
+ * @param {String[]} [options.compareHtmlAttrsAsJSON]
+ * @param {Boolean} [options.verbose]
+ * @param {Boolean} [options.ignoreWhitespace=true]
+ * @param {Boolean} [options.bem=true]
+ * @constructor
+ */
+var HtmlDiffer = function(options) {
+    options = utils.defaults(options);
+
+    if (options['bem']) {
+        options.ignoreHtmlAttrs = ['id', 'for'];
+        options.compareHtmlAttrsAsJSON = ['data-bem', 'onclick', 'ondblclick'];
+    }
+
+    this.options = options;
+};
+
+/**
+ *
+ * @param {String} html1
+ * @param {String} html2
+ * @param {Object} [options]
+ * @returns {Diff}
+ */
+HtmlDiffer.prototype.diffHtml = function(html1, html2, options) {
+    if (options) {
+        console.warn('WARNING! The third param of "diffHtml" method is deprecated!');
+    }
+
+    var htmlDiffer = new HtmlDiff(options);
+
+    return htmlDiffer.diff(html1, html2);
+};
+
+/**
+ * Compares two given chunks of HTML
+ * @param {String} html1
+ * @param {String} html2
+ * @param {Object} [options]
+ * @returns {Boolean}
+ */
+HtmlDiffer.prototype.isEqual = function(html1, html2, options) {
+    if (options) {
+        console.warn('WARNING! The third param of "isEqual" method is deprecated!');
+    }
+
+    options = _.defaults(this.options, options);
+
+    var htmlDiffer = new HtmlDiff(options),
+        diff = htmlDiffer.diff(html1, html2);
+
+    return (diff.length === 1 && !diff[0].added && !diff[0].removed);
+};
+
+/**
+ * @deprecated
+ * @param {String} html1
+ * @param {String} html2
+ */
+function bemDiff(html1, html2) {
+    console.warn('WARNING! You use deprecated method \'bemDiff\'!');
+
+    var logger = require('./diff-logger'),
+        options = {
+            ignoreHtmlAttrs: ['id', 'for'],
+            compareHtmlAttrsAsJSON: ['data-bem', 'onclick', 'ondblclick']
+        },
+        loggerOptions = {
+            showCharacters: 20
+        },
+
+        htmlDiffer = new HtmlDiff(options);
+
+    logger.log(htmlDiffer.diff(html1, html2), loggerOptions);
+}
+
+
+var htmlDiffer = new HtmlDiffer();
+
+module.exports = {
+    HtmlDiff: HtmlDiff,
+    HtmlDiffer: HtmlDiffer,
+    diffHtml: htmlDiffer.diffHtml.bind(htmlDiffer),
+    isEqual: htmlDiffer.isEqual.bind(htmlDiffer),
+
+    bemDiff: bemDiff
+};