Merge pull request #69 from rtfpessoa/hogan.js

Use Hogan.js for templating engine

.gitignore

@@ -19,5 +19,8 @@ target/
 node_modules/
 npm-debug.log
 
+# Istanbul
+coverage/
+
 # Bower
 bower_components/

.jscsrc

@@ -21,9 +21,7 @@
   "disallowTrailingWhitespace": true,
   "maximumLineLength": 130,
   "requireCamelCaseOrUpperCaseIdentifiers": true,
-  "requireCapitalizedComments": true,
   "requireCapitalizedConstructors": true,
-  "requireCurlyBraces": true,
   "requireSpaceAfterKeywords": [
     "if",
     "else",

circle.yml

@@ -5,6 +5,5 @@ test:
     - nvm install 5 && npm test
   post:
     - npm install
-    - istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec
+    - npm test
     - cat ./coverage/lcov.info | ./node_modules/.bin/codacy-coverage
-    - rm -rf ./coverage

package.json

@@ -32,29 +32,35 @@
     "url": "https://www.github.com/rtfpessoa/diff2html/issues"
   },
   "engines": {
-    "node": ">=0.10"
+    "node": ">=0.12"
   },
   "preferGlobal": true,
   "scripts": {
-    "release": "bash release.sh",
-    "test": "mocha",
+    "release": "./scripts/release.sh",
+    "templates": "./scripts/hulk.js --wrapper node --variable 'browserTemplates' ./src/templates/*.mustache > ./src/templates/diff2html-templates.js",
+    "test": "istanbul cover _mocha --report lcovonly -- -u exports -R spec ./test/**/*",
     "style": "jscs src test",
-    "codacy": "istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec && cat ./coverage/lcov.info | ./node_modules/.bin/codacy-coverage && rm -rf ./coverage"
+    "codacy": "istanbul cover _mocha --report lcovonly -- -u exports -R spec ./test/**/* && cat ./coverage/lcov.info | codacy-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",
+    "mkdirp": "^0.5.1",
     "mocha": "^2.4.5",
-    "uglifyjs": "^2.4.10",
-    "webpack": "^1.12.14"
+    "nopt": "^3.0.6",
+    "uglifyjs": "^2.4.10"
   },
   "license": "MIT",
   "files": [

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>

scripts/hulk.js

@@ -0,0 +1,206 @@
+#!/usr/bin/env node
+
+/*
+ *  Copyright 2011 Twitter, Inc.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+
+// dependencies
+var hogan = require('hogan.js');
+var path = require('path');
+var nopt = require('nopt');
+var mkderp = require('mkdirp');
+var fs = require('fs');
+
+
+// locals
+var specials = ['/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\'];
+var specialsRegExp = new RegExp('(\\' + specials.join('|\\') + ')', 'g');
+var options = {
+  'namespace': String,
+  'outputdir': path,
+  'variable': String,
+  'wrapper': String,
+  'version': true,
+  'help': true
+};
+var shortHand = {
+  'n': ['--namespace'],
+  'o': ['--outputdir'],
+  'vn': ['--variable'],
+  'w': ['--wrapper'],
+  'h': ['--help'],
+  'v': ['--version']
+};
+var templates;
+
+
+// options
+options = nopt(options, shortHand);
+
+
+// escape special regexp characters
+function esc(text) {
+  return text.replace(specialsRegExp, '\\$1');
+}
+
+
+// cyan function for rob
+function cyan(text) {
+  return '\033[36m' + text + '\033[39m';
+}
+
+
+// check for dirs and correct ext (<3 for windows)
+function extractFiles(args) {
+  var usage = '\n' +
+    cyan('USAGE:') + '   hulk [--wrapper wrapper] [--outputdir outputdir] ' +
+    '[--namespace namespace] [--variable variable] FILES\n\n' +
+    cyan('OPTIONS:') + ' [-w, --wrapper]   :: wraps the template (i.e. amd)\n' +
+    '         [-o,  --outputdir] :: outputs the templates as individual files to a directory\n\n' +
+    '         [-n,  --namespace] :: prepend string to template names\n\n' +
+    '         [-vn, --variable]  :: variable name for non-amd wrapper\n\n' +
+    cyan('EXAMPLE:') + ' hulk --wrapper amd ./templates/*.mustache\n\n' +
+    cyan('NOTE:') + '    hulk supports the "*" wildcard and allows you to target specific extensions too\n';
+  var files = [];
+
+  if (options.version) {
+    console.log(require('../package.json').version);
+    process.exit(0);
+  }
+
+  if (!args.length || options.help) {
+    console.log(usage);
+    process.exit(0);
+  }
+
+  args.forEach(function(arg) {
+
+    if (/\*/.test(arg)) {
+      arg = arg.split('*');
+      return files = files.concat(
+        fs.readdirSync(arg[0] || '.')
+          .map(function(f) {
+            var file = path.join(arg[0], f);
+            return new RegExp(esc(arg[1]) + '$').test(f) && fs.statSync(file).isFile() && file;
+          })
+          .filter(function(f) {
+            return f;
+          })
+      );
+    }
+
+    if (fs.statSync(arg).isFile()) files.push(arg);
+
+  });
+
+  return files;
+}
+
+
+// remove utf-8 byte order mark, http://en.wikipedia.org/wiki/Byte_order_mark
+function removeByteOrderMark(text) {
+  if (text.charCodeAt(0) === 0xfeff) {
+    return text.substring(1);
+  }
+  return text;
+}
+
+
+// wrap templates
+function wrap(file, name, openedFile) {
+  switch (options.wrapper) {
+    case "amd":
+      return 'define(' + (!options.outputdir ? '"' + path.join(path.dirname(file), name) + '", ' : '') +
+        '[ "hogan.js" ], function(Hogan){ return new Hogan.Template(' +
+        hogan.compile(openedFile, {asString: 1}) +
+        ');});';
+    case "node":
+      var globalObj = 'global.' + (options.variable || 'templates') + '["' + name + '"]';
+      var globalStmt = globalObj + ' = new Hogan.Template(' + hogan.compile(openedFile, {asString: 1}) + ');';
+      var nodeOutput = globalStmt;
+
+      // if we have a template per file the export will expose the template directly
+      if (options.outputdir) {
+        nodeOutput = nodeOutput + '\n' + 'module.exports = ' + globalObj + ';';
+      }
+
+      return nodeOutput;
+    default:
+      return (options.variable || 'templates') +
+        '["' + name + '"] = new Hogan.Template(' +
+        hogan.compile(openedFile, {asString: 1}) +
+        ');';
+  }
+}
+
+
+function prepareOutput(content) {
+  var variableName = options.variable || 'templates';
+  switch (options.wrapper) {
+    case "amd":
+      return content;
+    case "node":
+      var nodeExport = '';
+
+      // if we have aggregated templates the export will expose the template map
+      if (!options.outputdir) {
+        nodeExport = 'module.exports = global.' + variableName + ';\n';
+      }
+
+      return '(function() {\n' +
+        'if (!!!global.' + variableName + ') global.' + variableName + ' = {};\n' +
+        content + '\n' +
+        nodeExport +
+        '})();';
+    default:
+      return 'if (!!!' + variableName + ') var ' + variableName + ' = {};\n' + content;
+  }
+}
+
+
+// write the directory
+if (options.outputdir) {
+  mkderp.sync(options.outputdir);
+}
+
+
+// Prepend namespace to template name
+function namespace(name) {
+  return (options.namespace || '') + name;
+}
+
+
+// write a template foreach file that matches template extension
+templates = extractFiles(options.argv.remain)
+  .map(function(file) {
+    var openedFile = fs.readFileSync(file, 'utf-8');
+    var name;
+    if (!openedFile) return;
+    name = namespace(path.basename(file).replace(/\..*$/, ''));
+    openedFile = removeByteOrderMark(openedFile.trim());
+    openedFile = wrap(file, name, openedFile);
+    if (!options.outputdir) return openedFile;
+    fs.writeFileSync(path.join(options.outputdir, name + '.js')
+      , prepareOutput(openedFile));
+  })
+  .filter(function(t) {
+    return t;
+  });
+
+
+// output templates
+if (!templates.length || options.outputdir) process.exit(0);
+
+console.log(prepareOutput(templates.join('\n')));

