Diffine

Über dieses Projekt

Diffine ermittelt, was sich zwischen zwei Fassungen geändert hat, und bringt es auf den Bildschirm, für Text und für Bilder, in React und in Flutter. Der Vergleich und die Ansicht sind eine Bibliothek und nicht ein Diff-Paket mit angeschraubter Darstellung; die beiden Hälften treffen sich an einem Wert. diffText gibt Zeilen, Änderungen und Zählungen zurück, diffImage eine Maske, die geänderten Bereiche als Rechtecke und die Zählungen, und in keinem der beiden steckt eine Komponente oder ein Widget. Die Ansicht ist ein Verbraucher dieses Werts und nicht der einzige Weg zu ihm, derselbe Vergleich lässt sich also im Terminal ausgeben, in einem Worker ausführen oder in einem Build gegen einen Schwellenwert prüfen. Auch ein Patch im Unified-Format ist ein Vergleich: parsePatch liest ihn in denselben Wert ein, und formatPatch macht aus dem Wert wieder einen Patch.

Text wird in einem Durchgang auf zwei Ebenen zugeordnet. Zuerst werden Zeilen zu Paaren gebunden, und in einem Paar, das geändert und nicht ersetzt wurde, danach die Wörter oder Zeichen, die sich wirklich bewegt haben. Die Ansicht zeichnet das auf zwei Flächen, die auf gleicher Höhe gehalten werden, mit Verbindungen über den Zwischenraum, und jeder Teil davon ist eine Einstellung mit einem Vorgabewert: Zeilennummern, Umbruch, die Ausrichtung, die Verbindungen, die zusammengelegte Darstellung und das Einklappen der Zeilen, die niemand geändert hat. Ein Editormodus legt über jede Fläche ein Eingabefeld und rechnet den Vergleich bei jedem Tastendruck neu aus. Bilder werden nebeneinander, überblendet, per Wischblende oder als bloße Maske verglichen. Dabei gilt eine Toleranz, die Glättung, die ein Renderer hinterlässt, wird übergangen, und zwischen zwei Aufnahmen, die nicht deckungsgleich sind, wird der Versatz ermittelt; diffImages vergleicht mehr als zwei auf einmal, und imageSimilarity antwortet mit einer einzigen Zahl. Lesen ohne Maus funktioniert, denn jede Fläche ist ein Bereich, der den Fokus annimmt, die Schaltflächen von einer Änderung zur nächsten sind beschriftet, und was sich geändert hat, wird angesagt, sobald es sich bewegt.

Die Einrichtung ist im Web das Paket und eine Zeile CSS, in Flutter ein einziger Import. Jedes Paket hat eine einzige Abhängigkeit: React bringt highlight.js für die Syntaxhervorhebung mit, das Grammatik für Grammatik über einen dynamischen Import nachgeladen wird, sodass ein Vergleich von reinem Text nichts davon herunterlädt, und Flutter bringt characters mit, das Flutter schon selbst ausliefert. react und react-dom sind Peer-Abhängigkeiten, es werden also die Kopien benutzt, die die Anwendung ohnehin hat. Die beiden Pakete teilen sich die Maschine und die Palette bis hin zu den Farbwerten, und der Dunkelmodus folgt der Systemeinstellung. Das React-Paket ist reines ESM mit TypeScript-Deklarationen, und sein Haupteinstiegspunkt enthält allein die Maschine, während die Ansichten unter diffine-react/text-diff und diffine-react/image-diff liegen — eine Anwendung, die nur den Vergleich will, zieht keine Ansicht mit.

Funktionen

• Dokumentationsseite

• TypeScript-Typen

• Mehrsprachig

• Durch Tests geprüft

• Plattformübergreifend

• Barrierefrei gebaut

• Dunkelmodus

• Tree-shakebar