Skip to content

Commit

Permalink
Merge pull request #297 from rtfpessoa/release-major-version
Browse files Browse the repository at this point in the history
release: New major refactor of diff2html to Typescript
  • Loading branch information
rtfpessoa authored Feb 5, 2020
2 parents df4481f + e53c7f0 commit 8731f97
Show file tree
Hide file tree
Showing 10 changed files with 1,134 additions and 977 deletions.
12 changes: 8 additions & 4 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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: |
Expand Down Expand Up @@ -208,3 +208,7 @@ workflows:
- publish_website:
requires:
- publish_approval
filters:
branches:
only:
- master
22 changes: 17 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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)
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down
48 changes: 23 additions & 25 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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": {
Expand Down
24 changes: 16 additions & 8 deletions src/render-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
32 changes: 19 additions & 13 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
};
Loading

0 comments on commit 8731f97

Please sign in to comment.