Diffine
Un moteur de comparaison et une vue côte à côte réunis dans un seul paquet React. Il apparie deux versions ligne à ligne, puis mot à mot à l’intérieur des lignes modifiées, et dessine le résultat en tenant les deux côtés à la même hauteur : l’application n’a ni la comparaison ni l’alignement à écrire.
À propos de ce projet
Diffine cherche ce qui a changé entre deux versions et le met à l’écran. La comparaison et la vue forment un seul paquet, et non une bibliothèque de différences surmontée d’un afficheur : les deux moitiés se rejoignent sur une valeur. diffText apparie les deux côtés et renvoie des lignes, des blocs et des décomptes dans un objet ordinaire, sans React et sans DOM dedans. La vue est l’un des usages de cette valeur et non le seul chemin qui y mène, si bien que la même comparaison peut être imprimée dans un terminal ou confiée à tout autre chose.
L’appariement se fait à deux niveaux en une seule passe. Les lignes sont d’abord mises par paires, puis, dans une paire modifiée plutôt que remplacée, ce sont les mots ou les caractères qui ont vraiment bougé : la différence entre savoir qu’une ligne a changé et voir quel mot l’a changée. La vue dessine cela sur deux panneaux tenus à la même hauteur, avec des traits qui franchissent l’écart, et chaque élément de la vue est une propriété munie d’une valeur par défaut : les numéros de ligne, le retour à la ligne, l’alignement, les traits, l’affichage unifié. La lecture sans souris fonctionne : chaque panneau est une région qui prend le focus, les boutons qui passent d’une modification à la suivante portent un intitulé, et ce qui a changé est annoncé dès que cela bouge.
L’installation, c’est le paquet et une ligne de CSS. Il n’y a en dessous ni bibliothèque de différences, ni composant d’édition, ni framework CSS : la liste des dépendances d’exécution est vide, et react et react-dom sont des dépendances de pair, donc ce sont les copies déjà présentes dans l’application qui servent. La feuille de style ne déclare rien en dehors de l’élément qu’elle dessine, sa place dans l’ordre des imports est donc sans importance, et le thème sombre suit le réglage du système, ou un attribut quand l’application préfère trancher elle-même. Le paquet est en ESM avec les déclarations TypeScript, et le moteur a son propre point d’entrée : une application qui ne veut que la comparaison n’emporte pas la vue avec elle.
Fonctionnalités
Site de documentation
Types TypeScript
Plusieurs langues
Vérifié par des tests
Accessible par construction
Mode sombre
Compatible tree shaking
Sans dépendances