Diffine

À propos de ce projet

Diffine cherche ce qui a changé entre deux versions et le met à l’écran, pour le texte et pour les images, en React et en Flutter. La comparaison et la vue forment une seule bibliothèque, et non un paquet de différences surmonté d’un afficheur : les deux moitiés se rejoignent sur une valeur. diffText renvoie des lignes, des modifications et des décomptes, et diffImage renvoie un masque, les zones modifiées sous forme de rectangles et les décomptes ; ni l’un ni l’autre ne contient de composant ou de widget. 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, exécutée dans un worker ou confrontée à un seuil pendant une compilation. Un patch au format unifié est lui aussi une comparaison : parsePatch le lit dans cette même valeur, et formatPatch en écrit un à partir d’elle.

Le texte est apparié à 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 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 un réglage muni d’une valeur par défaut : les numéros de ligne, le retour à la ligne, l’alignement, les traits, l’affichage unifié et le repli des lignes que personne n’a modifiées. Un mode d’édition pose un champ de saisie sur chaque panneau et refait la comparaison à chaque frappe. Les images se comparent côte à côte, en fondu l’une sur l’autre, par balayage ou par le masque seul, avec une tolérance, en ignorant le lissage laissé par un moteur de rendu, et en retrouvant le décalage entre deux captures qui ne sont pas alignées ; diffImages en compare plus de deux à la fois, et imageSimilarity répond par un seul nombre. 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 sur le web, et un seul import en Flutter. Chaque paquet a une seule dépendance : React ajoute highlight.js pour la coloration syntaxique, chargé une grammaire à la fois par un import dynamique, de sorte qu’une comparaison de texte brut n’en télécharge rien, et Flutter ajoute characters, que Flutter fournit déjà. react et react-dom sont des dépendances de pair, donc ce sont les copies déjà présentes dans l’application qui servent. Les deux paquets partagent le moteur et la palette jusqu’aux valeurs de couleur, et le thème sombre suit le réglage du système. Le paquet React est en ESM avec les déclarations TypeScript, et sa racine ne contient que le moteur, les vues se trouvant sous diffine-react/text-diff et diffine-react/image-diff : une application qui ne veut que la comparaison n’emporte aucune vue avec elle.

Fonctionnalités

• Site de documentation

• Types TypeScript

• Plusieurs langues

• Vérifié par des tests

• Multiplateforme

• Accessible par construction

• Mode sombre

• Compatible tree shaking