# Differ
<p align="center">
  <img src="src-tauri/icons/icon_512x512@2x.png" width="256" height="256" alt="Differ Logo">
</p>


**English** · [中文](README.md)


<p align="center">
  <video src="https://github.com/user-attachments/assets/d110bc04-b42c-4066-bab0-243ffd8a9632" width="800" controls autoplay loop muted>
    Your browser does not support HTML5 video.
  </video>
</p>

## Features

- **Side-by-Side Diff** — Line-by-line comparison of two files with syntax highlighting, scroll sync, and inline change details.
- **3-Way Merge** — Merge two file versions against a common base with conflict detection and resolution.
- **Directory Comparison** — Recursively compare two directories, showing added, removed, and modified files in a tree view.
- **Syntax-Aware Diff** — Powered by tree-sitter AST analysis, hunks are intelligently regrouped by function/class boundaries with context headers.
- **Git Integration** — Open local repositories, view file changes, commit history, and branch management with interactive conflict resolution.
- **Live File Watching** — Monitor files for changes and automatically re-run diff on save.
- **History Tracking** — All diff and merge operations are persisted locally for quick access.
- **Keyboard Navigation** — Full keyboard shortcuts for efficient workflow.
- **Dark Theme** — Carefully crafted dark UI for reduced eye strain.

### Supported Languages for Syntax-Aware Diff

- Rust
- JavaScript / JSX
- TypeScript / TSX
- Python

## Installation

### macOS

**Homebrew (recommended):**

```bash
brew tap peterfei/homebrew-differ
brew install --cask differ
```

Or download the latest `.dmg` from the [Releases](https://github.com/peterfei/differ/releases) page.

### Windows & Linux

Download the latest `.msi` / `.deb` / `.AppImage` from the [Releases](https://github.com/peterfei/differ/releases) page.

### Build from Source

**Prerequisites:**

- [Rust](https://rustup.rs/) (1.80+)
- [Node.js](https://nodejs.org/) (20+)
- [Tauri CLI System Dependencies](https://v2.tauri.app/start/prerequisites/)

```bash
# Clone the repository
git clone https://github.com/peterfei/differ.git
cd differ

# Install frontend dependencies
npm install

# Run in development mode
npm run tauri dev

# Build for production
npm run tauri build
```

## Usage

1. **File Diff** — Open two files from the Dashboard or drag them in, view side-by-side changes.
2. **Directory Diff** — Select two directories to see a recursive comparison tree.
3. **3-Way Merge** — Provide a base file and two modified versions to merge with conflict resolution.
4. **Git Integration** — Open local repositories, view changes, commit history, and branches; interactively resolve merge conflicts.
5. **Syntax Mode** — Toggle between line-level and syntax-aware diff grouping for supported languages.

### Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Ctrl+N` | New diff |
| `Ctrl+S` | Toggle syntax mode |
| `Ctrl+W` | Close tab |
| `Ctrl+Tab` | Next tab |
| `Escape` | Close dialogs |

## Tech Stack

- **Frontend**: SolidJS, TypeScript, Tailwind CSS, Vite
- **Backend**: Rust, Tauri v2
- **Diff Engine**: `similar` crate (line-level diff)
- **Syntax Analysis**: tree-sitter (Rust, JavaScript, TypeScript, Python)
- **Storage**: Tauri Plugin Store (history persistence)

## Project Structure

```
src/
├── components/       # UI components (DiffView, MergeView, Dashboard, etc.)
├── dsl/              # Design system component library
├── lib/              # Utilities and stores (historyStore, navStore, etc.)
├── types/            # TypeScript type definitions
└── App.tsx           # Root application component

src-tauri/
├── src/
│   ├── commands/     # Tauri commands (diff, merge, etc.)
│   ├── diff/         # Diff engine (text_diff, syntax_diff, merge, etc.)
│   └── lib.rs        # Tauri application entry point
└── Cargo.toml
```

## Development

```bash
# Run tests
npm test                # Frontend tests (Vitest)
cd src-tauri && cargo test  # Backend tests (Rust)

# Run with hot-reload
npm run tauri dev
```

## License

MIT