luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial multi-line diff blocks

Browse source
This commit is contained in:
Rodrigo Fernandes 2015-04-11 22:43:14 +01:00
parent 10b2c89a25
commit a284dc182f
3 changed files with 894 additions and 292 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

565
diff.js Normal file
View file

@ -0,0 +1,565 @@
/* See LICENSE file for terms of use */
/*
* Text diff implementation.
*
* This library supports the following APIS:
* JsDiff.diffChars: Character by character diff
* JsDiff.diffWords: Word (as defined by \b regex) diff which ignores whitespace
* JsDiff.diffLines: Line based diff
*
* JsDiff.diffCss: Diff targeted at CSS content
*
* These methods are based on the implementation proposed in
* "An O(ND) Difference Algorithm and its Variations" (Myers, 1986).
* http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927
*
* AUTHOR: https://github.com/kpdecker/jsdiff
*/
(function(global, undefined) {
var JsDiff = (function() {
/*jshint maxparams: 5*/
/*istanbul ignore next*/
function map(arr, mapper, that) {
if (Array.prototype.map) {
return Array.prototype.map.call(arr, mapper, that);
}
var other = new Array(arr.length);
for (var i = 0, n = arr.length; i < n; i++) {
other[i] = mapper.call(that, arr[i], i, arr);
}
return other;
}
function clonePath(path) {
return { newPos: path.newPos, components: path.components.slice(0) };
}
function removeEmpty(array) {
var ret = [];
for (var i = 0; i < array.length; i++) {
if (array[i]) {
ret.push(array[i]);
}
}
return ret;
}
function escapeHTML(s) {
var n = s;
n = n.replace(/&/g, '&amp;');
n = n.replace(/</g, '&lt;');
n = n.replace(/>/g, '&gt;');
n = n.replace(/"/g, '&quot;');
return n;
}
function buildValues(components, newString, oldString, useLongestToken) {
var componentPos = 0,
componentLen = components.length,
newPos = 0,
oldPos = 0;
for (; componentPos < componentLen; componentPos++) {
var component = components[componentPos];
if (!component.removed) {
if (!component.added && useLongestToken) {
var value = newString.slice(newPos, newPos + component.count);
value = map(value, function(value, i) {
var oldValue = oldString[oldPos + i];
return oldValue.length > value.length ? oldValue : value;
});
component.value = value.join('');
} else {
component.value = newString.slice(newPos, newPos + component.count).join('');
}
newPos += component.count;
// Common case
if (!component.added) {
oldPos += component.count;
}
} else {
component.value = oldString.slice(oldPos, oldPos + component.count).join('');
oldPos += component.count;
}
}
return components;
}
var Diff = function(ignoreWhitespace) {
this.ignoreWhitespace = ignoreWhitespace;
};
Diff.prototype = {
diff: function(oldString, newString, callback) {
var self = this;
function done(value) {
if (callback) {
setTimeout(function() { callback(undefined, value); }, 0);
return true;
} else {
return value;
}
}
// Handle the identity case (this is due to unrolling editLength == 0
if (newString === oldString) {
return done([{ value: newString }]);
}
if (!newString) {
return done([{ value: oldString, removed: true }]);
}
if (!oldString) {
return done([{ value: newString, added: true }]);
}
newString = this.tokenize(newString);
oldString = this.tokenize(oldString);
var newLen = newString.length, oldLen = oldString.length;
var maxEditLength = newLen + oldLen;
var bestPath = [{ newPos: -1, components: [] }];
// Seed editLength = 0, i.e. the content starts with the same values
var oldPos = this.extractCommon(bestPath[0], newString, oldString, 0);
if (bestPath[0].newPos+1 >= newLen && oldPos+1 >= oldLen) {
// Identity per the equality and tokenizer
return done([{value: newString.join('')}]);
}
// Main worker method. checks all permutations of a given edit length for acceptance.
function execEditLength() {
for (var diagonalPath = -1*editLength; diagonalPath <= editLength; diagonalPath+=2) {
var basePath;
var addPath = bestPath[diagonalPath-1],
removePath = bestPath[diagonalPath+1];
oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;
if (addPath) {
// No one else is going to attempt to use this value, clear it
bestPath[diagonalPath-1] = undefined;
}
var canAdd = addPath && addPath.newPos+1 < newLen;
var canRemove = removePath && 0 <= oldPos && oldPos < oldLen;
if (!canAdd && !canRemove) {
// If this path is a terminal then prune
bestPath[diagonalPath] = undefined;
continue;
}
// Select the diagonal that we want to branch from. We select the prior
// path whose position in the new string is the farthest from the origin
// and does not pass the bounds of the diff graph
if (!canAdd || (canRemove && addPath.newPos < removePath.newPos)) {
basePath = clonePath(removePath);
self.pushComponent(basePath.components, undefined, true);
} else {
basePath = addPath; // No need to clone, we've pulled it from the list
basePath.newPos++;
self.pushComponent(basePath.components, true, undefined);
}
var oldPos = self.extractCommon(basePath, newString, oldString, diagonalPath);
// If we have hit the end of both strings, then we are done
if (basePath.newPos+1 >= newLen && oldPos+1 >= oldLen) {
return done(buildValues(basePath.components, newString, oldString, self.useLongestToken));
} else {
// Otherwise track this path as a potential candidate and continue.
bestPath[diagonalPath] = basePath;
}
}
editLength++;
}
// Performs the length of edit iteration. Is a bit fugly as this has to support the
// sync and async mode which is never fun. Loops over execEditLength until a value
// is produced.
var editLength = 1;
if (callback) {
(function exec() {
setTimeout(function() {
// This should not happen, but we want to be safe.
/*istanbul ignore next */
if (editLength > maxEditLength) {
return callback();
}
if (!execEditLength()) {
exec();
}
}, 0);
})();
} else {
while(editLength <= maxEditLength) {
var ret = execEditLength();
if (ret) {
return ret;
}
}
}
},
pushComponent: function(components, added, removed) {
var last = components[components.length-1];
if (last && last.added === added && last.removed === removed) {
// We need to clone here as the component clone operation is just
// as shallow array clone
components[components.length-1] = {count: last.count + 1, added: added, removed: removed };
} else {
components.push({count: 1, added: added, removed: removed });
}
},
extractCommon: function(basePath, newString, oldString, diagonalPath) {
var newLen = newString.length,
oldLen = oldString.length,
newPos = basePath.newPos,
oldPos = newPos - diagonalPath,
commonCount = 0;
while (newPos+1 < newLen && oldPos+1 < oldLen && this.equals(newString[newPos+1], oldString[oldPos+1])) {
newPos++;
oldPos++;
commonCount++;
}
if (commonCount) {
basePath.components.push({count: commonCount});
}
basePath.newPos = newPos;
return oldPos;
},
equals: function(left, right) {
var reWhitespace = /\S/;
return left === right || (this.ignoreWhitespace && !reWhitespace.test(left) && !reWhitespace.test(right));
},
tokenize: function(value) {
return value.split('');
}
};
var CharDiff = new Diff();
var WordDiff = new Diff(true);
var WordWithSpaceDiff = new Diff();
WordDiff.tokenize = WordWithSpaceDiff.tokenize = function(value) {
return removeEmpty(value.split(/(\s+|\b)/));
};
var CssDiff = new Diff(true);
CssDiff.tokenize = function(value) {
return removeEmpty(value.split(/([{}:;,]|\s+)/));
};
var LineDiff = new Diff();
var TrimmedLineDiff = new Diff();
TrimmedLineDiff.ignoreTrim = true;
LineDiff.tokenize = TrimmedLineDiff.tokenize = function(value) {
var retLines = [],
lines = value.split(/^/m);
for(var i = 0; i < lines.length; i++) {
var line = lines[i],
lastLine = lines[i - 1],
lastLineLastChar = lastLine ? lastLine[lastLine.length - 1] : '';
// Merge lines that may contain windows new lines
if (line === '\n' && lastLineLastChar === '\r') {
retLines[retLines.length - 1] = retLines[retLines.length - 1].slice(0,-1) + '\r\n';
} else if (line) {
if (this.ignoreTrim) {
line = line.trim();
//add a newline unless this is the last line.
if (i < lines.length - 1) {
line += '\n';
}
}
retLines.push(line);
}
}
return retLines;
};
var SentenceDiff = new Diff();
SentenceDiff.tokenize = function (value) {
return removeEmpty(value.split(/(\S.+?[.!?])(?=\s+|$)/));
};
var JsonDiff = new Diff();
// Discriminate between two lines of pretty-printed, serialized JSON where one of them has a
// dangling comma and the other doesn't. Turns out including the dangling comma yields the nicest output:
JsonDiff.useLongestToken = true;
JsonDiff.tokenize = LineDiff.tokenize;
JsonDiff.equals = function(left, right) {
return LineDiff.equals(left.replace(/,([\r\n])/g, '$1'), right.replace(/,([\r\n])/g, '$1'));
};
var objectPrototypeToString = Object.prototype.toString;
// This function handles the presence of circular references by bailing out when encountering an
// object that is already on the "stack" of items being processed.
function canonicalize(obj, stack, replacementStack) {
stack = stack || [];
replacementStack = replacementStack || [];
var i;
for (var i = 0 ; i < stack.length ; i += 1) {
if (stack[i] === obj) {
return replacementStack[i];
}
}
var canonicalizedObj;
if ('[object Array]' === objectPrototypeToString.call(obj)) {
stack.push(obj);
canonicalizedObj = new Array(obj.length);
replacementStack.push(canonicalizedObj);
for (i = 0 ; i < obj.length ; i += 1) {
canonicalizedObj[i] = canonicalize(obj[i], stack, replacementStack);
}
stack.pop();
replacementStack.pop();
} else if (typeof obj === 'object' && obj !== null) {
stack.push(obj);
canonicalizedObj = {};
replacementStack.push(canonicalizedObj);
var sortedKeys = [];
for (var key in obj) {
sortedKeys.push(key);
}
sortedKeys.sort();
for (i = 0 ; i < sortedKeys.length ; i += 1) {
var key = sortedKeys[i];
canonicalizedObj[key] = canonicalize(obj[key], stack, replacementStack);
}
stack.pop();
replacementStack.pop();
} else {
canonicalizedObj = obj;
}
return canonicalizedObj;
}
return {
Diff: Diff,
diffChars: function(oldStr, newStr, callback) { return CharDiff.diff(oldStr, newStr, callback); },
diffWords: function(oldStr, newStr, callback) { return WordDiff.diff(oldStr, newStr, callback); },
diffWordsWithSpace: function(oldStr, newStr, callback) { return WordWithSpaceDiff.diff(oldStr, newStr, callback); },
diffLines: function(oldStr, newStr, callback) { return LineDiff.diff(oldStr, newStr, callback); },
diffTrimmedLines: function(oldStr, newStr, callback) { return TrimmedLineDiff.diff(oldStr, newStr, callback); },
diffSentences: function(oldStr, newStr, callback) { return SentenceDiff.diff(oldStr, newStr, callback); },
diffCss: function(oldStr, newStr, callback) { return CssDiff.diff(oldStr, newStr, callback); },
diffJson: function(oldObj, newObj, callback) {
return JsonDiff.diff(
typeof oldObj === 'string' ? oldObj : JSON.stringify(canonicalize(oldObj), undefined, ' '),
typeof newObj === 'string' ? newObj : JSON.stringify(canonicalize(newObj), undefined, ' '),
callback
);
},
createPatch: function(fileName, oldStr, newStr, oldHeader, newHeader) {
var ret = [];
ret.push('Index: ' + fileName);
ret.push('===================================================================');
ret.push('--- ' + fileName + (typeof oldHeader === 'undefined' ? '' : '\t' + oldHeader));
ret.push('+++ ' + fileName + (typeof newHeader === 'undefined' ? '' : '\t' + newHeader));
var diff = LineDiff.diff(oldStr, newStr);
if (!diff[diff.length-1].value) {
diff.pop(); // Remove trailing newline add
}
diff.push({value: '', lines: []}); // Append an empty value to make cleanup easier
function contextLines(lines) {
return map(lines, function(entry) { return ' ' + entry; });
}
function eofNL(curRange, i, current) {
var last = diff[diff.length-2],
isLast = i === diff.length-2,
isLastOfType = i === diff.length-3 && (current.added !== last.added || current.removed !== last.removed);
// Figure out if this is the last line for the given file and missing NL
if (!/\n$/.test(current.value) && (isLast || isLastOfType)) {
curRange.push('\\ No newline at end of file');
}
}
var oldRangeStart = 0, newRangeStart = 0, curRange = [],
oldLine = 1, newLine = 1;
for (var i = 0; i < diff.length; i++) {
var current = diff[i],
lines = current.lines || current.value.replace(/\n$/, '').split('\n');
current.lines = lines;
if (current.added || current.removed) {
if (!oldRangeStart) {
var prev = diff[i-1];
oldRangeStart = oldLine;
newRangeStart = newLine;
if (prev) {
curRange = contextLines(prev.lines.slice(-4));
oldRangeStart -= curRange.length;
newRangeStart -= curRange.length;
}
}
curRange.push.apply(curRange, map(lines, function(entry) { return (current.added?'+':'-') + entry; }));
eofNL(curRange, i, current);
if (current.added) {
newLine += lines.length;
} else {
oldLine += lines.length;
}
} else {
if (oldRangeStart) {
// Close out any changes that have been output (or join overlapping)
if (lines.length <= 8 && i < diff.length-2) {
// Overlapping
curRange.push.apply(curRange, contextLines(lines));
} else {
// end the range and output
var contextSize = Math.min(lines.length, 4);
ret.push(
'@@ -' + oldRangeStart + ',' + (oldLine-oldRangeStart+contextSize)
+ ' +' + newRangeStart + ',' + (newLine-newRangeStart+contextSize)
+ ' @@');
ret.push.apply(ret, curRange);
ret.push.apply(ret, contextLines(lines.slice(0, contextSize)));
if (lines.length <= 4) {
eofNL(ret, i, current);
}
oldRangeStart = 0; newRangeStart = 0; curRange = [];
}
}
oldLine += lines.length;
newLine += lines.length;
}
}
return ret.join('\n') + '\n';
},
applyPatch: function(oldStr, uniDiff) {
var diffstr = uniDiff.split('\n');
var diff = [];
var i = 0,
remEOFNL = false,
addEOFNL = false;
// Skip to the first change chunk
while (i < diffstr.length && !/^@@/.test(diffstr[i])) {
i++;
}
for (; i < diffstr.length; i++) {
if (diffstr[i][0] === '@') {
var meh = diffstr[i].split(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/);
diff.unshift({
start:meh[3],
oldlength:meh[2],
oldlines:[],
newlength:meh[4],
newlines:[]
});
} else if (diffstr[i][0] === '+') {
diff[0].newlines.push(diffstr[i].substr(1));
} else if (diffstr[i][0] === '-') {
diff[0].oldlines.push(diffstr[i].substr(1));
} else if (diffstr[i][0] === ' ') {
diff[0].newlines.push(diffstr[i].substr(1));
diff[0].oldlines.push(diffstr[i].substr(1));
} else if (diffstr[i][0] === '\\') {
if (diffstr[i-1][0] === '+') {
remEOFNL = true;
} else if (diffstr[i-1][0] === '-') {
addEOFNL = true;
}
}
}
var str = oldStr.split('\n');
for (var i = diff.length - 1; i >= 0; i--) {
var d = diff[i];
for (var j = 0; j < d.oldlength; j++) {
if (str[d.start-1+j] !== d.oldlines[j]) {
return false;
}
}
Array.prototype.splice.apply(str,[d.start-1,+d.oldlength].concat(d.newlines));
}
if (remEOFNL) {
while (!str[str.length-1]) {
str.pop();
}
} else if (addEOFNL) {
str.push('');
}
return str.join('\n');
},
convertChangesToXML: function(changes){
var ret = [];
for ( var i = 0; i < changes.length; i++) {
var change = changes[i];
if (change.added) {
ret.push('<ins>');
} else if (change.removed) {
ret.push('<del>');
}
ret.push(escapeHTML(change.value));
if (change.added) {
ret.push('</ins>');
} else if (change.removed) {
ret.push('</del>');
}
}
return ret.join('');
},
// See: http://code.google.com/p/google-diff-match-patch/wiki/API
convertChangesToDMP: function(changes){
var ret = [], change;
for ( var i = 0; i < changes.length; i++) {
change = changes[i];
ret.push([(change.added ? 1 : change.removed ? -1 : 0), change.value]);
}
return ret;
},
canonicalize: canonicalize
};
})();
/*istanbul ignore next */
if (typeof module !== 'undefined' && module.exports) {
module.exports = JsDiff;
}
else if (typeof define === 'function' && define.amd) {
/*global define */
define([], function() { return JsDiff; });
}
else if (typeof global.JsDiff === 'undefined') {
global.JsDiff = JsDiff;
}
})(this);

618
diff2html.js
View file

@ -8,10 +8,10 @@
*/ */
var LINE_TYPE = { var LINE_TYPE = {
INSERTS: "d2h-ins", INSERTS: "d2h-ins",
DELETES: "d2h-del", DELETES: "d2h-del",
CONTEXT: "d2h-cntx", CONTEXT: "d2h-cntx",
INFO: "d2h-info" INFO: "d2h-info"
}; };
function Diff2Html() { function Diff2Html() {
@ -21,157 +21,164 @@ function Diff2Html() {
* Generates pretty html from string diff input * Generates pretty html from string diff input
*/ */
Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput) { Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput) {
var diffJson = generateDiffJson(diffInput); var diffJson = generateDiffJson(diffInput);
return generateJsonHtml(diffJson); return generateJsonHtml(diffJson);
}; };
/* /*
* Generates json object from string diff input * Generates json object from string diff input
*/ */
Diff2Html.prototype.getJsonFromDiff = function (diffInput) { Diff2Html.prototype.getJsonFromDiff = function (diffInput) {
return generateDiffJson(diffInput); return generateDiffJson(diffInput);
}; };
/* /*
* Generates pretty html from a json object * Generates pretty html from a json object
*/ */
Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson) { Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson) {
return generateJsonHtml(diffJson); return generateJsonHtml(diffJson);
}; };
/* /*
* Generates pretty side by side html from string diff input * Generates pretty side by side html from string diff input
*/ */
Diff2Html.prototype.getPrettySideBySideHtmlFromDiff = function (diffInput) { Diff2Html.prototype.getPrettySideBySideHtmlFromDiff = function (diffInput) {
var diffJson = generateDiffJson(diffInput); var diffJson = generateDiffJson(diffInput);
return generateSideBySideJsonHtml(diffJson); return generateSideBySideJsonHtml(diffJson);
}; };
/* /*
* Generates pretty side by side html from a json object * Generates pretty side by side html from a json object
*/ */
Diff2Html.prototype.getPrettySideBySideHtmlFromJson = function (diffJson) { Diff2Html.prototype.getPrettySideBySideHtmlFromJson = function (diffJson) {
return generateSideBySideJsonHtml(diffJson); return generateSideBySideJsonHtml(diffJson);
}; };
var generateDiffJson = function (diffInput) { var generateDiffJson = function (diffInput) {
var files = [], var files = [],
currentFile = null, currentFile = null,
currentBlock = null, currentBlock = null,
oldLine = null, oldLine = null,
newLine = null; newLine = null;
var saveBlock = function () { var saveBlock = function () {
/* add previous block(if exists) before start a new file */ /* add previous block(if exists) before start a new file */
if (currentBlock) { if (currentBlock) {
currentFile.blocks.push(currentBlock); currentFile.blocks.push(currentBlock);
currentBlock = null; currentBlock = null;
} }
}; };
var saveFile = function () { var saveFile = function () {
/* /*
* add previous file(if exists) before start a new one * add previous file(if exists) before start a new one
* if it has name (to avoid binary files errors) * if it has name (to avoid binary files errors)
*/ */
if (currentFile && currentFile.newName) { if (currentFile && currentFile.newName) {
files.push(currentFile); files.push(currentFile);
currentFile = null; currentFile = null;
} }
}; };
var startFile = function () {
saveBlock();
saveFile();
/* create file structure */
currentFile = {};
currentFile.blocks = [];
currentFile.deletedLines = 0;
currentFile.addedLines = 0;
};
var startBlock = function (line) {
saveBlock();
var values = /^@@ -(\d+),\d+ \+(\d+),\d+ @@.*/.exec(line) ||
/^@@@ -(\d+),\d+ -\d+,\d+ \+(\d+),\d+ @@@.*/.exec(line) ||
[0, 0, 0];
oldLine = values[1];
newLine = values[2];
/* create block metadata */
currentBlock = {};
currentBlock.lines = [];
currentBlock.oldStartLine = oldLine;
currentBlock.newStartLine = newLine;
currentBlock.header = line;
};
var createLine = function (line) {
var currentLine = {};
currentLine.content = line;
/* fill the line data */
if (startsWith(line, "+") || startsWith(line, " +")) {
currentFile.addedLines++;
currentLine.type = LINE_TYPE.INSERTS;
currentLine.oldNumber = null;
currentLine.newNumber = newLine++;
currentBlock.lines.push(currentLine);
} else if (startsWith(line, "-") || startsWith(line, " -")) {
currentFile.deletedLines++;
currentLine.type = LINE_TYPE.DELETES;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = null;
currentBlock.lines.push(currentLine);
} else {
currentLine.type = LINE_TYPE.CONTEXT;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = newLine++;
currentBlock.lines.push(currentLine);
}
};
var diffLines = diffInput.split("\n");
diffLines.forEach(function (line) {
// Unmerged paths, and possibly other non-diffable files
// https://github.com/scottgonzalez/pretty-diff/issues/11
// Also, remove some useless lines
if (!line || startsWith(line, "*") ||
startsWith(line, "new") || startsWith(line, "index")) {
return;
}
var values = [];
if (startsWith(line, "diff")) {
startFile();
} else if (currentFile && !currentFile.oldName && (values = /^--- a\/(\S+).*$/.exec(line))) {
currentFile.oldName = values[1];
} else if (currentFile && !currentFile.newName && (values = /^\+\+\+ [b]?\/(\S+).*$/.exec(line))) {
currentFile.newName = values[1];
var fileSplit = currentFile.newName.split(".");
currentFile.language = fileSplit[fileSplit.length - 1];
} else if (currentFile && startsWith(line, "@@")) {
startBlock(line);
} else if (currentBlock) {
createLine(line);
}
});
var startFile = function () {
saveBlock(); saveBlock();
saveFile(); saveFile();
return files; /* create file structure */
currentFile = {};
currentFile.blocks = [];
currentFile.deletedLines = 0;
currentFile.addedLines = 0;
};
var startBlock = function (line) {
saveBlock();
var values;
if (values = /^@@ -(\d+),\d+ \+(\d+),\d+ @@.*/.exec(line)) {
currentFile.isTripleDiff = false;
} else if (values = /^@@@ -(\d+),\d+ -\d+,\d+ \+(\d+),\d+ @@@.*/.exec(line)) {
currentFile.isTripleDiff = true;
} else {
values = [0, 0];
currentFile.isTripleDiff = false;
}
oldLine = values[1];
newLine = values[2];
/* create block metadata */
currentBlock = {};
currentBlock.lines = [];
currentBlock.oldStartLine = oldLine;
currentBlock.newStartLine = newLine;
currentBlock.header = line;
};
var createLine = function (line) {
var currentLine = {};
currentLine.content = line;
/* fill the line data */
if (startsWith(line, "+") || startsWith(line, " +")) {
currentFile.addedLines++;
currentLine.type = LINE_TYPE.INSERTS;
currentLine.oldNumber = null;
currentLine.newNumber = newLine++;
currentBlock.lines.push(currentLine);
} else if (startsWith(line, "-") || startsWith(line, " -")) {
currentFile.deletedLines++;
currentLine.type = LINE_TYPE.DELETES;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = null;
currentBlock.lines.push(currentLine);
} else {
currentLine.type = LINE_TYPE.CONTEXT;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = newLine++;
currentBlock.lines.push(currentLine);
}
};
var diffLines = diffInput.split("\n");
diffLines.forEach(function (line) {
// Unmerged paths, and possibly other non-diffable files
// https://github.com/scottgonzalez/pretty-diff/issues/11
// Also, remove some useless lines
if (!line || startsWith(line, "*") ||
startsWith(line, "new") || startsWith(line, "index")) {
return;
}
var values = [];
if (startsWith(line, "diff")) {
startFile();
} else if (currentFile && !currentFile.oldName && (values = /^--- a\/(\S+).*$/.exec(line))) {
currentFile.oldName = values[1];
} else if (currentFile && !currentFile.newName && (values = /^\+\+\+ [b]?\/(\S+).*$/.exec(line))) {
currentFile.newName = values[1];
var fileSplit = currentFile.newName.split(".");
currentFile.language = fileSplit[fileSplit.length - 1];
} else if (currentFile && startsWith(line, "@@")) {
startBlock(line);
} else if (currentBlock) {
createLine(line);
}
});
saveBlock();
saveFile();
return files;
}; };
/* /*
@ -179,82 +186,91 @@ var generateDiffJson = function (diffInput) {
*/ */
var generateJsonHtml = function (diffFiles) { var generateJsonHtml = function (diffFiles) {
return "<div class=\"d2h-wrapper\">\n" + return "<div class=\"d2h-wrapper\">\n" +
diffFiles.map(function (file) { diffFiles.map(function (file) {
return "<div class=\"d2h-file-wrapper\" data-lang=\"" + file.language + "\">\n" + return "<div class=\"d2h-file-wrapper\" data-lang=\"" + file.language + "\">\n" +
" <div class=\"d2h-file-header\">\n" + " <div class=\"d2h-file-header\">\n" +
" <div class=\"d2h-file-stats\">\n" + " <div class=\"d2h-file-stats\">\n" +
" <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" + " <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" +
" <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" + " <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" + " <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"d2h-file-diff\">\n" + " <div class=\"d2h-file-diff\">\n" +
" <div class=\"d2h-code-wrapper\">\n" + " <div class=\"d2h-code-wrapper\">\n" +
" <table class=\"d2h-diff-table\">\n" + " <table class=\"d2h-diff-table\">\n" +
" <tbody class=\"d2h-diff-tbody\">\n" + " <tbody class=\"d2h-diff-tbody\">\n" +
" " + generateFileHtml(file) + " " + generateFileHtml(file) +
" </tbody>\n" + " </tbody>\n" +
" </table>\n" + " </table>\n" +
" </div>\n" + " </div>\n" +
" </div>\n" + " </div>\n" +
" </div>\n"; " </div>\n";
}).join("\n") + }).join("\n") +
"</div>\n"; "</div>\n";
}; };
var generateFileHtml = function (file) { var generateFileHtml = function (file) {
return file.blocks.map(function (block) { return file.blocks.map(function (block) {
var lines = "<tr>\n" + var lines = "<tr>\n" +
" <td class=\"d2h-code-linenumber " + LINE_TYPE.INFO + "\"></td>\n" + " <td class=\"d2h-code-linenumber " + LINE_TYPE.INFO + "\"></td>\n" +
" <td class=\"" + LINE_TYPE.INFO + "\">" + " <td class=\"" + LINE_TYPE.INFO + "\">" +
" <div class=\"d2h-code-line " + LINE_TYPE.INFO + "\">" + escape(block.header) + "</div>" + " <div class=\"d2h-code-line " + LINE_TYPE.INFO + "\">" + escape(block.header) + "</div>" +
" </td>\n" + " </td>\n" +
"</tr>\n"; "</tr>\n";
for (var i = 0; i < block.lines.length; i++) {
var prevLine = block.lines[i - 1];
var line = block.lines[i];
var newLine = block.lines[i + 1];
var nextNewLine = block.lines[i + 2];
var isOppositeTypeTwoLineBlock = var oldLines = [], newLines = [];
line.type == LINE_TYPE.DELETES && var processedOldLines = [], processedNewLines = [];
newLine && newLine.type == LINE_TYPE.INSERTS &&
(!nextNewLine || nextNewLine && nextNewLine.type != LINE_TYPE.INSERTS) &&
(!prevLine || prevLine && prevLine.type != LINE_TYPE.DELETES);
var escapedLine = escape(line.content); for (var i = 0; i < block.lines.length; i++) {
var line = block.lines[i];
if (isOppositeTypeTwoLineBlock) { if (line.type == LINE_TYPE.DELETES && !newLines.length) {
var nextEscapedLine = escape(newLine.content); oldLines.push(line);
} else if (line.type == LINE_TYPE.INSERTS && oldLines.length > newLines.length) {
newLines.push(line);
} else {
if (oldLines.length === newLines.length) {
for (var j = 0; j < oldLines.length; j++) {
var oldLine = oldLines[j];
var newLine = newLines[j];
var oldEscapedLine = escape(oldLine.content);
var newEscapedLine = escape(newLine.content);
var diff = diffHighlight(escapedLine, nextEscapedLine); var diff = diffHighlight(oldEscapedLine, newEscapedLine, file.isTripleDiff);
lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, diff.o) + processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.o);
generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n); processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n);
}
i++; lines += processedOldLines + processedNewLines;
} else {
lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine); oldLines = [];
} newLines = [];
processedOldLines = [];
processedNewLines = []
} else {
lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, escape(line.content));
} }
}
}
return lines; return lines;
}).join("\n"); }).join("\n");
}; };
var generateLineHtml = function (type, oldNumber, newNumber, content) { var generateLineHtml = function (type, oldNumber, newNumber, content) {
return "<tr>\n" + return "<tr>\n" +
" <td class=\"d2h-code-linenumber " + type + "\">" + " <td class=\"d2h-code-linenumber " + type + "\">" +
" <div class=\"line-num1\">" + valueOrEmpty(oldNumber) + "</div>" + " <div class=\"line-num1\">" + valueOrEmpty(oldNumber) + "</div>" +
" <div class=\"line-num2\">" + valueOrEmpty(newNumber) + "</div>" + " <div class=\"line-num2\">" + valueOrEmpty(newNumber) + "</div>" +
" </td>\n" + " </td>\n" +
" <td class=\"" + type + "\">" + " <td class=\"" + type + "\">" +
" <div class=\"d2h-code-line " + type + "\">" + content + "</div>" + " <div class=\"d2h-code-line " + type + "\">" + content + "</div>" +
" </td>\n" + " </td>\n" +
"</tr>\n"; "</tr>\n";
}; };
/* /*
@ -262,109 +278,109 @@ var generateLineHtml = function (type, oldNumber, newNumber, content) {
*/ */
var generateSideBySideJsonHtml = function (diffFiles) { var generateSideBySideJsonHtml = function (diffFiles) {
return "<div class=\"d2h-wrapper\">\n" + return "<div class=\"d2h-wrapper\">\n" +
diffFiles.map(function (file) { diffFiles.map(function (file) {
var diffs = generateSideBySideFileHtml(file); var diffs = generateSideBySideFileHtml(file);
return "<div class=\"d2h-file-wrapper\" data-lang=\"" + file.language + "\">\n" + return "<div class=\"d2h-file-wrapper\" data-lang=\"" + file.language + "\">\n" +
" <div class=\"d2h-file-header\">\n" + " <div class=\"d2h-file-header\">\n" +
" <div class=\"d2h-file-stats\">\n" + " <div class=\"d2h-file-stats\">\n" +
" <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" + " <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" +
" <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" + " <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" + " <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"d2h-files-diff\">\n" + " <div class=\"d2h-files-diff\">\n" +
" <div class=\"d2h-file-side-diff\">\n" + " <div class=\"d2h-file-side-diff\">\n" +
" <div class=\"d2h-code-wrapper\">\n" + " <div class=\"d2h-code-wrapper\">\n" +
" <table class=\"d2h-diff-table\">\n" + " <table class=\"d2h-diff-table\">\n" +
" <tbody class=\"d2h-diff-tbody\">\n" + " <tbody class=\"d2h-diff-tbody\">\n" +
" " + diffs.left + " " + diffs.left +
" </tbody>\n" + " </tbody>\n" +
" </table>\n" + " </table>\n" +
" </div>\n" + " </div>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"d2h-file-side-diff\">\n" + " <div class=\"d2h-file-side-diff\">\n" +
" <div class=\"d2h-code-wrapper\">\n" + " <div class=\"d2h-code-wrapper\">\n" +
" <table class=\"d2h-diff-table\">\n" + " <table class=\"d2h-diff-table\">\n" +
" <tbody class=\"d2h-diff-tbody\">\n" + " <tbody class=\"d2h-diff-tbody\">\n" +
" " + diffs.right + " " + diffs.right +
" </tbody>\n" + " </tbody>\n" +
" </table>\n" + " </table>\n" +
" </div>\n" + " </div>\n" +
" </div>\n" + " </div>\n" +
" </div>\n" + " </div>\n" +
" </div>\n"; " </div>\n";
}).join("\n") + }).join("\n") +
"</div>\n"; "</div>\n";
}; };
var generateSideBySideFileHtml = function (file) { var generateSideBySideFileHtml = function (file) {
var fileHtml = {}; var fileHtml = {};
fileHtml.left = ""; fileHtml.left = "";
fileHtml.right = ""; fileHtml.right = "";
file.blocks.forEach(function (block) { file.blocks.forEach(function (block) {
fileHtml.left += "<tr>\n" + fileHtml.left += "<tr>\n" +
" <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" + " <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" +
" <td class=\"" + LINE_TYPE.INFO + "\">" + " <td class=\"" + LINE_TYPE.INFO + "\">" +
" <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\">" + escape(block.header) + "</div>" + " <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\">" + escape(block.header) + "</div>" +
" </td>\n" + " </td>\n" +
"</tr>\n"; "</tr>\n";
fileHtml.right += "<tr>\n" + fileHtml.right += "<tr>\n" +
" <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" + " <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" +
" <td class=\"" + LINE_TYPE.INFO + "\">" + " <td class=\"" + LINE_TYPE.INFO + "\">" +
" <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\"></div>" + " <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\"></div>" +
" </td>\n" + " </td>\n" +
"</tr>\n"; "</tr>\n";
for (var i = 0; i < block.lines.length; i++) { for (var i = 0; i < block.lines.length; i++) {
var prevLine = block.lines[i - 1]; var prevLine = block.lines[i - 1];
var line = block.lines[i]; var line = block.lines[i];
var newLine = block.lines[i + 1]; var newLine = block.lines[i + 1];
var nextNewLine = block.lines[i + 2]; var nextNewLine = block.lines[i + 2];
var isOpositeTypeTwoLineBlock = line.type == LINE_TYPE.DELETES && newLine && newLine.type == LINE_TYPE.INSERTS && var isOpositeTypeTwoLineBlock = line.type == LINE_TYPE.DELETES && newLine && newLine.type == LINE_TYPE.INSERTS &&
(!nextNewLine || nextNewLine && nextNewLine.type != LINE_TYPE.INSERTS) && (!nextNewLine || nextNewLine && nextNewLine.type != LINE_TYPE.INSERTS) &&
(!prevLine || prevLine && prevLine.type != LINE_TYPE.DELETES); (!prevLine || prevLine && prevLine.type != LINE_TYPE.DELETES);
var escapedLine = escape(line.content); var escapedLine = escape(line.content);
if (isOpositeTypeTwoLineBlock) { if (isOpositeTypeTwoLineBlock) {
var nextEscapedLine = escape(newLine.content); var nextEscapedLine = escape(newLine.content);
var diff = diffHighlight(escapedLine, nextEscapedLine); var diff = diffHighlight(escapedLine, nextEscapedLine, file.isTripleDiff);
fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, diff.o); fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, diff.o);
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n); fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n);
i++; i++;
} else if (line.type == LINE_TYPE.DELETES) { } else if (line.type == LINE_TYPE.DELETES) {
fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, escapedLine); fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, escapedLine);
fileHtml.right += generateSingleLineHtml(LINE_TYPE.CONTEXT, "", "", ""); fileHtml.right += generateSingleLineHtml(LINE_TYPE.CONTEXT, "", "", "");
} else if (line.type == LINE_TYPE.INSERTS) { } else if (line.type == LINE_TYPE.INSERTS) {
fileHtml.left += generateSingleLineHtml(LINE_TYPE.CONTEXT, "", "", ""); fileHtml.left += generateSingleLineHtml(LINE_TYPE.CONTEXT, "", "", "");
fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine); fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine);
} else { } else {
fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, escapedLine); fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, escapedLine);
fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine); fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine);
} }
} }
}); });
return fileHtml; return fileHtml;
}; };
var generateSingleLineHtml = function (type, number, content) { var generateSingleLineHtml = function (type, number, content) {
return "<tr>\n" + return "<tr>\n" +
" <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" + " <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
" <td class=\"" + type + "\">" + " <td class=\"" + type + "\">" +
" <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" + " <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" +
" </td>\n" + " </td>\n" +
" </tr>\n"; " </tr>\n";
}; };
/* /*
@ -372,23 +388,23 @@ var generateSingleLineHtml = function (type, number, content) {
*/ */
var getDiffName = function (oldFilename, newFilename) { var getDiffName = function (oldFilename, newFilename) {
if (oldFilename && newFilename && oldFilename !== newFilename) { if (oldFilename && newFilename && oldFilename !== newFilename) {
return oldFilename + " -> " + newFilename; return oldFilename + " -> " + newFilename;
} else if (newFilename) { } else if (newFilename) {
return newFilename; return newFilename;
} else if (oldFilename) { } else if (oldFilename) {
return oldFilename; return oldFilename;
} else { } else {
return "Unknown filename"; return "Unknown filename";
} }
}; };
var removeIns = function (line) { var removeIns = function (line) {
return line.replace(/(<ins>((.|\n)*?)<\/ins>)/g, ""); return line.replace(/(<ins>((.|\n)*?)<\/ins>)/g, "");
}; };
var removeDel = function (line) { var removeDel = function (line) {
return line.replace(/(<del>((.|\n)*?)<\/del>)/g, ""); return line.replace(/(<del>((.|\n)*?)<\/del>)/g, "");
}; };
/* /*
@ -396,27 +412,47 @@ var removeDel = function (line) {
*/ */
function escape(str) { function escape(str) {
return str.slice(0) return str.slice(0)
.replace(/&/g, "&amp;") .replace(/&/g, "&amp;")
.replace(/</g, "&lt;") .replace(/</g, "&lt;")
.replace(/>/g, "&gt;") .replace(/>/g, "&gt;")
.replace(/\t/g, " "); .replace(/\t/g, " ");
} }
function startsWith(str, start) { function startsWith(str, start) {
return str.indexOf(start) === 0; return str.indexOf(start) === 0;
} }
function valueOrEmpty(value) { function valueOrEmpty(value) {
return value ? value : ""; return value ? value : "";
} }
function diffHighlight(diffLine1, diffLine2) { function diffHighlight(diffLine1, diffLine2, isTripleDiff) {
/* remove the initial -/+ to avoid always having diff in the first char */ var lineStart1, lineStart2;
var highlightedLine = JsDiff(diffLine1.substr(1), diffLine2.substr(1));
return { var prefixSize = 1;
o: diffLine1.charAt(0) + removeIns(highlightedLine),
n: diffLine2.charAt(0) + removeDel(highlightedLine) if (isTripleDiff) prefixSize = 2;
}
lineStart1 = diffLine1.substr(0, prefixSize);
lineStart2 = diffLine2.substr(0, prefixSize);
diffLine1 = diffLine1.substr(prefixSize);
diffLine2 = diffLine2.substr(prefixSize);
var diff = JsDiff.diffChars(diffLine1, diffLine2);
var highlightedLine = "";
diff.forEach(function (part) {
var elemType = part.added ? 'ins' : part.removed ? 'del' : null;
if (elemType !== null) highlightedLine += "<" + elemType + ">" + part.value + "</" + elemType + ">";
else highlightedLine += part.value;
});
return {
o: lineStart1 + removeIns(highlightedLine),
n: lineStart2 + removeDel(highlightedLine)
}
} }

3
index.html
View file

@ -17,7 +17,8 @@
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jsdiff.js"></script> <!--<script type="text/javascript" src="jsdiff.js"></script>-->
<script type="text/javascript" src="diff.js"></script>
<script type="text/javascript" src="diff2html.js"></script> <script type="text/javascript" src="diff2html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/scala.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/scala.min.js"></script>