Diffine
Eine Diff-Maschine und eine Gegenüberstellung in einem einzigen React-Paket. Zwei Fassungen werden Zeile für Zeile einander zugeordnet und in den geänderten Zeilen dann Wort für Wort, und das Ergebnis wird mit beiden Seiten auf gleicher Höhe gezeichnet, sodass weder der Vergleich noch die Ausrichtung in der Anwendung selbst entstehen müssen.
Über dieses Projekt
Diffine ermittelt, was sich zwischen zwei Fassungen geändert hat, und bringt es auf den Bildschirm. Der Vergleich und die Ansicht sind ein Paket und nicht eine Diff-Bibliothek mit angeschraubter Darstellung; die beiden Hälften treffen sich an einem Wert. diffText ordnet die Seiten einander zu und gibt Zeilen, Blöcke und Zählungen als schlichtes Objekt zurück, ohne React und ohne DOM darin. Die Ansicht ist ein Verbraucher dieses Werts und nicht der einzige Weg zu ihm, derselbe Vergleich lässt sich also im Terminal ausgeben oder an etwas ganz anderes weiterreichen.
Zugeordnet wird in einem Durchgang auf zwei Ebenen. 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 — der Unterschied zwischen dem Wissen, dass eine Zeile anders ist, und dem Blick darauf, welches Wort sie anders macht. 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 Eigenschaft mit einem Vorgabewert: Zeilennummern, Umbruch, die Ausrichtung, die Verbindungen, die zusammengelegte Darstellung. 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 das Paket und eine Zeile CSS. Darunter liegt keine Diff-Bibliothek, keine Editor-Komponente und kein CSS-Framework: Die Liste der Laufzeitabhängigkeiten ist leer, und react und react-dom sind Peer-Abhängigkeiten, es werden also die Kopien benutzt, die die Anwendung ohnehin hat. Das Stylesheet erklärt nichts außerhalb des Elements, in das es zeichnet, seine Stelle in der Import-Reihenfolge spielt also keine Rolle, und der Dunkelmodus folgt der Systemeinstellung oder einem Attribut, wenn die Anwendung lieber selbst entscheidet. Das Paket ist reines ESM mit TypeScript-Deklarationen, und die Maschine hat einen eigenen Einstiegspunkt — eine Anwendung, die nur den Vergleich will, zieht die Ansicht nicht mit.
Funktionen
Dokumentationsseite
TypeScript-Typen
Mehrsprachig
Durch Tests geprüft
Barrierefrei gebaut
Dunkelmodus
Tree-shakebar
Ohne Abhängigkeiten