scripts/release.sh

@@ -14,6 +14,8 @@ INPUT_JS_FILE=${INPUT_DIR}/diff2html.js
 INPUT_JS_UI_FILE=${INPUT_UI_DIR}/js/diff2html-ui.js
 INPUT_CSS_FILE=${INPUT_UI_DIR}/css/diff2html.css
 
+GENERATED_TEMPLATES_FILE=${INTPUT_TEMPLATES_DIR}/diff2html-templates.js
+
 OUTPUT_DIR=dist
 OUTPUT_JS_FILE=${OUTPUT_DIR}/diff2html.js
 OUTPUT_MIN_JS_FILE=${OUTPUT_DIR}/diff2html.min.js
@@ -30,28 +32,27 @@ echo "Cleaning previous versions ..."
 rm -rf ${OUTPUT_DIR}
 mkdir -p ${OUTPUT_DIR}
 
+echo "Minifying ${OUTPUT_CSS_FILE} to ${OUTPUT_MIN_CSS_FILE}"
+cp -f ${INPUT_CSS_FILE} ${OUTPUT_CSS_FILE}
+cleancss --advanced --compatibility=ie8 -o ${OUTPUT_MIN_CSS_FILE} ${OUTPUT_CSS_FILE}
+
+echo "Pre-compile hogan.js templates"
+npm run templates
+
+echo "Minifying ${OUTPUT_TEMPLATES_FILE} to ${OUTPUT_MIN_TEMPLATES_FILE}"
+browserify -e ${GENERATED_TEMPLATES_FILE} -o ${OUTPUT_TEMPLATES_FILE}
+uglifyjs ${OUTPUT_TEMPLATES_FILE} -c -o ${OUTPUT_MIN_TEMPLATES_FILE}
+
 echo "Generating js aggregation file in ${OUTPUT_JS_FILE}"
