Diffine

關於這個專案

Diffine 找出兩個版本之間改了什麼，並把結果畫到畫面上。比較與檢視是同一個套件，而不是在差異函式庫上面再架一個檢視器，兩半相接的地方是一個值：diffText 把兩邊對上，回傳列、區塊與計數，是一個普通物件，裡面既沒有 React 也沒有 DOM。檢視只是這個值的一個使用者，而不是通往它的唯一路徑，所以同一份比較結果可以印到終端機，也可以交給別處。

對齊在一次走訪裡分兩層完成。先把行兩兩配對，再在被改動而非被取代的一對裡，標出真正移動過的詞或字。知道這一行不一樣，和看清是哪個詞讓它不一樣，是兩回事。檢視把結果畫在保持同高的兩塊面板上，中間的空隙用連線接起來；行號、換行、對齊、連線、合併為一欄的排版，檢視的每一部分都是帶預設值的屬性。不用滑鼠也讀得下來：兩塊面板都是能取得焦點的區域，在改動之間來回跳的按鈕都有名稱，改了什麼會在變化時讀出來。

安裝就是一個套件加一行 CSS。底下沒有差異函式庫，沒有編輯器元件，也沒有 CSS 框架：執行時期相依列表是空的，react 與 react-dom 是同層相依，用的是應用程式裡已有的那份。樣式表不會在它所繪製的元素之外宣告任何東西，放在匯入順序的哪個位置都無所謂；深色配色跟隨系統設定，應用程式想自己決定時則由一個屬性決定。套件是 ESM，附 TypeScript 型別宣告，引擎另有自己的入口，只需要比較結果的應用程式不會把檢視一併拉進來。

功能

• 文件網站

• TypeScript 型別

• 多語言支援

• 經測試驗證

• 內建無障礙支援

• 深色模式

• 支援搖樹優化

• 零相依套件