|
1 | | -# Svelte library |
| 1 | +## A Svelte DiffView Component like GitHub, Easy to use and feature complete. |
| 2 | + |
| 3 | +### Usage |
| 4 | + |
| 5 | +#### There are two ways to use this component: |
| 6 | + |
| 7 | +1. Use the `DiffView` component directly. |
| 8 | + |
| 9 | +```tsx |
| 10 | +import { DiffView, DiffModeEnum } from "@git-diff-view/svelte"; |
| 11 | +import "@git-diff-view/Svelte/styles/diff-view.css"; |
| 12 | + |
| 13 | +<DiffView |
| 14 | + // use data |
| 15 | + data={{ |
| 16 | + oldFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null }; |
| 17 | + newFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null }; |
| 18 | + hunks: string[]; |
| 19 | + }} |
| 20 | + extendData={{oldFile: {10: {data: 'foo'}}, newFile: {20: {data: 'bar'}}}} |
| 21 | + renderExtendLine=Snippet<[{ |
| 22 | + lineNumber: number; |
| 23 | + side: SplitSide; |
| 24 | + data: string; |
| 25 | + diffFile: DiffFile; |
| 26 | + onUpdate: () => void; |
| 27 | + }]> |
| 28 | + diffViewFontSize={number} |
| 29 | + diffViewHighlight={boolean} |
| 30 | + diffViewMode={DiffModeEnum.Split | DiffModeEnum.Unified} |
| 31 | + diffViewWrap={boolean} |
| 32 | + diffViewTheme={'light' | 'dark'} |
| 33 | + diffViewAddWidget |
| 34 | + onAddWidgetClick={({ side, lineNumber }) => void} |
| 35 | + renderWidgetLine=Snippet<[{ |
| 36 | + lineNumber: number; |
| 37 | + side: SplitSide; |
| 38 | + diffFile: DiffFile; |
| 39 | + onClose: () => void; |
| 40 | + }]> |
| 41 | +/> |
2 | 42 |
|
3 | | -Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv). |
4 | | - |
5 | | -Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging). |
6 | | - |
7 | | -## Creating a project |
8 | | - |
9 | | -If you're seeing this, you've probably already done this step. Congrats! |
10 | | - |
11 | | -```bash |
12 | | -# create a new project in the current directory |
13 | | -npx sv create |
14 | | - |
15 | | -# create a new project in my-app |
16 | | -npx sv create my-app |
17 | 43 | ``` |
18 | 44 |
|
19 | | -## Developing |
20 | | - |
21 | | -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: |
22 | | - |
23 | | -```bash |
24 | | -npm run dev |
25 | | - |
26 | | -# or start the server and open the app in a new browser tab |
27 | | -npm run dev -- --open |
| 45 | +2. Use the `DiffView` component with `@git-diff-view/core` or `@git-diff-view/file` |
| 46 | + |
| 47 | +```tsx |
| 48 | +// with @git-diff-view/file |
| 49 | +import { DiffFile, generateDiffFile } from "@git-diff-view/file"; |
| 50 | +const file = generateDiffFile( |
| 51 | + data?.oldFile?.fileName || "", |
| 52 | + data?.oldFile?.content || "", |
| 53 | + data?.newFile?.fileName || "", |
| 54 | + data?.newFile?.content || "", |
| 55 | + data?.oldFile?.fileLang || "", |
| 56 | + data?.newFile?.fileLang || "" |
| 57 | +); |
| 58 | +file.initTheme('light' / 'dark'); |
| 59 | +file.init(); |
| 60 | +file.buildSplitDiffLines(); |
| 61 | +file.buildUnifiedDiffLines(); |
| 62 | + |
| 63 | +// with @git-diff-view/core |
| 64 | +import { DiffFile } from "@git-diff-view/core"; |
| 65 | +const file = new DiffFile( |
| 66 | + data?.oldFile?.fileName || "", |
| 67 | + data?.oldFile?.content || "", |
| 68 | + data?.newFile?.fileName || "", |
| 69 | + data?.newFile?.content || "", |
| 70 | + data?.hunks || [], |
| 71 | + data?.oldFile?.fileLang || "", |
| 72 | + data?.newFile?.fileLang || "" |
| 73 | +); |
| 74 | +file.initTheme('light' / 'dark'); |
| 75 | +file.init(); |
| 76 | +file.buildSplitDiffLines(); |
| 77 | +file.buildUnifiedDiffLines(); |
| 78 | + |
| 79 | +// use current data to render |
| 80 | +<DiffView diffFile={file} {...props} />; |
| 81 | +// or use the bundle data to render, eg: postMessage/httpRequest |
| 82 | +const bundle = file.getBundle(); |
| 83 | +const diffFile = DiffFile.createInstance(data || {}, bundle); |
| 84 | +<DiffView diffFile={diffFile} {...props} />; |
28 | 85 | ``` |
| 86 | +### example |
29 | 87 |
|
30 | | -Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. |
| 88 | +#### [svelte-example](https://github.com/MrWangJustToDo/git-diff-view/tree/main/ui/svelte-example) |
31 | 89 |
|
32 | | -## Building |
| 90 | +### Screen Shot |
33 | 91 |
|
34 | | -To build your library: |
| 92 | + |
| 93 | + |
| 94 | + |
35 | 95 |
|
36 | | -```bash |
37 | | -npm run package |
38 | | -``` |
| 96 | +### Props |
39 | 97 |
|
40 | | -To create a production version of your showcase app: |
| 98 | +| Props | Description | |
| 99 | +| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 100 | +| data | The diff data need to show, type: `{ oldFile: {fileName?: string, content?: string}, newFile: {fileName?: string, content?: string}, hunks: string[] }`, you can only pass hunks data, and the component will generate the oldFile and newFile data automatically | |
| 101 | +| diffFile | the target data to render | |
| 102 | +| renderWidgetLine | a valid `svelte` snippet to show the widget, this element will render when you click the `addWidget` button in the diff view | |
| 103 | +| renderExtendLine | a valid `svelte` snippet to show the extend data | |
| 104 | +| extendData | a list to store the extend data to show in the `Diff View`, type: {oldFile: {lineNumber: {data: any}}, newFile: {lineNumber: {data: any}}} | |
| 105 | +| diffViewFontSize | the fontSize for the DiffView component, type: number | |
| 106 | +| diffViewHighlight | enable syntax highlight, type: boolean | |
| 107 | +| diffViewMode | the mode for the DiffView component, type: `DiffModeEnum.Split` / `DiffModeEnum.Unified` | |
| 108 | +| diffViewWrap | enable code line auto wrap, type: boolean | |
| 109 | +| diffViewTheme | the theme for the DiffView component, type: `light` / `dark` | |
| 110 | +| diffViewAddWidget| enable `addWidget` button, type: boolean | |
| 111 | +| onAddWidgetClick | when the `addWidget` button clicked, type: `({ side: "old" / "new", lineNumber: number }) => void` | |
41 | 112 |
|
42 | | -```bash |
43 | | -npm run build |
44 | | -``` |
45 | | - |
46 | | -You can preview the production build with `npm run preview`. |
47 | | - |
48 | | -> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. |
49 | | -
|
50 | | -## Publishing |
51 | | - |
52 | | -Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)). |
53 | | - |
54 | | -To publish your library to [npm](https://www.npmjs.com): |
55 | | - |
56 | | -```bash |
57 | | -npm publish |
58 | | -``` |
|
0 commit comments