DiffViewer

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

Notes

• DiffData includes file paths, hunks, and optional binary flag.
• Provide expandedHunks to keep large hunks open by default.

Related

• Logs console