Skip to content

Commit 6caaa7c

Browse files
amadeusamadeus
committed
WIP
Decorations to be renderin, which is dope... But it's very rough at the moment
1 parent c014fad commit 6caaa7c

7 files changed

Lines changed: 705 additions & 33 deletions

File tree

‎apps/demo/src/main.ts‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import {
22
DEFAULT_THEMES,
3+
type DiffDecorationItem,
34
DIFFS_TAG_NAME,
45
type DiffsThemeNames,
56
File,
67
type FileContents,
8+
type FileDecorationItem,
79
FileDiff,
810
type FileDiffOptions,
911
type FileOptions,
@@ -42,6 +44,8 @@ import {
4244
renderDiffAnnotation,
4345
} from './utils/renderAnnotation';
4446

47+
FAKE_DIFF_LINE_ANNOTATIONS.length = 0;
48+
FAKE_LINE_ANNOTATIONS.length = 0;
4549
const DEMO_THEME: DiffsThemeNames | ThemesType = DEFAULT_THEMES;
4650
const WORKER_POOL = true;
4751
const VIRTUALIZE = true;
@@ -365,6 +369,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
365369
fileDiff,
366370
lineAnnotations: fileAnnotations,
367371
fileContainer,
372+
decorations: DECORATIONS_DIFF,
368373
});
369374
diffInstances.push(instance);
370375
hunkIndex++;
@@ -630,6 +635,37 @@ const fileExample: FileContents | Promise<FileContents> = (() => {
630635
};
631636
})();
632637

