@dangayle/git-diff-view-vanjs

VanJS rendering layer for @git-diff-view/core. Provides a high-performance git diff view component using VanJS for reactive DOM rendering.

Install

pnpm add @dangayle/git-diff-view-vanjs vanjs-core vanjs-ext

Usage

import { DiffView, DiffModeEnum } from "@dangayle/git-diff-view-vanjs";
import "@dangayle/git-diff-view-vanjs/styles/diff-view.css";
import van from "vanjs-core";

const { element, getDiffFileInstance, destroy } = DiffView({
  data: {
    oldFile: { fileName: "example.ts", fileLang: "typescript", content: oldContent },
    newFile: { fileName: "example.ts", fileLang: "typescript", content: newContent },
    hunks: diffHunks,
  },
  diffViewMode: DiffModeEnum.SplitGitHub,
  diffViewWrap: false,
  diffViewHighlight: true,
  diffViewFontSize: 14,
  diffViewTheme: "light",
});

van.add(document.getElementById("app")!, element);

Features

• Split view (GitHub + GitLab modes) and unified view
• Line wrapping toggle
• Syntax highlighting
• Hunk expand/collapse
• Add widget support (inline comments, etc.)
• Multi-line selection via DiffViewWithMultiSelect
• Light and dark themes

API

DiffView(props)

Returns { element, getDiffFileInstance, destroy }.

DiffViewWithMultiSelect(props)

Returns { element, getDiffFileInstance, getSelectionResult, getSelectionState, clearSelection, setPreselectedLines, destroy }.

License

MIT — based on git-diff-view by MrWangJustToDo.