Skip to content

Commit fccffd1

Browse files
MrWangJustToDoMrWangJustToDo
committed
wip
1 parent d2fadcf commit fccffd1

File tree

4 files changed

+133
-11
lines changed

4 files changed

+133
-11
lines changed

‎packages/svelte/src/lib/components/DiffView.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import { setRenderWidget } from '$lib/context/renderWidget.js';
1010
import { setId } from '$lib/context/id.js';
1111
import { setExtend } from '$lib/context/extend.js';
12+
import { setWidget as setWidgetContext } from '$lib/context/widget.js';
1213
import { setRenderExtend } from '$lib/context/renderExtend.js';
1314
import { setOnAddWidgetClick } from '$lib/context/onAddWidgetClick.js';
1415
import { setEnableHighlight } from '$lib/context/enableHighlight.js';
@@ -198,6 +199,8 @@
198199
199200
setMode(props);
200201
202+
setWidgetContext(widgetState);
203+
201204
setExtend<T>(props);
202205
203206
setId(() => diffFile?.getId() || '');

‎packages/svelte/src/routes/+layout.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script lang="ts">
22
import '../app.css';
3-
import "../../styles/diff-view.css";
3+
import "../tailwind_pure.css";
44
55
let { children } = $props();
66
</script>
77

8-
<div>
8+
<div class="diff-tailwindcss-wrapper">
99
{@render children()}
1010
</div>

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

