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

Attempt to use nunjuck templates in Line By Line

Browse source
This commit is contained in:
Paulo Bu 2016-01-17 14:49:11 +01:00 committed by Rodrigo Fernandes
parent 82f0fb629e
commit da2cd63a75
9 changed files with 103 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
dist/diff2html.css vendored
View file

@ -93,7 +93,6 @@
.d2h-code-line { .d2h-code-line {
display: block; display: block;
white-space: pre;
padding: 0 10px; padding: 0 10px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;

3
package.json
View file

@ -53,7 +53,8 @@
"jscs": "^2.9.0", "jscs": "^2.9.0",
"mocha": "^2.4.5", "mocha": "^2.4.5",
"uglifyjs": "^2.4.10", "uglifyjs": "^2.4.10",
"webpack": "^1.12.13" "webpack": "^1.12.9",
"nunjucks": "^2.3.0"
}, },
"license": "MIT", "license": "MIT",
"files": [ "files": [

86
src/line-by-line-printer.js
View file

@ -11,34 +11,18 @@
var printerUtils = require('./printer-utils.js').PrinterUtils; var printerUtils = require('./printer-utils.js').PrinterUtils;
var utils = require('./utils.js').Utils; var utils = require('./utils.js').Utils;
var Rematch = require('./rematch.js').Rematch; var Rematch = require('./rematch.js').Rematch;
var nunjucks = require('nunjucks');
var nunjucksEnv = nunjucks.configure(__dirname + '/templates/line-by-line/')
.addGlobal('printerUtils', printerUtils)
.addGlobal('utils', utils)
.addGlobal('diffParser', diffParser);
function LineByLinePrinter(config) { function LineByLinePrinter(config) {
this.config = config; this.config = config;
} }
LineByLinePrinter.prototype.makeFileDiffHtml = function(file, diffs) { LineByLinePrinter.prototype.makeFileDiffHtml = function(file, diffs) {
return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' + return nunjucksEnv.render('file-diff.html', {'file': file, 'diffs': diffs});
' <div class="d2h-file-header">\n' +
' <div class="d2h-file-stats">\n' +
' <span class="d2h-lines-added">' +
' <span>+' + file.addedLines + '</span>\n' +
' </span>\n' +
' <span class="d2h-lines-deleted">' +
' <span>-' + file.deletedLines + '</span>\n' +
' </span>\n' +
' </div>\n' +
' <div class="d2h-file-name">' + printerUtils.getDiffName(file) + '</div>\n' +
' </div>\n' +
' <div class="d2h-file-diff">\n' +
' <div class="d2h-code-wrapper">\n' +
' <table class="d2h-diff-table">\n' +
' <tbody class="d2h-diff-tbody">\n' +
' ' + diffs +
' </tbody>\n' +
' </table>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n';
}; };
LineByLinePrinter.prototype.generateLineByLineJsonHtml = function(diffFiles) { LineByLinePrinter.prototype.generateLineByLineJsonHtml = function(diffFiles) {
@ -64,12 +48,7 @@
}); });
LineByLinePrinter.prototype.makeColumnLineNumberHtml = function(block) { LineByLinePrinter.prototype.makeColumnLineNumberHtml = function(block) {
return '<tr>\n' + return nunjucksEnv.render('column-line-number.html', {block: block});
' <td class="d2h-code-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
' <td class="' + diffParser.LINE_TYPE.INFO + '">' +
' <div class="d2h-code-line ' + diffParser.LINE_TYPE.INFO + '">' + utils.escape(block.header) + '</div>' +
' </td>\n' +
'</tr>\n';
}; };
LineByLinePrinter.prototype._generateFileHtml = function(file) { LineByLinePrinter.prototype._generateFileHtml = function(file) {
@ -115,10 +94,10 @@
var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config); var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config);
processedOldLines += processedOldLines +=
that._generateLineHtml(deleteType, oldLine.oldNumber, oldLine.newNumber, that.makeLineHtml(deleteType, oldLine.oldNumber, oldLine.newNumber,
diff.first.line, diff.first.prefix); diff.first.line, diff.first.prefix);
processedNewLines += processedNewLines +=
that._generateLineHtml(insertType, newLine.oldNumber, newLine.newNumber, that.makeLineHtml(insertType, newLine.oldNumber, newLine.newNumber,
diff.second.line, diff.second.prefix); diff.second.line, diff.second.prefix);
} }
@ -140,9 +119,9 @@
} }
if (line.type === diffParser.LINE_TYPE.CONTEXT) { if (line.type === diffParser.LINE_TYPE.CONTEXT) {
lines += that._generateLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine); lines += that.makeLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine);
} else if (line.type === diffParser.LINE_TYPE.INSERTS && !oldLines.length) { } else if (line.type === diffParser.LINE_TYPE.INSERTS && !oldLines.length) {
lines += that._generateLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine); lines += that.makeLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine);
} else if (line.type === diffParser.LINE_TYPE.DELETES) { } else if (line.type === diffParser.LINE_TYPE.DELETES) {
oldLines.push(line); oldLines.push(line);
} else if (line.type === diffParser.LINE_TYPE.INSERTS && Boolean(oldLines.length)) { } else if (line.type === diffParser.LINE_TYPE.INSERTS && Boolean(oldLines.length)) {
@ -165,52 +144,29 @@
for (var i = 0; i < oldLines.length; i++) { for (var i = 0; i < oldLines.length; i++) {
var oldLine = oldLines[i]; var oldLine = oldLines[i];
var oldEscapedLine = utils.escape(oldLine.content); var oldEscapedLine = utils.escape(oldLine.content);
lines += this._generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, oldEscapedLine); lines += this.makeLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, oldEscapedLine);
} }
for (var j = 0; j < newLines.length; j++) { for (var j = 0; j < newLines.length; j++) {
var newLine = newLines[j]; var newLine = newLines[j];
var newEscapedLine = utils.escape(newLine.content); var newEscapedLine = utils.escape(newLine.content);
lines += this._generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, newEscapedLine); lines += this.makeLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, newEscapedLine);
} }
return lines; return lines;
}; };
LineByLinePrinter.prototype.makeLineHtml = function(type, oldNumber, newNumber, htmlPrefix, htmlContent) { LineByLinePrinter.prototype.makeLineHtml = function(type, oldNumber, newNumber, content, prefix) {
return '<tr>\n' + return nunjucksEnv.render('line.html',
' <td class="d2h-code-linenumber ' + type + '">' + {type: type,
' <div class="line-num1">' + utils.valueOrEmpty(oldNumber) + '</div>' + oldNumber: oldNumber,
' <div class="line-num2">' + utils.valueOrEmpty(newNumber) + '</div>' + newNumber: newNumber,
' </td>\n' + prefix: prefix,
' <td class="' + type + '">' + content: content});
' <div class="d2h-code-line ' + type + '">' + htmlPrefix + htmlContent + '</div>' +
' </td>\n' +
'</tr>\n';
};
LineByLinePrinter.prototype._generateLineHtml = function(type, oldNumber, newNumber, content, prefix) {
var htmlPrefix = '';
if (prefix) {
htmlPrefix = '<span class="d2h-code-line-prefix">' + prefix + '</span>';
}
var htmlContent = '';
if (content) {
htmlContent = '<span class="d2h-code-line-ctn">' + content + '</span>';
}
return this.makeLineHtml(type, oldNumber, newNumber, htmlPrefix, htmlContent);
}; };
LineByLinePrinter.prototype._generateEmptyDiff = function() { LineByLinePrinter.prototype._generateEmptyDiff = function() {
return '<tr>\n' + return nunjucksEnv.render('empty-diff.html', {});
' <td class="' + diffParser.LINE_TYPE.INFO + '">' +
' <div class="d2h-code-line ' + diffParser.LINE_TYPE.INFO + '">' +
'File without changes' +
' </div>' +
' </td>\n' +
'</tr>\n';
}; };
module.exports.LineByLinePrinter = LineByLinePrinter; module.exports.LineByLinePrinter = LineByLinePrinter;

