A Pen by Mathias Leppich.

A-Pen-by-Mathias-Leppich.markdown

A Pen by Mathias Leppich

A Pen by Mathias Leppich on CodePen.

License.

index.haml

%h1 renameDiff() showcase
#results

script.js

var renameDiff = (function() {
    return {
        diff: diff,
        format: format,
        formatHTML: formatHTML
    };

    function tokenize(s) {
        return s.match(/[A-Z][a-z]*|\w+|\W+/g) || [];
    }

    function commonPrefix(at, bt) {
        var i = 0,
            m = Math.min(at.length, bt.length);
        while (i < m && at[i] == bt[i]) {
            ++i;
        }
        return at.splice(0, i);
    }

    function commonSuffix(at, bt) {
        var i = at.length - 1,
            k = bt.length - 1;
        while (i >= 0 && k >= 0 && at[i] == bt[k]) {
            --i;
            --k;
        }
        return at.splice(i+1);
    }

    function diff(a, b) {
        if (a === b) {
            return [a];
        }
        var at = tokenize(a),
            bt = tokenize(b),
            p = commonPrefix(at, bt).join(""),
            s = commonSuffix(at, bt).join(""),
            pl = p.length,
            sl = s.length,
            o = a.substring(pl, a.length - sl),
            n = b.substring(pl, b.length - sl);
        return [p, o, n, s];
    }

    function formatHTML(d) {
        if (d.length != 4) {
            return d[0];
        }
        return [
          '<span class="renamed">',
          d[0],
          '<span class="meta">{ </span>',
          '<span class="old">',d[1],'</span>',
          '<span class="meta"> -> </span>',
          '<span class="new">',d[2],'</span>',
          '<span class="meta"> }</span>',
          d[3],
          '</span>'
        ].join("");
    }

    function format(d) {
        if (d.length != 4) {
            return d[0];
        }
        return [ d[0], "{ ", d[1], " -> ", d[2], " }", d[3] ].join("");
    }

})();


var testcases = [
    ["lib/DataStores/Wrappers/AbstractHashRangeKeyStore.php", "lib/DataStores/Wrappers/CommandHashRangeKeyStoreTrait.php"],
    ["lib/DataStores/Wrappers/AbstractHashRangeKeyStore.php", "lib/DataStores/Wrapperz/AbstractHashRangeKeyStore.php"],
    ["lib/DataStores/Wrappers/AbstractHashRangeKeyStore.php", "lib/DataStores/WrappersAbstractHashRangeKeyStore.php"],
    ["lib/DataStores/Wrappers/AbstractHashRangeKeyStore.php", "lib/DataStores/Wrappers/AbstractHashRangeKeyStore.php"],
    ["some/path/rename-me.txt", "some/path/renamed-file.txt"],
    ["some/path/rename-me.txt", "some/other/path/renamed-file.txt"]
];

$.map(testcases, function (pair) {
  var html = renameDiff.formatHTML(renameDiff.diff(pair[0], pair[1]));
  $('<div/>')
    .html(html)
    .appendTo($('#results'));
});

style.css

body {
  font-family: Monaco;
  font-size: 12px;
  color: #c2c2c2;
  background: #0d1638;
}
.renamed .meta {
  color: white;
}
.renamed .old {
  color: red;
}
.renamed .new {
  color: lime;
}