Diffine

프로젝트 소개

Diffine은 두 버전 사이에서 무엇이 바뀌었는지 찾아내 화면에 올립니다. 텍스트와 그림을 모두 다루고, React와 Flutter에서 씁니다. 비교와 화면이 따로 있는 것이 아니라 한 라이브러리이고, 둘이 만나는 지점은 값입니다. diffText는 행과 변경 내용, 개수를 돌려주고, diffImage는 마스크와 바뀐 영역을 담은 사각형, 개수를 돌려주며, 어느 쪽에도 컴포넌트나 위젯은 없습니다. 뷰어는 그 값을 쓰는 하나의 소비자일 뿐 값에 닿는 유일한 길이 아니므로, 같은 비교 결과를 터미널에 출력하거나 워커에서 돌리거나 빌드에서 기준값과 견줄 수 있습니다. unified 패치도 하나의 비교 결과입니다. parsePatch는 패치를 같은 값으로 읽어 들이고, formatPatch는 그 값을 다시 패치로 써 냅니다.

텍스트는 한 번에 두 단계로 맞춥니다. 먼저 줄끼리 짝을 짓고, 통째로 바뀐 것이 아니라 고쳐진 짝 안에서는 실제로 움직인 단어나 글자를 다시 짚습니다. 뷰어는 그 결과를 같은 높이로 붙든 두 화면에 그리고 사이의 빈 곳을 선으로 잇는데, 줄 번호와 줄 바꿈, 높이 맞춤, 연결선, 한 화면으로 합친 배치, 아무도 고치지 않은 줄 접기까지 화면을 이루는 모든 요소가 기본값을 가진 설정입니다. 편집 모드는 양쪽 화면 위에 입력 필드를 얹고, 글자를 칠 때마다 비교를 다시 계산합니다. 그림은 나란히 놓거나, 겹쳐 흐리게 하거나, 쓸어 넘기거나, 마스크만 따로 보는 방식으로 비교합니다. 허용 오차를 정할 수 있고, 렌더러가 가장자리를 부드럽게 처리하며 남긴 차이는 무시하며, 위치가 어긋난 두 스크린숏 사이의 간격을 찾아 맞춥니다. diffImages는 셋 이상을 한 번에 비교하고, imageSimilarity는 숫자 하나로 답합니다. 마우스 없이도 읽을 수 있습니다. 양쪽 화면은 초점을 받는 영역이고, 변경 지점을 하나씩 오가는 버튼에는 이름이 붙어 있으며, 무엇이 바뀌었는지는 바뀔 때마다 읽어 줍니다.

웹에서는 패키지 하나와 CSS 한 줄, Flutter에서는 import 한 줄이면 설치가 끝납니다. 패키지마다 의존성은 하나입니다. React 쪽은 구문 강조를 위해 highlight.js를 쓰는데, 동적 import로 문법을 하나씩 불러오므로 일반 텍스트만 비교하는 페이지는 아무것도 내려받지 않습니다. Flutter 쪽은 Flutter에 이미 들어 있는 characters를 씁니다. react와 react-dom은 peer 의존성이라, 애플리케이션이 이미 가진 것을 그대로 씁니다. 두 패키지는 엔진과 팔레트를 색상 값까지 똑같이 나눠 쓰고, 어두운 화면은 시스템 설정을 따릅니다. React 패키지는 ESM이고 TypeScript 타입 정의를 함께 담고 있으며, 패키지 루트에는 엔진만 있고 뷰어는 diffine-react/text-diff와 diffine-react/image-diff에 따로 있어서, 비교 결과만 필요한 애플리케이션이 뷰어까지 끌고 오지 않습니다.

기능

• 문서 지원

• TypeScript 지원

• 다국어 지원

• 테스트로 검증됨

• 크로스플랫폼 지원

• 접근성 지원

• 다크 모드

• 트리 셰이킹 지원