Diff viewerPro
Line diff in unified or split view with added/removed counts.
src/payments/retry.ts+2 −1
| 1 | 1 | export async function chargeWithRetry(order: Order, attempts = 3) { | |
| 2 | 2 | let lastError: unknown; | |
| 3 | + | const idempotencyKey = `order_${order.id}`; | |
| 3 | 4 | for (let attempt = 1; attempt <= attempts; attempt++) { | |
| 4 | 5 | try { | |
| 5 | − | const idempotencyKey = crypto.randomUUID(); | |
| 6 | 6 | return await gateway.charge(order, { idempotencyKey }); | |
| 7 | 7 | } catch (error) { | |
| 8 | 8 | lastError = error; | |
| 9 | + | await sleep(2 ** attempt * 100); | |
| 9 | 10 | } | |
| 10 | 11 | } | |
| 11 | 12 | throw lastError; | |
| 12 | 13 | } |
When to use
- Showing what changed between two versions of a file or config.
When not to use
- Very large files (over a few thousand lines).
Installation
Usage
Import it from @/components/ui/diff-viewer after installing.
example.tsx
import { DiffViewer } from "@/components/ui/diff-viewer";
export function ConfigChange({ before, after }: { before: string; after: string }) {
return <DiffViewer fileName="config.json" oldCode={before} newCode={after} />;
}Built fromSegmented control
API reference
DiffViewer
A line diff in unified or split view.
| Prop | Type | Default | Description |
|---|---|---|---|
| oldCode / newCode | string | – | Versions to compare. |
| fileName | string | – | Shown in the header. |
| defaultView | "unified" | "split" | "unified" | Starting view; people can switch. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Reach the view switch |
Accessibility
- Added and removed lines have + and − signs, not only colors.
- The view switch is labelled.
Responsive behavior
- Use unified on phones; split needs about 720px.
Performance
- Longest common subsequence: O(n·m). Fine for a few thousand lines.
Notes for AI
- Normalize line endings before diffing.
This page as Markdown, for assistants and coding agents:
/components/diff-viewer/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt