Diffine
Un motor de comparación y un visor a dos columnas en un solo paquete de React. Empareja dos versiones línea por línea y, dentro de las líneas que cambiaron, palabra por palabra, y dibuja el resultado con ambos lados a la misma altura, de modo que la aplicación no tiene que construir ni la comparación ni la alineación.
Sobre este proyecto
Diffine averigua qué cambió entre dos versiones y lo pone en pantalla. La comparación y la vista son un mismo paquete y no una biblioteca de diferencias con un visor añadido encima; las dos mitades se encuentran en un valor. diffText empareja los dos lados y devuelve filas, bloques y recuentos como un objeto corriente, sin React y sin DOM dentro. El visor es uno de los consumidores de ese valor y no la única manera de llegar a él, así que la misma comparación puede imprimirse en una terminal o entregarse a otra cosa.
El emparejamiento ocurre en dos niveles y en una sola pasada. Primero se unen las líneas por parejas y después, dentro de una pareja que fue modificada y no sustituida, las palabras o los caracteres que de verdad se movieron: la diferencia entre saber que una línea es distinta y ver qué palabra la hizo distinta. El visor dibuja eso en dos paneles sostenidos a la misma altura, con conectores sobre el hueco, y cada parte de la vista es una propiedad con su valor por defecto: los números de línea, el ajuste de texto, la alineación, los conectores, la vista unificada. Se puede leer sin ratón, porque cada panel es una región que recibe el foco, los botones que avanzan de un cambio al siguiente llevan etiqueta, y lo que cambió se anuncia en cuanto se mueve.
La instalación es el paquete y una línea de CSS. Debajo no hay ninguna biblioteca de diferencias, ni un componente de edición, ni un framework de CSS: la lista de dependencias de ejecución está vacía, y react y react-dom son dependencias de pares, así que se usan las copias que la aplicación ya tiene. La hoja de estilos no declara nada fuera del elemento sobre el que dibuja, de modo que da igual dónde quede en el orden de importación, y el tema oscuro sigue la preferencia del sistema, o un atributo cuando la aplicación prefiere decidirlo. El paquete es ESM con declaraciones de TypeScript, y el motor tiene su propio punto de entrada, así que una aplicación que solo quiere la comparación no arrastra el visor con ella.
Características
Sitio de documentación
Tipos de TypeScript
Varios idiomas
Verificado con pruebas
Accesible de fábrica
Modo oscuro
Admite tree shaking
Sin dependencias