Use hogan.js as templating engine

package.json

@@ -42,19 +42,22 @@
     "codacy": "istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | ./node_modules/.bin/codacy-coverage && rm -rf ./coverage"
   },
   "main": "./src/diff2html.js",
+  "browser": {
+    "fs": false
+  },
   "dependencies": {
     "diff": "^2.2.2",
-    "nunjucks": "^2.4.1"
+    "hogan.js": "^3.0.2"
   },
   "devDependencies": {
+    "browserify": "^13.0.0",
     "clean-css": "^3.4.10",
     "codacy-coverage": "^1.1.3",
     "fast-html-parser": "^1.0.1",
     "istanbul": "^0.4.2",
     "jscs": "^2.11.0",
     "mocha": "^2.4.5",
-    "uglifyjs": "^2.4.10",
+    "uglifyjs": "^2.4.10"
-    "webpack": "^1.12.14"
   },
   "license": "MIT",
   "files": [

release.sh

@@ -30,28 +30,28 @@ echo "Cleaning previous versions ..."
 rm -rf ${OUTPUT_DIR}
 mkdir -p ${OUTPUT_DIR}
 
-echo "Generating js aggregation file in ${OUTPUT_JS_FILE}"
-webpack ${INPUT_JS_FILE} ${OUTPUT_JS_FILE}
-
-echo "Minifying ${OUTPUT_JS_FILE} to ${OUTPUT_MIN_JS_FILE}"
-uglifyjs ${OUTPUT_JS_FILE} -c -o ${OUTPUT_MIN_JS_FILE}
-
-echo "Generating js ui aggregation file in ${OUTPUT_JS_UI_FILE}"
-webpack ${INPUT_JS_UI_FILE} ${OUTPUT_JS_UI_FILE}
-
-echo "Minifying ${OUTPUT_JS_UI_FILE} to ${OUTPUT_MIN_JS_UI_FILE}"
-uglifyjs ${OUTPUT_JS_UI_FILE} -c -o ${OUTPUT_MIN_JS_UI_FILE}
-
-echo "Pre-compile nunjucks templates in ${INTPUT_TEMPLATES_DIR}"
-nunjucks-precompile ${INTPUT_TEMPLATES_DIR} > ${OUTPUT_TEMPLATES_FILE}
-
-echo "Minifying ${OUTPUT_TEMPLATES_FILE} to ${OUTPUT_MIN_TEMPLATES_FILE}"
-uglifyjs ${OUTPUT_TEMPLATES_FILE} -c -o ${OUTPUT_MIN_TEMPLATES_FILE}
-
 echo "Copying css file to ${OUTPUT_CSS_FILE}"
 cp -f ${INPUT_CSS_FILE} ${OUTPUT_CSS_FILE}
 
 echo "Minifying ${OUTPUT_CSS_FILE} to ${OUTPUT_MIN_CSS_FILE}"
 cleancss --advanced --compatibility=ie8 -o ${OUTPUT_MIN_CSS_FILE} ${OUTPUT_CSS_FILE}
 
+echo "Pre-compile hogan.js templates in ${INTPUT_TEMPLATES_DIR}"
+hulk --variable "browserTemplates" ${INTPUT_TEMPLATES_DIR}/*.mustache > ${OUTPUT_TEMPLATES_FILE}
+
+echo "Minifying ${OUTPUT_TEMPLATES_FILE} to ${OUTPUT_MIN_TEMPLATES_FILE}"
+uglifyjs ${OUTPUT_TEMPLATES_FILE} -c -o ${OUTPUT_MIN_TEMPLATES_FILE}
+
+echo "Generating js aggregation file in ${OUTPUT_JS_FILE}"
+browserify -e ${INPUT_JS_FILE} -o ${OUTPUT_JS_FILE}
+
+echo "Minifying ${OUTPUT_JS_FILE} to ${OUTPUT_MIN_JS_FILE}"
+uglifyjs ${OUTPUT_JS_FILE} -c -o ${OUTPUT_MIN_JS_FILE}
+
+echo "Generating js ui aggregation file in ${OUTPUT_JS_UI_FILE}"
+browserify -e ${INPUT_JS_UI_FILE} -o ${OUTPUT_JS_UI_FILE}
+
+echo "Minifying ${OUTPUT_JS_UI_FILE} to ${OUTPUT_MIN_JS_UI_FILE}"
+uglifyjs ${OUTPUT_JS_UI_FILE} -c -o ${OUTPUT_MIN_JS_UI_FILE}
+
 echo "diff2html release created successfully!"

sample/index.html

@@ -16,6 +16,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/languages/scala.min.js"></script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js"></script>
+
     <!-- diff2html -->
     <link rel="stylesheet" type="text/css" href="../dist/diff2html.css">
     <script type="text/javascript" src="../dist/diff2html-templates.js"></script>

src/hoganjs-utils.js

@@ -0,0 +1,58 @@
+/*
+ *
+ * Utils (hoganjs-utils.js)
+ * Author: rtfpessoa
+ *
+ */
+
+(function() {
+
+  var fs = require('fs');
+  var path = require('path');
+
+  var hogan = require('hogan.js');
+
+  var templatesPath = path.resolve(__dirname, 'templates');
+  var templatesCache = {};
+
+  function HoganJsUtils() {
+  }
+
+  HoganJsUtils.prototype.render = function(namespace, view, params) {
+    var template = this._getTemplate(namespace, view);
+    if (template) {
+      return template.render(params);
+    }
+
+    return null;
+  };
+
+  HoganJsUtils.prototype._getTemplate = function(namespace, view) {
+    var templateKey = this._templateKey(namespace, view);
+    var template = this._readFromCache(templateKey);
+
+    if (!template && fs) {
+      var templatePath = path.join(templatesPath, namespace, view);
+      var templateContent = fs.readFileSync(templatePath + '.mustache', 'utf8');
+      template = hogan.compile(templateContent);
+      this._addToCache(templateKey, template);
+    }
+
+    return template;
+  };
+
+  HoganJsUtils.prototype._addToCache = function(templateKey, template) {
+    templatesCache[templateKey] = template;
+  };
+
+  HoganJsUtils.prototype._readFromCache = function(templateKey) {
+    return browserTemplates && browserTemplates[templateKey] || templatesCache[templateKey];
+  };
+
+  HoganJsUtils.prototype._templateKey = function(namespace, view) {
+    return namespace + '-' + view;
+  };
+
+  module.exports.HoganJsUtils = new HoganJsUtils();
+
+})();

src/line-by-line-printer.js

@@ -12,7 +12,7 @@
   var utils = require('./utils.js').Utils;
   var Rematch = require('./rematch.js').Rematch;
 
-  var nunjucksUtils = require('./nunjucks-utils.js').NunjucksUtils;
+  var hoganUtils = require('./hoganjs-utils.js').HoganJsUtils;
   var baseTemplatesPath = 'line-by-line';
 
   function LineByLinePrinter(config) {
@@ -20,11 +20,16 @@
   }
 
   LineByLinePrinter.prototype.makeFileDiffHtml = function(file, diffs) {
-    return nunjucksUtils.render(baseTemplatesPath, 'file-diff.html', {'file': file, 'diffs': diffs});
+    return hoganUtils.render(baseTemplatesPath, 'file-diff', {
+      file: file,
+      fileDiffName: printerUtils.getDiffName(file),
+      fileHtmlId: printerUtils.getHtmlId(file),
+      diffs: diffs
+    });
   };
 
   LineByLinePrinter.prototype.makeLineByLineHtmlWrapper = function(content) {
-    return nunjucksUtils.render(baseTemplatesPath, 'wrapper.html', {'content': content});
+    return hoganUtils.render(baseTemplatesPath, 'wrapper', {'content': content});
   };
 
   LineByLinePrinter.prototype.generateLineByLineJsonHtml = function(diffFiles) {
@@ -50,7 +55,10 @@
   });
 
   LineByLinePrinter.prototype.makeColumnLineNumberHtml = function(block) {
-    return nunjucksUtils.render(baseTemplatesPath, 'column-line-number.html', {block: block});
+    return hoganUtils.render(baseTemplatesPath, 'column-line-number', {
+      diffParser: diffParser,
+      block: utils.escape(block.header)
+    });
   };
 
   LineByLinePrinter.prototype._generateFileHtml = function(file) {
@@ -69,7 +77,7 @@
         var comparisons = oldLines.length * newLines.length;
         var maxComparisons = that.config.matchingMaxComparisons || 2500;
         var doMatching = comparisons < maxComparisons && (that.config.matching === 'lines' ||
-            that.config.matching === 'words');
+          that.config.matching === 'words');
 
         if (doMatching) {
           matches = matcher(oldLines, newLines);
@@ -162,18 +170,20 @@
   };
 
   LineByLinePrinter.prototype.makeLineHtml = function(type, oldNumber, newNumber, content, prefix) {
-    return nunjucksUtils.render(baseTemplatesPath, 'line.html',
+    return hoganUtils.render(baseTemplatesPath, 'line',
       {
         type: type,
-        oldNumber: oldNumber,
+        oldNumber: utils.valueOrEmpty(oldNumber),
-        newNumber: newNumber,
+        newNumber: utils.valueOrEmpty(newNumber),
-        prefix: prefix,
+        prefix: prefix && utils.convertWhiteSpaceToNonBreakingSpace(prefix),
-        content: content
+        content: content && utils.convertWhiteSpaceToNonBreakingSpace(content)
       });
   };
 
   LineByLinePrinter.prototype._generateEmptyDiff = function() {
-    return nunjucksUtils.render(baseTemplatesPath, 'empty-diff.html', {});
+    return hoganUtils.render(baseTemplatesPath, 'empty-diff', {
+      diffParser: diffParser
+    });
   };
 
   module.exports.LineByLinePrinter = LineByLinePrinter;

src/nunjucks-utils.js

@@ -1,34 +0,0 @@
-/*
- *
- * Utils (utils.js)
- * Author: rtfpessoa
- *
- */
-
-(function() {
-
-  var path = require('path');
-
-  var nunjucks = require('nunjucks');
-  var templatesPath = path.resolve(__dirname, 'templates');
-
-  var diffParser = require('./diff-parser.js').DiffParser;
-  var printerUtils = require('./printer-utils.js').PrinterUtils;
-  var utils = require('./utils.js').Utils;
-
-  var nunjucksEnv = nunjucks.configure(templatesPath, {"autoescape": false})
-    .addGlobal('printerUtils', printerUtils)
-    .addGlobal('utils', utils)
-    .addGlobal('diffParser', diffParser);
-
-  function NunjucksUtils() {
-  }
-
-  NunjucksUtils.prototype.render = function(namespace, view, params) {
-    var viewPath = path.join(namespace, view);
-    return nunjucksEnv.render(viewPath, params);
-  };
-
-  module.exports.NunjucksUtils = new NunjucksUtils();
-
-})();

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

@@ -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}}"> {{{blockHeader}}}</div>
+    </td>
+</tr>

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

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

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

