Widgets
DiffViewer
Renders unified or side-by-side diffs with hunk navigation.
Renders unified or side-by-side diffs with hunk navigation.
Usage
ui.diffViewer({
id: "diff",
diff: state.diff,
mode: "unified",
scrollTop: state.scrollTop,
lineNumbers: true,
contextLines: 3,
onScroll: (top) => app.update((s) => ({ ...s, scrollTop: top })),
onStageHunk: (i) => stageHunk(i),
onRevertHunk: (i) => revertHunk(i),
})Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | required | Widget identifier |
diff | DiffData | required | Diff data model |
mode | "unified" | "sideBySide" | required | Render mode |
scrollTop | number | required | Scroll offset (lines) |
lineNumbers | boolean | true | Show line numbers |
contextLines | number | 3 | Context lines around changes |
expandedHunks | number[] | - | Hunks expanded beyond default threshold |
focusedHunk | number | - | Focused hunk index |
onScroll | (scrollTop) => void | required | Scroll callback |
onHunkToggle | (index, expanded) => void | - | Expand/collapse callback |
onStageHunk | (index) => void | - | Stage callback |
onUnstageHunk | (index) => void | - | Unstage callback |
onApplyHunk | (index) => void | - | Apply callback |
onRevertHunk | (index) => void | - | Revert callback |
Mouse Behavior
- Mouse scroll wheel scrolls diff content, firing the
onScrollcallback. - Clicking the viewer area focuses the widget.
Notes
DiffDataincludes file paths, hunks, and optional binary flag.- Provide
expandedHunksto keep large hunks open by default.