# Svelte Diff

> A Svelte 5 text-diff component with semantic cleanup, expected-pattern matching, typed custom renderers, reactive updates, and timing callbacks.

## Install

```bash
npm install @humanspeak/svelte-diff
```

`@humanspeak/svelte-diff` is the Svelte 5 component package. It accepts `originalText` and `modifiedText`, computes a diff reactively, and renders removed, inserted, equal, and expected segments.

Use this library when the desired result is a rendered text diff inside a Svelte application. Use a lower-level algorithm library when you need patch creation, patch application, non-UI diff data, or non-Svelte runtimes.

## Minimal example

```svelte
<script lang="ts">
    import SvelteDiff from '@humanspeak/svelte-diff'
</script>

<SvelteDiff originalText="The old text" modifiedText="The new text" />
```

## Important behavior

- In character mode, `cleanupSemantic` improves readability and takes precedence over efficiency cleanup.
- In character mode, `cleanupEfficiency` defaults to `4`; set it to `0` to skip efficiency cleanup.
- Expected patterns use named capture groups such as `(?<year>\\d{4})` inside `originalText`.
- Child snippets override the corresponding `renderers` entry, which overrides built-in markup.
- `onProcessing` receives timing, raw diff tuples, and optional expected-pattern captures.

## Comparison granularity

`diffMode?: SvelteDiffMode` accepts `'character' | 'word' | 'line'`; character is the default. Word and line modes skip both cleanup passes. Word mode preserves Unicode letter/mark/number/underscore runs, whitespace, and punctuation with deterministic case-sensitive tokens; it is not locale-aware, CJK runs stay whole, and emoji grapheme clusters may split. Line mode preserves original LF/CRLF/lone-CR endings, blank lines, indentation, and final-newline differences. JSON is plain text; sentence and structural JSON modes are unsupported.

Expected captures resolve before tokenization. Raw tuples reconstruct resolved/cleaned source and exact modified text. Display annotations and line-break renderers can split tokens; deleted captured values remain in replaced lines. Mode changes recompute; callback-only changes reuse tuple identity; initial output supports SSR.

Token timing `main` includes preparation/encoding/diff/decoding; `cleanup` is zero. Timings exclude extraction and rendering. One best-effort timeout in seconds covers token work (0 unlimited). Expiry or more than 65,535 distinct tokens across both inputs may return a complete replacement. No workers or virtualization are provided.

- [Diff modes](https://diff.svelte.page/docs/guides/diff-modes)
- [Word example](https://diff.svelte.page/examples/word-diff)
- [Line example](https://diff.svelte.page/examples/line-diff)

Canonical docs root: https://diff.svelte.page/docs
Per-page markdown mirrors: append .md to any docs URL (https://diff.svelte.page/docs/<path>.md)
Full reference (single document): https://diff.svelte.page/llms-full.txt

## Documentation

- [CodeDiff](https://diff.svelte.page/docs/api/code-diff.md): https://diff.svelte.page/docs/api/code-diff
- [SvelteDiff API](https://diff.svelte.page/docs/api/svelte-diff.md): https://diff.svelte.page/docs/api/svelte-diff
- [Types and Exports](https://diff.svelte.page/docs/api/types.md): https://diff.svelte.page/docs/api/types
- [Getting Started](https://diff.svelte.page/docs/getting-started.md): https://diff.svelte.page/docs/getting-started
- [Cleanup Modes](https://diff.svelte.page/docs/guides/cleanup.md): https://diff.svelte.page/docs/guides/cleanup
- [Code Diffs](https://diff.svelte.page/docs/guides/code-diffs.md): https://diff.svelte.page/docs/guides/code-diffs
- [Custom Rendering](https://diff.svelte.page/docs/guides/custom-rendering.md): https://diff.svelte.page/docs/guides/custom-rendering
- [Diff Modes](https://diff.svelte.page/docs/guides/diff-modes.md): https://diff.svelte.page/docs/guides/diff-modes
- [Expected Patterns](https://diff.svelte.page/docs/guides/expected-patterns.md): https://diff.svelte.page/docs/guides/expected-patterns
- [Timing and Performance](https://diff.svelte.page/docs/guides/performance.md): https://diff.svelte.page/docs/guides/performance
- [Migration Guide](https://diff.svelte.page/docs/migration.md): https://diff.svelte.page/docs/migration

Canonical examples root: https://diff.svelte.page/examples
Per-example markdown mirrors: https://diff.svelte.page/examples/<slug>.md

## Examples

- [Interactive Examples](https://diff.svelte.page/examples.md): https://diff.svelte.page/examples
- [Basic Diff](https://diff.svelte.page/examples/basic-diff.md): https://diff.svelte.page/examples/basic-diff
- [Cleanup Modes](https://diff.svelte.page/examples/cleanup-modes.md): https://diff.svelte.page/examples/cleanup-modes
- [Code Diff](https://diff.svelte.page/examples/code-diff.md): https://diff.svelte.page/examples/code-diff
- [Custom Snippets](https://diff.svelte.page/examples/custom-snippets.md): https://diff.svelte.page/examples/custom-snippets
- [Expected Patterns](https://diff.svelte.page/examples/expected-patterns.md): https://diff.svelte.page/examples/expected-patterns
- [Line Diff](https://diff.svelte.page/examples/line-diff.md): https://diff.svelte.page/examples/line-diff
- [Live Editor](https://diff.svelte.page/examples/live-editor.md): https://diff.svelte.page/examples/live-editor
- [Timing](https://diff.svelte.page/examples/timing.md): https://diff.svelte.page/examples/timing
- [Word Diff](https://diff.svelte.page/examples/word-diff.md): https://diff.svelte.page/examples/word-diff

## Comparisons

- [jsdiff](https://diff.svelte.page/compare/vs-jsdiff.md): https://diff.svelte.page/compare/vs-jsdiff
- [diff-match-patch](https://diff.svelte.page/compare/vs-diff-match-patch.md): https://diff.svelte.page/compare/vs-diff-match-patch
- [diff2html](https://diff.svelte.page/compare/vs-diff2html.md): https://diff.svelte.page/compare/vs-diff2html

## External links

- [npm](https://www.npmjs.com/package/@humanspeak/svelte-diff)
- [GitHub](https://github.com/humanspeak/svelte-diff)
- [Issue tracker](https://github.com/humanspeak/svelte-diff/issues)
- [Humanspeak](https://humanspeak.com)