Diffine

프로젝트 소개

Diffine은 두 버전 사이에서 무엇이 바뀌었는지 찾아내 화면에 올립니다. 비교와 화면이 따로 있는 것이 아니라 한 패키지이고, 둘이 만나는 지점은 값입니다. diffText는 양쪽을 맞춘 뒤 행과 블록과 개수를 평범한 객체로 돌려주며, 그 안에는 React도 DOM도 없습니다. 뷰어는 그 값을 쓰는 하나의 소비자일 뿐 값에 닿는 유일한 길이 아니므로, 같은 비교 결과를 터미널에 출력하거나 다른 곳으로 넘길 수 있습니다.

맞추는 일은 한 번에 두 단계로 이뤄집니다. 먼저 줄끼리 짝을 짓고, 통째로 바뀐 것이 아니라 고쳐진 짝 안에서는 실제로 움직인 단어나 글자를 다시 짚습니다. 줄이 다르다는 것을 아는 일과 어느 단어 때문에 달라졌는지 보는 일은 다릅니다. 뷰어는 그 결과를 같은 높이로 붙든 두 화면에 그리고 사이의 빈 곳을 선으로 잇는데, 줄 번호와 줄 바꿈, 높이 맞춤, 연결선, 한 화면으로 합친 배치까지 화면을 이루는 모든 요소가 기본값을 가진 속성입니다. 마우스 없이도 읽을 수 있습니다. 양쪽 화면은 초점을 받는 영역이고, 변경 지점을 하나씩 오가는 버튼에는 이름이 붙어 있으며, 무엇이 바뀌었는지는 바뀔 때마다 읽어 줍니다.

설치는 패키지 하나와 CSS 한 줄입니다. 아래에 깔린 diff 라이브러리도, 편집기 컴포넌트도, CSS 프레임워크도 없습니다. 런타임 의존성 목록은 비어 있고 react와 react-dom은 peer 의존성이라, 애플리케이션이 이미 가진 것을 그대로 씁니다. 스타일시트는 자기가 그리는 요소 바깥으로는 아무것도 선언하지 않으므로 어느 순서로 불러오든 상관없고, 어두운 화면은 시스템 설정을 따르거나 애플리케이션이 직접 정하고 싶을 때는 속성으로 정합니다. 패키지는 ESM이고 TypeScript 타입 정의를 함께 담고 있으며, 엔진에는 별도의 진입점이 있어서 비교 결과만 필요한 애플리케이션이 뷰어까지 끌고 오지 않습니다.

기능

• 문서 지원

• TypeScript 지원

• 다국어 지원

• 테스트로 검증됨

• 접근성 지원

• 다크 모드

• 트리 셰이킹 지원

• 의존성 없음