Diffine

關於這個專案

Diffine 找出兩個版本之間改了什麼，並把結果畫到畫面上，文字與圖片都可以，React 與 Flutter 都能用。比較與檢視是同一個函式庫，而不是在差異套件上面再架一個檢視器，兩半相接的地方是一個值：diffText 回傳列、變更與計數，diffImage 回傳一張遮罩、以矩形表示的變更區域與計數，兩者裡面都沒有任何元件或 widget。檢視只是這個值的一個使用者，而不是通往它的唯一路徑，所以同一份比較結果可以印到終端機、放到 worker 裡執行，或在建置時拿去與門檻值比對。unified 格式的修補檔也是一份比較結果：parsePatch 把修補檔讀成同一種值，formatPatch 再把它寫回修補檔。

文字的對齊在一次走訪裡分兩層完成。先把行兩兩配對，再在被改動而非被取代的一對裡，標出真正移動過的詞或字。檢視把結果畫在保持同高的兩塊面板上，中間的空隙用連線接起來；行號、換行、對齊、連線、合併為一欄的排版，以及把沒人改過的行摺疊起來，檢視的每一部分都是帶預設值的設定。編輯器模式會在每塊面板上疊一個輸入欄，每按一個鍵就重新算一次比較。圖片可以並排比較、半透明地疊在一起、用一條分界線掃過去對照，或只看遮罩，還能設定容許誤差、忽略算繪器留下的平滑差異，並為沒有對齊的兩張圖找出位移；diffImages 一次比較三張或更多，imageSimilarity 則以一個數字作答。不用滑鼠也讀得下來：兩塊面板都是能取得焦點的區域，在改動之間來回跳的按鈕都有名稱，改了什麼會在變化時讀出來。

在 Web 上，安裝就是一個套件加一行 CSS；在 Flutter 裡，只需一行 import。每個套件都只有一個相依：React 套件帶上 highlight.js 做語法突顯，各語言的語法定義透過動態匯入逐一載入，所以純文字比較一點也不會下載；Flutter 套件帶上 characters，而它本來就隨 Flutter 附帶。react 與 react-dom 是同層相依，用的是應用程式裡已有的那份。兩個套件共用同一個引擎與同一套配色，連色彩值都相同，深色配色跟隨系統設定。React 套件是 ESM，附 TypeScript 型別宣告，根入口只有引擎，檢視放在 diffine-react/text-diff 與 diffine-react/image-diff 底下，只需要比較結果的應用程式不會把檢視一併拉進來。

功能

• 文件網站

• TypeScript 型別

• 多語言支援

• 經測試驗證

• 跨平台支援

• 內建無障礙支援

• 深色模式

• 支援搖樹優化