Support compare by @git-diff-view/core(git diff) or @git-diff-view/file(file content)
Support Virtual Scroll to improve performance
Support Diff Match Patch to improve line diff
Install
# In React Project
pnpm add @git-diff-view/react
# full type need install
pnpm add -D @git-diff-view/core
# In Vue Project
pnpm add @git-diff-view/vue
# full type need install
pnpm add -D @git-diff-view/core
2. Use the DiffView component with @git-diff-view/core/@git-diff-view/file
// with @git-diff-view/fileimport{DiffFile,generateDiffFile}from"@git-diff-view/file";constfile=generateDiffFile(data?.oldFile?.fileName||"",data?.oldFile?.content||"",data?.newFile?.fileName||"",data?.newFile?.content||"",data?.oldFile?.fileLang||"",data?.newFile?.fileLang||"");file.init();file.buildSplitDiffLines();file.buildUnifiedDiffLines();// with @git-diff-view/coreimport{DiffFile}from"@git-diff-view/core";constfile=newDiffFile(data?.oldFile?.fileName||"",data?.oldFile?.content||"",data?.newFile?.fileName||"",data?.newFile?.content||"",data?.hunks||[],data?.oldFile?.fileLang||"",data?.newFile?.fileLang||"");file.init();file.buildSplitDiffLines();file.buildUnifiedDiffLines();// use current data to render<DiffViewdiffFile={file}{...props}/>;// or use the bundle data to render, eg: postMessage/httpRequestconstbundle=file.getBundle();constdiffFile=DiffFile.createInstance(data||{},bundle);<DiffViewdiffFile={diffFile}{...props}/>;
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
renderWidgetLine
return a valid react element to show the widget, this element will render when you click the addWidget button in the diff view
renderExtendLine
return a valid react element to show the extend data
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
diffViewAddWidget
enable addWidget button, type: boolean
onAddWidgetClick
when the addWidget button clicked, type: `({ side: "old"