Merge pull request #297 from rtfpessoa/release-major-version

release: New major refactor of diff2html to Typescript

Author: rtfpessoa

.circleci/config.yml

@@ -10,16 +10,15 @@ jobs:
       - run:
           name: Get next version
           command: |
-            # Hack: Set a unique fake name for the release branch to avoid releasing master as the new 3.x major release for now
-            export NEXT_VERSION="$(/bin/git-version --folder=$PWD --release-branch=FAKE-RELEASE-BRANCH-NAME)"
+            export NEXT_VERSION="$(/bin/git-version --folder=$PWD --release-branch=master)"
             echo "Next version is ${NEXT_VERSION}"
             echo "${NEXT_VERSION}" > .version
       - run:
           name: Get next npm tag name
           command: |
-            if [ "${GITHUB_REF#refs/heads/}" = "master" ]; then
+            if [ "${CIRCLE_BRANCH}" = "master" ]; then
               export PUBLISH_TAG="latest"
-            elif [ "${GITHUB_REF#refs/heads/}" = "next" ]; then
+            elif [ "${CIRCLE_BRANCH}" = "next" ]; then
               export PUBLISH_TAG="next"
             else
               export PUBLISH_TAG="pr"
@@ -132,6 +131,7 @@ jobs:
           command: |
             # Update version in packages to publish
             yarn version --non-interactive --new-version $(cat .version)
+            git push --tags "https://rtfpessoa:[email protected]/rtfpessoa/diff2html"
       - run:
           name: Setup npm credentials
           command: |
@@ -208,3 +208,7 @@ workflows:
       - publish_website:
           requires:
             - publish_approval
+          filters:
+            branches:
+              only:
+                - master

README.md

