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

Use hogan.js as templating engine

Browse source
This commit is contained in:
Rodrigo Fernandes 2016-04-15 23:08:57 +01:00
parent 4521361c4f
commit 8237c8da28
15 changed files with 140 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
package.json
View file

@ -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",
"webpack": "^1.12.14"
"uglifyjs": "^2.4.10"
},
"license": "MIT",
"files": [

36
release.sh
View file

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

2
sample/index.html
View file

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

58
src/hoganjs-utils.js Normal file
View file

@ -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();
})();

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

@ -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) {
@ -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;

34
src/nunjucks-utils.js
View file

@ -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();
})();

6
src/templates/line-by-line-column-line-number.mustache 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}}"> {{{blockHeader}}}</div>
</td>
</tr>

7
src/templates/line-by-line-empty-diff.mustache 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>

6
src/templates/line-by-line/file-diff.html → src/templates/line-by-line-file-diff.mustache
View file

@ -1,4 +1,4 @@
<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">
@ -9,14 +9,14 @@
</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>

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

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

2
src/templates/line-by-line/wrapper.html → src/templates/line-by-line-wrapper.mustache
View file

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

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

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

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

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

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

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

25
webpack.config.js
View file

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