@git-diff-view/core

@git-diff-view/core

Core diff engine for git diff processing with syntax highlighting

Features

• ✅ Git diff parsing and processing
• ✅ Syntax highlighting with HAST AST
• ✅ Split & Unified view data generation
• ✅ Web Worker / Node.js compatible
• ✅ Bundle-based data transfer
• ✅ Theme support (light/dark)

Installation

npm install @git-diff-view/core
# or
pnpm add @git-diff-view/core
# or
yarn add @git-diff-view/core

Usage

Basic Usage

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

// Create diff file instance
const file = new DiffFile(
  oldFileName,
  oldContent,
  newFileName,
  newContent,
  hunks,        // git diff hunks
  oldFileLang,  // e.g., "typescript"
  newFileLang
);

// Initialize theme (optional, default: light)
file.initTheme('dark');

// Initialize diff data
file.init();

// Build view data
file.buildSplitDiffLines();      // For split view
file.buildUnifiedDiffLines();    // For unified view

Advanced: Separate Initialization

// For more control over initialization
file.initRaw();      // Parse git diff
file.initSyntax();   // Apply syntax highlighting (optional)

file.buildSplitDiffLines();
file.buildUnifiedDiffLines();

Worker/Server Pattern

Process diff data in a separate thread or server for better performance:

// Worker/Server side - generate bundle
const file = new DiffFile(/* ... */);
file.initTheme('dark');
file.init();
file.buildSplitDiffLines();
file.buildUnifiedDiffLines();

const bundle = file.getBundle();
// Send bundle to main thread/client

// Main thread/Client side - reconstruct
import { DiffFile } from "@git-diff-view/core";

const mergedFile = DiffFile.createInstance(data, bundle);

// Use with UI components
<DiffView diffFile={mergedFile} />

API Reference

DiffFile Class

Constructor

new DiffFile(
  oldFileName: string,
  oldContent: string,
  newFileName: string,
  newContent: string,
  hunks: string[],
  oldFileLang?: string,
  newFileLang?: string
)

Methods

Method	Description
initTheme(theme)	Set theme ('light' or 'dark')
init()	Initialize diff data (calls initRaw + initSyntax)
initRaw()	Parse git diff without syntax highlighting
initSyntax()	Apply syntax highlighting
buildSplitDiffLines()	Generate split view data
buildUnifiedDiffLines()	Generate unified view data
getBundle()	Export data for transfer

Static Methods

Method	Description
createInstance(data, bundle)	Reconstruct DiffFile from bundle

Use Cases

• Client-side: Direct rendering with UI frameworks
• Worker pattern: Offload processing to Web Worker
• Server-side: Pre-process diffs in Node.js, send to client
• Hybrid: Mix of client and server processing

Related Packages

• @git-diff-view/react - React components
• @git-diff-view/vue - Vue components
• @git-diff-view/file - File comparison mode
• @git-diff-view/lowlight - Syntax highlighter

License

MIT © MrWangJustToDo