Studio
2

File Diff

Installation

pnpm dlx @mielui/svelte add file-diff

The component depends on highlight.js . Install it if your project doesn't have it yet:

pnpm add highlight.js

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Pass a diff array for the high-level form, or compose TopBar , Content , and Row by hand. A bare TopBar renders filename and counts; pass children to take over the row with Filename , PlusMinus , and your own actions. Addition and deletion counts are derived from the diff unless you pass them explicitly.

Code Block and File Diff share the same language aliases, syntax rules, package-manager command highlighting, and escaped fallback for unsupported languages.

Each row announces whether its code was added, removed, or unchanged. When line numbers are shown, the announcement includes the relevant source line.

import * as FileDiff from '$lib/mielui/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

Changing a diff

Replace the diff array when a new patch arrives. The filename, highlighted rows, and derived counts update from Root. Explicit additions and deletions continue to override the calculated counts until you remove those props.

Compound API

Drop down to rows when you need a custom top-bar action or explicit counts. Recompose the header from Filename and PlusMinus parts.

Without line numbers

Hide both gutters for compact embeds. The sign column stays so additions and deletions remain distinguishable without color.

Stacked files

Render one Root per file for pull-request style views. Each diff keeps its own language and counts.

Keep patch context visible

Use one Root per file and keep its filename and language alongside the patch. For short embedded previews you can omit line numbers; retain the addition and deletion signs so color is not the only distinction. Use the changing-diff example to inspect count updates.

API reference

FileDiff.Root

Provides diff state and layout.

Prop Type Default
file string | undefined

File path shown in the top bar, e.g. "src/auth.ts".

 ''
lang string | undefined

Highlight.js language id used for every row unless a row overrides it.

 ''
additions number | undefined

Addition count. Defaults to the number of `add` lines in `diff`.

 —
deletions number | undefined

Deletion count. Defaults to the number of `remove` lines in `diff`.

 —
diff FileDiffLine[] | undefined

High-level unified lines. When set, Root renders TopBar and Content itself.

 —
showLineNumbers boolean | undefined

Render the old/new line-number gutters.

 true
theme FileDiffTheme | undefined

Syntax paint: - `mielui` (default): the built-in GitHub palette. - `custom`: no token colors; load any `highlight.js/styles/*` theme instead.

 'mielui'
children Snippet<[]> | undefined —
class (string & (ClassValue | null)) | undefined —

FileDiff.Content

Contains the scrollable diff rows.

Prop Type Default
children Snippet<[]> | undefined —
class (string & (ClassValue | null)) | undefined —

FileDiff.Filename

Prop Type Default
file string | undefined

File path. Falls back to the Root `file` when omitted.

 —
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

FileDiff.LineNumber

Renders one gutter line number.

Prop Type Default
value number | null | undefined

Line number. Renders an empty gutter cell when nullish.

 —
tone FileDiffChangeType | undefined

Number tone. Rows pass their own type; standalone use defaults to context.

 'context'
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

FileDiff.PlusMinus

Prop Type Default
additions number | undefined

Addition count. Falls back to the Root count when omitted.

 —
deletions number | undefined

Deletion count. Falls back to the Root count when omitted.

 —
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

FileDiff.Row

Renders one highlighted diff row.

Prop Type Default
type FileDiffChangeType | undefined

Row kind. Drives the tint, gutter bar, and sign.

 'context'
oldLine number | null | undefined

Old-file line number. Empty when nullish.

 —
newLine number | null | undefined

New-file line number. Empty when nullish.

 —
code string | undefined

Raw source for the row. Highlighted with the Root (or row) language.

 ''
lang string | undefined

Row-level language override.

 —
children Snippet<[]> | undefined —
class (string & (ClassValue | null)) | undefined —

FileDiff.TopBar

Renders the file path and change counts.

Prop Type Default
file string | undefined

File path. Falls back to the Root `file` when omitted.

 —
additions number | undefined

Addition count. Falls back to the Root count when omitted.

 —
deletions number | undefined

Deletion count. Falls back to the Root count when omitted.

 —
children Snippet<[]> | undefined

Trailing actions, pinned to the right edge. Passing children takes over the row: the default filename and counts are omitted, so compose them back explicitly with `Filename` and `PlusMinus` as needed.

 —
class (string & (ClassValue | null)) | undefined —