Merge pull request #15 from rtfpessoa/cleaning

Clean project, better module exposing and documentation
This commit is contained in:
Rodrigo Fernandes 2015-07-19 22:38:27 +01:00
commit df6d5bb737
14 changed files with 238 additions and 128 deletions

View file

@ -1,6 +1,6 @@
# Diff to Html by [rtfpessoa](https://github.com/rtfpessoa) # Diff to Html by [rtfpessoa](https://github.com/rtfpessoa)
Diff to Html generates pretty HTML diffs from git word diff output. Diff to Html generates pretty HTML diffs from git diff output.
## Features ## Features
@ -12,6 +12,8 @@ Diff to Html generates pretty HTML diffs from git word diff output.
* GitHub like style * GitHub like style
* Code syntax highlight
## Online Example ## Online Example
> Go to [Diff2HTML](http://rtfpessoa.github.io/diff2html/) > Go to [Diff2HTML](http://rtfpessoa.github.io/diff2html/)
@ -24,6 +26,8 @@ Diff to Html generates pretty HTML diffs from git word diff output.
* [Bower Package](http://bower.io/search/?q=diff2html) * [Bower Package](http://bower.io/search/?q=diff2html)
* [Node CLI](https://www.npmjs.org/package/diff2html-cli)
* Manually download and import `dist/diff2html.min.js` into your page * Manually download and import `dist/diff2html.min.js` into your page
## How to use ## How to use
@ -50,11 +54,60 @@ Diff to Html generates pretty HTML diffs from git word diff output.
> Check out the `index.html` for a complete example. > Check out the `index.html` for a complete example.
## Sintax Hightlight
> Add the dependencies.
Choose one color scheme, and add the main highlight code.
If your favourite language is not included in the default package also add its javascript highlight file.
jQuery is optional, just using it to help managing the highlight.
```html
<!-- Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/github.min.css">
<!-- Javascripts -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/scala.min.js"></script>
```
> Invoke the highlightjs plugin
```js
document.addEventListener("DOMContentLoaded", function () {
// parse the diff to json
var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);
// collect all the file extensions in the json
var allFileLanguages = diffJson.map(function (line) {
return line.language;
});
// remove duplicated languages
var distinctLanguages = allFileLanguages.filter(function (v, i) {
return allFileLanguages.indexOf(v) == i;
});
// pass the languages to the highlightjs plugin
hljs.configure({languages: distinctLanguages});
// generate and inject the diff HTML into the desired place
document.getElementById("line-by-line").innerHTML = Diff2Html.getPrettyHtmlFromJson(diffJson);
document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson);
// collect all the code lines and execute the highlight on them
var codeLines = document.getElementsByClassName("d2h-code-line-ctn");
[].forEach.call(codeLines, function (line) {
hljs.highlightBlock(line);
});
});
```
## Contributions ## Contributions
All the contributions are welcome. All the contributions are welcome.
To contribute just send a pull request with your feature,fix,... and it will be reviewed asap. To contribute just send a pull request with your changes and I will review it asap.
## License ## License

View file

@ -1,7 +1,7 @@
{ {
"name": "diff2html", "name": "diff2html",
"version": "0.2.5-1", "version": "0.2.5-1",
"homepage": "https://github.com/rtfpessoa/diff2html", "homepage": "http://rtfpessoa.github.io/diff2html/",
"description": "Fast Diff to colorized HTML", "description": "Fast Diff to colorized HTML",
"keywords": [ "keywords": [
"git", "git",

140
dist/diff2html.js vendored
View file

@ -1,8 +1,25 @@
// Diff2Html minifier version (automatically generated) // Diff2Html minifier version (automatically generated)
var global = this; /*
* Hack to allow nodejs require("package/file") in the browser
* How?
* Since every require is used as an object:
* `require("./utils.js").Utils` // (notice the `.Utils`)
*
* We can say that when there is no require method
* we use the global object in which the `Utils`
* object was already injected.
*/
var $globalHolder = (typeof module !== 'undefined' && module.exports) ||
(typeof exports !== 'undefined' && exports) ||
(typeof window !== 'undefined' && window) ||
(typeof self !== 'undefined' && self) ||
(typeof this !== 'undefined' && this) ||
Function('return this')();
function require() { function require() {
return global; return $globalHolder;
}/* See LICENSE file for terms of use */ }
/* See LICENSE file for terms of use */
/* /*
* Text diff implementation. * Text diff implementation.
@ -652,7 +669,7 @@ function require() {
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
function Utils() { function Utils() {
} }
@ -673,11 +690,13 @@ function require() {
return value ? value : ""; return value ? value : "";
}; };
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.Utils = new Utils(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.Utils === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.Utils = new Utils(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["Utils"] = new Utils();
})(this); })(this);
/* /*
@ -687,7 +706,7 @@ function require() {
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var utils = require("./utils.js").Utils; var utils = require("./utils.js").Utils;
@ -895,11 +914,13 @@ function require() {
else return language; else return language;
} }
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.DiffParser = new DiffParser(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.DiffParser === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.DiffParser = new DiffParser(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["DiffParser"] = new DiffParser();
})(this); })(this);
/* /*
@ -909,12 +930,10 @@ function require() {
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
// dirty hack for browser compatibility // dirty hack for browser compatibility
var jsDiff = (typeof JsDiff !== "undefined" && JsDiff) || var jsDiff = (typeof JsDiff !== "undefined" && JsDiff) || require("diff");
require("diff") ||
require("../lib/diff.js");
var utils = require("./utils.js").Utils; var utils = require("./utils.js").Utils;
function PrinterUtils() { function PrinterUtils() {
@ -988,11 +1007,13 @@ function require() {
return line.replace(/(<del>((.|\n)*?)<\/del>)/g, ""); return line.replace(/(<del>((.|\n)*?)<\/del>)/g, "");
} }
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.PrinterUtils = new PrinterUtils(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.PrinterUtils === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.PrinterUtils = new PrinterUtils(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["PrinterUtils"] = new PrinterUtils();
})(this); })(this);
/* /*
@ -1002,7 +1023,7 @@ function require() {
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var diffParser = require("./diff-parser.js").DiffParser; var diffParser = require("./diff-parser.js").DiffParser;
var printerUtils = require("./printer-utils.js").PrinterUtils; var printerUtils = require("./printer-utils.js").PrinterUtils;
@ -1183,11 +1204,13 @@ function require() {
return fileHtml; return fileHtml;
} }
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.SideBySidePrinter = new SideBySidePrinter(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.SideBySidePrinter === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.SideBySidePrinter = new SideBySidePrinter(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["SideBySidePrinter"] = new SideBySidePrinter();
})(this); })(this);
/* /*
@ -1197,7 +1220,7 @@ function require() {
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var diffParser = require("./diff-parser.js").DiffParser; var diffParser = require("./diff-parser.js").DiffParser;
var printerUtils = require("./printer-utils.js").PrinterUtils; var printerUtils = require("./printer-utils.js").PrinterUtils;
@ -1342,11 +1365,13 @@ function require() {
"</tr>\n"; "</tr>\n";
} }
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.LineByLinePrinter = new LineByLinePrinter(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.LineByLinePrinter === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.LineByLinePrinter = new LineByLinePrinter(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["LineByLinePrinter"] = new LineByLinePrinter();
})(this); })(this);
/* /*
@ -1356,7 +1381,7 @@ function require() {
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var lineByLinePrinter = require("./line-by-line-printer.js").LineByLinePrinter; var lineByLinePrinter = require("./line-by-line-printer.js").LineByLinePrinter;
var sideBySidePrinter = require("./side-by-side-printer.js").SideBySidePrinter; var sideBySidePrinter = require("./side-by-side-printer.js").SideBySidePrinter;
@ -1368,11 +1393,13 @@ function require() {
HtmlPrinter.prototype.generateSideBySideJsonHtml = sideBySidePrinter.generateSideBySideJsonHtml; HtmlPrinter.prototype.generateSideBySideJsonHtml = sideBySidePrinter.generateSideBySideJsonHtml;
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.HtmlPrinter = new HtmlPrinter(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.HtmlPrinter === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.HtmlPrinter = new HtmlPrinter(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["HtmlPrinter"] = new HtmlPrinter();
})(this); })(this);
/* /*
@ -1380,11 +1407,9 @@ function require() {
* Diff to HTML (diff2html.js) * Diff to HTML (diff2html.js)
* Author: rtfpessoa * Author: rtfpessoa
* *
* Diff commands:
* git diff
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var diffParser = require("./diff-parser.js").DiffParser; var diffParser = require("./diff-parser.js").DiffParser;
var htmlPrinter = require("./html-printer.js").HtmlPrinter; var htmlPrinter = require("./html-printer.js").HtmlPrinter;
@ -1393,13 +1418,12 @@ function require() {
} }
/* /*
* config * Line diff type configuration
* { var config = {
* "wordByWord" : true (default) "wordByWord": true, // (default)
* OR // OR
* "charByChar" : true "charByChar": true
* } };
*
*/ */
/* /*
@ -1444,10 +1468,12 @@ function require() {
return htmlPrinter.generateSideBySideJsonHtml(diffJson, configOrEmpty); return htmlPrinter.generateSideBySideJsonHtml(diffJson, configOrEmpty);
}; };
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.Diff2Html = new Diff2Html(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.Diff2Html === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.Diff2Html = new Diff2Html(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["Diff2Html"] = new Diff2Html();
})(this); })(this);

File diff suppressed because one or more lines are too long

View file

@ -1,4 +1,20 @@
var global = this; /*
* Hack to allow nodejs require("package/file") in the browser
* How?
* Since every require is used as an object:
* `require("./utils.js").Utils` // (notice the `.Utils`)
*
* We can say that when there is no require method
* we use the global object in which the `Utils`
* object was already injected.
*/
var $globalHolder = (typeof module !== 'undefined' && module.exports) ||
(typeof exports !== 'undefined' && exports) ||
(typeof window !== 'undefined' && window) ||
(typeof self !== 'undefined' && self) ||
(typeof this !== 'undefined' && this) ||
Function('return this')();
function require() { function require() {
return global; return $globalHolder;
} }

View file

@ -1,7 +1,7 @@
{ {
"name": "diff2html", "name": "diff2html",
"version": "0.2.5-1", "version": "0.2.6",
"homepage": "https://www.github.com/rtfpessoa/diff2html", "homepage": "http://rtfpessoa.github.io/diff2html/",
"description": "Fast Diff to colorized HTML", "description": "Fast Diff to colorized HTML",
"keywords": [ "keywords": [
"git", "git",

View file

@ -29,7 +29,6 @@
<script type="text/javascript" src="../dist/diff2html.min.js"></script> <script type="text/javascript" src="../dist/diff2html.min.js"></script>
<!-- --> <!-- -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/scala.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/scala.min.js"></script>
@ -218,23 +217,30 @@
'+\n' + '+\n' +
'+console.log(parser.parsePatchDiffResult(text, patchLineList));\n'; '+console.log(parser.parsePatchDiffResult(text, patchLineList));\n';
$(document).ready(function () { document.addEventListener("DOMContentLoaded", function () {
var diff2Html = Diff2Html; // parse the diff to json
var diffJson = diff2Html.getJsonFromDiff(lineDiffExample); var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);
// collect all the file extensions in the json
var allFileLanguages = diffJson.map(function (line) { var allFileLanguages = diffJson.map(function (line) {
return line.language; return line.language;
}); });
// remove duplicated languages
var distinctLanguages = allFileLanguages.filter(function (v, i) { var distinctLanguages = allFileLanguages.filter(function (v, i) {
return allFileLanguages.indexOf(v) == i; return allFileLanguages.indexOf(v) == i;
}); });
// pass the languages to the highlightjs plugin
hljs.configure({languages: distinctLanguages}); hljs.configure({languages: distinctLanguages});
$("#line-by-line").html(diff2Html.getPrettyHtmlFromJson(diffJson)); // generate and inject the diff HTML into the desired place
$("#side-by-side").html(diff2Html.getPrettySideBySideHtmlFromJson(diffJson)); document.getElementById("line-by-line").innerHTML = Diff2Html.getPrettyHtmlFromJson(diffJson);
document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettySideBySideHtmlFromJson(diffJson);
var code = $(".d2h-code-line-ctn"); // collect all the code lines and execute the highlight on them
code.map(function (i, line) { var codeLines = document.getElementsByClassName("d2h-code-line-ctn");
[].forEach.call(codeLines, function (line) {
hljs.highlightBlock(line); hljs.highlightBlock(line);
}); });
}); });

View file

@ -5,7 +5,7 @@
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var utils = require("./utils.js").Utils; var utils = require("./utils.js").Utils;
@ -213,10 +213,12 @@
else return language; else return language;
} }
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.DiffParser = new DiffParser(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.DiffParser === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.DiffParser = new DiffParser(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["DiffParser"] = new DiffParser();
})(this); })(this);

View file

@ -3,11 +3,9 @@
* Diff to HTML (diff2html.js) * Diff to HTML (diff2html.js)
* Author: rtfpessoa * Author: rtfpessoa
* *
* Diff commands:
* git diff
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var diffParser = require("./diff-parser.js").DiffParser; var diffParser = require("./diff-parser.js").DiffParser;
var htmlPrinter = require("./html-printer.js").HtmlPrinter; var htmlPrinter = require("./html-printer.js").HtmlPrinter;
@ -16,13 +14,12 @@
} }
/* /*
* config * Line diff type configuration
* { var config = {
* "wordByWord" : true (default) "wordByWord": true, // (default)
* OR // OR
* "charByChar" : true "charByChar": true
* } };
*
*/ */
/* /*
@ -67,10 +64,12 @@
return htmlPrinter.generateSideBySideJsonHtml(diffJson, configOrEmpty); return htmlPrinter.generateSideBySideJsonHtml(diffJson, configOrEmpty);
}; };
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.Diff2Html = new Diff2Html(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.Diff2Html === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.Diff2Html = new Diff2Html(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["Diff2Html"] = new Diff2Html();
})(this); })(this);

View file

@ -5,7 +5,7 @@
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var lineByLinePrinter = require("./line-by-line-printer.js").LineByLinePrinter; var lineByLinePrinter = require("./line-by-line-printer.js").LineByLinePrinter;
var sideBySidePrinter = require("./side-by-side-printer.js").SideBySidePrinter; var sideBySidePrinter = require("./side-by-side-printer.js").SideBySidePrinter;
@ -17,10 +17,12 @@
HtmlPrinter.prototype.generateSideBySideJsonHtml = sideBySidePrinter.generateSideBySideJsonHtml; HtmlPrinter.prototype.generateSideBySideJsonHtml = sideBySidePrinter.generateSideBySideJsonHtml;
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.HtmlPrinter = new HtmlPrinter(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.HtmlPrinter === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.HtmlPrinter = new HtmlPrinter(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["HtmlPrinter"] = new HtmlPrinter();
})(this); })(this);

View file

@ -5,7 +5,7 @@
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var diffParser = require("./diff-parser.js").DiffParser; var diffParser = require("./diff-parser.js").DiffParser;
var printerUtils = require("./printer-utils.js").PrinterUtils; var printerUtils = require("./printer-utils.js").PrinterUtils;
@ -150,10 +150,12 @@
"</tr>\n"; "</tr>\n";
} }
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.LineByLinePrinter = new LineByLinePrinter(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.LineByLinePrinter === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.LineByLinePrinter = new LineByLinePrinter(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["LineByLinePrinter"] = new LineByLinePrinter();
})(this); })(this);

View file

@ -5,12 +5,10 @@
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
// dirty hack for browser compatibility // dirty hack for browser compatibility
var jsDiff = (typeof JsDiff !== "undefined" && JsDiff) || var jsDiff = (typeof JsDiff !== "undefined" && JsDiff) || require("diff");
require("diff") ||
require("../lib/diff.js");
var utils = require("./utils.js").Utils; var utils = require("./utils.js").Utils;
function PrinterUtils() { function PrinterUtils() {
@ -84,10 +82,12 @@
return line.replace(/(<del>((.|\n)*?)<\/del>)/g, ""); return line.replace(/(<del>((.|\n)*?)<\/del>)/g, "");
} }
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.PrinterUtils = new PrinterUtils(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.PrinterUtils === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.PrinterUtils = new PrinterUtils(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["PrinterUtils"] = new PrinterUtils();
})(this); })(this);

View file

@ -5,7 +5,7 @@
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
var diffParser = require("./diff-parser.js").DiffParser; var diffParser = require("./diff-parser.js").DiffParser;
var printerUtils = require("./printer-utils.js").PrinterUtils; var printerUtils = require("./printer-utils.js").PrinterUtils;
@ -186,10 +186,12 @@
return fileHtml; return fileHtml;
} }
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.SideBySidePrinter = new SideBySidePrinter(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.SideBySidePrinter === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.SideBySidePrinter = new SideBySidePrinter(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["SideBySidePrinter"] = new SideBySidePrinter();
})(this); })(this);

View file

@ -5,7 +5,7 @@
* *
*/ */
(function (global, undefined) { (function (ctx, undefined) {
function Utils() { function Utils() {
} }
@ -26,10 +26,12 @@
return value ? value : ""; return value ? value : "";
}; };
if (typeof module !== 'undefined' && module.exports) { // expose this module
module.exports.Utils = new Utils(); ((typeof module !== 'undefined' && module.exports) ||
} else if (typeof global.Utils === 'undefined') { (typeof exports !== 'undefined' && exports) ||
global.Utils = new Utils(); (typeof window !== 'undefined' && window) ||
} (typeof self !== 'undefined' && self) ||
(typeof $this !== 'undefined' && $this) ||
Function('return this')())["Utils"] = new Utils();
})(this); })(this);