Attempt to use nunjuck templates in Line By Line

dist/diff2html.css

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

package.json

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

src/line-by-line-printer.js

@@ -11,34 +11,18 @@
   var printerUtils = require('./printer-utils.js').PrinterUtils;
   var utils = require('./utils.js').Utils;
   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) {
     this.config = config;
   }
 
   LineByLinePrinter.prototype.makeFileDiffHtml = function(file, diffs) {
-    return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
-      '     <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';
+    return nunjucksEnv.render('file-diff.html', {'file': file, 'diffs': diffs});
   };
 
   LineByLinePrinter.prototype.generateLineByLineJsonHtml = function(diffFiles) {
@@ -64,12 +48,7 @@
   });
 
   LineByLinePrinter.prototype.makeColumnLineNumberHtml = function(block) {
-      return '<tr>\n' +
-        '  <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';
+    return nunjucksEnv.render('column-line-number.html', {block: block});
   };
 
   LineByLinePrinter.prototype._generateFileHtml = function(file) {
@@ -115,10 +94,10 @@
             var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config);
 
             processedOldLines +=
-              that._generateLineHtml(deleteType, oldLine.oldNumber, oldLine.newNumber,
+              that.makeLineHtml(deleteType, oldLine.oldNumber, oldLine.newNumber,
                 diff.first.line, diff.first.prefix);
             processedNewLines +=
-              that._generateLineHtml(insertType, newLine.oldNumber, newLine.newNumber,
+              that.makeLineHtml(insertType, newLine.oldNumber, newLine.newNumber,
                 diff.second.line, diff.second.prefix);
           }
 
@@ -140,9 +119,9 @@
         }
 
         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) {
-          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) {
           oldLines.push(line);
         } else if (line.type === diffParser.LINE_TYPE.INSERTS && Boolean(oldLines.length)) {
@@ -165,52 +144,29 @@
     for (var i = 0; i < oldLines.length; i++) {
       var oldLine = oldLines[i];
       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++) {
       var newLine = newLines[j];
       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;
   };
 
-  LineByLinePrinter.prototype.makeLineHtml = function(type, oldNumber, newNumber, htmlPrefix, htmlContent) {
-    return '<tr>\n' +
-      '  <td class="d2h-code-linenumber ' + type + '">' +
-      '    <div class="line-num1">' + utils.valueOrEmpty(oldNumber) + '</div>' +
-      '    <div class="line-num2">' + utils.valueOrEmpty(newNumber) + '</div>' +
-      '  </td>\n' +
-      '  <td class="' + type + '">' +
-      '    <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.makeLineHtml = function(type, oldNumber, newNumber, content, prefix) {
+    return nunjucksEnv.render('line.html',
+                              {type: type,
+                               oldNumber: oldNumber,
+                               newNumber: newNumber,
+                               prefix: prefix,
+                               content: content});
   };
 
   LineByLinePrinter.prototype._generateEmptyDiff = function() {
-    return '<tr>\n' +
-      '  <td class="' + diffParser.LINE_TYPE.INFO + '">' +
-      '    <div class="d2h-code-line ' + diffParser.LINE_TYPE.INFO + '">' +
-      'File without changes' +
-      '    </div>' +
-      '  </td>\n' +
-      '</tr>\n';
+    return nunjucksEnv.render('empty-diff.html', {});
   };
 
   module.exports.LineByLinePrinter = LineByLinePrinter;

src/templates/line-by-line/column-line-number.html

@@ -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>

src/templates/line-by-line/empty-diff.html

@@ -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>

src/templates/line-by-line/file-diff.html

@@ -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>

src/templates/line-by-line/line.html

@@ -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>

src/utils.js

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

test/line-by-line-tests.js

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