src/templates/line-by-line-line.mustache

@@ -0,0 +1,16 @@
+<tr>
+    <td class="d2h-code-linenumber {{type}}">
+        <div class="line-num1">{{oldNumber}}</div>
+        <div class="line-num2">{{newNumber}}</div>
+    </td>
+    <td class="{{type}}">
+        <div class="d2h-code-line {{type}}">
+            {{#prefix}}
+                <span class="d2h-code-line-prefix">{{{prefix}}}</span>
+            {{/prefix}}
+            {{#content}}
+                <span class="d2h-code-line-ctn">{{{content}}}</span>
+            {{/content}}
+        </div>
+    </td>
+</tr>

src/templates/line-by-line-wrapper.mustache

@@ -1,3 +1,3 @@
 <div class="d2h-wrapper">
-    {{ content }}
+    {{{content}}}
 </div>

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

@@ -1,6 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-<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/line.html

@@ -1,16 +0,0 @@
-<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>

webpack.config.js

@@ -1,25 +0,0 @@
-// Webpack config
-var webpack = require('webpack');
-
-module.exports = {
-
-  plugins: [
-
-    new webpack.NormalModuleReplacementPlugin(
-      /(nunjucks)$/,
-      'nunjucks/index'
-    ),
-
-    new webpack.NormalModuleReplacementPlugin(
-      /(precompile|nodes|lexer|parser|transformer|compiler|loaders)$/,
-      'node-libs-browser/mock/empty'
-    ),
-
-    new webpack.DefinePlugin({
-      'process.env': {
-        IS_BROWSER: true
-      }
-    })
-
-  ]
-};