638+
const DECORATIONS: FileDecorationItem[] = [
639+
{ lineNumber: 1, bar: true, color: 'red' },
640+
{ lineNumber: 2, endLineNumber: 4, background: true, color: 'blue' },
641+
{
642+
lineNumber: 5,
643+
endLineNumber: 11,
644+
background: '#123456',
645+
bar: true,
646+
color: 'orange',
647+
},
648+
];
649+
650+
const DECORATIONS_DIFF: DiffDecorationItem[] = [
651+
{ lineNumber: 1, side: 'deletions', bar: true, color: 'red' },
652+
{
653+
lineNumber: 2,
654+
endLineNumber: 4,
655+
side: 'deletions',
656+
background: true,
657+
color: 'blue',
658+
},
659+
{
660+
lineNumber: 5,
661+
endLineNumber: 11,
662+
side: 'additions',
663+
background: '#123456',
664+
bar: true,
665+
color: 'orange',
666+
},
667+
];
668+
633669
const fileConflict: FileContents = {
634670
name: 'file.ts',
635671
contents: FILE_CONFLICT,
@@ -741,6 +777,7 @@ if (renderFileButton != null) {
741777
file,
742778
lineAnnotations: FAKE_LINE_ANNOTATIONS,
743779
fileContainer,
780+
decorations: DECORATIONS,
744781
});
745782
fileInstances.push(instance);
746783
});
@@ -827,15 +864,15 @@ function createCollapsedToggle(
827864

828865
// For quick testing diffs
829866
// FAKE_DIFF_LINE_ANNOTATIONS.length = 0;
830-
// (() => {
831-
// const oldFile = {
832-
// name: 'file_old.ts',
833-
// contents: FILE_OLD,
834-
// };
835-
// const newFile = {
836-
// name: 'file_new.ts',
837-
// contents: FILE_NEW,
838-
// };
839-
// const parsed = parseDiffFromFile(oldFile, newFile);
840-
// renderDiff([{ files: [parsed] }], poolManager);
841-
// })();
867+
(() => {
868+
const oldFile = {
869+
name: 'file_old.ts',
870+
contents: FILE_OLD,
871+
};
872+
const newFile = {
873+
name: 'file_new.ts',
874+
contents: FILE_NEW,
875+
};
876+
const parsed = parseDiffFromFile(oldFile, newFile);
877+
renderDiff([{ files: [parsed] }], poolManager);
878+
})();

‎packages/diffs/src/components/UnresolvedFile.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,7 @@ export class UnresolvedFile<
394394
override render(
395395
props: UnresolvedFileRenderProps<LAnnotation, LDecoration> = {}
396396
): boolean {
397-
let {
397+
const {
398398
file,
399399
fileDiff,
400400
actions,

‎packages/diffs/src/renderers/DiffHunksRenderer.ts‎

Lines changed: 57 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,12 @@ import { getFiletypeFromFileName } from '../utils/getFiletypeFromFileName';
5050
import { getHighlighterOptions } from '../utils/getHighlighterOptions';
5151
import { getHunkSeparatorSlotName } from '../utils/getHunkSeparatorSlotName';
5252
import { getLineAnnotationName } from '../utils/getLineAnnotationName';
53+
import {
54+
getLineDecorationContentProperties,
55+
getLineDecorationGutterProperties,
56+
mergeHastProperties,
57+
mergeNormalizedLineDecorations,
58+
} from '../utils/getLineDecorationProperties';
5359
import { getTotalLineCountFromHunks } from '../utils/getTotalLineCountFromHunks';
5460
import {
5561
createGutterGap,
@@ -354,6 +360,23 @@ export class DiffHunksRenderer<
354360
: this.additionDecorationsByLine[lineNumber];
355361
}
356362

363+
protected mergeLineDecoration(
364+
decoration: LineDecoration,
365+
lineDecorations: NormalizedLineDecorations | undefined
366+
): LineDecoration {
367+
return {
368+
...decoration,
369+
gutterProperties: mergeHastProperties(
370+
decoration.gutterProperties,
371+
getLineDecorationGutterProperties(lineDecorations)
372+
),
373+
contentProperties: mergeHastProperties(
374+
decoration.contentProperties,
375+
getLineDecorationContentProperties(lineDecorations)
376+
),
377+
};
378+
}
379+
357380
protected createAnnotationElement(span: AnnotationSpan): HASTElement {
358381
return createDefaultAnnotationElement(span);
359382
}
@@ -864,24 +887,35 @@ export class DiffHunksRenderer<
864887
additionLineIndex: additionLine?.lineIndex,
865888
deletionLineIndex: deletionLine?.lineIndex,
866889
});
890+
const unifiedLineDecoration = this.mergeLineDecoration(
891+
lineDecoration,
892+
mergeNormalizedLineDecorations(
893+
deletionLine != null
894+
? this.getLineDecorations('deletions', deletionLine.lineNumber)
895+
: undefined,
896+
additionLine != null
897+
? this.getLineDecorations('additions', additionLine.lineNumber)
898+
: undefined
899+
)
900+
);
867901
pushGutterLineNumber(
868902
'unified',
869-
lineDecoration.gutterLineType,
903+
unifiedLineDecoration.gutterLineType,
870904
additionLine != null
871905
? additionLine.lineNumber
872906
: deletionLine.lineNumber,
873907
`${unifiedLineIndex},${splitLineIndex}`,
874-
lineDecoration.gutterProperties
908+
unifiedLineDecoration.gutterProperties
875909
);
876910
if (additionLineContent != null) {
877911
additionLineContent = withContentProperties(
878912
additionLineContent,
879-
lineDecoration.contentProperties
913+
unifiedLineDecoration.contentProperties
880914
);
881915
} else if (deletionLineContent != null) {
882916
deletionLineContent = withContentProperties(
883917
deletionLineContent,
884-
lineDecoration.contentProperties
918+
unifiedLineDecoration.contentProperties
885919
);
886920
}
887921
pushLineWithAnnotation({
@@ -932,6 +966,18 @@ export class DiffHunksRenderer<
932966
type,
933967
lineIndex: additionLine?.lineIndex,
934968
});
969+
const decoratedDeletionLine = this.mergeLineDecoration(
970+
deletionLineDecoration,
971+
deletionLine != null
972+
? this.getLineDecorations('deletions', deletionLine.lineNumber)
973+
: undefined
974+
);
975+
const decoratedAdditionLine = this.mergeLineDecoration(
976+
additionLineDecoration,
977+
additionLine != null
978+
? this.getLineDecorations('additions', additionLine.lineNumber)
979+
: undefined
980+
);
935981

936982
if (deletionLineContent == null && additionLineContent == null) {
937983
const errorMessage =
@@ -978,14 +1024,14 @@ export class DiffHunksRenderer<
9781024
if (deletionLine != null) {
9791025
const deletionLineDecorated = withContentProperties(
9801026
deletionLineContent,
981-
deletionLineDecoration.contentProperties
1027+
decoratedDeletionLine.contentProperties
9821028
);
9831029
pushGutterLineNumber(
9841030
'deletions',
985-
deletionLineDecoration.gutterLineType,
1031+
decoratedDeletionLine.gutterLineType,
9861032
deletionLine.lineNumber,
9871033
`${deletionLine.unifiedLineIndex},${splitLineIndex}`,
988-
deletionLineDecoration.gutterProperties
1034+
decoratedDeletionLine.gutterProperties
9891035
);
9901036
if (deletionLineDecorated != null) {
9911037
deletionLineContent = deletionLineDecorated;
@@ -994,14 +1040,14 @@ export class DiffHunksRenderer<
9941040
if (additionLine != null) {
9951041
const additionLineDecorated = withContentProperties(
9961042
additionLineContent,
997-
additionLineDecoration.contentProperties
1043+
decoratedAdditionLine.contentProperties
9981044
);
9991045
pushGutterLineNumber(
10001046
'additions',
1001-
additionLineDecoration.gutterLineType,
1047+
decoratedAdditionLine.gutterLineType,
10021048
additionLine.lineNumber,
10031049
`${additionLine.unifiedLineIndex},${splitLineIndex}`,
1004-
additionLineDecoration.gutterProperties
1050+
decoratedAdditionLine.gutterProperties
10051051
);
10061052
if (additionLineDecorated != null) {
10071053
additionLineContent = additionLineDecorated;
@@ -1588,8 +1634,7 @@ function withContentProperties(
15881634
return {
15891635
...lineNode,
15901636
properties: {
1591-
...lineNode.properties,
1592-
...contentProperties,
1637+
...(mergeHastProperties(lineNode.properties, contentProperties) ?? {}),
15931638
},
15941639
};
15951640
}

‎packages/diffs/src/renderers/FileRenderer.ts‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ElementContent, Element as HASTElement } from 'hast';
1+
import type { ElementContent, Element as HASTElement, Properties } from 'hast';
22
import { toHtml } from 'hast-util-to-html';
33

44
import { DEFAULT_RENDER_RANGE, DEFAULT_THEMES } from '../constants';
@@ -32,6 +32,11 @@ import { createPreElement } from '../utils/createPreElement';
3232
import { getFiletypeFromFileName } from '../utils/getFiletypeFromFileName';
3333
import { getHighlighterOptions } from '../utils/getHighlighterOptions';
3434
import { getLineAnnotationName } from '../utils/getLineAnnotationName';
35+
import {
36+
getLineDecorationContentProperties,
37+
getLineDecorationGutterProperties,
38+
mergeHastProperties,
39+
} from '../utils/getLineDecorationProperties';
3540
import { getThemes } from '../utils/getThemes';
3641
import {
3742
createGutterGap,
@@ -380,11 +385,22 @@ export class FileRenderer<LAnnotation = undefined, LDecoration = undefined> {
380385
}
381386

382387
if (line != null) {
388+
const lineDecorations = this.getLineDecorations(lineNumber);
383389
// Add gutter line number
384390
gutter.children.push(
385-
createGutterItem('context', lineNumber, `${lineIndex}`)
391+
createGutterItem(
392+
'context',
393+
lineNumber,
394+
`${lineIndex}`,
395+
getLineDecorationGutterProperties(lineDecorations)
396+
)
397+
);
398+
contentArray.push(
399+
withContentProperties(
400+
line,
401+
getLineDecorationContentProperties(lineDecorations)
402+
)
386403
);
387-
contentArray.push(line);
388404
rowCount++;
389405

390406
// Check annotations using ACTUAL line number from file
@@ -528,6 +544,20 @@ export class FileRenderer<LAnnotation = undefined, LDecoration = undefined> {
528544
}
529545
}
530546

547+
function withContentProperties(
548+
lineNode: ElementContent,
549+
contentProperties: Properties | undefined
550+
): ElementContent {
551+
if (lineNode.type !== 'element' || contentProperties == null) {
552+
return lineNode;
553+
}
554+
return {
555+
...lineNode,
556+
properties:
557+
mergeHastProperties(lineNode.properties, contentProperties) ?? {},
558+
};
559+
}
560+
531561
function areRenderOptionsEqual(
532562
optionsA: RenderFileOptions,
533563
optionsB: RenderFileOptions

‎packages/diffs/src/style.css‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,10 @@
458458
[data-line-annotation],
459459
[data-no-newline] {
460460
color: var(--diffs-fg);
461-
background-color: var(--diffs-line-bg, var(--diffs-bg));
461+
background-color: var(
462+
--diffs-decoration-bg,
463+
var(--diffs-line-bg, var(--diffs-bg))
464+
);
462465
}
463466

464467
[data-no-newline] {
@@ -1327,6 +1330,18 @@
13271330
}
13281331
}
13291332

1333+
[data-decoration-bg][data-column-number],
1334+
[data-background]
1335+
[data-decoration-bg][data-line-type='change-addition'][data-column-number],
1336+
[data-background]
1337+
[data-decoration-bg][data-line-type='change-deletion'][data-column-number] {
1338+
background-color: color-mix(
1339+
in lab,
1340+
var(--diffs-decoration-bg, var(--diffs-line-bg)) 82%,
1341+
var(--diffs-bg)
1342+
);
1343+
}
1344+
13301345
@media (pointer: fine) {
13311346
[data-column-number],
13321347
[data-line] {
@@ -1530,12 +1545,14 @@
15301545
background-color: light-dark(
15311546
color-mix(
15321547
in lab,
1533-
var(--diffs-line-bg, var(--diffs-bg)) 82%,
1548+
var(--diffs-decoration-bg, var(--diffs-line-bg, var(--diffs-bg)))
1549+
82%,
15341550
var(--diffs-selection-base)
15351551
),
15361552
color-mix(
15371553
in lab,
1538-
var(--diffs-line-bg, var(--diffs-bg)) 75%,
1554+
var(--diffs-decoration-bg, var(--diffs-line-bg, var(--diffs-bg)))
1555+
75%,
15391556
var(--diffs-selection-base)
15401557
)
15411558
);
@@ -1547,12 +1564,14 @@
15471564
background-color: light-dark(
15481565
color-mix(
15491566
in lab,
1550-
var(--diffs-line-bg, var(--diffs-bg)) 75%,
1567+
var(--diffs-decoration-bg, var(--diffs-line-bg, var(--diffs-bg)))
1568+
75%,
15511569
var(--diffs-selection-base)
15521570
),
15531571
color-mix(
15541572
in lab,
1555-
var(--diffs-line-bg, var(--diffs-bg)) 60%,
1573+
var(--diffs-decoration-bg, var(--diffs-line-bg, var(--diffs-bg)))
1574+
60%,
15561575
var(--diffs-selection-base)
15571576
)
15581577
);
@@ -1620,4 +1639,15 @@
16201639
position: relative;
16211640
z-index: 4;
16221641
}
1642+
1643+
[data-decoration-bar]::after {
1644+
content: '';
1645+
display: block;
1646+
width: 6px;
1647+
background-color: var(--diffs-decoration-bar-color);
1648+
position: absolute;
1649+
top: 0;
1650+
bottom: 0;
1651+
right: 0;
1652+
}
16231653
}

0 commit comments

Comments
 (0)