Skip to content

Commit 123d2ca

Browse files
jpenillajpenilla
committed
Extract diff view vlist element to component
1 parent 6d96143 commit 123d2ca

File tree

2 files changed

+77
-55
lines changed

2 files changed

+77
-55
lines changed

‎web/src/routes/+page.svelte‎

Lines changed: 4 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<script lang="ts">
2-
import ConciseDiffView from "$lib/components/diff/ConciseDiffView.svelte";
32
import { VList } from "virtua/svelte";
4-
import { MultiFileDiffViewerState, requireEitherImage } from "$lib/diff-viewer.svelte";
5-
import Spinner from "$lib/components/Spinner.svelte";
6-
import ImageDiff from "$lib/components/diff/ImageDiff.svelte";
7-
import AddedOrRemovedImage from "$lib/components/diff/AddedOrRemovedImage.svelte";
3+
import { MultiFileDiffViewerState } from "$lib/diff-viewer.svelte";
84
import DiffStats from "$lib/components/diff/DiffStats.svelte";
95
import DiffSearch from "./DiffSearch.svelte";
106
import FileHeader from "./FileHeader.svelte";
@@ -17,9 +13,10 @@
1713
import MenuBar from "$lib/components/menu-bar/MenuBar.svelte";
1814
import SettingsDialog from "$lib/components/settings/SettingsDialog.svelte";
1915
import Sidebar from "./Sidebar.svelte";
16+
import DiffWrapper from "./DiffWrapper.svelte";
2017
2118
let { data }: PageProps = $props();
22-
const globalOptions = GlobalOptions.init(data.globalOptions);
19+
GlobalOptions.init(data.globalOptions);
2320
const viewer = MultiFileDiffViewerState.init();
2421
2522
function getPageTitle() {
@@ -76,55 +73,7 @@
7673
{#snippet children(value, index)}
7774
<div id={`file-${index}`}>
7875
<FileHeader {index} {value} />
79-
{#if !viewer.fileStates[index].collapsed && value.type === "image"}
80-
{@const image = value.image}
81-
<div class="mb border-b text-sm">
82-
{#if image.load}
83-
{#if image.fileA !== null && image.fileB !== null}
84-
{#await Promise.all([image.fileA.getValue(), image.fileB.getValue()])}
85-
<div class="flex items-center justify-center bg-neutral-2 p-4"><Spinner /></div>
86-
{:then images}
87-
<ImageDiff fileA={images[0]} fileB={images[1]} />
88-
{/await}
89-
{:else}
90-
{#await requireEitherImage(image).getValue()}
91-
<div class="flex items-center justify-center bg-neutral-2 p-4"><Spinner /></div>
92-
{:then file}
93-
<AddedOrRemovedImage {file} mode={image.fileA === null ? "add" : "remove"} />
94-
{/await}
95-
{/if}
96-
{:else}
97-
<div class="flex justify-center bg-neutral-2 p-4">
98-
<button
99-
type="button"
100-
class=" flex flex-row items-center justify-center gap-1 rounded-md btn-primary px-2 py-1"
101-
onclick={() => (image.load = true)}
102-
>
103-
<span class="iconify size-4 shrink-0 octicon--image-16"></span><span>Load image diff</span>
104-
</button>
105-
</div>
106-
{/if}
107-
</div>
108-
{/if}
109-
{#if !viewer.fileStates[index].collapsed && value.type === "text" && (!value.patchHeaderDiffOnly || !globalOptions.omitPatchHeaderOnlyHunks)}
110-
<div class="border-b">
111-
<ConciseDiffView
112-
patch={value.structuredPatch}
113-
syntaxHighlighting={globalOptions.syntaxHighlighting}
114-
syntaxHighlightingTheme={globalOptions.syntaxHighlightingTheme}
115-
omitPatchHeaderOnlyHunks={globalOptions.omitPatchHeaderOnlyHunks}
116-
wordDiffs={globalOptions.wordDiffs}
117-
lineWrap={globalOptions.lineWrap}
118-
searchQuery={viewer.searchQueryDebounced.current}
119-
searchMatchingLines={() => viewer.searchResults.then((r) => r.lines.get(value))}
120-
activeSearchResult={viewer.activeSearchResult && viewer.activeSearchResult.file === value
121-
? viewer.activeSearchResult.idx
122-
: undefined}
123-
cache={viewer.diffViewCache}
124-
cacheKey={value}
125-
/>
126-
</div>
127-
{/if}
76+
<DiffWrapper {index} {value} />
12877
</div>
12978
{/snippet}
13079
</VList>

‎web/src/routes/DiffWrapper.svelte‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script lang="ts">
2+
import ConciseDiffView from "$lib/components/diff/ConciseDiffView.svelte";
3+
import { MultiFileDiffViewerState, requireEitherImage, type FileDetails, type ImageDiffDetails } from "$lib/diff-viewer.svelte";
4+
import Spinner from "$lib/components/Spinner.svelte";
5+
import ImageDiff from "$lib/components/diff/ImageDiff.svelte";
6+
import AddedOrRemovedImage from "$lib/components/diff/AddedOrRemovedImage.svelte";
7+
import { GlobalOptions } from "$lib/global-options.svelte";
8+
9+
interface Props {
10+
index: number;
11+
value: FileDetails;
12+
}
13+
14+
let { index, value }: Props = $props();
15+
16+
const viewer = MultiFileDiffViewerState.get();
17+
const globalOptions = GlobalOptions.get();
18+
19+
let collapsed = $derived(viewer.fileStates[index].collapsed);
20+
let emptyTextDiff = $derived(value.type === "text" && value.patchHeaderDiffOnly && globalOptions.omitPatchHeaderOnlyHunks);
21+
</script>
22+
23+
{#snippet imageDiff(image: ImageDiffDetails)}
24+
{#if image.fileA !== null && image.fileB !== null}
25+
{#await Promise.all([image.fileA.getValue(), image.fileB.getValue()])}
26+
<div class="flex items-center justify-center bg-neutral-2 p-4"><Spinner /></div>
27+
{:then images}
28+
<ImageDiff fileA={images[0]} fileB={images[1]} />
29+
{/await}
30+
{:else}
31+
{#await requireEitherImage(image).getValue()}
32+
<div class="flex items-center justify-center bg-neutral-2 p-4"><Spinner /></div>
33+
{:then file}
34+
<AddedOrRemovedImage {file} mode={image.fileA === null ? "add" : "remove"} />
35+
{/await}
36+
{/if}
37+
{/snippet}
38+
39+
{#if value.type === "image" && !collapsed}
40+
{@const image = value.image}
41+
<div class="border-b text-sm">
42+
{#if image.load}
43+
{@render imageDiff(image)}
44+
{:else}
45+
<div class="flex justify-center bg-neutral-2 p-4">
46+
<button
47+
type="button"
48+
class=" flex flex-row items-center justify-center gap-1 rounded-md btn-primary px-2 py-1"
49+
onclick={() => (image.load = true)}
50+
>
51+
<span class="iconify size-4 shrink-0 octicon--image-16"></span><span>Load image diff</span>
52+
</button>
53+
</div>
54+
{/if}
55+
</div>
56+
{/if}
57+
{#if value.type === "text" && !collapsed && !emptyTextDiff}
58+
<div class="border-b">
59+
<ConciseDiffView
60+
patch={value.structuredPatch}
61+
syntaxHighlighting={globalOptions.syntaxHighlighting}
62+
syntaxHighlightingTheme={globalOptions.syntaxHighlightingTheme}
63+
omitPatchHeaderOnlyHunks={globalOptions.omitPatchHeaderOnlyHunks}
64+
wordDiffs={globalOptions.wordDiffs}
65+
lineWrap={globalOptions.lineWrap}
66+
searchQuery={viewer.searchQueryDebounced.current}
67+
searchMatchingLines={() => viewer.searchResults.then((r) => r.lines.get(value))}
68+
activeSearchResult={viewer.activeSearchResult && viewer.activeSearchResult.file === value ? viewer.activeSearchResult.idx : undefined}
69+
cache={viewer.diffViewCache}
70+
cacheKey={value}
71+
/>
72+
</div>
73+
{/if}

0 commit comments

Comments
 (0)