-webpack ${INPUT_JS_FILE} ${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}"
-webpack ${INPUT_JS_UI_FILE} ${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 "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 "diff2html release created successfully!"

src/hoganjs-utils.js

@@ -0,0 +1,73 @@
+/*
+ *
+ * Utils (hoganjs-utils.js)
+ * Author: rtfpessoa
+ *
+ */
+
+(function() {
+
+  var fs = require('fs');
+  var path = require('path');
+
+  var hogan = require('hogan.js');
+
+  var hoganTemplates;
+
+  var templatesPath = path.resolve(__dirname, 'templates');
+  var templatesCache = {};
+
+  function HoganJsUtils() {
+    try {
+      hoganTemplates = require('./templates/diff2html-templates.js');
+    } catch (_ignore) {
+      hoganTemplates = {};
+    }
+  }
+
+  HoganJsUtils.prototype.render = function(namespace, view, params) {
+    var templateKey = this._templateKey(namespace, view);
+
+    var template = this._getTemplate(templateKey);
+    if (template) {
+      return template.render(params);
+    }
+
+    return null;
+  };
+
+  HoganJsUtils.prototype._getTemplate = function(templateKey) {
+    var template = this._readFromCache(templateKey);
+
+    if (!template) {
+      template = this._loadTemplate(templateKey);
+    }
+
+    return template;
+  };
+
+  HoganJsUtils.prototype._loadTemplate = function(templateKey) {
+    var template;
+    if (fs.readFileSync) {
+      var templatePath = path.join(templatesPath, templateKey);
+      var templateContent = fs.readFileSync(templatePath + '.mustache', 'utf8');
+      template = hogan.compile(templateContent);
+      templatesCache[templateKey] = template;
+    }
+
+    return template;
+  };
+
+  HoganJsUtils.prototype._readFromCache = function(templateKey) {
+    return global.browserTemplates && global.browserTemplates[templateKey] ||
+      hoganTemplates[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,
-        newNumber: newNumber,
-        prefix: prefix,
-        content: content
+        oldNumber: utils.valueOrEmpty(oldNumber),
+        newNumber: utils.valueOrEmpty(newNumber),
+        prefix: prefix && utils.convertWhiteSpaceToNonBreakingSpace(prefix),
+        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/printer-utils.js

@@ -39,8 +39,8 @@
     var oldFilename = file.oldName;
     var newFilename = file.newName;
 
-    if (oldFilename && newFilename && oldFilename !== newFilename
-      && !isDevNullName(oldFilename) && !isDevNullName(newFilename)) {
+    if (oldFilename && newFilename && oldFilename !== newFilename &&
+      !isDevNullName(oldFilename) && !isDevNullName(newFilename)) {
       return oldFilename + ' -> ' + newFilename;
     } else if (newFilename && !isDevNullName(newFilename)) {
       return newFilename;

src/templates/diff2html-templates.js

@@ -0,0 +1,9 @@
+(function() {
+if (!!!global.browserTemplates) global.browserTemplates = {};
+global.browserTemplates["line-by-line-column-line-number"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"d2h-code-linenumber ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\"></td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"d2h-code-line ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b(t.t(t.f("blockHeader",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["line-by-line-empty-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"d2h-code-line ");t.b(t.v(t.d("diffParser.LINE_TYPE.INFO",c,p,0)));t.b("\">");t.b("\n" + i);t.b("            File without changes");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["line-by-line-file-diff"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div id=\"");t.b(t.v(t.f("fileHtmlId",c,p,0)));t.b("\" class=\"d2h-file-wrapper\" data-lang=\"");t.b(t.v(t.d("file.language",c,p,0)));t.b("\">");t.b("\n" + i);t.b("    <div class=\"d2h-file-header\">");t.b("\n" + i);t.b("    <span class=\"d2h-file-stats\">");t.b("\n" + i);t.b("      <span class=\"d2h-lines-added\">");t.b("\n" + i);t.b("        <span>+");t.b(t.v(t.d("file.addedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("      </span>");t.b("\n" + i);t.b("      <span class=\"d2h-lines-deleted\">");t.b("\n" + i);t.b("        <span>-");t.b(t.v(t.d("file.deletedLines",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("      </span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("    <span class=\"d2h-file-name-wrapper\">");t.b("\n" + i);t.b("        <span class=\"d2h-file-name\">&nbsp;");t.b(t.v(t.f("fileDiffName",c,p,0)));t.b("</span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <div class=\"d2h-file-diff\">");t.b("\n" + i);t.b("        <div class=\"d2h-code-wrapper\">");t.b("\n" + i);t.b("            <table class=\"d2h-diff-table\">");t.b("\n" + i);t.b("                <tbody class=\"d2h-diff-tbody\">");t.b("\n" + i);t.b("                ");t.b(t.t(t.f("diffs",c,p,0)));t.b("\n" + i);t.b("                </tbody>");t.b("\n" + i);t.b("            </table>");t.b("\n" + i);t.b("        </div>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["line-by-line-line"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<tr>");t.b("\n" + i);t.b("    <td class=\"d2h-code-linenumber ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"line-num1\">");t.b(t.v(t.f("oldNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("        <div class=\"line-num2\">");t.b(t.v(t.f("newNumber",c,p,0)));t.b("</div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("    <td class=\"");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);t.b("        <div class=\"d2h-code-line ");t.b(t.v(t.f("type",c,p,0)));t.b("\">");t.b("\n" + i);if(t.s(t.f("prefix",c,p,1),c,p,0,253,329,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-prefix\">");t.b(t.t(t.f("prefix",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}if(t.s(t.f("content",c,p,1),c,p,0,361,435,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("            <span class=\"d2h-code-line-ctn\">");t.b(t.t(t.f("content",c,p,0)));t.b("</span>");t.b("\n" + i);});c.pop();}t.b("        </div>");t.b("\n" + i);t.b("    </td>");t.b("\n" + i);t.b("</tr>");return t.fl(); },partials: {}, subs: {  }});
+global.browserTemplates["line-by-line-wrapper"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"d2h-wrapper\">");t.b("\n" + i);t.b("    ");t.b(t.t(t.f("content",c,p,0)));t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+module.exports = global.browserTemplates;
+})();

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
-      }
-    })
-
-  ]
-};