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 类型

• 多语言支持

• 经测试验证

• 跨平台支持

• 内置无障碍支持

• 深色模式

• 支持摇树优化