@git-diff-view/file

File content comparison engine built on top of @git-diff-view/core

Compare two file contents directly without git diff hunks. This package wraps diff and @git-diff-view/core to provide easy file-to-file comparison.

Features

• ✅ Direct file content comparison (no git required)
• ✅ Automatic diff generation using diff library
• ✅ Same API as @git-diff-view/core
• ✅ Syntax highlighting with HAST AST
• ✅ Split & Unified view support
• ✅ Theme support (light/dark)

Installation

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

Usage

Basic Usage

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

// Generate diff from file contents
const file = generateDiffFile(
  "old.ts",      // old file name
  oldContent,    // old file content
  "new.ts",      // new file name
  newContent,    // new file content
  "typescript",  // old file language
  "typescript"   // new file language
);

// Initialize theme
file.initTheme('dark');

// Initialize diff
file.init();

// Build views
file.buildSplitDiffLines();
file.buildUnifiedDiffLines();

Worker/Server Pattern

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

const file = generateDiffFile(
  oldFileName, oldContent,
  newFileName, newContent,
  oldLang, newLang
);

file.initTheme('dark');
file.init();
file.buildSplitDiffLines();
file.buildUnifiedDiffLines();

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

// Main thread/Client side
const mergedFile = DiffFile.createInstance(data, bundle);

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

API Reference

generateDiffFile()

Generate a DiffFile instance from file contents.

function generateDiffFile(
  oldFileName: string,
  oldContent: string,
  newFileName: string,
  newContent: string,
  oldFileLang?: string,
  newFileLang?: string
): DiffFile

DiffFile Methods

Same as @git-diff-view/core:

| Method | Description | |--------|-------------| | initTheme(theme) | Set theme ('light' or 'dark') | | init() | Initialize diff data | | buildSplitDiffLines() | Generate split view data | | buildUnifiedDiffLines() | Generate unified view data | | getBundle() | Export data for transfer |

Difference from @git-diff-view/core

| Package | Use Case | Input | |---------|----------|-------| | @git-diff-view/core | Git diff visualization | Git diff hunks | | @git-diff-view/file | File comparison | Raw file contents |

Use Cases

• Compare file versions without git
• Diff editor integration
• Online code comparison tools
• File upload comparison
• Live code diff

Related Packages

• @git-diff-view/core - Git diff mode
• @git-diff-view/react - React components
• @git-diff-view/vue - Vue components
• diff - Underlying diff library

License

MIT © MrWangJustToDo