Diffine
Um motor de comparação e um visualizador lado a lado num único pacote React. Emparelha duas versões linha a linha e, dentro das linhas alteradas, palavra a palavra, e desenha o resultado com os dois lados à mesma altura, pelo que a aplicação não tem de construir nem a comparação nem o alinhamento.
Sobre este projeto
O Diffine descobre o que mudou entre duas versões e põe isso no ecrã. A comparação e a vista são um só pacote, e não uma biblioteca de diferenças com um visualizador por cima: as duas metades encontram-se num valor. O diffText emparelha os dois lados e devolve linhas, blocos e contagens como um objeto simples, sem React e sem DOM lá dentro. A vista é um dos consumidores desse valor e não o único caminho até ele, pelo que a mesma comparação pode ser impressa num terminal ou entregue a outra coisa qualquer.
O emparelhamento acontece em dois níveis, numa só passagem. Primeiro juntam-se as linhas aos pares e depois, dentro de um par que foi alterado e não substituído, as palavras ou os caracteres que se moveram mesmo: a diferença entre saber que uma linha está diferente e ver que palavra a tornou diferente. A vista desenha isso em dois painéis mantidos à mesma altura, com ligações sobre o intervalo, e cada parte dela é uma propriedade com um valor por omissão: os números de linha, a mudança de linha, o alinhamento, as ligações, a vista unificada. Ler sem rato resulta, porque cada painel é uma região que recebe o foco, os botões que saltam de uma alteração para a seguinte têm um nome, e o que mudou é anunciado assim que se mexe.
A instalação é o pacote e uma linha de CSS. Por baixo não há biblioteca de diferenças, nem componente de edição, nem framework de CSS: a lista de dependências de execução está vazia, e o react e o react-dom são dependências de par, portanto usam-se as cópias que a aplicação já tem. A folha de estilos não declara nada fora do elemento onde desenha, pelo que o sítio que ocupa na ordem das importações é indiferente, e o tema escuro segue a definição do sistema, ou um atributo quando a aplicação prefere decidir. O pacote é ESM com declarações de TypeScript, e o motor tem um ponto de entrada próprio, pelo que uma aplicação que só quer a comparação não arrasta o visualizador atrás de si.
Funcionalidades
Site de documentação
Tipos de TypeScript
Vários idiomas
Verificado por testes
Acessível de origem
Modo escuro
Permite tree shaking
Sem dependências