Git Diff Component

A Diff view component for React / Vue / Solid / Svelte, The most one component what easy to use and feature complete.

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

git-mode

file-mode

GitHub compare

How to use （React / Vue / Solid / Svelte）

See example project Example

Packages

Package	Version
@git-diff-view/core
@git-diff-view/file
@git-diff-view/react
@git-diff-view/vue
@git-diff-view/solid
@git-diff-view/svelte
@git-diff-view/cli

syntax highlighter

Package	Version
@git-diff-view/lowlight build in
@git-diff-view/shiki

Screen Shot

Template mode

For better performance and customization, now the DiffView component support template mode, and it's the default setting. SEE Template Mode

FastDiff template

Using the template mode, the DiffView component can utilize the fast-diff package to generate diffLine templates for better readability of differences. SEE FastDiffTemplate

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

• Show the git diff result
• Support Split View and Unified View
• Support Warp / UnWarp the code line
• Support light / dark theme by default (since v0.0.17)
• Support Syntax Highlight with full syntax context (base on hast AST)
• Support Extend Data component in the Diff View
• Support Widget component in the Diff View
• Support Web Worker / Node Server to improve performance
• Support React and Vue component
• Support compare by @git-diff-view/core(git diff) or @git-diff-view/file(file content)
• Support Diff Match Patch to improve line diff (experimental)
• Support SSR for React and Vue component (since v0.0.21)
• Support RSC for React component (since v0.0.21)
• More Render Platform: Solid / Svelte / Cli
• Support Virtual Scroll to improve performance

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