@humanspeak/svelte-diff-match-patch

A powerful, customizable diff-match-patch component for Svelte with TypeScript support.


Features

- 🚀 High-performance diff algorithm implementation
- 💪 Complete TypeScript support with strict typing
- 🎨 Customizable diff rendering with CSS classes OR svelte snippets
- 🔒 Safe and efficient text comparison
- 🎯 Configurable cleanup algorithms (semantic and efficiency)
- 🧪 Comprehensive test coverage (vitest and playwright)
- 🔄 Svelte 5 runes compatibility
- ⚡ Configurable timeout for large text comparisons
- 📊 Detailed timing and diff statistics
- 🎨 Customizable diff highlighting styles
- 🔍 Real-time diff updates

Recent Updates

$3

- Added detailed timing information for diff operations
- Enhanced cleanup algorithms for better diff results
- Improved performance for large text comparisons
- Added TypeScript types for all component props and events
- Implemented proper state management with Svelte 5 runes

$3

- Enhanced Playwright E2E test coverage
- Added comprehensive tests for cleanup algorithms
- Improved test reliability with proper component mounting checks

Installation

``bash
npm i -S @humanspeak/svelte-diff-match-patch
`

Or with your preferred package manager:

`bash
pnpm add @humanspeak/svelte-diff-match-patch
yarn add @humanspeak/svelte-diff-match-patch
`

Basic Usage

`svelte


{originalText}
{modifiedText}
timeout={1}
cleanupSemantic={false}
cleanupEfficiency={4}
{onProcessing}
rendererClasses={{
remove: 'diff-remove',
insert: 'diff-insert',
equal: 'diff-equal'
}}
/>


`

TypeScript Support

The package is written in TypeScript and includes full type definitions:

`typescript
import type {
SvelteDiffMatchPatchTiming,
SvelteDiffMatchPatchDiff,
SvelteDiffMatchPatchProps
} from '@humanspeak/svelte-diff-match-patch'
`

Props

| Prop | Type | Default | Description |
| ----------------- | ---------- | ------- | ---------------------------------------------- |
| originalText | string | - | The original text to compare against |
| modifiedText | string | - | The modified text to compare with original |
| timeout | number | 1 | Timeout in seconds for diff computation |
| cleanupSemantic | boolean | false | Enable semantic cleanup for better readability |
| cleanupEfficiency | number | 4 | Efficiency cleanup level (0-4) |
| onProcessing | function | - | Callback for timing and diff information |
| rendererClasses | object | - | CSS classes for diff highlighting |

Custom Rendering with Snippets

You can customize how the diff is rendered using Svelte snippets. This gives you full control over the HTML structure and styling of each diff part.

`svelte



{#snippet remove(text: string)}
{text}
{/snippet}
{#snippet insert(text: string)}
{text}
{/snippet}
{#snippet equal(text: string)}
{text}
{/snippet}
{#snippet lineBreak()}



{/snippet}



`

$3

| Snippet | Parameters | Description |
| --------- | ---------- | -------------------------------------------- |
| remove | text | Renders removed text (in originalText only) |
| insert | text | Renders inserted text (in modifiedText only) |
| equal | text | Renders unchanged text (in both texts) |
| lineBreak | - | Renders line breaks between diff sections |

You can use these snippets to:

- Customize the HTML structure of each diff part
- Apply custom styling to different types of changes
- Add additional elements or attributes
- Implement custom animations or transitions
- Add tooltips or other interactive elements

If you don't provide snippets, the component will use the default rendering with the rendererClasses prop.

Events

The component emits a processing event with timing and diff information:

`svelte



`

Cleanup Algorithms

$3

When cleanupSemantic is enabled, the diff algorithm will:

- Factor out commonalities that are likely to be coincidental
- Improve human readability of the diff
- May increase computation time for large texts

$3

The cleanupEfficiency level (0-4) controls how aggressively the algorithm:

- Factors out short commonalities
- Reduces computational overhead
- Higher values mean more aggressive cleanup

Performance Considerations

- For large texts, consider increasing the timeout value
- Use cleanupSemantic for better readability in small to medium texts
- Use cleanupEfficiency for better performance in large texts
- Monitor the onProcessing` callback for timing information

License

MIT © Humanspeak, Inc.

Credits

Made with ♥ by Humanspeak