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

feature: display message instead of diff if isTooBig is true

Browse source 
A default `Diff too big to be displayed` message is rendered for any file diff where `isTooBig` is `true`.

A new `diffTooBigMessage` option in render config allows to fully customize the message and receives the file index in the diff as an argument. It can be used to render a link to the raw file diff for example.
This commit is contained in:
Pierric Cistac 2021-02-25 14:08:18 -05:00
parent ea9c1fee48
commit 5915ecdaa1
No known key found for this signature in database
GPG key ID: 9D98B3AF93C7362D
6 changed files with 341 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,6 +21,39 @@ describe('LineByLineRenderer', () => {
});
});
describe('_generateTooBigDiff', () => {
it('should return a diff with default "too big" message when no `diffTooBigMessage` is defined', () => {
const hoganUtils = new HoganJsUtils({});
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
const fileHtml = lineByLineRenderer.generateTooBigDiff(0);
expect(fileHtml).toMatchInlineSnapshot(`
"<tr>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-line d2h-info\\">
Diff too big to be displayed
</div>
</td>
</tr>"
`);
});
it('should return a diff with custom "too big" message when `diffTooBigMessage` is defined', () => {
const hoganUtils = new HoganJsUtils({});
const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
const fileHtml = lineByLineRenderer.generateTooBigDiff(0);
expect(fileHtml).toMatchInlineSnapshot(`
"<tr>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-line d2h-info\\">
Custom message for file 0 diff too big
</div>
</td>
</tr>"
`);
});
});
describe('makeLineHtml', () => {
it('should work for insertions', () => {
const hoganUtils = new HoganJsUtils({});
@ -505,6 +538,111 @@ describe('LineByLineRenderer', () => {
</div>"
`);
});
it('should work for too big file diff and no custom message fn', () => {
const exampleJson = [
{
blocks: [],
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-info\\">
<div class=\\"d2h-code-line d2h-info\\">
Diff too big to be displayed
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>"
`);
});
it('should work for too big file diff and custom message fn', () => {
const exampleJson = [
{
blocks: [],
deletedLines: 0,
addedLines: 0,
oldName: 'sample',
language: 'js',
newName: 'sample',
isCombined: false,
isGitDiff: false,
isTooBig: true,
},
];
const hoganUtils = new HoganJsUtils({});
const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
const lineByLineRenderer = new LineByLineRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
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-info\\">
<div class=\\"d2h-code-line d2h-info\\">
Custom message for file 0 diff too big
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>"
`);
});
});
describe('_generateFileHtml', () => {

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

@ -24,6 +24,45 @@ describe('SideBySideRenderer', () => {
});
});
describe('_generateTooBigDiff', () => {
it('should return a diff with default "too big" message when no `diffTooBigMessage` is defined', () => {
const hoganUtils = new HoganJsUtils({});
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
const fileHtml = sideBySideRenderer.generateTooBigDiff(0);
expect(fileHtml).toMatchInlineSnapshot(`
Object {
"left": "<tr>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\">
Diff too big to be displayed
</div>
</td>
</tr>",
"right": "",
}
`);
});
it('should return a diff with custom "too big" message when `diffTooBigMessage` is defined', () => {
const hoganUtils = new HoganJsUtils({});
const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
const fileHtml = sideBySideRenderer.generateTooBigDiff(0);
expect(fileHtml).toMatchInlineSnapshot(`
Object {
"left": "<tr>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\">
Custom message for file 0 diff too big
</div>
</td>
</tr>",
"right": "",
}
`);
});
});
describe('generateSideBySideFileHtml', () => {
it('should generate lines with the right prefixes', () => {
const hoganUtils = new HoganJsUtils({});
@ -406,6 +445,133 @@ describe('SideBySideRenderer', () => {
</div>"
`);
});
it('should work for too big file diff and no custom message fn', () => {
const exampleJson = [
{
blocks: [],
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-info\\">
<div class=\\"d2h-code-side-line d2h-info\\">
Diff too big to be displayed
</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\\">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>"
`);
});
it('should work for too big file diff and custom message fn', () => {
const exampleJson = [
{
blocks: [],
deletedLines: 0,
addedLines: 0,
oldName: 'sample',
language: 'js',
newName: 'sample',
isCombined: false,
isGitDiff: false,
isTooBig: true,
},
];
const hoganUtils = new HoganJsUtils({});
const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
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-info\\">
<div class=\\"d2h-code-side-line d2h-info\\">
Custom message for file 0 diff too big
</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\\">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>"
`);
});
});
describe('processLines', () => {

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

@ -41,9 +41,11 @@ export default class LineByLineRenderer {
render(diffFiles: DiffFile[]): string {
const diffsHtml = diffFiles
.map(file => {
.map((file, fileIndex) => {
let diffs;
if (file.blocks.length) {
if (file.isTooBig) {
diffs = this.generateTooBigDiff(fileIndex);
} else if (file.blocks.length) {
diffs = this.generateFileHtml(file);
} else {
diffs = this.generateEmptyDiff();
@ -79,6 +81,14 @@ export default class LineByLineRenderer {
});
}
generateTooBigDiff(fileIndex: number): string {
return this.hoganUtils.render(genericTemplatesPath, 'too-big-diff', {
contentClass: 'd2h-code-line',
CSSLineClass: renderUtils.CSSLineClass,
message: this.config.diffTooBigMessage(fileIndex),
});
}
generateEmptyDiff(): string {
return this.hoganUtils.render(genericTemplatesPath, 'empty-diff', {
contentClass: 'd2h-code-line',

3
src/render-utils.ts
View file

@ -36,6 +36,7 @@ export interface RenderConfig {
matching?: LineMatchingType;
matchWordsThreshold?: number;
maxLineLengthHighlight?: number;
diffTooBigMessage?: (fileIndex: number) => string;
diffStyle?: DiffStyleType;
}
@ -44,6 +45,8 @@ export const defaultRenderConfig = {
matchWordsThreshold: 0.25,
maxLineLengthHighlight: 10000,
diffStyle: DiffStyleType.WORD,
// eslint-disable-next-line
diffTooBigMessage: (_fileIndex: number): string => 'Diff too big to be displayed',
};
const separator = '/';

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

@ -41,9 +41,11 @@ export default class SideBySideRenderer {
render(diffFiles: DiffFile[]): string {
const diffsHtml = diffFiles
.map(file => {
.map((file, fileIndex) => {
let diffs;
if (file.blocks.length) {
if (file.isTooBig) {
diffs = this.generateTooBigDiff(fileIndex);
} else if (file.blocks.length) {
diffs = this.generateFileHtml(file);
} else {
diffs = this.generateEmptyDiff();
@ -79,6 +81,17 @@ export default class SideBySideRenderer {
});
}
generateTooBigDiff(fileIndex: number): FileHtml {
return {
right: '',
left: this.hoganUtils.render(genericTemplatesPath, 'too-big-diff', {
contentClass: 'd2h-code-side-line',
CSSLineClass: renderUtils.CSSLineClass,
message: this.config.diffTooBigMessage(fileIndex),
}),
};
}
generateEmptyDiff(): FileHtml {
return {
right: '',

7
src/templates/generic-too-big-diff.mustache Normal file
View file

@ -0,0 +1,7 @@
<tr>
<td class="{{CSSLineClass.INFO}}">
<div class="{{contentClass}} {{CSSLineClass.INFO}}">
{{{message}}}
</div>
</td>
</tr>