Mischief

40 / Code

Diff View

A proposed change shown as a unified or side-by-side diff, with optional accept and reject controls.

Live previewSource
lib/total.ts+3 -3
Changes to lib/total.ts: 3 added, 3 removed
@@ -1 +1 @@
export function total(items) {
export function total(items, { taxRate = 0 } = {}) {
let sum = 0
for (const item of items) {
sum += item.price
sum += item.price * item.quantity
}
return sum
return sum * (1 + taxRate)
}

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/diff-view
import { DiffView } from "mischief-ui/diff-view"

Usage

export function Review() {
  return (
    <DiffView
      filename="server.ts"
      before={original}
      after={proposed}
      onAccept={apply}
      onReject={discard}
    />
  )
}

API

before, afterstring, stringThe two sides. Diffed by line when no hunks are given.
hunksDiffHunk[]Precomputed hunks, which win over before and after.
filenamestringShown in the header. Falls back to Proposed change.
view"unified" | "split"Layout. Defaults to "unified".
contextnumberUnchanged lines kept either side of a change. Defaults to 3.
showLineNumbersbooleanShows the number gutters. Defaults to true.
onAccept, onReject() => void, () => voidAdds the decision footer when either is given.
status"pending" | "accepted" | "rejected"Replaces the controls with the outcome.

Accessibility

The diff is a table with a caption naming the file and the added and removed counts, so it can be read without colour. Every line carries a + or - marker alongside its tint for the same reason. Line numbers are aria-hidden decoration. Once a decision is made the outcome is announced through a status region.

Dependencies

  • lucide-react