Diffine

Об этом проекте

Diffine находит, что изменилось между двумя версиями, и выводит это на экран. Сравнение и отображение — один пакет, а не библиотека различий с приделанным сверху просмотрщиком: обе половины встречаются на значении. diffText сопоставляет стороны и возвращает строки, блоки и счётчики обычным объектом, внутри которого нет ни React, ни DOM. Просмотр — один из потребителей этого значения, а не единственный путь к нему, поэтому то же сравнение можно напечатать в терминале или передать куда-то ещё.

Сопоставление идёт в два уровня за один проход. Сначала строки собираются в пары, а затем внутри пары, которую изменили, а не заменили, отмечаются слова или символы, которые действительно сдвинулись: это разница между «строка другая» и «вот из-за какого слова». Просмотр рисует это на двух панелях, удерживаемых на одной высоте, с перемычками через промежуток, и каждая часть вида — свойство со значением по умолчанию: номера строк, перенос, выравнивание, перемычки, объединённый вид. Читать без мыши получается: каждая панель — область, принимающая фокус, у кнопок перехода к следующему изменению есть подписи, а об изменениях сообщается сразу же.

Установка — это пакет и одна строка CSS. Под ним нет ни библиотеки различий, ни редактора, ни CSS-фреймворка: список зависимостей времени выполнения пуст, а react и react-dom объявлены как peer-зависимости, поэтому используются те копии, которые у приложения уже есть. Таблица стилей не объявляет ничего за пределами своего элемента, так что её место в порядке импортов не имеет значения, а тёмная тема следует системной настройке или атрибуту, если приложение хочет решать само. Пакет собран в ESM с описаниями типов TypeScript, а у движка есть собственная точка входа, так что приложение, которому нужно только сравнение, не тянет за собой просмотр.

Возможности

• Сайт документации

• Типы TypeScript

• Несколько языков

• Проверено тестами

• Доступность из коробки

• Тёмная тема

• Поддержка tree shaking

• Без зависимостей