Diffine

このプロジェクトについて

Diffine は、二つの版のあいだで何が変わったかを求めて画面に載せます。比較と表示が別々にあるのではなくひとつのパッケージで、両者が出会う場所は値です。diffText は左右を対応づけ、行とブロックと件数をただのオブジェクトとして返します。その中に React も DOM もありません。ビューアーはその値を使う一つの消費者であって、値にたどり着く唯一の道ではないので、同じ比較結果を端末に出力することも、別のどこかに渡すこともできます。

対応づけは一度の走査で二つの段階に分かれます。まず行どうしを組にし、丸ごと置き換わったのではなく直された組の中では、実際に動いた語や文字をもう一度拾います。行が違うと知ることと、どの語のせいで違うのかを見ることは別のことです。ビューアーはそれを、同じ高さに保った二つの面に描き、あいだの隙間を線でつなぎます。行番号、折り返し、高さの揃え、つなぎの線、ひとつにまとめた表示——表示を作るものはどれも既定値を持つプロパティです。マウスがなくても読めます。左右の面は焦点を受け取る領域であり、変更点を一つずつたどるボタンには名前がついていて、何が変わったかは変わるたびに読み上げられます。

導入はパッケージ一つと CSS 一行です。下敷きにした差分ライブラリも、エディターの部品も、CSS フレームワークもありません。ランタイム依存の一覧は空で、react と react-dom はピア依存なので、アプリケーションがすでに持っているものがそのまま使われます。スタイルシートは自分が描く要素の外には何も宣言しないため、読み込みの順番のどこに置いても構いません。暗い配色は端末の設定に従い、アプリケーションが自分で決めたいときは属性で決めます。パッケージは ESM で TypeScript の型定義つき、エンジンには独立した入り口があるので、比較結果だけが欲しいアプリケーションがビューアーまで引き連れてくることはありません。

機能

• ドキュメントサイトあり

• TypeScript 型定義

• 多言語対応

• テストで検証済み

• アクセシビリティ対応

• ダークモード

• ツリーシェイキング対応

• 依存関係なし