Improve docs, lock npm versions, and update deps

README.md

@@ -54,15 +54,39 @@ diff2html generates pretty HTML diffs from git or unified diff output.
 
 ## How to use
 
+### Browser Library
+
+Import the stylesheet and the library code
+
+```html
+<!-- CSS -->
+<link rel="stylesheet" type="text/css" href="dist/diff2html.css">
+
+<!-- Javascripts -->
+<script type="text/javascript" src="dist/diff2html.js"></script>
+```
+
+It will now be available as a global variable named `Diff2Html`.
+
+### Node Module
+
+```js
+let dif2html = require("diff2html").Diff2Html
+```
+
+## API
+
 > Pretty HTML diff
 
-    Diff2Html.getPrettyHtml(exInput, configuration)
+    getJsonFromDiff(input: string, configuration?: Options): Result
 
 > Intermediate Json From Git Word Diff Output
 
-    Diff2Html.getJsonFromDiff(exInput)
+    getPrettyHtml(input: any, configuration?: Options): string
 
-> Check out the `index.html` for a complete example.
+> Check out the `docs/diff2html.d.ts` for a complete API definition in TypeScript.
+
+> Check out the `docs/index.html` for a demo example.
 
 ## Configuration
 The HTML output accepts a Javascript object with configuration. Possible options:
@@ -79,9 +103,14 @@ The HTML output accepts a Javascript object with configuration. Possible options
 
 > Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects
 
+* Invoke Diff2html
+* Inject output in DOM element
+* Enable collapsible file summary list
+* Enable syntax highlight of the code in the diffs
+
 ### How to use
 
-> HTML resource imports
+#### Mandatory HTML resource imports
 
 ```html
 <!-- CSS -->
@@ -92,7 +121,7 @@ The HTML output accepts a Javascript object with configuration. Possible options
 <script type="text/javascript" src="dist/diff2html-ui.js"></script>
 ```
 
-> Init
+#### Init
 
 ```js
 var diff2htmlUi = new Diff2HtmlUI({diff: diffString});
@@ -100,25 +129,13 @@ var diff2htmlUi = new Diff2HtmlUI({diff: diffString});
 var diff2htmlUi = new Diff2HtmlUI({json: diffJson});
 ```
 
-> Draw
+#### Draw
 
 ```js
 diff2htmlUi.draw('html-target-elem', {inputFormat: 'json', showFiles: true, matching: 'lines'});
 ```
 
-> Highlight Code
+#### Syntax Highlight
-
-```js
-diff2htmlUi.highlightCode('html-target-elem');
-```
-
-> Collapse File Summary List
-
-```js
-diff2htmlUi.fileListCloseable('html-target-elem', false);
-```
-
-## Syntax Highlight
 
 > Add the dependencies.
 Choose one color scheme, and add the main highlight code.
@@ -126,12 +143,12 @@ If your favourite language is not included in the default package also add its j
 
 ```html
 <!-- Stylesheet -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/github.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">
 
 <!-- Javascripts -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/languages/scala.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script>
 <script type="text/javascript" src="dist/diff2html-ui.js"></script>
 ```
 
@@ -145,7 +162,7 @@ $(document).ready(function() {
 });
 ```
 
-## Collapsable File Summary List
+#### Collapsable File Summary List
 
 > Add the dependencies.
 

docs/diff2html.d.ts

@@ -0,0 +1,66 @@
+// Type definitions for diff2html
+// Project: https://github.com/rtfpessoa/diff2html
+// Definitions by: rtfpessoa <https://github.com/rtfpessoa/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace Diff2Html {
+
+  export interface Options {
+    inputFormat?: string;
+    outputFormat?: string;
+    showFiles?: boolean;
+    matching?: string;
+    synchronisedScroll?: boolean;
+    matchWordsThreshold?: number;
+    matchingMaxComparisons?: number;
+  }
+
+  export interface Line {
+    content: string;
+    type: string;
+    oldNumber: number;
+    newNumber: number;
+  }
+
+  export interface Block {
+    oldStartLine: number;
+    oldStartLine2?: number;
+    newStartLine: number;
+    header: string;
+    lines: Line[];
+  }
+
+  export interface Result {
+    addedLines: number;
+    deletedLines: number;
+    isCombined: boolean;
+    isGitDiff: boolean;
+    oldName: string;
+    newName: string;
+    language: string;
+    blocks: Block[];
+    oldMode?: string;
+    newMode?: string;
+    deletedFileMode?: string;
+    newFileMode?: string;
+    isDeleted?: boolean;
+    isNew?: boolean;
+    isCopy?: boolean;
+    isRename?: boolean;
+    unchangedPercentage?: number;
+    changedPercentage?: number;
+    checksumBefore?: string;
+    checksumAfter?: string;
+    mode?: string;
+  }
+
+  export interface Diff2Html {
+    getJsonFromDiff(input: string, configuration?: Options): Result;
+    getPrettyHtml(input: any, configuration?: Options): string;
+  }
+}
+
+declare module "diff2html" {
+  var d2h: { "Diff2Html": Diff2Html.Diff2Html };
+  export = d2h;
+}

docs/index.html

@@ -9,12 +9,12 @@
       Author: rtfpessoa
   -->
 
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/scala.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script>
 
   <!-- diff2html -->
   <link rel="stylesheet" type="text/css" href="../dist/diff2html.css">

package.json

@@ -53,21 +53,21 @@
     "fs": false
   },
   "dependencies": {
-    "diff": "^2.2.3",
+    "diff": "^3.0.0",
     "hogan.js": "^3.0.2"
   },
   "devDependencies": {
-    "autoprefixer": "^6.3.6",
+    "autoprefixer": "^6.4.0",
-    "browserify": "^13.0.1",
+    "browserify": "^13.1.0",
-    "clean-css": "^3.4.18",
+    "clean-css": "^3.4.19",
-    "codacy-coverage": "^1.1.3",
+    "codacy-coverage": "^2.0.0",
-    "eslint": "^3.0.1",
+    "eslint": "^3.3.1",
-    "eslint-plugin-promise": "^1.3.2",
+    "eslint-plugin-promise": "^2.0.1",
-    "eslint-plugin-standard": "^1.3.2",
+    "eslint-plugin-standard": "^2.0.0",
     "fast-html-parser": "^1.0.1",
     "istanbul": "^0.4.4",
     "mkdirp": "^0.5.1",
-    "mocha": "^2.5.3",
+    "mocha": "^3.0.2",
     "nopt": "^3.0.6",
     "postcss-cli": "^2.5.2",
     "uglifyjs": "^2.4.10"