6
src/templates/line-by-line/column-line-number.html Normal file
View file

@ -0,0 +1,6 @@
<tr>
<td class="d2h-code-linenumber {{ diffParser.LINE_TYPE.INFO }}"></td>
<td class="{{ diffParser.LINE_TYPE.INFO }}">
<div class="d2h-code-line {{ diffParser.LINE_TYPE.INFO }}"> {{ utils.escape(block.header) }} </div>
</td>
</tr>

7
src/templates/line-by-line/empty-diff.html Normal file
View file

@ -0,0 +1,7 @@
<tr>
<td class="{{ diffParser.LINE_TYPE.INFO }}">
<div class="d2h-code-line {{ diffParser.LINE_TYPE.INFO }}">
File without changes
</div>
</td>
</tr>

22
src/templates/line-by-line/file-diff.html Normal file
View file

@ -0,0 +1,22 @@
<div id="{{ printerUtils.getHtmlId(file) }}" class="d2h-file-wrapper" data-lang="{{ file.language }}">
<div class="d2h-file-header">
<div class="d2h-file-stats">
<span class="d2h-lines-added">
<span>+{{ file.addedLines }}</span>
</span>
<span class="d2h-lines-deleted">
<span>-{{ file.deletedLines }}</span>
</span>
</div>
<div class="d2h-file-name">&nbsp;{{ printerUtils.getDiffName(file) }}</div>
</div>
<div class="d2h-file-diff">
<div class="d2h-code-wrapper">
<table class="d2h-diff-table">
<tbody class="d2h-diff-tbody">
{{ diffs | safe}}
</tbody>
</table>
</div>
</div>
</div>

16
src/templates/line-by-line/line.html Normal file
View file

