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

Word wrap enabled and structure changes in the output

Browse source
This commit is contained in:
mohanapriya.c 2024-06-19 15:03:17 +05:30
parent 4de87bf099
commit 7382dbc918
14 changed files with 19358 additions and 1539 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17564
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -124,7 +124,7 @@
"mini-css-extract-plugin": "2.7.7",
"mkdirp": "3.0.1",
"nopt": "7.2.0",
"postcss": "8.4.33",
"postcss": "^8.4.33",
"postcss-cli": "11.0.0",
"postcss-import": "16.0.0",
"postcss-loader": "7.3.4",

1
src/diff2html.ts
View file

@ -19,6 +19,7 @@ export const defaultDiff2HtmlConfig = {
...defaultSideBySideRendererConfig,
outputFormat: OutputFormatType.LINE_BY_LINE,
drawFileList: true,
lineFolding: false
};
export function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[] {

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

@ -16,6 +16,7 @@ export interface LineByLineRendererConfig extends renderUtils.RenderConfig {
renderNothingWhenEmpty?: boolean;
matchingMaxComparisons?: number;
maxLineSizeInBlockForComparison?: number;
lineFolding?: boolean;
}
export const defaultLineByLineRendererConfig = {
@ -23,6 +24,7 @@ export const defaultLineByLineRendererConfig = {
renderNothingWhenEmpty: false,
matchingMaxComparisons: 2500,
maxLineSizeInBlockForComparison: 200,
lineFolding: true
};
const genericTemplatesPath = 'generic';
@ -70,6 +72,7 @@ export default class LineByLineRenderer {
file: file,
fileHtmlId: renderUtils.getHtmlId(file),
diffs: diffs,
diffClass: (this.config.lineFolding) ? 'd2h-wrapped-file-diff' : '',
filePath: filePathTemplate.render(
{
fileDiffName: renderUtils.filenameDiff(file),
@ -96,11 +99,13 @@ export default class LineByLineRenderer {
return file.blocks
.map(block => {
let lines = this.hoganUtils.render(genericTemplatesPath, 'block-header', {
CSSLineClass: renderUtils.CSSLineClass,
blockHeader: file.isTooBig ? block.header : renderUtils.escapeForHtml(block.header),
lineClass: 'd2h-code-linenumber',
contentClass: 'd2h-code-line',
let lines = this.hoganUtils.render(genericTemplatesPath, 'line', {
lineContent: this.hoganUtils.render(genericTemplatesPath, 'block-header', {
CSSLineClass: renderUtils.CSSLineClass,
blockHeader: file.isTooBig ? block.header : renderUtils.escapeForHtml(block.header),
lineClass: 'd2h-code-linenumber',
contentClass: 'd2h-code-line',
})
});
this.applyLineGroupping(block).forEach(([contextLines, oldLines, newLines]) => {
@ -113,13 +118,15 @@ export default class LineByLineRenderer {
} else if (contextLines.length) {
contextLines.forEach(line => {
const { prefix, content } = renderUtils.deconstructLine(line.content, file.isCombined);
lines += this.generateSingleLineHtml(file, {
type: renderUtils.CSSLineClass.CONTEXT,
prefix: prefix,
content: content,
oldNumber: line.oldNumber,
newNumber: line.newNumber,
});
lines += this.hoganUtils.render(genericTemplatesPath, 'line', {
lineContent: this.generateSingleLineHtml(file, {
type: renderUtils.CSSLineClass.CONTEXT,
prefix: prefix,
content: content,
oldNumber: line.oldNumber,
newNumber: line.newNumber,
})
})
});
} else if (oldLines.length || newLines.length) {
const { left, right } = this.processChangedLines(file, file.isCombined, oldLines, newLines);
@ -253,8 +260,12 @@ export default class LineByLineRenderer {
generateLineHtml(file: DiffFile, oldLine?: DiffPreparedLine, newLine?: DiffPreparedLine): FileHtml {
return {
left: this.generateSingleLineHtml(file, oldLine),
right: this.generateSingleLineHtml(file, newLine),
left: this.hoganUtils.render(genericTemplatesPath, 'line', {
lineContent: this.generateSingleLineHtml(file, oldLine)
}),
right: this.hoganUtils.render(genericTemplatesPath, 'line', {
lineContent: this.generateSingleLineHtml(file, newLine),
})
};
}
@ -265,8 +276,8 @@ export default class LineByLineRenderer {
oldNumber: line.oldNumber || '',
newNumber: line.newNumber || '',
});
return this.hoganUtils.render(genericTemplatesPath, 'line', {
return this.hoganUtils.render(genericTemplatesPath, 'line-content', {
type: line.type,
lineClass: 'd2h-code-linenumber',
contentClass: 'd2h-code-line',

1
src/render-utils.ts
View file

@ -46,6 +46,7 @@ export interface RenderConfig {
maxLineLengthHighlight?: number;
diffStyle?: DiffStyleType;
colorScheme?: ColorSchemeType;
lineFolding?: boolean;
}
export const defaultRenderConfig = {

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

@ -16,6 +16,7 @@ export interface SideBySideRendererConfig extends renderUtils.RenderConfig {
renderNothingWhenEmpty?: boolean;
matchingMaxComparisons?: number;
maxLineSizeInBlockForComparison?: number;
lineFolding?: boolean;
}
export const defaultSideBySideRendererConfig = {
@ -23,6 +24,7 @@ export const defaultSideBySideRendererConfig = {
renderNothingWhenEmpty: false,
matchingMaxComparisons: 2500,
maxLineSizeInBlockForComparison: 200,
lineFolding: true
};
const genericTemplatesPath = 'generic';
@ -65,11 +67,12 @@ export default class SideBySideRenderer {
const filePathTemplate = this.hoganUtils.template(genericTemplatesPath, 'file-path');
const fileIconTemplate = this.hoganUtils.template(iconsBaseTemplatesPath, 'file');
const fileTagTemplate = this.hoganUtils.template(tagsBaseTemplatesPath, renderUtils.getFileIcon(file));
debugger;
return fileDiffTemplate.render({
file: file,
fileHtmlId: renderUtils.getHtmlId(file),
diffs: diffs,
diffClass: (this.config.lineFolding) ? 'd2h-wrapped-file-diff' : '',
filePath: filePathTemplate.render(
{
fileDiffName: renderUtils.filenameDiff(file),
@ -207,12 +210,28 @@ export default class SideBySideRenderer {
}
makeHeaderHtml(blockHeader: string, file?: DiffFile): string {
return this.hoganUtils.render(genericTemplatesPath, 'block-header', {
const lineFolding = this.config.lineFolding;
let headerContent = this.hoganUtils.render(genericTemplatesPath, 'block-header', {
CSSLineClass: renderUtils.CSSLineClass,
blockHeader: file?.isTooBig ? blockHeader : renderUtils.escapeForHtml(blockHeader),
lineClass: 'd2h-code-side-linenumber',
contentClass: 'd2h-code-side-line',
});
if(blockHeader.length !== 0) {
if(lineFolding) {
headerContent += this.hoganUtils.render(genericTemplatesPath, 'block-header', {
CSSLineClass: renderUtils.CSSLineClass,
blockHeader: "",
lineClass: 'd2h-code-side-linenumber',
contentClass: 'd2h-code-side-line',
});
}
return this.hoganUtils.render(genericTemplatesPath, 'line', {
lineContent: headerContent
});
} else {
return blockHeader;
}
}
processChangedLines(isCombined: boolean, oldLines: DiffLine[], newLines: DiffLine[]): FileHtml {
@ -274,17 +293,31 @@ export default class SideBySideRenderer {
}
generateLineHtml(oldLine?: DiffPreparedLine, newLine?: DiffPreparedLine): FileHtml {
return {
left: this.generateSingleHtml(oldLine),
right: this.generateSingleHtml(newLine),
};
const lineFolding = this.config.lineFolding;
if(lineFolding) {
return {
left: this.hoganUtils.render(genericTemplatesPath, 'line', {
lineContent: this.generateSingleHtml(oldLine) + this.generateSingleHtml(newLine)
}),
right: ''
};
} else {
return {
left: this.hoganUtils.render(genericTemplatesPath, 'line', {
lineContent: this.generateSingleHtml(oldLine)
}),
right: this.hoganUtils.render(genericTemplatesPath, 'line', {
lineContent: this.generateSingleHtml(newLine),
})
};
}
}
generateSingleHtml(line?: DiffPreparedLine): string {
const lineClass = 'd2h-code-side-linenumber';
const contentClass = 'd2h-code-side-line';
return this.hoganUtils.render(genericTemplatesPath, 'line', {
return this.hoganUtils.render(genericTemplatesPath, 'line-content', {
type: line?.type || `${renderUtils.CSSLineClass.CONTEXT} d2h-emptyplaceholder`,
lineClass: line !== undefined ? lineClass : `${lineClass} d2h-code-side-emptyplaceholder`,
contentClass: line !== undefined ? contentClass : `${contentClass} d2h-code-side-emptyplaceholder`,

11
src/templates/generic-block-header.mustache
View file

@ -1,6 +1,5 @@
<tr>
<td class="{{lineClass}} {{CSSLineClass.INFO}}"></td>
<td class="{{CSSLineClass.INFO}}">
<div class="{{contentClass}}">{{#blockHeader}}{{{blockHeader}}}{{/blockHeader}}{{^blockHeader}}&nbsp;{{/blockHeader}}</div>
</td>
</tr>
<td class="{{lineClass}} {{CSSLineClass.INFO}}"></td>
<td class="{{CSSLineClass.INFO}}">
<div class="{{contentClass}}">{{#blockHeader}}{{{blockHeader}}}{{/blockHeader}}{{^blockHeader}}&nbsp;{{/blockHeader}}</div>
</td>

19
src/templates/generic-line-content.mustache Normal file
View file

@ -0,0 +1,19 @@
<td class="{{lineClass}} {{type}}">
{{{lineNumber}}}
</td>
<td class="{{type}}">
<div class="{{contentClass}}">
{{#prefix}}
<span class="d2h-code-line-prefix">{{{prefix}}}</span>
{{/prefix}}
{{^prefix}}
<span class="d2h-code-line-prefix">&nbsp;</span>
{{/prefix}}
{{#content}}
<span class="d2h-code-line-ctn">{{{content}}}</span>
{{/content}}
{{^content}}
<span class="d2h-code-line-ctn"><br></span>
{{/content}}
</div>
</td>

22
src/templates/generic-line.mustache
View file

@ -1,21 +1,5 @@
{{#lineContent}}
<tr>
<td class="{{lineClass}} {{type}}">
{{{lineNumber}}}
</td>
<td class="{{type}}">
<div class="{{contentClass}}">
{{#prefix}}
<span class="d2h-code-line-prefix">{{{prefix}}}</span>
{{/prefix}}
{{^prefix}}
<span class="d2h-code-line-prefix">&nbsp;</span>
{{/prefix}}
{{#content}}
<span class="d2h-code-line-ctn">{{{content}}}</span>
{{/content}}
{{^content}}
<span class="d2h-code-line-ctn"><br></span>
{{/content}}
</div>
</td>
{{{lineContent}}}
</tr>
{{/lineContent}}

2
src/templates/line-by-line-file-diff.mustache
View file

@ -2,7 +2,7 @@
<div class="d2h-file-header">
{{{filePath}}}
</div>
<div class="d2h-file-diff">
<div class="d2h-file-diff {{diffClass}}">
<div class="d2h-code-wrapper">
<table class="d2h-diff-table">
<tbody class="d2h-diff-tbody">

4
src/templates/side-by-side-file-diff.mustache
View file

@ -2,7 +2,7 @@
<div class="d2h-file-header">
{{{filePath}}}
</div>
<div class="d2h-files-diff">
<div class="d2h-files-diff {{diffClass}}">
<div class="d2h-file-side-diff">
<div class="d2h-code-wrapper">
<table class="d2h-diff-table">
@ -12,6 +12,7 @@
</table>
</div>
</div>
{{#diffs.right}}
<div class="d2h-file-side-diff">
<div class="d2h-code-wrapper">
<table class="d2h-diff-table">
@ -21,5 +22,6 @@
</table>
</div>
</div>
{{/diffs.right}}
</div>
</div>

6
website/templates/pages/demo/content.handlebars
View file

@ -52,6 +52,12 @@
</select>
</label>
</div>
<div class="column is-one-sixth-widescreen">
<label title="Show the file list summary before the diff">
<p>Line Folding</p>
<input class="options-label-value" id="diff-url-options-line-folding" type="checkbox" name="drawFileList"/>
</label>
</div>
<div class="column is-one-sixth-widescreen">
<label title="Show the file list summary before the diff">
<p>File Summary</p>

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

@ -216,6 +216,7 @@ type Elements = {
};
checkboxes: {
drawFileList: HTMLInputElement;
lineFolding: HTMLInputElement;
};
};
@ -276,6 +277,7 @@ document.addEventListener('DOMContentLoaded', async () => {
},
checkboxes: {
drawFileList: getHTMLInputElementById('diff-url-options-show-files'),
lineFolding: getHTMLInputElementById('diff-url-options-line-folding')
},
};
@ -285,6 +287,7 @@ document.addEventListener('DOMContentLoaded', async () => {
config.outputFormat && (elements.options.outputFormat.value = config.outputFormat);
config.colorScheme && (elements.options.colorScheme.value = config.colorScheme);
config.drawFileList && (elements.checkboxes.drawFileList.checked = config.drawFileList);
config.lineFolding && (elements.checkboxes.lineFolding.checked = config.lineFolding);
config.matching && (elements.options.matching.value = config.matching);
config.matchWordsThreshold && (elements.options.wordsThreshold.value = config.matchWordsThreshold.toString());
config.matchingMaxComparisons &&

3172
yarn.lock
View file

File diff suppressed because it is too large Load diff