0.0.15 • Published 1 year ago

@gitee-code/git-diff-view-lowlight

Licence

MIT

Version

0.0.15

Deps

Size

164 kB

Vulns

Weekly

Stars

719

Summary Dependency Versions

Git Diff View

A high-performance, feature-rich diff view component for React / Vue / Solid / Svelte

NPM Downloads NPM License

Highlights

Full Syntax Highlighting - Complete syntax context based on HAST AST
High Performance - Web Worker & Node Server support, template mode optimization
Framework Agnostic - React, Vue, Solid, Svelte, and CLI support
Highly Customizable - Widgets, extend data, themes, and flexible rendering
Multiple Modes - Git diff or file comparison with Split/Unified views
SSR/RSC Ready - Full server-side rendering and React Server Components support

Live Demo

Try it online: Git Playground · File Playground · GitHub Style

git mode

More Screenshots

full feature file mode theme support unified view cli diff view

Installation

# React
pnpm add @git-diff-view/react

# Vue
pnpm add @git-diff-view/vue

# Solid / Svelte
pnpm add @git-diff-view/solid
pnpm add @git-diff-view/svelte

View Examples for React / Vue / Solid / Svelte

Quick Start

React

import { DiffView, DiffModeEnum } from "@git-diff-view/react";
import "@git-diff-view/react/styles/diff-view.css";

<DiffView
  data={{
    oldFile: { fileName: "old.ts", content: "..." },
    newFile: { fileName: "new.ts", content: "..." },
    hunks: ["..."]
  }}
  diffViewMode={DiffModeEnum.Split}
  diffViewTheme="dark"
  diffViewHighlight
/>

Advanced Usage

import { DiffFile, generateDiffFile } from "@git-diff-view/file";

// File comparison mode
const file = generateDiffFile(
  "old.ts", oldContent,
  "new.ts", newContent,
  "typescript", "typescript"
);
file.initTheme('dark');
file.init();
file.buildSplitDiffLines();

<DiffView diffFile={file} />

More examples: React · Vue · Solid

Packages

UI Frameworks

@git-diff-view/react - React component
@git-diff-view/vue - Vue component
@git-diff-view/solid - Solid component
@git-diff-view/svelte - Svelte component
@git-diff-view/cli - CLI tool

Core Libraries

@git-diff-view/core - Core diff engine (git diff)
@git-diff-view/file - File comparison engine

Syntax Highlighters

@git-diff-view/lowlight - Built-in highlighter
@git-diff-view/shiki - Shiki integration

Key Features

Split & Unified Views - Switch between side-by-side and unified diff modes
Full Syntax Highlighting - Complete context-aware syntax highlighting with HAST AST
Light & Dark Themes - Built-in theme support with customization
Line Wrapping - Toggle line wrapping for long code lines
Widget System - Add custom interactive widgets to diff lines
Extend Data - Attach and render custom data per line
Web Worker Support - Offload processing for better performance
SSR & RSC - Full server-side rendering support for React and Vue
Diff Match Patch - Enhanced line-level diff with FastDiff template
Multiple Platforms - React, Vue, Solid, Svelte, and CLI

Advanced Features

FastDiff Template

Enhanced line-by-line diff visualization for better readability.

import { setEnableFastDiffTemplate } from '@git-diff-view/core';

setEnableFastDiffTemplate(true);

Default	FastDiff

Range Mode

Display only a portion of the diff by specifying a line number range. This is useful when you want to focus on a specific section of a large diff.

import { DiffFile, SplitSide } from "@git-diff-view/core";

// Create the full diff instance
const diffFile = new DiffFile(/* ... */);
diffFile.init();
diffFile.buildSplitDiffLines();

// Generate a new instance containing only lines 10-50 (based on new file line numbers)
const rangeDiffFile = diffFile.generateInstanceFromLineNumberRange(10, 50);

// Or specify which side's line numbers to use
const rangeDiffFileOld = diffFile.generateInstanceFromLineNumberRange(10, 50, SplitSide.old);
const rangeDiffFileNew = diffFile.generateInstanceFromLineNumberRange(10, 50, SplitSide.new);

<DiffView diffFile={rangeDiffFile} />

API: generateInstanceFromLineNumberRange(start, end, side?)

Parameter	Type	Default	Description
`start`	`number`	-	Start line number (must be less than `end`)
`end`	`number`	-	End line number
`side`	`SplitSide`	`SplitSide.new`	Which file's line numbers to use (`SplitSide.old` or `SplitSide.new`)

This method creates a new DiffFile instance containing only the diff lines within the specified range, making it ideal for:

Displaying relevant portions of large diffs
Creating focused code review experiences
Building paginated diff views

Template Mode

Optimized rendering mode enabled by default for better performance. Learn more

API Reference

Component Props

Prop	Type	Description
`data`	`DiffData`	Diff data with `oldFile`, `newFile`, and `hunks`
`diffFile`	`DiffFile`	Pre-processed diff file instance
`diffViewMode`	`Split \| Unified`	View mode (default: `Split`)
`diffViewTheme`	`light \| dark`	Theme (default: `light`)
`diffViewHighlight`	`boolean`	Enable syntax highlighting
`diffViewWrap`	`boolean`	Enable line wrapping
`diffViewFontSize`	`number`	Font size in pixels
`diffViewAddWidget`	`boolean`	Enable widget button
`renderWidgetLine`	`Function`	Custom widget renderer
`renderExtendLine`	`Function`	Custom extend data renderer
`extendData`	`ExtendData`	Additional data per line
`onAddWidgetClick`	`Function`	Widget button click handler

Styling

// default style (Pure CSS)
import "@git-diff-view/react/styles/diff-view.css";

// same as diff-view.css
import "@git-diff-view/react/styles/diff-view-pure.css";

Two Usage Modes

1. Direct Data Mode - Pass raw diff data

<DiffView data={{ oldFile, newFile, hunks }} />

2. DiffFile Instance Mode - Pre-process for better control

const file = new DiffFile(/* ... */);
file.init();
file.buildSplitDiffLines();
<DiffView diffFile={file} />

Development

git clone https://github.com/MrWangJustToDo/git-diff-view.git
cd git-diff-view
pnpm install
pnpm run build:packages
pnpm run dev:react  # or dev:vue, dev:solid, dev:svelte

License

MIT MrWangJustToDo

Keywords

highlight virtual dom highlight