Lines changed: 127 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
<script lang="ts">
2-
import { DiffFile, DiffModeEnum } from '@git-diff-view/svelte';
3-
import * as data from '../data.json';
2+
import { DiffFile, DiffModeEnum, DiffView } from '$lib/index.js';
3+
import { SplitSide } from '@git-diff-view/core';
4+
5+
import * as data from '../data.js';
46
import type { MessageData } from '../worker.js';
5-
import diff from 'fast-diff';
67
7-
const worker = new Worker(new URL('../worker.ts', import.meta.url), { type: 'module' });
8+
const worker =
9+
typeof Worker !== 'undefined'
10+
? new Worker(new URL('../worker.ts', import.meta.url), { type: 'module' })
11+
: null;
812
913
type Key = 'a' | 'b' | 'c' | 'd' | 'e';
1014
@@ -18,7 +22,7 @@
1822
1923
let dark = $state<boolean>(false);
2024
21-
let mode = $state<DiffModeEnum>();
25+
let mode = $state<DiffModeEnum>(DiffModeEnum.Split);
2226
2327
const toggleHighlight = () => (highlight = !highlight);
2428
@@ -27,20 +31,21 @@
2731
const toggleWrap = () => (wrap = !wrap);
2832
2933
const toggleMode = () =>
30-
mode === DiffModeEnum.Split ? DiffModeEnum.Unified : DiffModeEnum.Split;
34+
(mode = mode === DiffModeEnum.Split ? DiffModeEnum.Unified : DiffModeEnum.Split);
3135
3236
let v = $state('');
3337
3438
let extend = $state({});
3539
36-
worker.addEventListener('message', (e: MessageEvent<MessageData>) => {
40+
worker?.addEventListener('message', (e: MessageEvent<MessageData>) => {
3741
const { data, bundle } = e.data;
3842
const instance = DiffFile.createInstance(data || {}, bundle);
3943
diffFile = instance;
44+
console.log('diffFile', diffFile);
4045
});
4146
4247
$effect(() => {
43-
worker.postMessage({
48+
worker?.postMessage({
4449
key,
4550
data: data[key]
4651
});
@@ -52,3 +57,117 @@
5257
}
5358
});
5459
</script>
60+
61+
<div class="m-auto mb-[1em] mt-[1em] w-[90%]">
62+
<h2 class="text-[24px]">A Solid component to show the file diff</h2>
63+
<br />
64+
<p>
65+
Select a file to show the diff: &nbsp;
66+
<select class="rounded-sm border" bind:value={key}>
67+
<option value="a">diff 1</option>
68+
<option value="b">diff 2</option>
69+
<option value="c">diff 3</option>
70+
<option value="d">diff 4</option>
71+
<option value="e">diff 5</option>
72+
</select>
73+
</p>
74+
</div>
75+
76+
<div class="m-auto mb-[1em] w-[90%] text-right">
77+
<div class="inline-flex gap-x-4">
78+
<button
79+
class="rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold leading-5 text-white hover:bg-sky-700"
80+
onclick={toggleWrap}
81+
>
82+
{wrap ? 'Toggle to nowrap' : 'Toggle to wrap'}
83+
</button>
84+
<button
85+
class="rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold leading-5 text-white hover:bg-sky-700"
86+
onclick={toggleHighlight}
87+
>
88+
{highlight ? 'Toggle to disable highlight' : 'Toggle to enable highlight'}
89+
</button>
90+
<button
91+
class="rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold leading-5 text-white hover:bg-sky-700"
92+
onclick={toggleTheme}
93+
>
94+
{dark ? 'Toggle to light theme' : 'Toggle to dark theme'}
95+
</button>
96+
<button
97+
class="rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold leading-5 text-white hover:bg-sky-700"
98+
onclick={toggleMode}
99+
>
100+
{mode === DiffModeEnum.Split ? 'Toggle to UnifiedMode' : 'Toggle to SplitMode'}
101+
</button>
102+
</div>
103+
</div>
104+
105+
<div
106+
class="m-auto mb-[5em] w-[90%] overflow-hidden rounded-[5px] border border-solid border-[#e1e1e1]"
107+
>
108+
{#snippet renderWidgetLine({
109+
side,
110+
lineNumber,
111+
onClose
112+
}: {
113+
side: SplitSide;
114+
lineNumber: number;
115+
onClose: () => void;
116+
})}
117+
<div class="flex w-full flex-col border px-[4px] py-[8px]">
118+
<textarea class="min-h-[80px] w-full border p-[2px]" bind:value={v}></textarea>
119+
<div class="m-[5px] mt-[0.8em] text-right">
120+
<div class="inline-flex justify-end gap-x-[12px]">
121+
<button class="rounded-[4px] border px-[12px] py-[6px]" onclick={onClose}>
122+
cancel
123+
</button>
124+
<button
125+
class="rounded-[4px] border px-[12px] py-[6px]"
126+
onclick={() => {
127+
if (v.length) {
128+
const _side = side === SplitSide.old ? 'oldFile' : 'newFile';
129+
extend = {
130+
...extend,
131+
[_side]: {
132+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
133+
// @ts-ignore
134+
...extend?.[_side],
135+
[lineNumber]: { data: v }
136+
}
137+
};
138+
onClose();
139+
}
140+
}}
141+
>
142+
submit
143+
</button>
144+
</div>
145+
</div>
146+
</div>
147+
{/snippet}
148+
{#snippet renderExtendLine({ data }: { data: string })}
149+
<div class="flex border bg-slate-400 px-[10px] py-[8px]">
150+
<h2 class="text-[20px]">
151+
{' '}
152+
{'>>'}
153+
{data}
154+
{' '}
155+
</h2>
156+
</div>
157+
{/snippet}
158+
{#if diffFile}
159+
<DiffView
160+
{diffFile}
161+
diffViewWrap={wrap}
162+
diffViewMode={mode}
163+
diffViewFontSize={14}
164+
diffViewHighlight={highlight}
165+
diffViewTheme={dark ? 'dark' : 'light'}
166+
extendData={extend}
167+
diffViewAddWidget
168+
onAddWidgetClick={() => (v = '')}
169+
{renderExtendLine}
170+
{renderWidgetLine}
171+
/>
172+
{/if}
173+
</div>

‎packages/svelte/tailwind.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @type {import('tailwindcss').Config} */
22
export default {
3-
content: ['./src/lib/**/*.{html,js,svelte,ts}'],
3+
content: ['./src/**/*.{html,js,svelte,ts}'],
44
theme: {
55
extend: {},
66
},

0 commit comments

Comments
 (0)