Sivir UI
73

File Diff

Rows are highlighted with highlight.js in a built-in GitHub palette. Set theme="custom" to drop those colors and load your own highlight.js stylesheet.

src/auth.ts +3 −1
export function getToken() {
return localStorage.token;
const t = cookies.get("session");
if (!t) throw new Error("no session");
return t;
}

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add file-diff

The component needs highlight.js. The add command offers to install it when it's missing. To install it yourself, run:

Copy the command below and run it in your terminal.

bun add highlight.js

Usage

Pass a diff array and Root renders the top bar and every row. The addition and deletion counts come from the add and remove lines unless you pass additions and deletions. lang takes a highlight.js language name or a common alias such as ts.

import * as FileDiff from '@sivir-ui/svelte/components/file-diff';

<FileDiff.Root file="src/auth.ts" lang="ts" diff={[
  { type: 'context', oldLineNumber: 12, newLineNumber: 12, content: 'export function getToken() {' },
  { type: 'remove', oldLineNumber: 13, content: '  return localStorage.token;' },
  { type: 'add', newLineNumber: 13, content: '  const t = cookies.get("session");' },
]} />

Examples

Composed parts

Leave out diff and compose TopBar, Content, and Row yourself. Root can't count rows you compose, so pass additions and deletions. Children replace the TopBar's default filename and counts; add Filename and PlusMinus back next to your own actions.

src/auth.ts +3 −1
export function getToken() {
return localStorage.token;
const t = cookies.get("session");
if (!t) throw new Error("no session");
return t;
}

Without line numbers

Set showLineNumbers to false to hide both gutters. The + and − column stays, so changes are readable without color.

src/styles.css +1 −1
color: var(--color-foreground);
background: #f4f4f0;
background: var(--color-card);
border: 1px solid var(--color-border);

Stacked files

Render one Root per file, as in a pull request. Each Root has its own language and counts.

src/auth.ts +3 −1
export function getToken() {
return localStorage.token;
const t = cookies.get("session");
if (!t) throw new Error("no session");
return t;
}
src/styles.css +1 −1
color: var(--color-foreground);
background: #f4f4f0;
background: var(--color-card);
border: 1px solid var(--color-border);

Anatomy

FileDiff.Root - Holds the file, language, and counts; renders everything when given diff.

FileDiff.TopBar - Renders the file path and counts, or your own children.

FileDiff.Filename - Renders the file path.

FileDiff.PlusMinus - Renders the addition and deletion counts.

FileDiff.Content - Contains the scrollable diff rows.

FileDiff.Row - Renders one highlighted diff row.

FileDiff.LineNumber - Renders one gutter line number.