背景

业界已有成熟的 rtfpessoa/diff2html，可以将 Git Diff 转换为 HTML，并支持单列、双列和文件摘要等展示方式。

问题：diff行数过多卡顿。diff文件过多卡顿；

wtool-vdiff

demo地址：https://defghy.github.io/web-toolkits/v-diff/

基于这些问题，实现大量文件diff的库：wtool-vdiff

基于 Monaco 封装，单文件 & 文件列表 都支持虚拟滚动；monaco DiffViewer本身不支持patch，vdiff增加了patch支持

使用

安装：

pnpm add @yuhufe/wtool-vdiff

页面准备一个容器，然后传入 patch：

<div id="diff"></div>

import { createDiffViewer } from '@yuhufe/wtool-vdiff'

createDiffViewer(document.querySelector('#diff')!, {
  diffPatch: `--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,2 @@
-const version = 1
+const version = 2
 export { version }`,
})

文件列表diff

<div id="diff-files" style="height: 560px"></div>

import { createDiffFiles } from '@yuhufe/wtool-vdiff'

createDiffFiles(document.querySelector('#diff-files')!, {
  diffFiles: [
    {
      fullPath: 'src/index.ts',
      diffPatch: `--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1 @@
-export const version = 1
+export const version = 2`,
    },
    {
      fullPath: 'src/sum.ts',
      diffPatch: `--- a/src/sum.ts
+++ b/src/sum.ts
@@ -1 +1 @@
-export const sum = (a, b) => a + b
+export const sum = (a: number, b: number) => a + b`,
    },
  ],
})

库通过 Web Component 封装，可以用同样的方式接入 Vue、React 或原生 JavaScript 项目。

Demo

https://defghy.github.io/web-toolkits/v-diff/