A Vue UI Component to render git diff data, support Split View and Unified View, just like GitHub and GitLab.

Usage

There are two ways to use this component:

1. Use the DiffView component directly.

import "@git-diff-view/vue/styles/diff-view.css";
import { DiffView, DiffModeEnum } from "@git-diff-view/vue";
<DiffView
  :data="{
    oldFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
    newFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
    hunks: string[];
  }"
  :diff-view-font-size="number"
  :diff-view-mode="DiffModeEnum.Split | DiffModeEnum.Unified"
  :diff-view-highlight="boolean"
  :diff-view-add-widget="boolean"
  :diff-view-wrap="boolean"
  :diff-view-theme="'light' | 'dark'"
  @on-add-widget-click="({ side, lineNumber }) => {void}"
  :extend-data="{oldFile: {10: {data: 'foo'}}, newFile: {20: {data: 'bar'}}}"
>

2. Use the DiffView component with @git-diff-view/core or @git-diff-view/file

// with @git-diff-view/file
import { DiffFile, generateDiffFile } from "@git-diff-view/file";
const file = generateDiffFile(
  data?.oldFile?.fileName || "",
  data?.oldFile?.content || "",
  data?.newFile?.fileName || "",
  data?.newFile?.content || "",
  data?.oldFile?.fileLang || "",
  data?.newFile?.fileLang || ""
);
file.initTheme('light' / 'dark');
file.init();
file.buildSplitDiffLines();
file.buildUnifiedDiffLines();

// with @git-diff-view/core
import { DiffFile } from "@git-diff-view/core";
const file = new DiffFile(
  data?.oldFile?.fileName || "",
  data?.oldFile?.content || "",
  data?.newFile?.fileName || "",
  data?.newFile?.content || "",
  data?.hunks || [],
  data?.oldFile?.fileLang || "",
  data?.newFile?.fileLang || ""
);
file.initTheme('light' / 'dark');
file.init();
file.buildSplitDiffLines();
file.buildUnifiedDiffLines();

// use current data to render
<DiffView :diffFile={file}  />;
// or use the bundle data to render, eg: postMessage/httpRequest
const bundle = file.getBundle();
const diffFile = DiffFile.createInstance(data || {}, bundle);
<DiffView :diffFile={diffFile} />;

Props

| Props | Description | | :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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 | | diffFile | the target data to render | | extendData | a list to store the extend data to show in the Diff View, type: {oldFile: {lineNumber: {data: any}}, newFile: {lineNumber: {data: any}}} | | diffViewFontSize | the fontSize for the DiffView component, type: number | | diffViewHighlight | enable syntax highlight, type: boolean | | diffViewMode | the mode for the DiffView component, type: DiffModeEnum.Split or DiffModeEnum.Unified | | diffViewWrap | enable code line auto wrap, type: boolean | | diffViewTheme | the theme for the DiffView component, type: light or dark | | diffViewAddWidget| enable addWidget button, type: boolean |

Slots

| Slot | description | | :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | widget (scope: {onClose, side, lineNumber}) | return a valid vue element to show the widget, this element will render when you click the addWidget button in the diff view | | extend (scope: {data}) | return a valid vue element to show the extend data |

Events

| Event | description | | :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | onAddWidgetClick | when the addWidget button clicked, return the side and lineNumber |

example repo

vue-example