@git-diff-view/file

@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