Git Diff Component

Demo ---- git-diff / file-diff

How to use (React / Vue / Solid / Svelte)

Packages

syntax highlighter

Screen Shot

Template mode

FastDiff template

Default diffLine

FastDiff diffLine

How to enable FastDiff template

import { setEnableFastDiffTemplate } from '@git-diff-view/core' // or react/vue runtime package
// experimental feature, use with caution
setEnableFastDiffTemplate(true);

Features

Install

# In React Project
pnpm add @git-diff-view/react
# In Vue Project
pnpm add @git-diff-view/vue

Use in React

There are two ways to use this component:

1. Use the DiffView component directly.

import { DiffView, DiffModeEnum } from "@git-diff-view/react";
import "@git-diff-view/react/styles/diff-view.css";
// if you have your own tailwindcss config, you can use the `diff-view-pure.css` to avoid CSS conflicts
import "@git-diff-view/react/styles/diff-view-pure.css";
<DiffView<string>
 // use data
 data={{
 oldFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
 newFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
 hunks: string[];
 }}
 extendData={{oldFile: {10: {data: 'foo'}}, newFile: {20: {data: 'bar'}}}}
 renderExtendLine={({ data }) => ReactNode}
 diffViewFontSize={number}
 diffViewHighlight={boolean}
 diffViewMode={DiffModeEnum.Split | DiffModeEnum.Unified}
 diffViewWrap={boolean}
 diffViewTheme={'light' | 'dark'}
 diffViewAddWidget
 onAddWidgetClick={({ side, lineNumber }) => void}
 renderWidgetLine={({ onClose, side, lineNumber }) => ReactNode}
/>

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} {...props} />;
// 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

Development

# clone this project
# pnpm install
# pnpm run build:packages
# pnpm run dev:react / pnpm run dev:vue