/*
*
* Diff to HTML (diff2html.js)
* Author: rtfpessoa
*
* Diff commands:
* git diff
*/
var LINE_TYPE = {
INSERTS: "d2h-ins",
DELETES: "d2h-del",
CONTEXT: "d2h-cntx",
INFO: "d2h-info"
};
function Diff2Html() {
}
/*
* Generates pretty html from string diff input
*/
Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput) {
var diffJson = generateDiffJson(diffInput);
return generateJsonHtml(diffJson);
};
/*
* Generates json object from string diff input
*/
Diff2Html.prototype.getJsonFromDiff = function (diffInput) {
return generateDiffJson(diffInput);
};
/*
* Generates pretty html from a json object
*/
Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson) {
return generateJsonHtml(diffJson);
};
/*
* Generates pretty side by side html from string diff input
*/
Diff2Html.prototype.getPrettySideBySideHtmlFromDiff = function (diffInput) {
var diffJson = generateDiffJson(diffInput);
return generateSideBySideJsonHtml(diffJson);
};
/*
* Generates pretty side by side html from a json object
*/
Diff2Html.prototype.getPrettySideBySideHtmlFromJson = function (diffJson) {
return generateSideBySideJsonHtml(diffJson);
};
var generateDiffJson = function (diffInput) {
var files = [],
currentFile = null,
currentBlock = null,
oldLine = null,
newLine = null;
var saveBlock = function () {
/* add previous block(if exists) before start a new file */
if (currentBlock) {
currentFile.blocks.push(currentBlock);
currentBlock = null;
}
};
var saveFile = function () {
/*
* add previous file(if exists) before start a new one
* if it has name (to avoid binary files errors)
*/
if (currentFile && currentFile.newName) {
files.push(currentFile);
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;
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;
};
/*
* Line By Line HTML
*/
var generateJsonHtml = function (diffFiles) {
return "
\n" +
diffFiles.map(function (file) {
return "
\n" +
" \n" +
"
\n" +
"
\n" +
"
\n" +
" \n" +
" " + generateFileHtml(file) +
" \n" +
"
\n" +
"
\n" +
"
\n" +
"
\n";
}).join("\n") +
"
\n";
};
var generateFileHtml = function (file) {
return file.blocks.map(function (block) {
var lines = "\n" +
" | \n" +
" " +
" " + escape(block.header) + " " +
" | \n" +
"
\n";
var oldLines = [], newLines = [];
var processedOldLines = [], processedNewLines = [];
for (var i = 0; i < block.lines.length; i++) {
var line = block.lines[i];
var escapedLine = escape(line.content);
if (line.type == LINE_TYPE.CONTEXT && !oldLines.length && !newLines.length) {
lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine);
} else if (line.type == LINE_TYPE.INSERTS && !oldLines.length && !newLines.length) {
lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine);
} else if (line.type == LINE_TYPE.DELETES && !newLines.length) {
oldLines.push(line);
} else if (line.type == LINE_TYPE.INSERTS && oldLines.length > newLines.length) {
newLines.push(line);
} else {
var j = 0;
var oldLine, newLine;
var oldEscapedLine, newEscapedLine;
if (oldLines.length === newLines.length) {
for (j = 0; j < oldLines.length; j++) {
oldLine = oldLines[j];
newLine = newLines[j];
oldEscapedLine = escape(oldLine.content);
newEscapedLine = escape(newLine.content);
var diff = diffHighlight(oldEscapedLine, newEscapedLine, file.isTripleDiff);
processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.o);
processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n);
}
lines += processedOldLines + processedNewLines;
} else {
for (j = 0; j < oldLines.length; j++) {
oldLine = oldLines[j];
oldEscapedLine = escape(oldLine.content);
lines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, oldEscapedLine);
}
for (j = 0; j < newLines.length; j++) {
newLine = newLines[j];
newEscapedLine = escape(newLine.content);
lines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, newEscapedLine);
}
}
oldLines = [];
newLines = [];
processedOldLines = [];
processedNewLines = [];
i--;
}
}
return lines;
}).join("\n");
};
var generateLineHtml = function (type, oldNumber, newNumber, content) {
return "\n" +
" | " +
" " + valueOrEmpty(oldNumber) + " " +
" " + valueOrEmpty(newNumber) + " " +
" | \n" +
" " +
" " + content + " " +
" | \n" +
"
\n";
};
/*
* Side By Side HTML (work in progress)
*/
var generateSideBySideJsonHtml = function (diffFiles) {
return "\n" +
diffFiles.map(function (file) {
var diffs = generateSideBySideFileHtml(file);
return "
\n" +
" \n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
" \n" +
" " + diffs.left +
" \n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
" \n" +
" " + diffs.right +
" \n" +
"
\n" +
"
\n" +
"
\n" +
"
\n" +
"
\n";
}).join("\n") +
"
\n";
};
var generateSideBySideFileHtml = function (file) {
var fileHtml = {};
fileHtml.left = "";
fileHtml.right = "";
file.blocks.forEach(function (block) {
fileHtml.left += "\n" +
" | \n" +
" " +
" " + escape(block.header) + " " +
" | \n" +
"
\n";
fileHtml.right += "\n" +
" | \n" +
" " +
" " +
" | \n" +
"
\n";
var oldLines = [], newLines = [];
for (var i = 0; i < block.lines.length; i++) {
var line = block.lines[i];
var escapedLine = escape(line.content);
if (line.type == LINE_TYPE.CONTEXT && !oldLines.length && !newLines.length) {
fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, escapedLine);
fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine);
} else if (line.type == LINE_TYPE.INSERTS && !oldLines.length && !newLines.length) {
fileHtml.left += generateSingleLineHtml(LINE_TYPE.CONTEXT, "", "", "");
fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine);
} else if (line.type == LINE_TYPE.DELETES && !newLines.length) {
oldLines.push(line);
} else if (line.type == LINE_TYPE.INSERTS && oldLines.length > newLines.length) {
newLines.push(line);
} else {
var j = 0;
var oldLine, newLine;
var oldEscapedLine, newEscapedLine;
if (oldLines.length === newLines.length) {
for (j = 0; j < oldLines.length; j++) {
oldLine = oldLines[j];
newLine = newLines[j];
oldEscapedLine = escape(oldLine.content);
newEscapedLine = escape(newLine.content);
var diff = diffHighlight(oldEscapedLine, newEscapedLine, file.isTripleDiff);
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.o);
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n);
}
} else {
var maxLinesNumber = Math.max(oldLines.length, newLines.length);
for (j = 0; j < maxLinesNumber; j++) {
oldLine = oldLines[j];
newLine = newLines[j];
if (oldLine && newLine) {
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, escape(oldLine.content));
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, escape(newLine.content));
} else if (oldLine) {
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, escape(oldLine.content));
fileHtml.right += generateSingleLineHtml(LINE_TYPE.CONTEXT, "", "", "");
} else if (newLine) {
fileHtml.left += generateSingleLineHtml(LINE_TYPE.CONTEXT, "", "", "");
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, escape(newLine.content));
} else {
console.error("How did it get here?");
}
}
}
oldLines = [];
newLines = [];
i--;
}
}
});
return fileHtml;
};
var generateSingleLineHtml = function (type, number, content) {
return "\n" +
" | " + number + " | \n" +
" " +
" " + content + " " +
" | \n" +
"
\n";
};
/*
* HTML Helpers
*/
var getDiffName = function (oldFilename, newFilename) {
if (oldFilename && newFilename && oldFilename !== newFilename) {
return oldFilename + " -> " + newFilename;
} else if (newFilename) {
return newFilename;
} else if (oldFilename) {
return oldFilename;
} else {
return "Unknown filename";
}
};
var removeIns = function (line) {
return line.replace(/(((.|\n)*?)<\/ins>)/g, "");
};
var removeDel = function (line) {
return line.replace(/(((.|\n)*?)<\/del>)/g, "");
};
/*
* Utils
*/
function escape(str) {
return str.slice(0)
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/\t/g, " ");
}
function startsWith(str, start) {
return str.indexOf(start) === 0;
}
function valueOrEmpty(value) {
return value ? value : "";
}
function diffHighlight(diffLine1, diffLine2, isTripleDiff) {
var lineStart1, lineStart2;
var prefixSize = 1;
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)
}
}