@ -0,0 +1,16 @@
<tr>
<td class="d2h-code-linenumber {{ type }}">
<div class="line-num1">{{ utils.valueOrEmpty(oldNumber) | safe }}</div>
<div class="line-num2">{{ utils.valueOrEmpty(newNumber) | safe }}</div>
</td>
<td class="{{ type }}">
<div class="d2h-code-line {{ type }}">
{% if prefix %}
<span class="d2h-code-line-prefix">{{ utils.convertWhiteSpaceToNonBreakingSpace(prefix) | safe }}</span>
{% endif %}
{% if content %}
<span class="d2h-code-line-ctn">{{ utils.convertWhiteSpaceToNonBreakingSpace(content) | safe }}</span>
{% endif %}
</div>
</td>
</tr>

4
src/utils.js
View file

@ -10,6 +10,10 @@
function Utils() { function Utils() {
} }
Utils.prototype.convertWhiteSpaceToNonBreakingSpace = function(str) {
return str.slice(0).replace(/ /g, '&nbsp;');
};
Utils.prototype.escape = function(str) { Utils.prototype.escape = function(str) {
return str.slice(0) return str.slice(0)
.replace(/&/g, '&amp;') .replace(/&/g, '&amp;')

46
test/line-by-line-tests.js
View file

@ -9,32 +9,34 @@ describe('LineByLinePrinter', function() {
var lineByLinePrinter = new LineByLinePrinter({}); var lineByLinePrinter = new LineByLinePrinter({});
var fileHtml = lineByLinePrinter._generateEmptyDiff(); var fileHtml = lineByLinePrinter._generateEmptyDiff();
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-info">' + ' <td class="d2h-info">\n' +
' <div class="d2h-code-line d2h-info">' + ' <div class="d2h-code-line d2h-info">\n' +
'File without changes' + ' File without changes\n' +
' </div>' + ' </div>\n' +
' </td>\n' + ' </td>\n' +
'</tr>\n'; '</tr>\n';
assert.equal(expected, fileHtml); assert.equal(expected, fileHtml);
}); });
}); });
describe('_generateLineHtml', function() { describe('makeLineHtml', function() {
it('should work for insertions', function() { it('should work for insertions', function() {
var diffParser = require('../src/diff-parser.js').DiffParser; var diffParser = require('../src/diff-parser.js').DiffParser;
var lineByLinePrinter = new LineByLinePrinter({}); var lineByLinePrinter = new LineByLinePrinter({});
var fileHtml = lineByLinePrinter._generateLineHtml( var fileHtml = lineByLinePrinter.makeLineHtml(
diffParser.LINE_TYPE.INSERTS, '', 30, '+', 'test'); diffParser.LINE_TYPE.INSERTS, '', 30, '+', 'test');
fileHtml = fileHtml.replace(/\n\n+/g, '\n');
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-ins">' + ' <td class="d2h-code-linenumber d2h-ins">\n' +
' <div class="line-num1"></div>' + ' <div class="line-num1"></div>\n' +
' <div class="line-num2">30</div>' + ' <div class="line-num2">30</div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-ins">' + ' <td class="d2h-ins">\n' +
' <div class="d2h-code-line d2h-ins">' + ' <div class="d2h-code-line d2h-ins">\n' +
'<span class="d2h-code-line-prefix">test</span>' + ' <span class="d2h-code-line-prefix">test</span>\n' +
'<span class="d2h-code-line-ctn">+</span></div>' + ' <span class="d2h-code-line-ctn">+</span>\n' +
' </div>\n' +
' </td>\n' + ' </td>\n' +
'</tr>\n'; '</tr>\n';
@ -44,17 +46,19 @@ describe('LineByLinePrinter', function() {
var diffParser = require('../src/diff-parser.js').DiffParser; var diffParser = require('../src/diff-parser.js').DiffParser;
var lineByLinePrinter = new LineByLinePrinter({}); var lineByLinePrinter = new LineByLinePrinter({});
var fileHtml = lineByLinePrinter._generateLineHtml( var fileHtml = lineByLinePrinter.makeLineHtml(
diffParser.LINE_TYPE.DELETES, 30, '', '-', 'test'); diffParser.LINE_TYPE.DELETES, 30, '', '-', 'test');
fileHtml = fileHtml.replace(/\n\n+/g, '\n');
var expected = '<tr>\n' + var expected = '<tr>\n' +
' <td class="d2h-code-linenumber d2h-del">' + ' <td class="d2h-code-linenumber d2h-del">\n' +
' <div class="line-num1">30</div>' + ' <div class="line-num1">30</div>\n' +
' <div class="line-num2"></div>' + ' <div class="line-num2"></div>\n' +
' </td>\n' + ' </td>\n' +
' <td class="d2h-del">' + ' <td class="d2h-del">\n' +
' <div class="d2h-code-line d2h-del">' + ' <div class="d2h-code-line d2h-del">\n' +
'<span class="d2h-code-line-prefix">test</span>' + ' <span class="d2h-code-line-prefix">test</span>\n' +
'<span class="d2h-code-line-ctn">-</span></div>' + ' <span class="d2h-code-line-ctn">-</span>\n' +
' </div>\n' +
' </td>\n' + ' </td>\n' +
'</tr>\n'; '</tr>\n';