@@ -11,7 +11,7 @@
 
 [![node](https://img.shields.io/node/v/diff2html.svg)]() [![npm](https://img.shields.io/npm/l/diff2html.svg)]()
 [![npm](https://img.shields.io/npm/dm/diff2html.svg)](https://www.npmjs.com/package/diff2html)
-[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors)
 [![Gitter](https://badges.gitter.im/rtfpessoa/diff2html.svg)](https://gitter.im/rtfpessoa/diff2html?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
 diff2html generates pretty HTML diffs from git diff or unified diff output.
@@ -25,13 +25,14 @@ diff2html generates pretty HTML diffs from git diff or unified diff output.
 - [Features](#features)
 - [Online Example](#online-example)
 - [Distributions](#distributions)
+- [Usage](#usage)
 - [Diff2Html Usage](#diff2html-usage)
   - [Diff2Html API](#diff2html-api)
   - [Diff2Html Configuration](#diff2html-configuration)
   - [Diff2Html Browser](#diff2html-browser)
   - [Diff2Html NPM / Node.js Library](#diff2html-npm--nodejs-library)
   - [Diff2Html Examples](#diff2html-examples)
-- [Diff2HtmlUI](#diff2htmlui)
+- [Diff2HtmlUI Usage](#diff2htmlui-usage)
   - [Diff2HtmlUI API](#diff2htmlui-api)
   - [Diff2HtmlUI Configuration](#diff2htmlui-configuration)
   - [Diff2HtmlUI Browser](#diff2htmlui-browser)
@@ -101,6 +102,17 @@ diff2html generates pretty HTML diffs from git diff or unified diff output.
         including a `highlight.js` implementation. You can use it without syntax highlight or by passing your own
         implementation with the languages you prefer
 
+## Usage
+
+Diff2Html can be used in various ways as listed in the [distributions](#distributions) section. The two main ways are:
+
+- [Diff2Html](#diff2html-usage): using the parser and html generator directly from the library gives you complete
+  control about what you can do with the json or html generated.
+- [Diff2HtmlUI](#diff2htmlui-usage): using this wrapper makes it easy to inject the html in the DOM and adds some nice
+  features to the diff, like syntax highlight.
+
+Bellow you can find more details and exemples about each option.
+
 ## Diff2Html Usage
 
 To load correctly in the Browser you always need to include the stylesheet in the final HTML.
@@ -135,11 +147,11 @@ function html(diffInput: string | DiffFile[], configuration: Diff2HtmlConfig = {
 The HTML output accepts a Javascript object with configuration. Possible options:
 
 - `outputFormat`: the format of the output data: `'line-by-line'` or `'side-by-side'`, default is `'line-by-line'`
-- `drawFileList`: show a file list before the diff: `true` or `false`, default is `false`
+- `drawFileList`: show a file list before the diff: `true` or `false`, default is `true`
 - `diffStyle`: show differences level in each line: `word` or `char`, default is `word`
 - `matching`: matching level: `'lines'` for matching lines, `'words'` for matching lines and words or `'none'`, default
   is `none`
-- `matchWordsThreshold`: similarity threshold for word matching, default is 0.25
+- `matchWordsThreshold`: similarity threshold for word matching, default is `0.25`
 - `matchingMaxComparisons`: perform at most this much comparisons for line matching a block of changes, default is
   `2500`
 - `maxLineSizeInBlockForComparison`: maximum number os characters of the bigger line in a block to apply comparison,
@@ -266,7 +278,7 @@ export default {
 </script>
 ```
 
-## Diff2HtmlUI
+## Diff2HtmlUI Usage
 
 > Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects
 

package.json

@@ -26,7 +26,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://www.github.com/rtfpessoa/diff2html.git"
+    "url": "git://github.com/rtfpessoa/diff2html.git"
   },
   "bugs": {
     "url": "https://www.github.com/rtfpessoa/diff2html/issues"
@@ -48,8 +48,9 @@
     "build:css": "rm -rf ./bundles/css; postcss --config ./postcss.config.js --no-map -o ./bundles/css/diff2html.min.css ./src/ui/css/diff2html.css",
     "build:templates": "ts-node ./scripts/hulk.ts --wrapper ts --variable 'defaultTemplates' ./src/templates/*.mustache > ./src/diff2html-templates.ts",
     "build:website": "rm -rf docs; webpack ---display-reasons --display-modules --mode production --config webpack.website.ts",
-    "build:toc-base": "markdown-toc --maxdepth 3 --bullets='-' -i",
-    "build:toc": "yarn run build:toc-base README.md",
+    "gen": "yarn run gen:toc",
+    "gen:toc-base": "markdown-toc --maxdepth 3 --bullets='-' -i",
+    "gen:toc": "yarn run gen:toc-base README.md",
     "test": "is-ci 'test:coverage' 'test:watch'",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
@@ -74,40 +75,37 @@
   "lint-staged": {
     "**/*.+(js|jsx|ts|tsx|json)": [
       "prettier --write",
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ],
     "**/*.+(css|html|md|mdx)": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ],
     "README.md": [
-      "yarn run build:toc-base",
-      "git add"
+      "yarn run gen:toc-base"
     ]
   },
   "dependencies": {
     "diff": "4.0.2",
     "hogan.js": "3.0.2"
   },
   "optionalDependencies": {
-    "highlight.js": "9.17.1"
+    "highlight.js": "9.18.1"
   },
   "devDependencies": {
     "@types/clipboard": "2.0.1",
     "@types/copy-webpack-plugin": "5.0.0",
     "@types/diff": "4.0.2",
     "@types/highlight.js": "9.12.3",
     "@types/hogan.js": "3.0.0",
-    "@types/html-webpack-plugin": "3.2.1",
-    "@types/jest": "24.9.0",
+    "@types/html-webpack-plugin": "3.2.2",
+    "@types/jest": "25.1.1",
     "@types/mini-css-extract-plugin": "0.9.0",
     "@types/mkdirp": "0.5.2",
-    "@types/node": "13.1.8",
+    "@types/node": "13.7.0",
     "@types/nopt": "3.0.29",
-    "@types/webpack": "4.41.2",
-    "@typescript-eslint/eslint-plugin": "2.16.0",
-    "@typescript-eslint/parser": "2.16.0",
+    "@types/webpack": "4.41.5",
+    "@typescript-eslint/eslint-plugin": "2.19.0",
+    "@typescript-eslint/parser": "2.19.0",
     "autoprefixer": "9.7.4",
     "bulma": "^0.8.0",
     "clipboard": "2.0.4",
@@ -116,41 +114,41 @@
     "css-loader": "3.4.2",
     "cssnano": "4.1.10",
     "eslint": "6.8.0",
-    "eslint-config-prettier": "6.9.0",
-    "eslint-plugin-import": "2.20.0",
+    "eslint-config-prettier": "6.10.0",
+    "eslint-plugin-import": "2.20.1",
     "eslint-plugin-jest": "23.6.0",
     "eslint-plugin-json": "2.0.1",
     "eslint-plugin-node": "11.0.0",
     "eslint-plugin-optimize-regex": "1.1.7",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-sonarjs": "0.5.0",
     "file-loader": "5.0.2",
-    "handlebars": "4.7.2",
+    "handlebars": "4.7.3",
     "handlebars-loader": "1.7.1",
     "html-webpack-plugin": "3.2.0",
-    "husky": "4.0.10",
+    "husky": "4.2.1",
     "image-webpack-loader": "6.0.0",
     "is-ci-cli": "2.0.0",
-    "jest": "24.9.0",
-    "lint-staged": "9.5.0",
+    "jest": "25.1.0",
+    "lint-staged": "10.0.7",
     "markdown-toc": "^1.2.0",
     "mini-css-extract-plugin": "0.9.0",
-    "mkdirp": "0.5.1",
+    "mkdirp": "1.0.3",
     "nopt": "4.0.1",
     "postcss": "7.0.26",
     "postcss-cli": "7.1.0",
     "postcss-import": "12.0.1",
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.7.0",
     "prettier": "1.19.1",
-    "ts-jest": "24.3.0",
+    "ts-jest": "25.2.0",
     "ts-loader": "6.2.1",
     "ts-node": "8.6.2",
     "typescript": "3.7.5",
     "url-loader": "3.0.0",
     "webpack": "4.41.5",
     "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.10.1",
+    "webpack-dev-server": "3.10.3",
     "whatwg-fetch": "3.0.0"
   },
   "resolutions": {

src/render-utils.ts

@@ -4,14 +4,22 @@ import { unifyPath, hashCode } from './utils';
 import * as rematch from './rematch';
 import { LineMatchingType, DiffStyleType, LineType, DiffLineParts, DiffFile, DiffFileName } from './types';
 
-export enum CSSLineClass {
-  INSERTS = 'd2h-ins',
-  DELETES = 'd2h-del',
-  CONTEXT = 'd2h-cntx',
-  INFO = 'd2h-info',
-  INSERT_CHANGES = 'd2h-ins d2h-change',
-  DELETE_CHANGES = 'd2h-del d2h-change',
-}
+export type CSSLineClass =
+  | 'd2h-ins'
+  | 'd2h-del'
+  | 'd2h-cntx'
+  | 'd2h-info'
+  | 'd2h-ins d2h-change'
+  | 'd2h-del d2h-change';
+
+export const CSSLineClass: { [_: string]: CSSLineClass } = {
+  INSERTS: 'd2h-ins',
+  DELETES: 'd2h-del',
+  CONTEXT: 'd2h-cntx',
+  INFO: 'd2h-info',
+  INSERT_CHANGES: 'd2h-ins d2h-change',
+  DELETE_CHANGES: 'd2h-del d2h-change',
+};
 
 export type HighlightedLines = {
   oldLine: {

src/types.ts

@@ -69,18 +69,24 @@ export interface DiffFile extends DiffFileName {
   mode?: string;
 }
 
-export enum OutputFormatType {
-  LINE_BY_LINE = 'line-by-line',
-  SIDE_BY_SIDE = 'side-by-side',
-}
+export type OutputFormatType = 'line-by-line' | 'side-by-side';
 
-export enum LineMatchingType {
-  LINES = 'lines',
-  WORDS = 'words',
-  NONE = 'none',
-}
+export const OutputFormatType: { [_: string]: OutputFormatType } = {
+  LINE_BY_LINE: 'line-by-line',
+  SIDE_BY_SIDE: 'side-by-side',
+};
 
-export enum DiffStyleType {
-  WORD = 'word',
-  CHAR = 'char',
-}
+export type LineMatchingType = 'lines' | 'words' | 'none';
+
+export const LineMatchingType: { [_: string]: LineMatchingType } = {
+  LINES: 'lines',
+  WORDS: 'words',
+  NONE: 'none',
+};
+
+export type DiffStyleType = 'word' | 'char';
+
+export const DiffStyleType: { [_: string]: DiffStyleType } = {
+  WORD: 'word',
+  CHAR: 'char',
+};