Diffine

Sobre este proyecto

Diffine averigua qué cambió entre dos versiones y lo pone en pantalla, para texto y para imágenes, en React y en Flutter. La comparación y la vista son una misma biblioteca y no un paquete de diferencias con un visor añadido encima; las dos mitades se encuentran en un valor. diffText devuelve filas, cambios y recuentos, y diffImage devuelve una máscara, las regiones cambiadas como rectángulos y los recuentos, sin ningún componente ni widget en ninguno de los dos. 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, ejecutarse en un worker o comprobarse frente a un umbral durante una compilación. Un parche unificado también es una comparación: parsePatch lee uno y lo convierte en ese mismo valor, y formatPatch lo vuelve a escribir.

El texto se empareja 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 editada y no sustituida, las palabras o los caracteres que de verdad se movieron. 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 opción con su valor por defecto: los números de línea, el ajuste de texto, la alineación, los conectores, la vista unificada y el plegado de las líneas que nadie editó. Un modo de edición coloca un campo sobre cada panel y vuelve a calcular la comparación con cada pulsación de tecla. Las imágenes se comparan lado a lado, fundidas una sobre otra, con una cortina deslizante o solo con la máscara, y la comparación admite una tolerancia, ignora el suavizado que deja un renderizador y encuentra el desplazamiento entre dos capturas que no están alineadas; diffImages compara más de dos a la vez, e imageSimilarity responde con un único número. 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 en la web, y una importación en Flutter. Cada paquete tiene una sola dependencia: el de React añade highlight.js para el resaltado de sintaxis, que se carga gramática a gramática mediante una importación dinámica para que una comparación de texto plano no descargue nada de él, y el de Flutter añade characters, que Flutter ya incluye. react y react-dom son dependencias de pares, así que se usan las copias que la aplicación ya tiene. Los dos paquetes comparten el motor y la paleta, hasta el último valor de color, y el tema oscuro sigue la preferencia del sistema. El paquete de React es ESM con declaraciones de TypeScript, y su raíz es solo el motor, con los visores en diffine-react/text-diff y diffine-react/image-diff, así que una aplicación que solo quiere la comparación no arrastra ningún visor con ella.

Características

• Sitio de documentación

• Tipos de TypeScript

• Varios idiomas

• Verificado con pruebas

• Multiplataforma

• Accesible de fábrica

• Modo oscuro

• Admite tree shaking