logo svelte /diff v0.4.3

Code Diff

FIG-001/ READABILITY

compare code.

Each complete source is highlighted before composing character, word, or line diffs. Comments and strings keep their syntax context. Register only the languages you use.

  • The optional /code entry requires TanStack Highlight. The ordinary package root remains independent.
  • Source is literal, including regex capture groups and HTML. Theme CSS controls syntax colors; diff backgrounds use CSS variables.
↩ all examples
modes · 3input · editable mode · live running source
Try a change
original source
modified source

Combined diff

RemovedInserted
type User = { name: string; active: boolean }

export function loadTeam(ids: string[]): Promise<User[]> {
    // Fetch each teammate, then keep the active ones.
    return Promise.all(ids.map(id =>
        fetch('/api/users/' + id).then(res => res.json())
    )).then(users => users.filter(user => user.active));
export async function loadTeam(ids: string[]): Promise<User[]> {
    // Fetch in parallel; fail early on a bad response.
    const users = await Promise.all(ids.map(async id => {
        const res = await fetch(`/api/users/${encodeURIComponent(id)}`);
        if (!res.ok) throw new Error(`User ${id}: ${res.status}`);
        return await res.json() as User;
    }));
    return users.filter(({ active }) => active);
}
Async refactor Watch the change unfold
category · readability
sheet · sheet 01 / 01
⟳ to re-run