SvelteDiff API

The package exports the component as both the default export and a named export.

<script lang="ts">
    import SvelteDiff from '@humanspeak/svelte-diff'
    // or: import { SvelteDiff } from '@humanspeak/svelte-diff'
</script>

<script lang="ts">
    import SvelteDiff from '@humanspeak/svelte-diff'
    // or: import { SvelteDiff } from '@humanspeak/svelte-diff'
</script>

Props

Prop	Type	Default	Purpose
`originalText`	`string`	required	The before/source text
`modifiedText`	`string`	required	The after/target text
`timeout`	`number`	`1`	Maximum diff computation time in seconds; `0` is unlimited
`cleanupSemantic`	`boolean`	`false`	Optimize edit boundaries for human readability
`cleanupEfficiency`	`number`	`4`	Edit cost used by efficiency cleanup; `0` disables it
`compact`	`boolean`	`true`	Render unstyled equal text without wrapper spans; `false` restores legacy equal spans
`onProcessing`	`function`	—	Receive timing, raw tuples, and optional captures
`rendererClasses`	`RendererClasses`	`{}`	Classes for built-in segment spans
`renderers`	`Partial<Renderers>`	`{}`	Snippet map for individual segment types
`remove`	`Snippet<[string]>`	—	Direct child snippet for removed text
`insert`	`Snippet<[string]>`	—	Direct child snippet for inserted text
`equal`	`Snippet<[string]>`	—	Direct child snippet for unchanged text
`expected`	`Snippet<[string, string]>`	—	Direct child snippet for expected values
`lineBreak`	`Snippet<[]>`	—	Direct child snippet between lines

Cleanup precedence

The component computes a raw diff, then runs at most one cleanup pass:

If cleanupSemantic is true, semantic cleanup runs.
Otherwise, if cleanupEfficiency > 0, efficiency cleanup runs with that value as the edit cost.
Otherwise, the raw diff is rendered.

Renderer precedence

Resolution happens independently for every segment type:

A direct child snippet such as {#snippet insert(text)}
The matching property in renderers
The built-in fallback

For unchanged text, the default compact fallback emits text directly when no equal class or renderer is configured. Set compact={false} to restore the legacy equal <span>. Removed, inserted, expected, and customized equal segments retain their normal elements.

That means you can override one type and leave all others on their defaults.

<SvelteDiff {originalText} {modifiedText}>
    {#snippet insert(text: string)}
        <ins class="addition">+ {text}</ins>
    {/snippet}
</SvelteDiff>

<SvelteDiff {originalText} {modifiedText}>
    {#snippet insert(text: string)}
        <ins class="addition">+ {text}</ins>
    {/snippet}
</SvelteDiff>

`onProcessing`

The callback runs after computation and cleanup.

<script lang="ts">
    import type {
        SvelteDiffTiming,
        SvelteDiffTuple
    } from '@humanspeak/svelte-diff'

    function handleProcessing(
        timing: SvelteDiffTiming,
        diffs: SvelteDiffTuple[],
        captures?: Record<string, string>
    ) {
        console.log(timing.main, timing.cleanup, timing.total)
        console.log(diffs, captures)
    }
</script>

<SvelteDiff {originalText} {modifiedText} onProcessing={handleProcessing} />

<script lang="ts">
    import type {
        SvelteDiffTiming,
        SvelteDiffTuple
    } from '@humanspeak/svelte-diff'

    function handleProcessing(
        timing: SvelteDiffTiming,
        diffs: SvelteDiffTuple[],
        captures?: Record<string, string>
    ) {
        console.log(timing.main, timing.cleanup, timing.total)
        console.log(diffs, captures)
    }
</script>

<SvelteDiff {originalText} {modifiedText} onProcessing={handleProcessing} />

Timing values are milliseconds measured with performance.now().

Expected patterns

If originalText contains named capture groups, the component tries to match those regions in modifiedText and renders successful matches as expected instead of additions/removals.

<SvelteDiff
    originalText={'Release (?<version>v\\d+\\.\\d+\\.\\d+)'}
    modifiedText="Release v2.4.1"
/>

<SvelteDiff
    originalText={'Release (?<version>v\\d+\\.\\d+\\.\\d+)'}
    modifiedText="Release v2.4.1"
/>

The group name is passed to the expected snippet and its matched value appears in the callback’s captures object.

Deprecated aliases

SvelteDiffMatchPatch and the SvelteDiffMatchPatch* type names remain available for compatibility. New code should use SvelteDiff and the shorter SvelteDiff* types.