Skip to content

Commit f236a51

Browse files
MrWangJustToDoMrWangJustToDo
committed
wip
1 parent 70506a3 commit f236a51

35 files changed

+413
-725
lines changed

‎packages/solid/src/components/DiffContent.tsx‎

Lines changed: 46 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,7 @@ const DiffString = (props: {
2727
enableWrap?: boolean;
2828
enableTemplate?: boolean;
2929
}) => {
30-
const getRange = () => props.diffLine?.changes?.range;
31-
32-
const getStr1 = () => props.rawLine.slice(0, getRange?.()?.location);
33-
34-
const getStr2 = () =>
35-
props.rawLine.slice(getRange?.()?.location, (getRange?.()?.location || 0) + (getRange?.()?.length || 0));
36-
37-
const getStr3 = () => props.rawLine.slice((getRange?.()?.location || 0) + (getRange?.()?.length || 0));
38-
39-
const getIsLast = () => getStr2().includes("\n");
40-
41-
const get_Str2 = () => (getIsLast() ? getStr2().replace("\n", "").replace("\r", "") : getStr2());
42-
43-
const getIsNewLineSymbolChanged = () => (getStr3() === "" ? props.diffLine?.changes?.newLineSymbol : null);
30+
const getIsNewLineSymbolChanged = () => props.diffLine?.changes?.newLineSymbol;
4431

4532
const initTemplateIfNeed = () => {
4633
if (
@@ -78,48 +65,53 @@ const DiffString = (props: {
7865
>
7966
<Show
8067
when={props.enableTemplate && props.diffLine?.plainTemplate}
81-
fallback={
82-
<span class="diff-line-content-raw">
83-
<span
84-
data-range-start={getRange()?.location}
85-
data-range-end={(getRange()?.location || 0) + (getRange()?.length || 0)}
86-
>
87-
{getStr1()}
88-
<span
89-
data-diff-highlight
90-
class="rounded-[0.2em]"
91-
style={{
92-
"background-color":
93-
props.operator === "add"
94-
? `var(${addContentHighlightBGName})`
95-
: `var(${delContentHighlightBGName})`,
96-
}}
97-
>
98-
{getIsLast() ? (
99-
<>
100-
{get_Str2()}
101-
<span data-newline-symbol>{getSymbol(getIsNewLineSymbolChanged())}</span>
102-
</>
103-
) : (
104-
getStr2()
105-
)}
68+
fallback={(function () {
69+
const range = props.diffLine?.changes?.range;
70+
const str1 = props.rawLine.slice(0, range?.location);
71+
const str2 = props.rawLine.slice(range?.location, (range?.location || 0) + (range?.length || 0));
72+
const str3 = props.rawLine.slice((range?.location || 0) + (range?.length || 0));
73+
const isLast = str2.includes("\n");
74+
const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
75+
return (
76+
<span class="diff-line-content-raw">
77+
<span data-range-start={range?.location} data-range-end={(range?.location || 0) + (range?.length || 0)}>
78+
{str1}
79+
<span
80+
data-diff-highlight
81+
class="rounded-[0.2em]"
82+
style={{
83+
"background-color":
84+
props.operator === "add"
85+
? `var(${addContentHighlightBGName})`
86+
: `var(${delContentHighlightBGName})`,
87+
}}
88+
>
89+
{isLast ? (
90+
<>
91+
{_str2}
92+
<span data-newline-symbol>{getSymbol(getIsNewLineSymbolChanged())}</span>
93+
</>
94+
) : (
95+
str2
96+
)}
97+
</span>
98+
{str3}
10699
</span>
107-
{getStr3()}
100+
{getIsNewLineSymbolChanged() === NewLineSymbol.NEWLINE && (
101+
<span
102+
data-no-newline-at-end-of-file-symbol
103+
class={props.enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
104+
style={{
105+
width: `var(${diffFontSizeName})`,
106+
height: `var(${diffFontSizeName})`,
107+
}}
108+
>
109+
<DiffNoNewLine />
110+
</span>
111+
)}
108112
</span>
109-
{getIsNewLineSymbolChanged() === NewLineSymbol.NEWLINE && (
110-
<span
111-
data-no-newline-at-end-of-file-symbol
112-
class={props.enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
113-
style={{
114-
width: `var(${diffFontSizeName})`,
115-
height: `var(${diffFontSizeName})`,
116-
}}
117-
>
118-
<DiffNoNewLine />
119-
</span>
120-
)}
121-
</span>
122-
}
113+
);
114+
})()}
123115
>
124116
<span class="diff-line-content-raw">
125117
{/* eslint-disable-next-line solid/no-innerhtml */}

‎packages/solid/src/components/DiffSplitContentLineNormal.tsx‎

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
getLineNumberBG,
88
plainLineNumberColorName,
99
} from "@git-diff-view/utils";
10-
import { createEffect, createSignal, onCleanup, Show } from "solid-js";
10+
import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js";
1111

1212
import { useEnableAddWidget, useEnableHighlight, useOnAddWidgetClick } from "../hooks";
1313

@@ -31,52 +31,42 @@ export const DiffSplitContentLine = (props: {
3131

3232
const onAddWidgetClick = useOnAddWidgetClick();
3333

34-
const [currentLine, setCurrentLine] = createSignal(
34+
const getCurrentLine = () =>
3535
props.side === SplitSide.old
3636
? props.diffFile.getSplitLeftLine(props.index)
37-
: props.diffFile.getSplitRightLine(props.index)
38-
);
37+
: props.diffFile.getSplitRightLine(props.index);
38+
39+
const currentLine = createMemo(getCurrentLine);
40+
41+
const getCUrrentLineHasDiff = () => !!currentLine()?.diff;
42+
43+
const currentLineHasDiff = createMemo(getCUrrentLineHasDiff);
3944

40-
const [currentLineHasDiff, setCurrentLineHasDiff] = createSignal(!!currentLine()?.diff);
45+
const currentLineHasChange = createMemo(() => checkDiffLineIncludeChange(currentLine()?.diff));
4146

42-
const [currentLineHasChange, setCurrentLineHasChange] = createSignal(checkDiffLineIncludeChange(currentLine()?.diff));
47+
const getCurrentLineHasHidden = () => currentLine()?.isHidden;
4348

44-
const [currentLineHasHidden, setCurrentLineHasHidden] = createSignal(currentLine()?.isHidden);
49+
const currentLineHasHidden = createMemo(getCurrentLineHasHidden);
4550

46-
const [currentLineHasContent, setCurrentLineHasContent] = createSignal(currentLine()?.lineNumber);
51+
const currentLineHasContent = createMemo(() => !!currentLine()?.lineNumber);
4752

48-
const [currentSyntaxLine, setCurrentSyntaxLine] = createSignal(
53+
const getCurrentSyntaxLine = () =>
4954
props.side === SplitSide.old
5055
? props.diffFile.getOldSyntaxLine(currentLine()?.lineNumber || 0)
51-
: props.diffFile.getNewSyntaxLine(currentLine()?.lineNumber || 0)
52-
);
56+
: props.diffFile.getNewSyntaxLine(currentLine()?.lineNumber || 0);
5357

54-
const [currentPlainLine, setCurrentPlainLine] = createSignal(
58+
const getCurrentPlainLine = () =>
5559
props.side === SplitSide.old
5660
? props.diffFile.getOldPlainLine(currentLine()?.lineNumber || 0)
57-
: props.diffFile.getNewPlainLine(currentLine()?.lineNumber || 0)
58-
);
61+
: props.diffFile.getNewPlainLine(currentLine()?.lineNumber || 0);
62+
63+
const [currentSyntaxLine, setCurrentSyntaxLine] = createSignal(getCurrentSyntaxLine());
64+
65+
const [currentPlainLine, setCurrentPlainLine] = createSignal(getCurrentPlainLine());
5966

6067
const init = () => {
61-
setCurrentLine(
62-
props.side === SplitSide.old
63-
? props.diffFile.getSplitLeftLine(props.index)
64-
: props.diffFile.getSplitRightLine(props.index)
65-
);
66-
setCurrentSyntaxLine(
67-
props.side === SplitSide.old
68-
? props.diffFile.getOldSyntaxLine(currentLine()?.lineNumber || 0)
69-
: props.diffFile.getNewSyntaxLine(currentLine()?.lineNumber || 0)
70-
);
71-
setCurrentPlainLine(
72-
props.side === SplitSide.old
73-
? props.diffFile.getOldPlainLine(currentLine()?.lineNumber || 0)
74-
: props.diffFile.getNewPlainLine(currentLine()?.lineNumber || 0)
75-
);
76-
setCurrentLineHasDiff(() => !!currentLine()?.diff);
77-
setCurrentLineHasChange(() => checkDiffLineIncludeChange(currentLine()?.diff));
78-
setCurrentLineHasHidden(() => currentLine()?.isHidden);
79-
setCurrentLineHasContent(() => currentLine()?.lineNumber);
68+
setCurrentSyntaxLine(getCurrentSyntaxLine);
69+
setCurrentPlainLine(getCurrentPlainLine);
8070
};
8171

8272
createEffect(() => {

‎packages/solid/src/components/DiffSplitContentLineWrap.tsx‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
getLineNumberBG,
88
plainLineNumberColorName,
99
} from "@git-diff-view/utils";
10-
import { createEffect, createSignal, onCleanup, Show } from "solid-js";
10+
import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js";
1111

1212
import { useEnableAddWidget, useEnableHighlight, useOnAddWidgetClick } from "../hooks";
1313

@@ -24,41 +24,49 @@ export const DiffSplitContentLine = (props: { index: number; diffFile: DiffFile;
2424

2525
const onAddWidgetClick = useOnAddWidgetClick();
2626

27-
const [oldLine, setOldLine] = createSignal(props.diffFile.getSplitLeftLine(props.index));
27+
const oldLine = createMemo(() => props.diffFile.getSplitLeftLine(props.index));
2828

29-
const [newLine, setNewLine] = createSignal(props.diffFile.getSplitRightLine(props.index));
29+
const newLine = createMemo(() => props.diffFile.getSplitRightLine(props.index));
3030

31-
const [oldSyntaxLine, setOldSyntaxLine] = createSignal(props.diffFile.getOldSyntaxLine(oldLine()?.lineNumber || 0));
31+
const getOldSyntaxLine = () => props.diffFile.getOldSyntaxLine(oldLine()?.lineNumber || 0);
3232

33-
const [newSyntaxLine, setNewSyntaxLine] = createSignal(props.diffFile.getNewSyntaxLine(newLine()?.lineNumber || 0));
33+
const getNewSyntaxLine = () => props.diffFile.getNewSyntaxLine(newLine()?.lineNumber || 0);
3434

35-
const [oldPlainLine, setOldPlainLine] = createSignal(props.diffFile.getOldPlainLine(oldLine()?.lineNumber || 0));
35+
const [oldSyntaxLine, setOldSyntaxLine] = createSignal(getOldSyntaxLine());
3636

37-
const [newPlainLine, setNewPlainLine] = createSignal(props.diffFile.getNewPlainLine(newLine()?.lineNumber || 0));
37+
const [newSyntaxLine, setNewSyntaxLine] = createSignal(getNewSyntaxLine());
3838

39-
const [hasDiff, setHasDiff] = createSignal(!!oldLine()?.diff || !!newLine()?.diff);
39+
const getOldPlainLine = () => props.diffFile.getOldPlainLine(oldLine()?.lineNumber || 0);
4040

41-
const [hasChange, setHasChange] = createSignal(
42-
checkDiffLineIncludeChange(oldLine()?.diff) || checkDiffLineIncludeChange(newLine()?.diff)
43-
);
41+
const getNewPlainLine = () => props.diffFile.getNewPlainLine(newLine()?.lineNumber || 0);
42+
43+
const [oldPlainLine, setOldPlainLine] = createSignal(getOldPlainLine());
44+
45+
const [newPlainLine, setNewPlainLine] = createSignal(getNewPlainLine());
46+
47+
const checkHasDiff = () => !!oldLine()?.diff || !!newLine()?.diff;
48+
49+
const hasDiff = createMemo(checkHasDiff);
50+
51+
const checkHasChange = () =>
52+
checkDiffLineIncludeChange(oldLine()?.diff) || checkDiffLineIncludeChange(newLine()?.diff);
53+
54+
const hasChange = createMemo(checkHasChange);
55+
56+
const checkHasHidden = () => oldLine()?.isHidden && newLine()?.isHidden;
4457

45-
const [hasHidden, setHasHidden] = createSignal(oldLine()?.isHidden && newLine()?.isHidden);
58+
const hasHidden = createMemo(checkHasHidden);
4659

4760
const oldLineIsDelete = () => oldLine()?.diff?.type === DiffLineType.Delete;
4861

4962
const newLineIsAdded = () => newLine()?.diff?.type === DiffLineType.Add;
5063

5164
createEffect(() => {
5265
const init = () => {
53-
setOldLine(props.diffFile.getSplitLeftLine(props.index));
54-
setNewLine(props.diffFile.getSplitRightLine(props.index));
55-
setOldSyntaxLine(props.diffFile.getOldSyntaxLine(oldLine()?.lineNumber || 0));
56-
setNewSyntaxLine(props.diffFile.getNewSyntaxLine(newLine()?.lineNumber || 0));
57-
setOldPlainLine(props.diffFile.getOldPlainLine(oldLine()?.lineNumber || 0));
58-
setNewPlainLine(props.diffFile.getNewPlainLine(newLine()?.lineNumber || 0));
59-
setHasDiff(() => !!oldLine()?.diff || !!newLine()?.diff);
60-
setHasChange(() => checkDiffLineIncludeChange(oldLine()?.diff) || checkDiffLineIncludeChange(newLine()?.diff));
61-
setHasHidden(() => oldLine()?.isHidden && newLine()?.isHidden);
66+
setOldSyntaxLine(getOldSyntaxLine);
67+
setNewSyntaxLine(getNewSyntaxLine);
68+
setOldPlainLine(getOldPlainLine);
69+
setNewPlainLine(getNewPlainLine);
6270
};
6371

6472
init();

‎packages/solid/src/components/DiffSplitExtendLineNormal.tsx‎

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { SplitSide, type DiffFile } from "@git-diff-view/core";
22
import { emptyBGName } from "@git-diff-view/utils";
3-
import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js";
3+
import { createMemo, Show } from "solid-js";
44

55
import { useDomWidth, useExtendData, useRenderExtend, useSyncHeight } from "../hooks";
66

@@ -22,37 +22,19 @@ export const DiffSplitExtendLine = (props: {
2222
props.side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper"
2323
);
2424

25-
const [oldLine, setOldLine] = createSignal(props.diffFile.getSplitLeftLine(props.index));
25+
const oldLine = createMemo(() => props.diffFile.getSplitLeftLine(props.index));
2626

27-
const [newLine, setNewLine] = createSignal(props.diffFile.getSplitRightLine(props.index));
27+
const newLine = createMemo(() => props.diffFile.getSplitRightLine(props.index));
2828

29-
const [enableExpand, setEnableExpand] = createSignal(props.diffFile.getExpandEnabled());
29+
const enableExpand = createMemo(() => props.diffFile.getExpandEnabled());
3030

31-
const [oldLineExtend, setOldLineExtend] = createSignal(extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
31+
const oldLineExtend = createMemo(() => extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
3232

33-
const [newLineExtend, setNewLineExtend] = createSignal(extendData()?.newFile?.[newLine()?.lineNumber || ""]);
33+
const newLineExtend = createMemo(() => extendData()?.newFile?.[newLine()?.lineNumber || ""]);
3434

35-
const [currentItem, setCurrentItem] = createSignal(props.side === SplitSide.old ? oldLine() : newLine());
35+
const currentItem = createMemo(() => (props.side === SplitSide.old ? oldLine() : newLine()));
3636

37-
const [currentIsHidden, setCurrentIsHidden] = createSignal(currentItem()?.isHidden);
38-
39-
createEffect(() => {
40-
const init = () => {
41-
setOldLine(props.diffFile.getSplitLeftLine(props.index));
42-
setNewLine(props.diffFile.getSplitRightLine(props.index));
43-
setEnableExpand(props.diffFile.getExpandEnabled());
44-
setOldLineExtend(() => extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
45-
setNewLineExtend(() => extendData()?.newFile?.[newLine()?.lineNumber || ""]);
46-
setCurrentItem(() => (props.side === SplitSide.old ? oldLine() : newLine()));
47-
setCurrentIsHidden(() => currentItem()?.isHidden);
48-
};
49-
50-
init();
51-
52-
const cb = props.diffFile.subscribe(init);
53-
54-
onCleanup(cb);
55-
});
37+
const currentIsHidden = createMemo(() => currentItem()?.isHidden);
5638

5739
const currentExtend = createMemo(() => (props.side === SplitSide.old ? oldLineExtend() : newLineExtend()));
5840

@@ -68,7 +50,9 @@ export const DiffSplitExtendLine = (props: {
6850
() => (props.side === SplitSide.old ? !!oldLineExtend() : !!newLineExtend()) && currentIsShow()
6951
);
7052

71-
const extendSide = createMemo(() => SplitSide[currentExtend() ? props.side : props.side === SplitSide.new ? SplitSide.old : SplitSide.new]);
53+
const extendSide = createMemo(
54+
() => SplitSide[currentExtend() ? props.side : props.side === SplitSide.new ? SplitSide.old : SplitSide.new]
55+
);
7256

7357
useSyncHeight({
7458
selector: lineSelector,

‎packages/solid/src/components/DiffSplitExtendLineWrap.tsx‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { SplitSide, type DiffFile } from "@git-diff-view/core";
22
import { borderColorName, emptyBGName } from "@git-diff-view/utils";
3-
import { createEffect, createSignal, onCleanup, Show } from "solid-js";
3+
import { createMemo, Show } from "solid-js";
44

55
import { useExtendData, useRenderExtend } from "../hooks";
66

@@ -9,15 +9,15 @@ export const DiffSplitExtendLine = (props: { index: number; diffFile: DiffFile;
99

1010
const renderExtend = useRenderExtend();
1111

12-
const [oldLine, setOldLine] = createSignal(props.diffFile.getSplitLeftLine(props.index));
12+
const oldLine = createMemo(() => props.diffFile.getSplitLeftLine(props.index));
1313

14-
const [newLine, setNewLine] = createSignal(props.diffFile.getSplitRightLine(props.index));
14+
const newLine = createMemo(() => props.diffFile.getSplitRightLine(props.index));
1515

16-
const [enableExpand, setEnableExpand] = createSignal(props.diffFile.getExpandEnabled());
16+
const enableExpand = createMemo(() => props.diffFile.getExpandEnabled());
1717

18-
const [oldLineExtend, setOldLineExtend] = createSignal(extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
18+
const oldLineExtend = createMemo(() => extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
1919

20-
const [newLineExtend, setNewLineExtend] = createSignal(extendData()?.newFile?.[newLine()?.lineNumber || ""]);
20+
const newLineExtend = createMemo(() => extendData()?.newFile?.[newLine()?.lineNumber || ""]);
2121

2222
const checkIsShow = () => {
2323
const oldExtend = oldLineExtend();
@@ -34,24 +34,7 @@ export const DiffSplitExtendLine = (props: { index: number; diffFile: DiffFile;
3434
);
3535
};
3636

37-
const [currentIsShow, setCurrentIsShow] = createSignal(!!checkIsShow());
38-
39-
createEffect(() => {
40-
const init = () => {
41-
setOldLine(props.diffFile.getSplitLeftLine(props.index));
42-
setNewLine(props.diffFile.getSplitRightLine(props.index));
43-
setEnableExpand(props.diffFile.getExpandEnabled());
44-
setOldLineExtend(() => extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
45-
setNewLineExtend(() => extendData()?.newFile?.[newLine()?.lineNumber || ""]);
46-
setCurrentIsShow(() => !!checkIsShow());
47-
};
48-
49-
init();
50-
51-
const cb = props.diffFile.subscribe(init);
52-
53-
onCleanup(cb);
54-
});
37+
const currentIsShow = createMemo(checkIsShow);
5538

5639
return (
5740
<Show when={currentIsShow()}>

0 commit comments

Comments
 (0)