Merge pull request #120 from bem/dev

Dev

Author: eGavr

.jscs.js

@@ -15,7 +15,6 @@ module.exports = {
     disallowSpacesInNamedFunctionExpression: {
         beforeOpeningRoundBrace: true
     },
-    requireMultipleVarDecl: true,
     requireBlocksOnNewline: 1,
     disallowPaddingNewlinesInBlocks: true,
     disallowSpacesInsideArrayBrackets: 'nested',

.jshintrc

@@ -1,6 +1,5 @@
 {
     "bitwise": true,
-    "curly": true,
     "eqeqeq": true,
     "es3": true,
     "forin": true,

README.md

@@ -369,3 +369,33 @@ Study the following `config.json` file:
     "ignoreDuplicateAttributes": false
 }
 ```
+
+## Masks
+
+**html-differ** supports handling of _masks_ in HTML.
+
+For example, the following two code samples will be considered to be equivalent:
+
+```html
+<div id="{{[a-z]*\s\d+}}">
+```
+
+```html
+<div id="text 12345">
+```
+
+### Syntax
+
+_Masks_ in **html-differ** have the following syntax:
+
+```js
+{{RegExp}}
+```
+
+where:
+
+* `{{` – opening identifier of the _mask_.
+
+* `RegExp` – regular expression for matching with the corresponding value in another HTML. The syntax is similar to regular expressions in JavaScript written in a literal notation.
+
+* `}}` – closing identifier of the _mask_.

README.ru.md

@@ -71,7 +71,7 @@ var HtmlDiffer = require('html-differ').HtmlDiffer,
     htmlDiffer = new HtmlDiffer(options);
 ```
 
-Где `options` – это объект:
+где `options` – это объект:
 
 * **ignoreAttributes: [ Array ]**
 
@@ -366,3 +366,33 @@ $ html-differ --bem путь/к/html1 путь/к/html2
     "ignoreDuplicateAttributes": false
 }
 ```
+
+## Маски
+
+**html-differ** поддерживает использование _масок_ в HTML.
+
+Например, следующие два HTML будут считаться эквивалентными:
+
+```html
+<div id="{{[a-z]*\s\d+}}">
+```
+
+```html
+<div id="text 12345">
+```
+
+### Синтаксис
+
+Для записи _масок_ в **html-differ** используется следующий синтаксис:
+
+```js
+{{RegExp}}
+```
+
+где:
+
+* `{{` – открывающий идентификатор _маски_.
+
+* `RegExp` – регулярное выражение для сопоставления с соответствующим значением в сравниваемом HTML. Имеет такой же синтаксис как и регулярные выражения в JavaScript, записанные в _literal notation_.
+
+* `}}` – закрывающий идентификатор _маски_.

lib/HtmlDiff.js

@@ -1,26 +1,27 @@
 var diff = require('diff'),
-    defaults = require('./utils/defaults'),
+    defaults = require('./utils/defaults');
 
-    /**
-     * @class HtmlDiff
-     * @constructor
-     * @augments Diff
-     * @param {Object} [options]
-     * @param {String[]} [options.ignoreAttributes]
-     * @param {String[]} [options.compareAttributesAsJSON]
-     * @param {Boolean} [options.ignoreWhitespaces=true]
-     * @param {Boolean} [options.ignoreComments]
-     * @param {Boolean} [options.ignoreEndTags=false]
-     * @param {Boolean} [options.ignoreDuplicateAttributes=false]
-     */
-    HtmlDiff = function (options) {
-        this.options = defaults(options);
-    },
-    /**
-     * @class Diff
-     * @constructor
-     */
-    Diff = diff.Diff;
+/**
+ * @class HtmlDiff
+ * @constructor
+ * @augments Diff
+ * @param {Object}   [options]
+ * @param {String[]} [options.ignoreAttributes]
+ * @param {String[]} [options.compareAttributesAsJSON]
+ * @param {Boolean}  [options.ignoreWhitespaces=true]
+ * @param {Boolean}  [options.ignoreComments]
+ * @param {Boolean}  [options.ignoreEndTags=false]
+ * @param {Boolean}  [options.ignoreDuplicateAttributes=false]
+ */
+var HtmlDiff = function (options) {
+    this.options = defaults(options);
+};
+
+/**
+ * @class Diff
+ * @constructor
+ */
+var Diff = diff.Diff;
 
 HtmlDiff.prototype = Diff.prototype;
 

lib/index.js

@@ -1,7 +1,8 @@
 var _ = require('lodash'),
     HtmlDiff = require('./HtmlDiff'),
     modifyHtmlAccordingToOptions = require('./utils/modify'),
-    defaults = require('./utils/defaults');
+    defaults = require('./utils/defaults'),
+    handleMasks = require('./utils/mask');
 
 /**
  * Tokenizes the given HTML
@@ -11,19 +12,19 @@ var _ = require('lodash'),
 HtmlDiff.prototype.tokenize = function (html) {
     html = modifyHtmlAccordingToOptions(html, this.options);
 
-    return _.filter(html.split(/([{}:;,<>"'\[\]\/]|\s+)/));
+    return _.filter(html.split(/({{.+?[^\\]}}(?!})|[{}=:;,<>"'\[\]\/]|\s+)/));
 };
 
 /**
  * @class HtmlDiffer
  * @constructor
- * @param {Object} [options]
+ * @param {Object}   [options]
  * @param {String[]} [options.ignoreAttributes]
  * @param {String[]} [options.compareAttributesAsJSON]
- * @param {Boolean} [options.ignoreWhitespaces=true]
- * @param {Boolean} [options.ignoreComments=true]
- * @param {Boolean} [options.ignoreEndTags=false]
- * @param {Boolean} [options.ignoreDuplicateAttributes=false]
+ * @param {Boolean}  [options.ignoreWhitespaces=true]
+ * @param {Boolean}  [options.ignoreComments=true]
+ * @param {Boolean}  [options.ignoreEndTags=false]
+ * @param {Boolean}  [options.ignoreDuplicateAttributes=false]
  */
 var HtmlDiffer = function (options) {
     options = defaults(options);
@@ -40,9 +41,10 @@ var HtmlDiffer = function (options) {
  * @returns {Diff}
  */
 HtmlDiffer.prototype.diffHtml = function (html1, html2) {
-    var htmlDiffer = new HtmlDiff(this.options);
+    var htmlDiffer = new HtmlDiff(this.options),
+        diff = htmlDiffer.diff(html1, html2);
 
-    return htmlDiffer.diff(html1, html2);
+    return handleMasks(diff);
 };
 
 /**
@@ -54,8 +56,7 @@ HtmlDiffer.prototype.diffHtml = function (html1, html2) {
  * @returns {Boolean}
  */
 HtmlDiffer.prototype.isEqual = function (html1, html2) {
-    var htmlDiffer = new HtmlDiff(this.options),
-        diff = htmlDiffer.diff(html1, html2);
+    var diff = this.diffHtml(html1, html2);
 
     return (diff.length === 1 && !diff[0].added && !diff[0].removed);
 };

lib/logger.js

@@ -1,8 +1,15 @@
 require('colors');
 
+/**
+ * @typedef {Object} Diff
+ * @property {String} value
+ * @property {String|undefined} added
+ * @property {String|undefined} removed
+ */
+
 /**
  * Returns readable diff text
- * @param {Object[]} diff
+ * @param {Diff[]} diff
  * @param {Object} [options]
  * @param {Number} [options.charsAroundDiff=40]
  * @returns {String}
@@ -19,15 +26,15 @@ function getDiffText(diff, options) {
         charsAroundDiff = 40;
     }
 
-    if (diff.length === 1 && !diff[0].added && !diff[0].removed) { return output; }
+    if (diff.length === 1 && !diff[0].added && !diff[0].removed) return output;
 
     diff.forEach(function (part) {
         var index = diff.indexOf(part),
             partValue = part.value,
             color = 'grey';
 
-        if (part.added) { color = 'green'; }
-        if (part.removed) { color = 'red'; }
+        if (part.added) color = 'green';
+        if (part.removed) color = 'red';
 
         if (color !== 'grey') {
             output += (!index ? '\n' : '') + partValue.inverse[color];

lib/utils/defaults.js

@@ -2,13 +2,13 @@ var _ = require('lodash');
 
 /**
  * Sets options
- * @param {Object} [options]
+ * @param {Object}   [options]
  * @param {String[]} [options.ignoreAttributes]
  * @param {String[]} [options.compareAttributesAsJSON]
- * @param {Boolean} [options.ignoreWhitespaces=true]
- * @param {Boolean} [options.ignoreComments=true]
- * @param {Boolean} [options.ignoreClosingTags=false]
- * @param {Boolean} [options.ignoreDuplicateAttributes=false]
+ * @param {Boolean}  [options.ignoreWhitespaces=true]
+ * @param {Boolean}  [options.ignoreComments=true]
+ * @param {Boolean}  [options.ignoreClosingTags=false]
+ * @param {Boolean}  [options.ignoreDuplicateAttributes=false]
  * returns {Object}
  */
  module.exports = function (options) {

lib/utils/mask.js

@@ -0,0 +1,88 @@
+/**
+ * Mask
+ * ====
+ *
+ * {{RegExp}}
+ */
+var MASK_REGEXP = /(.*){{(.+[^\\])}}(?!})(.*)/;
+
+/**
+ * Checks whether the given part of the diff should be added or removed
+ * @param {Diff} part
+ * @returns {Boolean}
+ */
+function _isDiffPart(part) {
+    return part.added || part.removed;
+}
+
+/**
+ * Removes diff parts which are equal by mask
+ * @param {Diff[]} diff
+ * @returns {Diff[]}
+ */
+function _revealMasks(diff) {
+    for (var i = 0; i < diff.length; i++) {
+        var currPart = diff[i];
+
+        if (!_isDiffPart(currPart)) continue;
+
+        var prevPart = diff[i - 1],
+            nextPart = diff[i + 1],
+            matchedMask = currPart.value.match(MASK_REGEXP);
+
+        if (!matchedMask) continue;
+
+        var regExp = new RegExp('^' + matchedMask[1] + matchedMask[2] + matchedMask[3] + '$');
+        if (currPart.added && nextPart && nextPart.removed) {
+            if (nextPart.value.match(regExp)) {
+                nextPart.removed = undefined;
+                diff.splice(i--, 1);
+            }
+        } else if (currPart.removed && prevPart && prevPart.added) {
+            if (prevPart.value.match(regExp)) {
+                prevPart.added = undefined;
+                diff.splice(i--, 1);
+            }
+        }
+    }
+
+    return diff;
+}
+
+/**
+ * Concats not diff parts which go one by one
+ * @param {Diff[]} diff
+ * @returns {Diff[]}
+ */
+function _concatNotDiffParts(diff) {
+    for (var i = 1; i < diff.length; i++) {
+        var currPart = diff[i],
+            prevPart = diff[i - 1];
+
+        if (!_isDiffPart(currPart) && !_isDiffPart(prevPart)) {
+            prevPart.value += currPart.value;
+
+            diff.splice(i--, 1);
+        }
+    }
+
+    return diff;
+}
+
+/**
+ * @typedef {Object} Diff
+ * @property {String} value
+ * @property {String|undefined} added
+ * @property {String|undefined} removed
+ */
+
+/**
+ * Handles masks in the given diff
+ * @param {Diff[]} diff
+ * @returns {Diff[]}
+ */
+module.exports = function (diff) {
+    diff = _revealMasks(diff);
+
+    return _concatNotDiffParts(diff);
+};

lib/utils/modify.js

@@ -5,13 +5,13 @@ var SimpleApiParser = require('parse5').SimpleApiParser,
 /**
  * Parses the given HTML and modifies it according to the given options
  * @param {String} value
- * @param {Object} [options]
+ * @param {Object}   [options]
  * @param {String[]} [options.ignoreAttributes]
  * @param {String[]} [options.compareAttributesAsJSON]
- * @param {Boolean} [options.ignoreWhitespaces=true]
- * @param {Boolean} [options.ignoreComments=true]
- * @param {Boolean} [options.ignoreEndTags=false]
- * @param {Boolean} [options.ignoreDuplicateAttributes=false]
+ * @param {Boolean}  [options.ignoreWhitespaces=true]
+ * @param {Boolean}  [options.ignoreComments=true]
+ * @param {Boolean}  [options.ignoreEndTags=false]
+ * @param {Boolean}  [options.ignoreDuplicateAttributes=false]
  * returns {String}
  */
 function modify(value, options) {