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

initial word diff

Browse source
This commit is contained in:
Rodrigo Fernandes 2014-08-30 17:29:27 +01:00
parent b95c4a60e7
commit 66970564dc
4 changed files with 355 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
diff2html.js
View file

@ -4,6 +4,10 @@
* Author: rtfpessoa
* Date: Friday 29 August 2014
*
* Useful commands:
* git diff HEAD~1
* git diff HEAD~1 --word-diff-regex='[[:alnum:]]+|[^[:space:]]'
* git diff HEAD~1 --word-diff-regex=.
*/
(function($, window) {
@ -18,13 +22,21 @@
DELETED: "delete"
};
var BLOCK_HEADER_LINE = "..."
var BLOCK_HEADER_LINE = "...";
function Diff2Html() {}
var wordDiffParser = WordDiffParser.getInstance();
Diff2Html.prototype.generatePrettyDiff = function(diffInput) {
function Diff2Html() {}
Diff2Html.prototype.generatePrettyDiff = function(diffInput, wordDiffInput) {
var diffFiles = splitByFile(diffInput);
var html = generateHtml(diffFiles);
var changedWords = wordDiffParser.generateChangedWords(wordDiffInput);
if (!changedWords) {
changedWords = {};
}
var html = generateHtml(diffFiles, changedWords);
return html;
};
@ -147,47 +159,74 @@
return files;
};
var generateHtml = function( diffFiles ) {
return diffFiles.map(function( file ) {
var generateHtml = function(diffFiles, changedWords) {
return diffFiles.map(function(file, index) {
var fileHeader = file.oldName === file.newName ? file.newName : file.oldName + " -> " + file.newName
return "<div class=\"file-wrapper\">" +
" <div class=\"file-header\">" +
" <div class=\"file-stats\">" +
" <span class=\"lines-added\">+" + file.addedLines + "</span>" +
" <span class=\"lines-deleted\">-" + file.deletedLines + "</span>" +
" </div>" +
" <div class=\"file-name\">" + fileHeader + "</div>" +
" </div>" +
" <div class=\"file-diff\">" +
" <div class=\"code-wrapper\">" +
" <table class=\"diff-table\">" +
" <tbody>" +
generateFileHtml(file) +
" </tbody>" +
" </table>" +
" </div>" +
" </div>" +
"</div>";
" <div class=\"file-header\">" +
" <div class=\"file-stats\">" +
" <span class=\"lines-added\">+" + file.addedLines + "</span>" +
" <span class=\"lines-deleted\">-" + file.deletedLines + "</span>" +
" </div>" +
" <div class=\"file-name\">" + fileHeader + "</div>" +
" </div>" +
" <div class=\"file-diff\">" +
" <div class=\"code-wrapper\">" +
" <table class=\"diff-table\">" +
" <tbody>" +
generateFileHtml(file, changedWords[index]) +
" </tbody>" +
" </table>" +
" </div>" +
" </div>" +
"</div>";
});
};
var generateFileHtml = function(file) {
var generateFileHtml = function(file, changedWords) {
return file.blocks.map(function(block) {
return block.lines.map(function(line) {
var oldLine = line.oldNumber ? line.oldNumber : "",
newLine = line.newNumber ? line.newNumber : "";
var oldLine = line.oldNumber ? line.oldNumber : "";
var newLine = line.newNumber ? line.newNumber : "";
var oldWords = [];
var newWords = [];
if (oldLine && oldLine !== BLOCK_HEADER_LINE &&
changedWords && changedWords.deletedWords && changedWords.deletedWords[oldLine]) {
oldWords = changedWords.deletedWords[oldLine];
}
if (newLine && newLine !== BLOCK_HEADER_LINE &&
changedWords && changedWords.addedWords && changedWords.addedWords[newLine]) {
newWords = changedWords.addedWords[newLine];
}
//var newLine = escape(line.content);
var newCodeLine = line.content;
newCodeLine = markWords(oldWords, newCodeLine, "del");
newCodeLine = markWords(newWords, newCodeLine, "ins");
return "<tr>" +
" <td class=\"code-linenumber " + line.type + "\">" + oldLine + "</td>" +
" <td class=\"code-linenumber " + line.type + "\">" + newLine + "</td>" +
" <td class=\"code-line " + line.type + "\">" + escape(line.content) + "</td>" +
" <td class=\"code-line " + line.type + "\"><pre>" + newCodeLine + "</pre></td>" +
"</tr>";
}).join("\n");
}).join("\n");
};
var markWords = function(words, line, clazz) {
var newLine = line;
words.forEach(function(word) {
newLine = newLine.replace(word, "<" + clazz + ">" + word + "</" + clazz + ">");
});
return newLine;
};
var escape = function(str) {
return str
.replace(/&/g, "&amp;")

18
style.css
View file

@ -150,8 +150,6 @@ td, th {
vertical-align: top;
white-space: pre;
overflow: visible;
padding-top: 4px;
padding-bottom: 4px;
}
.delete {
@ -172,3 +170,19 @@ td, th {
color: rgba(0,0,0,0.3);
border-color: #d5e4f2;
}
.code-line del {
display: inline-block;
margin-top: -1px;
text-decoration: none;
background-color: #ffb6ba;
font-weight: 700;
}
.code-line ins {
display: inline-block;
margin-top: -1px;
text-decoration: none;
background-color: #97f295;
font-weight: 700;
}

138
template.html
View file

@ -13,6 +13,7 @@
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="word-diff-parser.js"></script>
<script type="text/javascript" src="diff2html.js"></script>
<script>
var exInput = 'diff --git a/components/enginePlugins/src/main/scala/metrics/Tools.scala b/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
@ -50,8 +51,143 @@
' \n' +
' fileFolders.list().flatMap {';
var exWordInput = 'diff --git a/components/enginePlugins/src/main/scala/metrics/Tools.scala b/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'index c68cfb8..a1edc93 100644\n' +
'--- a/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'+++ b/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'@@ -1,6 +1,7 @@\n' +
'package metrics\n' +
' \n' +
'import java.io\n' +
'{+import java.nio.file.Files._+}\n' +
' \n' +
'import framework.common.Logger.LoggerSystem\n' +
'import org.apache.commons.io.FileUtils\n' +
'@@ -43,7 +44,7 @@ object Tools {\n' +
' }\n' +
' \n' +
' def withTempDir[A](block: io.File => A): A = {\n' +
' val dir = [-io.File.createTempFile("codacy", ".tmp")-]{+createTempDirectory("codacy").toFile+}\n' +
' \n' +
' val res = block(dir)\n' +
' FileUtils.deleteDirectory(dir)\n' +
'diff --git a/components/enginePlugins/src/main/scala/metrics/js/Plato.scala b/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'index 5935d36..4e7e085 100644\n' +
'--- a/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'+++ b/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'@@ -24,7 +24,7 @@ object Plato extends PlatoReads {\n' +
' withTempDir {\n' +
' outputDirectory =>\n' +
' runTool(directory, files, outputDirectory) match {\n' +
' case [-(_,-]{+(Some(_),+} tmpFileMapper) =>\n' +
' val fileFolders = new io.File(outputDirectory, "files")\n' +
' \n' +
' fileFolders.list().flatMap {';
var exDiffInput = 'diff --git a/components/enginePlugins/src/main/scala/metrics/Tools.scala b/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'index c68cfb8..a1edc93 100644\n' +
'--- a/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'+++ b/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'@@ -1,6 +1,7 @@\n' +
' package metrics\n' +
' \n' +
' import java.io\n' +
'+import java.nio.file.Files._\n' +
' \n' +
' import framework.common.Logger.LoggerSystem\n' +
' import org.apache.commons.io.FileUtils\n' +
'@@ -43,7 +44,7 @@ object Tools {\n' +
' }\n' +
' \n' +
' def withTempDir[A](block: io.File => A): A = {\n' +
'- val dir = io.File.createTempFile("codacy", ".tmp")\n' +
'+ val dir = createTempDirectory("codacy").toFile\n' +
' \n' +
' val res = block(dir)\n' +
' FileUtils.deleteDirectory(dir)\n' +
'diff --git a/components/enginePlugins/src/main/scala/metrics/js/Plato.scala b/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'index 5935d36..4e7e085 100644\n' +
'--- a/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'+++ b/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'@@ -24,7 +24,7 @@ object Plato extends PlatoReads {\n' +
' withTempDir {\n' +
' outputDirectory =>\n' +
' runTool(directory, files, outputDirectory) match {\n' +
'- case (_, tmpFileMapper) =>\n' +
'+ case (Some(_), tmpFileMapper) =>\n' +
' val fileFolders = new io.File(outputDirectory, "files")\n' +
' \n' +
' fileFolders.list().flatMap {';
var exBetterDiffInput = 'diff --git a/components/enginePlugins/src/main/scala/metrics/Tools.scala b/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'index c68cfb8..a1edc93 100644\n' +
'--- a/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'+++ b/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'@@ -1,6 +1,7 @@\n' +
'package metrics\n' +
' \n' +
'import java.io\n' +
'{+import java.nio.file.Files._+}\n' +
' \n' +
'import framework.common.Logger.LoggerSystem\n' +
'import org.apache.commons.io.FileUtils\n' +
'@@ -43,7 +44,7 @@ object Tools {\n' +
' }\n' +
' \n' +
' def withTempDir[A](block: io.File => A): A = {\n' +
' val dir = [-io.File.createTempFile-]{+createTempDirectory+}("codacy"[-, ".tmp"-]){+.toFile+}\n' +
' \n' +
' val res = block(dir)\n' +
' FileUtils.deleteDirectory(dir)\n' +
'diff --git a/components/enginePlugins/src/main/scala/metrics/js/Plato.scala b/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'index 5935d36..4e7e085 100644\n' +
'--- a/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'+++ b/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'@@ -24,7 +24,7 @@ object Plato extends PlatoReads {\n' +
' withTempDir {\n' +
' outputDirectory =>\n' +
' runTool(directory, files, outputDirectory) match {\n' +
' case ({+Some(+}_{+)+}, tmpFileMapper) =>\n' +
' val fileFolders = new io.File(outputDirectory, "files")\n' +
' \n' +
' fileFolders.list().flatMap {';
var exEvenBetterDiffInput = 'diff --git a/components/enginePlugins/src/main/scala/metrics/Tools.scala b/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'index c68cfb8..a1edc93 100644\n' +
'--- a/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'+++ b/components/enginePlugins/src/main/scala/metrics/Tools.scala\n' +
'@@ -1,6 +1,7 @@\n' +
'package metrics\n' +
' \n' +
'import java.io\n' +
'{+import java.nio.file.Files._+}\n' +
' \n' +
'import framework.common.Logger.LoggerSystem\n' +
'import org.apache.commons.io.FileUtils\n' +
'@@ -43,7 +44,7 @@ object Tools {\n' +
' }\n' +
' \n' +
' def withTempDir[A](block: io.File => A): A = {\n' +
' val dir = [-io.File.-]createTemp[-F-]{+D+}i[-l-]{+r+}e{+ctory+}("codacy"[-, "-]{+)+}.t[-mp")-]{+oFile+}\n' +
' \n' +
' val res = block(dir)\n' +
' FileUtils.deleteDirectory(dir)\n' +
'diff --git a/components/enginePlugins/src/main/scala/metrics/js/Plato.scala b/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'index 5935d36..4e7e085 100644\n' +
'--- a/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'+++ b/components/enginePlugins/src/main/scala/metrics/js/Plato.scala\n' +
'@@ -24,7 +24,7 @@ object Plato extends PlatoReads {\n' +
' withTempDir {\n' +
' outputDirectory =>\n' +
' runTool(directory, files, outputDirectory) match {\n' +
' case ({+Some(+}_{+)+}, tmpFileMapper) =>\n' +
' val fileFolders = new io.File(outputDirectory, "files")\n' +
' \n' +
' fileFolders.list().flatMap {';
$( document ).ready(function() {
$("#wrapper").html(Diff2Html.getInstance().generatePrettyDiff(exInput));
$("#wrapper").html(Diff2Html.getInstance().generatePrettyDiff(exDiffInput, exEvenBetterDiffInput));
//console.log(WordDiffParser.getInstance().generateChangedWords(exWordInput));
});
</script>

136
word-diff-parser.js Normal file
View file

@ -0,0 +1,136 @@
/*
*
* Word Diff Parser (word-diff-parser.js)
* Author: rtfpessoa
* Date: Saturday 30 August 2014
*
*/
(function($, window) {
var ClassVariable;
ClassVariable = (function() {
function WordDiffParser() {}
WordDiffParser.prototype.generateChangedWords = function(wordDiffInput) {
return wordDiffInput ? parseChangedWords(wordDiffInput) : null;
};
var parseChangedWords = function(wordDiffInput) {
var files = [],
currentFile = null,
oldLine = null,
newLine = null;
wordDiffInput.split("\n").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 || line.charAt(0) === "*" ||
line.indexOf("new") === 0 ||
line.indexOf("index") === 0 ||
line.indexOf("---") === 0 ||
line.indexOf("+++") === 0) {
return;
}
if (line.indexOf("diff") === 0) {
/* File Diff Line */
/* add previous file(if exists) before start a new one */
if (currentFile &&
(currentFile.addedWords.length || currentFile.deletedWords.length)) {
files.push(currentFile);
currentFile = null;
}
/* create file structure */
currentFile = {};
currentFile.addedWords = [];
currentFile.deletedWords = [];
/* save file paths, before and after the diff */
var values = /^diff --git a\/(\S+) b\/(\S+).*$/.exec(line);
currentFile.oldName = values[1];
currentFile.newName = values[2];
} else if (line.indexOf("@@") === 0) {
/* Diff Block Header Line */
var values = /^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line);
oldLine = values[2];
newLine = values[4];
} else {
/* Regular Diff Line */
var addedWords = [];
if (addedWords = line.match(/\{\+(.+?)\+\}/g)) {
addedWords = addedWords.map(function(word) {
return cleanWordMatch(word);
});
} else {
addedWords = [];
}
var deletedWords = [];
if (deletedWords = line.match(/\[-(.+?)-\]/g)) {
deletedWords = deletedWords.map(function(word) {
return cleanWordMatch(word);
});
} else {
deletedWords = [];
}
if (!addedWords.length && !deletedWords.length) {
oldLine++;
newLine++;
} else {
if (addedWords.length) {
currentFile.addedWords[newLine] = addedWords;
newLine++;
}
if (deletedWords.length) {
currentFile.deletedWords[oldLine] = deletedWords;
oldLine++;
}
}
}
});
/* add previous file(if exists) before start a new one */
if (currentFile &&
(currentFile.addedWords.length || currentFile.deletedWords.length)) {
files.push(currentFile);
currentFile = null;
}
return files;
};
var cleanWordMatch = function(str) {
return str.substr(2, str.length - 4);
};
/* singleton pattern */
var instance;
return {
getInstance: function() {
if (instance === undefined) {
instance = new WordDiffParser();
/* Hide the constructor so the returned objected can't be new'd */
instance.constructor = null;
}
return instance;
}
};
})();
window.WordDiffParser = ClassVariable;
return window.WordDiffParser;
})(jQuery, window);