Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

diff2html

Package Overview
Dependencies
Maintainers
1
Versions
208
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

diff2html - npm Package Compare versions

Comparing version 0.1.2 to 0.1.4

dist/diff2html.css

10

package.json
{
"name": "diff2html",
"version": "0.1.2",
"version": "0.1.4",

@@ -11,2 +11,9 @@ "homepage": "https://www.github.com/rtfpessoa/diff2html-nodejs",

"pretty",
"side",
"line",
"side-by-side",
"line-by-line",
"character",
"highlight",
"pretty",
"color",

@@ -68,4 +75,5 @@ "html",

"bin",
"dist",
"src"
]
}

@@ -11,3 +11,3 @@ # Diff to Html Node Module by [rtfpessoa](https://github.com/rtfpessoa)

* line-by-line diff (not side-by-side)
* `line-by-line` and `side-by-side` diff

@@ -22,6 +22,12 @@ * char-by-char highlight

## Source
## Online Example
> Check out the `dist/template.html` for a complete example.
> Go to [Diff2HTML](http://rtfpessoa.github.io/diff2html/)
## Other Distributions
* [WebJar](http://www.webjars.org/)
* Manually download and import [diff2html.js](https://github.com/rtfpessoa/diff2html) into your page
## Setup

@@ -31,2 +37,17 @@

## Usage
Usage: diff2html [git-diff options]
Options:
-h, --help output usage information
-V, --version output the version number
-i, --input [file] Diff input file.
-o, --output [file] Output to file path. Defaults to stdout.
-p, --preview Open preview in the browser.
-l, --line Line by Line diff.
-s, --side Side by Side diff.
-j, --json Export diff in json format.
## Contribution

@@ -33,0 +54,0 @@

@@ -6,3 +6,3 @@ /*

* Date: Friday 29 August 2014
* Last Update: Saturday 30 August 2014
* Last Update: Sunday 14 September 2014
*

@@ -18,11 +18,15 @@ * Diff command:

var CSS_STYLES = {
INFO: "info",
CONTEXT: "context",
NEW: "insert",
DELETED: "delete"
var LINE_TYPE = {
INSERTS: "d2h-ins",
ALL_NEW: "d2h-all-ins",
DELETES: "d2h-del",
ALL_DELETED: "d2h-all-del",
INSERTS_AND_DELETES: "d2h-ins-and-del",
CONTEXT: "d2h-cntx",
INFO: "d2h-info"
};
var BLOCK_HEADER_LINE = "...";
function Diff2Html() {

@@ -53,2 +57,17 @@ }

/*
* Generates pretty side by side html from string diff input
*/
Diff2Html.prototype.getPrettySideBySideHtmlFromDiff = function (diffInput) {
var diffJson = generateDiffJson(diffInput);
return generateSideBySideJsonHtml(diffJson);
};
/*
* Generates pretty side by side html from a json object
*/
Diff2Html.prototype.getPrettySideBySideHtmlFromJson = function (diffJson) {
return generateSideBySideJsonHtml(diffJson);
};
var generateDiffJson = function (diffInput) {

@@ -96,3 +115,10 @@ var files = [],

var values = /^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line);
var values;
if (values = /^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line)) {
oldLine = values[2];
newLine = values[4];
} else {
oldLine = 0;
newLine = 0;
}

@@ -102,66 +128,76 @@ /* create block metadata */

currentBlock.lines = [];
currentBlock.oldStartLine = oldLine = values[2];
currentBlock.newStartLine = newLine = values[4];
/* create block header line */
var currentLine = {};
currentLine.type = CSS_STYLES.INFO;
currentLine.content = line;
currentLine.oldNumber = BLOCK_HEADER_LINE;
currentLine.newNumber = BLOCK_HEADER_LINE;
/* add line to block */
currentBlock.lines.push(currentLine);
currentBlock.oldStartLine = oldLine;
currentBlock.newStartLine = newLine;
currentBlock.header = line;
};
var createLine = function (line) {
/* Line Types */
var isLineWithInserts = /{\+.*?\+}/.exec(line);
var isNewLine = /^{\+.*?\+}$/.exec(line);
var isLineWithDeletes = /\[-.*?-\]/.exec(line);
var isNewLine = /^{\+.*?\+}$/.exec(line);
var isRemovedLine = /^\[-.*?-\]$/.exec(line);
var isLineWithBoth = isLineWithInserts && isLineWithDeletes;
var isContextLine = !isLineWithInserts && !isLineWithDeletes;
var currentLine = {};
currentLine.content = line;
if (isContextLine) {
currentLine = {};
currentLine.type = CSS_STYLES.CONTEXT;
/* fill the line data */
if (isLineWithBoth) {
currentFile.deletedLines++;
currentFile.addedLines++;
currentLine.type = LINE_TYPE.INSERTS_AND_DELETES;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = newLine++;
currentLine.content = line;
currentBlock.lines.push(currentLine);
} else {
if (isLineWithDeletes) {
currentFile.deletedLines++;
} else if (isContextLine) {
currentLine = {};
currentLine.type = CSS_STYLES.DELETED;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = null;
currentLine.content = line;
currentLine.type = LINE_TYPE.CONTEXT;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = newLine++;
currentBlock.lines.push(currentLine);
currentBlock.lines.push(currentLine);
}
} else if (isNewLine) {
currentFile.addedLines++;
if (isLineWithInserts) {
currentFile.addedLines++;
currentLine.type = LINE_TYPE.ALL_NEW;
currentLine.oldNumber = null;
currentLine.newNumber = newLine++;
currentLine = {};
currentLine.type = CSS_STYLES.NEW;
currentLine.oldNumber = null;
currentLine.newNumber = newLine++;
currentLine.content = line;
currentBlock.lines.push(currentLine);
/* fix line numbers when new chars but no deletes and no whole new line */
if (isLineWithInserts && !isLineWithDeletes && !isNewLine) {
currentFile.deletedLines++;
} else if (isRemovedLine) {
currentFile.deletedLines++;
currentLine.oldNumber = oldLine++;
}
currentLine.type = LINE_TYPE.ALL_DELETED;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = null;
currentBlock.lines.push(currentLine);
}
currentBlock.lines.push(currentLine);
} else if (isLineWithInserts) {
currentFile.addedLines++;
currentLine.type = LINE_TYPE.INSERTS;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = newLine++;
currentBlock.lines.push(currentLine);
} else if (isLineWithDeletes) {
currentFile.deletedLines++;
currentLine.type = LINE_TYPE.DELETES;
currentLine.oldNumber = oldLine++;
currentLine.newNumber = newLine++;
currentBlock.lines.push(currentLine);
}

@@ -196,17 +232,21 @@ };

/*
* Line By Line HTML
*/
var generateJsonHtml = function (diffFiles) {
return "<div id=\"wrapper\">\n" +
return "<div class=\"d2h-wrapper\">\n" +
diffFiles.map(function (file) {
return "<div class=\"file-wrapper\">\n" +
" <div class=\"file-header\">\n" +
" <div class=\"file-stats\">\n" +
" <span class=\"lines-added\">+" + file.addedLines + "</span>\n" +
" <span class=\"lines-deleted\">-" + file.deletedLines + "</span>\n" +
return "<div class=\"d2h-file-wrapper\">\n" +
" <div class=\"d2h-file-header\">\n" +
" <div class=\"d2h-file-stats\">\n" +
" <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" +
" <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" +
" </div>\n" +
" <div class=\"file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" +
" <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" +
" </div>\n" +
" <div class=\"file-diff\">\n" +
" <div class=\"code-wrapper\">\n" +
" <table class=\"diff-table\">\n" +
" <tbody>\n" +
" <div class=\"d2h-file-diff\">\n" +
" <div class=\"d2h-code-wrapper\">\n" +
" <table class=\"d2h-diff-table\">\n" +
" <tbody class=\"d2h-diff-tbody\">\n" +
" " + generateFileHtml(file) +

@@ -222,32 +262,279 @@ " </tbody>\n" +

var getDiffName = function (oldFilename, newFilename) {
return oldFilename === newFilename ? newFilename : oldFilename + " -> " + newFilename;
var generateFileHtml = function (file) {
return file.blocks.map(function (block) {
return "<tr>\n" +
" <td class=\"d2h-code-linenumber " + LINE_TYPE.INFO + "\" colspan=\"2\"></td>\n" +
" <td class=\"" + LINE_TYPE.INFO + "\">" +
" <div class=\"d2h-code-line " + LINE_TYPE.INFO + "\">" + escape(block.header) + "</div>" +
" </td>\n" +
"</tr>\n" +
block.lines.map(function (line) {
var newLine = function () {
var lineData = {};
lineData.oldLine = valueOrEmpty(line.oldNumber);
lineData.newLine = valueOrEmpty(line.newNumber);
return lineData;
};
var escapedLine = escape(line.content);
var lines = [];
var lineData = {};
switch (line.type) {
case LINE_TYPE.INSERTS:
case LINE_TYPE.ALL_NEW:
lineData = newLine();
lineData.content = generateLineInsertions(escapedLine);
lineData.type = LINE_TYPE.INSERTS;
lines.push(lineData);
break;
case LINE_TYPE.DELETES:
case LINE_TYPE.ALL_DELETED:
lineData = newLine();
lineData.content = generateLineDeletions(escapedLine);
lineData.type = LINE_TYPE.DELETES;
lines.push(lineData);
break;
case LINE_TYPE.INSERTS_AND_DELETES:
lineData = newLine();
lineData.content = generateLineDeletions(escapedLine);
lineData.type = LINE_TYPE.DELETES;
lines.push(lineData);
lineData = newLine();
lineData.content = generateLineInsertions(escapedLine);
lineData.type = LINE_TYPE.INSERTS;
lines.push(lineData);
break;
default:
lineData = newLine();
lineData.content = escapedLine;
lineData.type = LINE_TYPE.CONTEXT;
lines.push(lineData);
break;
}
return lines.map(generateLineHtml).join("\n");
}).join("\n");
}).join("\n");
};
var generateFileHtml = function (file) {
var generateLineHtml = function (line) {
return "<tr>\n" +
" <td class=\"d2h-code-linenumber " + line.type + "\">" +
" <div class=\"line-num1\">" + line.oldLine + "</div>" +
" <div class=\"line-num2\">" + line.newLine + "</div>" +
" </td>\n" +
" <td class=\"" + line.type + "\">" +
" <div class=\"d2h-code-line " + line.type + "\">" + line.content + "</div>" +
" </td>\n" +
"</tr>\n";
};
/*
* Side By Side HTML (work in progress)
*/
var generateSideBySideJsonHtml = function (diffFiles) {
return "<div class=\"d2h-wrapper\">\n" +
diffFiles.map(function (file) {
return "<div class=\"d2h-file-wrapper\">\n" +
" <div class=\"d2h-file-header\">\n" +
" <div class=\"d2h-file-stats\">\n" +
" <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" +
" <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" +
" </div>\n" +
" <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" +
" </div>\n" +
" <div class=\"d2h-files-diff\">\n" +
" <div class=\"d2h-file-side-diff\">\n" +
" <div class=\"d2h-code-wrapper\">\n" +
" <table class=\"d2h-diff-table\">\n" +
" <tbody class=\"d2h-diff-tbody\">\n" +
" " + generateLeftSideFileHtml(file) +
" </tbody>\n" +
" </table>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"d2h-file-side-diff\">\n" +
" <div class=\"d2h-code-wrapper\">\n" +
" <table class=\"d2h-diff-table\">\n" +
" <tbody class=\"d2h-diff-tbody\">\n" +
" " + generateRightSideFileHtml(file) +
" </tbody>\n" +
" </table>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n";
}).join("\n") +
"</div>\n";
};
var generateLeftSideFileHtml = function (file) {
return file.blocks.map(function (block) {
return block.lines.map(function (line) {
var oldLine = valueOrEmpty(line.oldNumber);
var newLine = valueOrEmpty(line.newNumber);
return "<tr>\n" +
" <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" +
" <td class=\"" + LINE_TYPE.INFO + "\" colspan=\"3\">" +
" <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\">" + escape(block.header) + "</div>" +
" </td>\n" +
"</tr>\n" +
var escapedLine = escape(line.content);
block.lines.map(function (line) {
if (line.type === CSS_STYLES.NEW) {
escapedLine = generateLineInsertions(escapedLine);
} else if (line.type === CSS_STYLES.DELETED) {
escapedLine = generateLineDeletions(escapedLine);
}
var emptyLine = function () {
var lineData = {};
lineData.number = "";
lineData.content = "";
lineData.type = LINE_TYPE.CONTEXT;
return "<tr>\n" +
" <td class=\"code-linenumber " + line.type + "\">" + oldLine + "</td>\n" +
" <td class=\"code-linenumber " + line.type + "\">" + newLine + "</td>\n" +
" <td class=\"code-line " + line.type + "\"><pre class=\"" + line.type + "\">" + escapedLine + "</pre></td>\n" +
"</tr>\n";
}).join("\n");
return lineData;
};
var escapedLine = escape(line.content);
var lines = [];
var lineData = {};
switch (line.type) {
case LINE_TYPE.INSERTS:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = removeInserts(escapedLine);
lineData.type = LINE_TYPE.CONTEXT;
lines.push(lineData);
break;
case LINE_TYPE.ALL_NEW:
lines.push(new emptyLine());
break;
case LINE_TYPE.DELETES:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = generateLineDeletions(escapedLine);
lineData.type = LINE_TYPE.DELETES;
lines.push(lineData);
break;
case LINE_TYPE.ALL_DELETED:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = generateLineDeletions(escapedLine);
lineData.type = LINE_TYPE.DELETES;
lines.push(lineData);
break;
case LINE_TYPE.INSERTS_AND_DELETES:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = generateLineDeletions(escapedLine);
lineData.type = LINE_TYPE.DELETES;
lines.push(lineData);
break;
default:
lineData = {};
lineData.number = valueOrEmpty(line.oldNumber);
lineData.content = escapedLine;
lineData.type = LINE_TYPE.CONTEXT;
lines.push(lineData);
break;
}
return "<tr>\n" + lines.map(generateSingleLineHtml).join("\n") + "</tr>\n";
}).join("\n");
}).join("\n");
};
var generateRightSideFileHtml = function (file) {
return file.blocks.map(function (block) {
return "<tr>\n" +
" <td class=\"d2h-code-side-linenumber " + LINE_TYPE.INFO + "\"></td>\n" +
" <td class=\"" + LINE_TYPE.INFO + "\" colspan=\"3\">" +
" <div class=\"d2h-code-side-line " + LINE_TYPE.INFO + "\"></div>" +
" </td>\n" +
"</tr>\n" +
block.lines.map(function (line) {
var emptyLine = function () {
var lineData = {};
lineData.number = "";
lineData.content = "";
lineData.type = LINE_TYPE.CONTEXT;
return lineData;
};
var escapedLine = escape(line.content);
var lines = [];
var lineData = {};
switch (line.type) {
case LINE_TYPE.INSERTS:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = generateLineInsertions(escapedLine);
lineData.type = LINE_TYPE.INSERTS;
lines.push(lineData);
break;
case LINE_TYPE.ALL_NEW:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = generateLineInsertions(escapedLine);
lineData.type = LINE_TYPE.INSERTS;
lines.push(lineData);
break;
case LINE_TYPE.DELETES:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = removeDeletes(escapedLine);
lineData.type = LINE_TYPE.CONTEXT;
lines.push(lineData);
break;
case LINE_TYPE.ALL_DELETED:
lines.push(new emptyLine());
break;
case LINE_TYPE.INSERTS_AND_DELETES:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = generateLineInsertions(escapedLine);
lineData.type = LINE_TYPE.INSERTS;
lines.push(lineData);
break;
default:
lineData = {};
lineData.number = valueOrEmpty(line.newNumber);
lineData.content = escapedLine;
lineData.type = LINE_TYPE.CONTEXT;
lines.push(lineData);
break;
}
return "<tr>\n" + lines.map(generateSingleLineHtml).join("\n") + "</tr>\n";
}).join("\n");
}).join("\n");
};
var generateSingleLineHtml = function (line) {
return "<td class=\"d2h-code-side-linenumber " + line.type + "\">" + line.number + "</td>\n" +
" <td class=\"" + line.type + "\">" +
" <div class=\"d2h-code-side-line " + line.type + "\">" + line.content + "</div>" +
" </td>\n";
};
/*
* HTML Helpers
*/
var getDiffName = function (oldFilename, newFilename) {
return oldFilename === newFilename ? newFilename : oldFilename + " -> " + newFilename;
};
var generateLineInsertions = function (line) {
return line.replace(/(\[-.*?-\])/g, "").
return line.slice(0).replace(/(\[-.*?-\])/g, "").
replace(/({\+(.*?)\+})/g, "<ins>$2</ins>");

@@ -257,6 +544,16 @@ };

var generateLineDeletions = function (line) {
return line.replace(/({\+.*?\+})/g, "").
return line.slice(0).replace(/({\+.*?\+})/g, "").
replace(/(\[-(.*?)-\])/g, "<del>$2</del>");
};
var removeDeletes = function (line) {
return line.slice(0).replace(/({\+.*?\+})/g, "").
replace(/(\[-.*?-\])/g, "");
};
var removeInserts = function (line) {
return line.slice(0).replace(/({\+.*?\+})/g, "").
replace(/(\[-.*?-\])/g, "");
};
/*

@@ -267,3 +564,3 @@ * Utils

function escape(str) {
return str
return str.slice(0)
.replace(/&/g, "&amp;")

@@ -270,0 +567,0 @@ .replace(/</g, "&lt;")

require('pkginfo')(module, 'version');
var fs = require('fs');
var program = require('commander');

@@ -11,6 +12,10 @@ var appVersion = module.exports.version;

.option('-i, --input [file]', 'Diff input file.')
.option('-o, --output [file]', 'Output to file path. Defaults to stdout.');
.option('-o, --output [file]', 'Output to file path. Defaults to stdout.')
.option('-p, --preview', 'Open preview in the browser.')
.option('-l, --line', 'Line by Line diff.')
.option('-s, --side', 'Side by Side diff.')
.option('-j, --json', 'Export diff in json format.');
program.on('--help', function () {
console.log('For support, check out github.com/rtfpessoa/diff2html-node');
console.log('For support, check out https://github.com/rtfpessoa/diff2html-nodejs');
});

@@ -23,11 +28,10 @@

function main(program) {
var fs = require('fs');
var diff2html = require('./diff2html.js');
var input = getInput(program);
if (input) {
var content = diff2html.getPrettyHtmlFromDiff(input);
var content = getHtml(program, input);
if (program.output) {
fs.writeFileSync(program.output, content);
} else if (!program.json && program.preview) {
preview(content)
} else {

@@ -43,2 +47,16 @@ console.log(content);

function preview(diffHTML) {
var exec = require("child_process").exec;
var template = fs.readFileSync(__dirname + "/../dist/template.html", "utf8");
var cssDir = __dirname + "/../dist/diff2html.css";
var template = template.replace("{{css}}", cssDir).replace("{{diff}}", diffHTML);
fs.writeFileSync("/tmp/diff.html", template);
exec("open /tmp/diff.html");
}
function getInput(program) {

@@ -55,1 +73,13 @@ if (program.input) {

}
function getHtml(program, input) {
var diff2html = require('./diff2html.js');
if (program.side) {
return diff2html.getPrettySideBySideHtmlFromDiff(input);
} else if (program.json) {
return JSON.stringify(diff2html.getJsonFromDiff(input));
} else {
return diff2html.getPrettyHtmlFromDiff(input);
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc