DiffViewer

A read-only code diff: one file's path, change counts, and hunks in unified or split view, with inline highlighting.

Import

import { createDiffFile, DiffViewer, parseUnifiedDiff } from '@astryx-vue/lab'

Props

Name	Type	Default	Description
`file`	`DiffViewerFile`	Required	The file to render. Build it with `parseUnifiedDiff` or `createDiffFile`.
`viewMode`	`'unified' \| 'split'`	`'unified'`	One column, or old and new side by side.
`language`	`string`	Inferred from the extension	Syntax-highlighting language; unknown extensions render as plain text.
`hasLineNumbers`	`boolean`	`true`	Shows the old and new line-number gutters.
`isWrapped`	`boolean`	`false`	Wraps long lines instead of scrolling sideways.
`inlineHighlight`	`'word' \| 'char' \| 'none'`	`'word'`	Highlights changed words (or characters) inside paired removed/added lines.
`isCollapsible`	`boolean`	`true`	Makes the file header a disclosure; needs a file path to name it.
`isCollapsed`	`boolean`	Uncontrolled	Controlled collapsed state.
`defaultIsCollapsed`	`boolean`	`false`	Initial collapsed state when uncontrolled.
`maxHeight`	`number \| string`	`undefined`	Maximum height of the hunk area before it scrolls.
`syntaxTheme`	`SyntaxThemeDefinition`	`undefined`	Per-instance syntax theme.
`label`	`string`	`'Diff'`	Accessible name for the hunk area when the file has no path.
`renderLineAnnotation`	`(ref) => VNodeChild`	`undefined`	Renders a full-width row under a line, e.g. a review comment; in split view it sits on the line's own side.

Events

Name	Payload	Description
`collapsedChange`	`(isCollapsed: boolean)`	The header disclosure was toggled.
`update:isCollapsed`	`(isCollapsed: boolean)`	Supports `v-model:isCollapsed`.
`lineNumberClick`	`(ref: DiffViewerLineRef, event: MouseEvent)`	A line number was clicked. Only the line's anchor side is a button.

Slots

Name	Description
`headerEnd`	Content at the end of the file header, e.g. a "Viewed" checkbox.

Utilities

const files = parseUnifiedDiff(patch) // one record per file
const file = createDiffFile({
  path: 'src/app.ts',
  oldValue: before,
  newValue: after,
  contextLines: 3,
})

parseUnifiedDiff accepts git diff, diff -u, and bare hunks; unreadable input yields an empty array instead of throwing. createDiffFile computes a Myers line diff from two texts and returns the same DiffViewerFile shape. contextLines defaults to 3; pass oldPath: null or newPath: null to mark a file added or deleted.

DiffViewer ​

Import ​

Props ​

Events ​