luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #365 from huggingface/diff-max-lines

Browse source 
feature: bypass parsing/rendering of file diff if specific threshold is crossed
This commit is contained in:
Rodrigo Fernandes 2021-03-04 22:41:02 +00:00 committed by GitHub
commit 38a9d8f93e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 398 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -149,6 +149,10 @@ 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 `true`
- `diffStyle`: show differences level in each line: `word` or `char`, default is `word`
- `diffMaxChanges`: number of changed lines after which a file diff is deemed as too big and not displayed, default is
`undefined`
- `diffTooBigMessage`: function allowing to customize the message in case of file diff too big (if `diffMaxChanges` is
set)
- `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`

226
src/__tests__/diff-parser-tests.ts
View file

@ -1975,5 +1975,231 @@ describe('DiffParser', () => {
]
`);
});
it('should work when `diffMaxChanges` is set and excedeed', () => {
const diff =
'diff --git a/src/core/init.js b/src/core/init.js\n' +
'index e49196a..50f310c 100644\n' +
'--- a/src/core/init.js\n' +
'+++ b/src/core/init.js\n' +
'@@ -101,7 +101,7 @@ var rootjQuery,\n' +
' // HANDLE: $(function)\n' +
' // Shortcut for document ready\n' +
' } else if ( jQuery.isFunction( selector ) ) {\n' +
'- return typeof rootjQuery.ready !== "undefined" ?\n' +
'+ return rootjQuery.ready !== undefined ?\n' +
' rootjQuery.ready( selector ) :\n' +
' // Execute immediately if ready is not present\n' +
' selector( jQuery );\n' +
'diff --git a/src/event.js b/src/event.js\n' +
'index 7336f4d..6183f70 100644\n' +
'--- a/src/event.js\n' +
'+++ b/src/event.js\n' +
'@@ -1,6 +1,5 @@\n' +
' define([\n' +
' "./core",\n' +
'- "./var/strundefined",\n' +
' "./var/rnotwhite",\n' +
' "./var/hasOwn",\n' +
' "./var/slice",\n';
const result = parse(diff, { diffMaxChanges: 1 });
expect(result).toMatchInlineSnapshot(`
Array [
Object {
"addedLines": 0,
"blocks": Array [
Object {
"header": "Diff too big to be displayed",
"lines": Array [],
"newStartLine": 0,
"oldStartLine": 0,
"oldStartLine2": null,
},
],
"checksumAfter": "50f310c",
"checksumBefore": "e49196a",
"deletedLines": 0,
"isCombined": false,
"isGitDiff": true,
"isTooBig": true,
"language": "js",
"mode": "100644",
"newName": "src/core/init.js",
"oldName": "src/core/init.js",
},
Object {
"addedLines": 0,
"blocks": Array [
Object {
"header": "@@ -1,6 +1,5 @@",
"lines": Array [
Object {
"content": " define([",
"newNumber": 1,
"oldNumber": 1,
"type": "context",
},
Object {
"content": " \\"./core\\",",
"newNumber": 2,
"oldNumber": 2,
"type": "context",
},
Object {
"content": "- \\"./var/strundefined\\",",
"newNumber": undefined,
"oldNumber": 3,
"type": "delete",
},
Object {
"content": " \\"./var/rnotwhite\\",",
"newNumber": 3,
"oldNumber": 4,
"type": "context",
},
Object {
"content": " \\"./var/hasOwn\\",",
"newNumber": 4,
"oldNumber": 5,
"type": "context",
},
Object {
"content": " \\"./var/slice\\",",
"newNumber": 5,
"oldNumber": 6,
"type": "context",
},
],
"newStartLine": 1,
"oldStartLine": 1,
"oldStartLine2": null,
},
],
"checksumAfter": "6183f70",
"checksumBefore": "7336f4d",
"deletedLines": 1,
"isCombined": false,
"isGitDiff": true,
"language": "js",
"mode": "100644",
"newName": "src/event.js",
"oldName": "src/event.js",
},
]
`);
});
it('should work when `diffMaxChanges` is set and excedeed, and `diffTooBigMessage` is set', () => {
const diff =
'diff --git a/src/core/init.js b/src/core/init.js\n' +
'index e49196a..50f310c 100644\n' +
'--- a/src/core/init.js\n' +
'+++ b/src/core/init.js\n' +
'@@ -101,7 +101,7 @@ var rootjQuery,\n' +
' // HANDLE: $(function)\n' +
' // Shortcut for document ready\n' +
' } else if ( jQuery.isFunction( selector ) ) {\n' +
'- return typeof rootjQuery.ready !== "undefined" ?\n' +
'+ return rootjQuery.ready !== undefined ?\n' +
' rootjQuery.ready( selector ) :\n' +
' // Execute immediately if ready is not present\n' +
' selector( jQuery );\n' +
'diff --git a/src/event.js b/src/event.js\n' +
'index 7336f4d..6183f70 100644\n' +
'--- a/src/event.js\n' +
'+++ b/src/event.js\n' +
'@@ -1,6 +1,5 @@\n' +
' define([\n' +
' "./core",\n' +
'- "./var/strundefined",\n' +
' "./var/rnotwhite",\n' +
' "./var/hasOwn",\n' +
' "./var/slice",\n';
const result = parse(diff, { diffMaxChanges: 1, diffTooBigMessage: (i: number) => `Custom ${i}` });
expect(result).toMatchInlineSnapshot(`
Array [
Object {
"addedLines": 0,
"blocks": Array [
Object {
"header": "Custom 0",
"lines": Array [],
"newStartLine": 0,
"oldStartLine": 0,
"oldStartLine2": null,
},
],
"checksumAfter": "50f310c",
"checksumBefore": "e49196a",
"deletedLines": 0,
"isCombined": false,
"isGitDiff": true,
"isTooBig": true,
"language": "js",
"mode": "100644",
"newName": "src/core/init.js",
"oldName": "src/core/init.js",
},
Object {
"addedLines": 0,
"blocks": Array [
Object {
"header": "@@ -1,6 +1,5 @@",
"lines": Array [
Object {
"content": " define([",
"newNumber": 1,
"oldNumber": 1,
"type": "context",
},
Object {
"content": " \\"./core\\",",
"newNumber": 2,
"oldNumber": 2,
"type": "context",
},
Object {
"content": "- \\"./var/strundefined\\",",
"newNumber": undefined,
"oldNumber": 3,
"type": "delete",
},
Object {
"content": " \\"./var/rnotwhite\\",",
"newNumber": 3,
"oldNumber": 4,
"type": "context",
},
Object {
"content": " \\"./var/hasOwn\\",",
"newNumber": 4,
"oldNumber": 5,
"type": "context",
},
Object {
"content": " \\"./var/slice\\",",
"newNumber": 5,
"oldNumber": 6,
"type": "context",
},
],
"newStartLine": 1,
"oldStartLine": 1,
"oldStartLine2": null,
},
],
"checksumAfter": "6183f70",
"checksumBefore": "7336f4d",
"deletedLines": 1,
"isCombined": false,
"isGitDiff": true,
"language": "js",
"mode": "100644",
"newName": "src/event.js",
"oldName": "src/event.js",
},
]
`);
});
});
});

59
src/__tests__/line-by-line-tests.ts
View file

@ -505,6 +505,65 @@ describe('LineByLineRenderer', () => {
</div>"
`);
});
it('should work for too big file diff', () => {
const exampleJson = [
{
blocks: [
{
header: '<a href="http://example.com">Custom link to render</a>',
lines: [],
newStartLine: 0,
oldStartLine: 0,
oldStartLine2: undefined,
},
],
deletedLines: 0,
addedLines: 0,
oldName: 'sample',
language: 'js',
newName: 'sample',
isCombined: false,
isGitDiff: false,
isTooBig: true,
},
];
const hoganUtils = new HoganJsUtils({});
const lineByLineRenderer = new LineByLineRenderer(hoganUtils);
const html = lineByLineRenderer.render(exampleJson);
expect(html).toMatchInlineSnapshot(`
"<div class=\\"d2h-wrapper\\">
<div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
<div class=\\"d2h-file-header\\">
<span class=\\"d2h-file-name-wrapper\\">
<svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
<table class=\\"d2h-diff-table\\">
<tbody class=\\"d2h-diff-tbody\\">
<tr>
<td class=\\"d2h-code-linenumber d2h-info\\"></td>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-line d2h-info\\"><a href=\\"http://example.com\\">Custom link to render</a></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>"
`);
});
});
describe('_generateFileHtml', () => {

75
src/__tests__/side-by-side-printer-tests.ts
View file

@ -406,6 +406,81 @@ describe('SideBySideRenderer', () => {
</div>"
`);
});
it('should work for too big file diff', () => {
const exampleJson = [
{
blocks: [
{
header: '<a href="http://example.com">Custom link to render</a>',
lines: [],
newStartLine: 0,
oldStartLine: 0,
oldStartLine2: undefined,
},
],
deletedLines: 0,
addedLines: 0,
oldName: 'sample',
language: 'js',
newName: 'sample',
isCombined: false,
isGitDiff: false,
isTooBig: true,
},
];
const hoganUtils = new HoganJsUtils({});
const sideBySideRenderer = new SideBySideRenderer(hoganUtils);
const html = sideBySideRenderer.render(exampleJson);
expect(html).toMatchInlineSnapshot(`
"<div class=\\"d2h-wrapper\\">
<div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
<div class=\\"d2h-file-header\\">
<span class=\\"d2h-file-name-wrapper\\">
<svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-files-diff\\">
<div class=\\"d2h-file-side-diff\\">
<div class=\\"d2h-code-wrapper\\">
<table class=\\"d2h-diff-table\\">
<tbody class=\\"d2h-diff-tbody\\">
<tr>
<td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\"><a href=\\"http://example.com\\">Custom link to render</a></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class=\\"d2h-file-side-diff\\">
<div class=\\"d2h-code-wrapper\\">
<table class=\\"d2h-diff-table\\">
<tbody class=\\"d2h-diff-tbody\\">
<tr>
<td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>"
`);
});
});
describe('processLines', () => {

26
src/diff-parser.ts
View file

@ -4,6 +4,8 @@ import { escapeForRegExp } from './utils';
export interface DiffParserConfig {
srcPrefix?: string;
dstPrefix?: string;
diffMaxChanges?: number;
diffTooBigMessage?: (fileIndex: number) => string;
}
function getExtension(filename: string, language: string): string {
@ -299,6 +301,30 @@ export function parse(diffInput: string, config: DiffParserConfig = {}): DiffFil
startFile();
}
// Ignore remaining diff for current file if marked as too big
if (currentFile?.isTooBig) {
return;
}
if (
currentFile &&
typeof config.diffMaxChanges === 'number' &&
currentFile.addedLines + currentFile.deletedLines > config.diffMaxChanges
) {
currentFile.isTooBig = true;
currentFile.addedLines = 0;
currentFile.deletedLines = 0;
currentFile.blocks = [];
currentBlock = null;
const message =
typeof config.diffTooBigMessage === 'function'
? config.diffTooBigMessage(files.length)
: 'Diff too big to be displayed';
startBlock(message);
return;
}
/*
* We need to make sure that we have the three lines of the header.
* This avoids cases like the ones described in:

2
src/line-by-line-renderer.ts
View file

@ -95,7 +95,7 @@ export default class LineByLineRenderer {
.map(block => {
let lines = this.hoganUtils.render(genericTemplatesPath, 'block-header', {
CSSLineClass: renderUtils.CSSLineClass,
blockHeader: renderUtils.escapeForHtml(block.header),
blockHeader: file.isTooBig ? block.header : renderUtils.escapeForHtml(block.header),
lineClass: 'd2h-code-linenumber',
contentClass: 'd2h-code-line',
});

6
src/side-by-side-renderer.ts
View file

@ -97,7 +97,7 @@ export default class SideBySideRenderer {
return file.blocks
.map(block => {
const fileHtml = {
left: this.makeHeaderHtml(block.header),
left: this.makeHeaderHtml(block.header, file),
right: this.makeHeaderHtml(''),
};
@ -203,10 +203,10 @@ export default class SideBySideRenderer {
return doMatching ? matcher(oldLines, newLines) : [[oldLines, newLines]];
}
makeHeaderHtml(blockHeader: string): string {
makeHeaderHtml(blockHeader: string, file?: DiffFile): string {
return this.hoganUtils.render(genericTemplatesPath, 'block-header', {
CSSLineClass: renderUtils.CSSLineClass,
blockHeader: renderUtils.escapeForHtml(blockHeader),
blockHeader: file?.isTooBig ? blockHeader : renderUtils.escapeForHtml(blockHeader),
lineClass: 'd2h-code-side-linenumber',
contentClass: 'd2h-code-side-line',
});

1
src/types.ts
View file

@ -62,6 +62,7 @@ export interface DiffFile extends DiffFileName {
isCopy?: boolean;
isRename?: boolean;
isBinary?: boolean;
isTooBig?: boolean;
unchangedPercentage?: number;
changedPercentage?: number;
checksumBefore?: string | string[];

5
website/templates/pages/demo/demo.ts
View file

@ -21,6 +21,7 @@ import './demo.css';
type URLParams = {
diff?: string;
diffTooBigMessage?: string;
[key: string]: string | boolean | number | undefined;
};
@ -116,9 +117,9 @@ function prepareRequest(url: string): Request {
}
function getConfiguration(urlParams: URLParams): Diff2HtmlUIConfig {
// Removing `diff` form `urlParams` to avoid being inserted
// Removing `diff` and `diffTooBigMessage` form `urlParams` to avoid being inserted
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { diff, ...urlParamsRest } = urlParams;
const { diff, diffTooBigMessage, ...urlParamsRest } = urlParams;
const config: URLParams = {
...defaultDiff2HtmlUIConfig,
...urlParamsRest,