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

clean project, better module exposing and documentation

Browse source 
* use native JS in example instead of jQuery
 * better module exposing now using exports, module.export, self, window, global and this
 * add example link to bower and npm definition
 * add documentation on how to highlight
This commit is contained in:
Rodrigo Fernandes 2015-07-19 22:08:17 +01:00
parent ffeaec2308
commit 6514ac7477
14 changed files with 235 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
README.md
View file

@ -1,6 +1,6 @@
# 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
@ -24,6 +24,8 @@ Diff to Html generates pretty HTML diffs from git word diff output.
* [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
## How to use
@ -50,11 +52,60 @@ Diff to Html generates pretty HTML diffs from git word diff output.
> 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
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

2
bower.json
View file

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

140
dist/diff2html.js vendored
View file

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

2
dist/diff2html.min.js vendored
View file

File diff suppressed because one or more lines are too long

22
lib/fakeRequire.js
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() {
return global;
}
return $globalHolder;
}

2
package.json
View file

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

22
sample/index.html
View file

@ -29,7 +29,6 @@
<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/languages/scala.min.js"></script>
@ -218,23 +217,30 @@
'+\n' +
'+console.log(parser.parsePatchDiffResult(text, patchLineList));\n';
$(document).ready(function () {
var diff2Html = Diff2Html;
var diffJson = diff2Html.getJsonFromDiff(lineDiffExample);
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});
$("#line-by-line").html(diff2Html.getPrettyHtmlFromJson(diffJson));
$("#side-by-side").html(diff2Html.getPrettySideBySideHtmlFromJson(diffJson));
// 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);
var code = $(".d2h-code-line-ctn");
code.map(function (i, line) {
// 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);
});
});

14
src/diff-parser.js
View file

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

29
src/diff2html.js
View file

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

14
src/html-printer.js
View file

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

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

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

18
src/printer-utils.js
View file

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

14
src/side-by-side-printer.js
View file

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

14
src/utils.js
View file

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