Merge pull request #82 from rtfpessoa/bump-diff2html

bump: Prepare for diff2html 3 release

Author: rtfpessoa

README.md

@@ -54,17 +54,11 @@ Diff to Html generates pretty HTML diffs from unified and git diff output in you
 
 ## Distributions
 
+- [NPM CLI](https://www.npmjs.org/package/diff2html-cli)
+- [NPM / Node.js library [ES5 & ES6]](https://github.com/rtfpessoa/diff2html)
+- [CDNJS](https://cdnjs.com/libraries/diff2html)
 - [WebJar](http://www.webjars.org/)
 
-- [Node Module](https://www.npmjs.org/package/diff2html)
-
-- [Bower Package](http://bower.io/search/?q=diff2html)
-
-- [Node CLI](https://www.npmjs.org/package/diff2html-cli)
-
-- Manually download and import
-  [diff2html.min.js](https://raw.githubusercontent.com/rtfpessoa/diff2html/master/dist/diff2html.min.js) into your page
-
 ## Setup
 
     npm install -g diff2html-cli
@@ -106,17 +100,15 @@ they are here:
 ```
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
 <!--diff2html-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.9.0/highlight.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/scala.min.js"></script>
 <!--diff2html-js-ui-->
 <script>
-    $(document).ready(function() {
-        var diff2htmlUi = new Diff2HtmlUI();
-        //diff2html-fileListCloseable
-        //diff2html-synchronisedScroll
-        //diff2html-highlightCode
-      });
+  document.addEventListener("DOMContentLoaded", () => {
+    const targetElement = document.getElementById("diff");
+    const diff2htmlUi = new Diff2HtmlUI(targetElement);
+    //diff2html-fileListToggle
+    //diff2html-synchronisedScroll
+    //diff2html-highlightCode
+  });
 </script>
 ```
 
@@ -168,7 +160,7 @@ your changes following the guidelines described in `CONTRIBUTING.md`. I will try
 
 ## Developing
 
-Make some changes and then `node src/main.js` 😉
+Make some changes, `yarn build` and then `./bin/diff2html` 😉
 
 ## License
 

jest.config.js

@@ -7,8 +7,8 @@ module.exports = {
   collectCoverageFrom: ['src/**/*.ts', '!src/__tests__/**', '!node_modules/**'],
   coverageThreshold: {
     global: {
-      statements: 35,
-      branches: 14,
+      statements: 34,
+      branches: 10,
       functions: 33,
       lines: 34,
     },

package.json

@@ -64,15 +64,16 @@
   "types": "./lib/diff2html.d.ts",
   "dependencies": {
     "clipboardy": "^2.1.0",
-    "diff2html": "^2.12.1",
+    "diff2html": "3.0.0-master.df4481f",
     "open": "^7.0.0",
     "request": "^2.88.0",
     "yargs": "^15.0.2"
   },
   "devDependencies": {
-    "@types/request": "2.48.4",
+    "@types/hogan.js": "^3.0.0",
     "@types/jest": "24.9.0",
     "@types/node": "13.1.8",
+    "@types/request": "2.48.4",
     "@typescript-eslint/eslint-plugin": "2.16.0",
     "@typescript-eslint/parser": "2.16.0",
     "codacy-coverage": "3.4.0",

src/cli.ts

@@ -4,7 +4,7 @@ import * as path from 'path';
 
 import * as clipboardy from 'clipboardy';
 import open = require('open');
-import { Diff2Html } from 'diff2html';
+import { parse, html, Diff2HtmlConfig } from 'diff2html';
 
 import * as http from './http-utils';
 import * as log from './logger';
@@ -26,10 +26,10 @@ function prepareHTML(diffHTMLContent: string, config: Configuration): string {
 
   const diff2htmlPath = path.join(path.dirname(require.resolve('diff2html')), '..');
 
-  const cssFilePath = path.resolve(diff2htmlPath, 'dist', 'diff2html.min.css');
+  const cssFilePath = path.resolve(diff2htmlPath, 'bundles', 'css', 'diff2html.min.css');
   const cssContent = utils.readFile(cssFilePath);
 
-  const jsUiFilePath = path.resolve(diff2htmlPath, 'dist', 'diff2html-ui.min.js');
+  const jsUiFilePath = path.resolve(diff2htmlPath, 'bundles', 'js', 'diff2html-ui-slim.min.js');
   const jsUiContent = utils.readFile(jsUiFilePath);
 
   /* HACK:
@@ -40,16 +40,16 @@ function prepareHTML(diffHTMLContent: string, config: Configuration): string {
     { searchValue: '<!--diff2html-css-->', replaceValue: `<style>\n${cssContent}\n</style>` },
     { searchValue: '<!--diff2html-js-ui-->', replaceValue: `<script>\n${jsUiContent}\n</script>` },
     {
-      searchValue: '//diff2html-fileListCloseable',
-      replaceValue: `diff2htmlUi.fileListCloseable("#diff", ${config.showFilesOpen});`,
+      searchValue: '//diff2html-fileListToggle',
+      replaceValue: `diff2htmlUi.fileListToggle(${config.showFilesOpen});`,
     },
     {
       searchValue: '//diff2html-synchronisedScroll',
-      replaceValue: `diff2htmlUi.synchronisedScroll("#diff", ${config.synchronisedScroll});`,
+      replaceValue: config.synchronisedScroll ? `diff2htmlUi.synchronisedScroll();` : '',
     },
     {
       searchValue: '//diff2html-highlightCode',
-      replaceValue: config.highlightCode ? `diff2htmlUi.highlightCode("#diff");` : '',
+      replaceValue: config.highlightCode ? `diff2htmlUi.highlightCode();` : '',
     },
     { searchValue: '<!--diff2html-diff-->', replaceValue: diffHTMLContent },
   ].reduce(
@@ -78,15 +78,15 @@ export async function getInput(inputType: InputType, inputArgs: string[], ignore
   }
 }
 
-export function getOutput(options: Diff2Html.Options, config: Configuration, input: string): string {
+export function getOutput(options: Diff2HtmlConfig, config: Configuration, input: string): string {
   if (config.htmlWrapperTemplate && !fs.existsSync(config.htmlWrapperTemplate)) {
     throw new Error(`Template ('${config.htmlWrapperTemplate}') not found!`);
   }
 
-  const diffJson = Diff2Html.getJsonFromDiff(input, options);
+  const diffJson = parse(input, options);
 
   if (config.formatType === 'html') {
-    const htmlContent = Diff2Html.getPrettyHtml(diffJson, { ...options, inputFormat: 'json' });
+    const htmlContent = html(diffJson, { ...options });
     return prepareHTML(htmlContent, config);
   } else if (config.formatType === 'json') {
     return JSON.stringify(diffJson);

src/configuration.ts

@@ -2,14 +2,28 @@ import * as path from 'path';
 
 import { Configuration } from './types';
 import { Argv } from './yargs';
+import { Diff2HtmlConfig } from 'diff2html';
+import { OutputFormatType, DiffStyleType, LineMatchingType } from 'diff2html/lib/types';
 
-export function parseArgv(argv: Argv): [Diff2Html.Options, Configuration] {
-  const diff2htmlOptions: Diff2Html.Options = {
-    inputFormat: 'diff',
-    outputFormat: argv.style === 'side' ? 'side-by-side' : 'line-by-line',
-    showFiles: argv.summary !== 'hidden',
-    diffStyle: argv.diffStyle,
-    matching: argv.matching,
+export function parseArgv(argv: Argv): [Diff2HtmlConfig, Configuration] {
+  const diff2htmlOptions: Diff2HtmlConfig = {
+    outputFormat:
+      argv.style === 'side'
+        ? OutputFormatType.SIDE_BY_SIDE
+        : argv.style === 'line'
+        ? OutputFormatType.LINE_BY_LINE
+        : undefined,
+    diffStyle:
+      argv.diffStyle === 'char' ? DiffStyleType.CHAR : argv.diffStyle === 'word' ? DiffStyleType.WORD : undefined,
+    matching:
+      argv.matching === 'lines'
+        ? LineMatchingType.LINES
+        : argv.matching === 'words'
+        ? LineMatchingType.WORDS
+        : argv.matching === 'none'
+        ? LineMatchingType.NONE
+        : undefined,
+    drawFileList: argv.summary !== 'hidden',
     matchWordsThreshold: argv.matchWordsThreshold,
     matchingMaxComparisons: argv.matchingMaxComparisons,
   };

template.html

@@ -7,23 +7,19 @@
     <!--
       Diff to HTML (template.html)
       Author: rtfpessoa
-  -->
+    -->
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
 
     <!--diff2html-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.9.0/highlight.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/scala.min.js"></script>
-
     <!--diff2html-js-ui-->
 
     <script>
-      $(document).ready(function() {
-        var diff2htmlUi = new Diff2HtmlUI();
-        //diff2html-fileListCloseable
+      document.addEventListener('DOMContentLoaded', () => {
+        const targetElement = document.getElementById('diff');
+        const diff2htmlUi = new Diff2HtmlUI(targetElement);
+        //diff2html-fileListToggle
         //diff2html-synchronisedScroll
         //diff2html-highlightCode
       });