Merge pull request #121 from Lruihao/master

增加支持 ignoreMatchingLines 属性

Author: Shimada666

README-zh.md

@@ -121,14 +121,23 @@ Vue.use(CodeDiff)
 | maxHeight      | 组件最大高度，例如 300px                                                                                                                | string    | -                          | undefined    |
 | filename       | 文件名                                                                                                                                  | string    | -                          | undefined    |
 | newFilename    | 新文件文件名                                                                                                                   | string    | -                          | undefined    |
+| hideHeader | 隐藏头部栏 | boolean | - | false |
+| hideStat | 隐藏头部栏中的统计信息 | boolean | - | false |
 | theme          | 用于切换日间模式/夜间模式                                                                                                               | ThemeType | light , dark               | light      |
+| ignoreMatchingLines | 给出一个模式来忽略匹配行，例如：'(time\|token)' | string | - |  |
 
 ## 组件事件
 
 | Name | Description     | Type                                                                            |
 | ---- | --------------- | ------------------------------------------------------------------------------- |
 | diff | diff 完成后触发 | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
 
+## 组件插槽
+
+| Name | Description                     |
+| ---- | ------------------------------- |
+| stat | 自定义统计内容，参数为 { stat } |
+
 ## 拓展高亮语言
 
 为了减小打包后的体积，系统默认仅支持以下常用语言

README.md

@@ -123,14 +123,23 @@ Not recommended, but the relevant capabilities are retained to facilitate migrat
 | maxHeight      | Maximum height of component, for example: 300px                                                                                                                         | string    | -                          | undefined     |
 | filename       | Filename                                                                                                                                                                | string    | -                          | undefined     |
 | newFilename    | New filename                                                                                                                                                            | string    | -                          | undefined     |
+| hideHeader | Hide header bar | boolean | - | false |
+| hideStat | Hide statistical part in the header bar | boolean | - | false |
 | theme          | Add dark mode                                                                                                                                                           | ThemeType | light , dark               | light       |
+| ignoreMatchingLines | Give a pattern to ignore matching lines eg: '(time\|token)' | string | - | undefined |
 
 ## Events
 
 | Name | Description                 | Type                                                                            |
 | ---- | --------------------------- | ------------------------------------------------------------------------------- |
 | diff | triggers when diff finished | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
 
+## Slot
+
+| Name | Description                                                 |
+| ---- | ----------------------------------------------------------- |
+| stat | Custom statistical content, The scope parameter is { stat } |
+
 ## Extend languages
 
 In order to reduce the size of the packaged file, the system only supports the following commonly used languages by

src/CodeDiff.vue

@@ -21,6 +21,8 @@ interface Props {
   hideHeader?: boolean
   hideStat?: boolean
   theme?: 'light' | 'dark'
+  // Give a pattern to ignore matching lines eg: '(time|token)'
+  ignoreMatchingLines?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -36,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
   hideHeader: false,
   hideStat: false,
   theme: 'light',
+  ignoreMatchingLines: undefined,
 })
 
 const emits = defineEmits<{
@@ -67,8 +70,8 @@ const newString = computed(() => {
 
 const raw = computed(() =>
   isUnifiedViewer.value
-    ? createUnifiedDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context)
-    : createSplitDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context),
+    ? createUnifiedDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context, props.ignoreMatchingLines)
+    : createSplitDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context, props.ignoreMatchingLines),
 )
 const diffChange = ref(raw.value)
 const isNotChanged = computed(() => diffChange.value.stat.additionsNum === 0 && diffChange.value.stat.deletionsNum === 0)

src/style.scss

@@ -29,22 +29,27 @@
       height: 24px;
 
       .info-left {
-        font-size: 13px;
         color: var(--color-fg-default);
       }
       .info-right {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         width: 50%;
       }
       .diff-stat {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
         .diff-stat-added {
           color: var(--color-diffstat-addition-bg);
         }
         .diff-stat-deleted {
-          margin-left: 8px;
           color: var(--color-danger-emphasis);
         }
+        .diff-stat-ignored {
+          color: var(--color-fg-subtle);
+        }
       }
     }
   }

src/types.ts

@@ -42,6 +42,8 @@ export interface UnifiedLineChange {
 export interface DiffStat {
   additionsNum: number
   deletionsNum: number
+  ignoreAdditionsNum: number
+  ignoreDeletionsNum: number
 }
 
 export interface SplitViewerChange {

src/utils.ts

@@ -135,19 +135,34 @@ function getHighlightCode(language: string, code: string) {
     .replace(new RegExp(closeEntity, 'g'), '</span>')
 }
 
-function calcDiffStat(changes: Change[]): DiffStat {
+function calcDiffStat(changes: Change[], ignoreRegex?: RegExp): DiffStat {
   const count = (s: string, c: string) => (s.match(new RegExp(c, 'g')) || []).length
+  const ignoreCount = (lines: string[]) => lines.filter(line => ignoreRegex?.test(line)).length
 
   let additionsNum = 0
   let deletionsNum = 0
+  let ignoreAdditionsNum = 0
+  let ignoreDeletionsNum = 0
   for (const change of changes) {
-    if (change.added)
-      additionsNum += count(change.value.trim(), '\n') + 1
-
-    if (change.removed)
-      deletionsNum += count(change.value.trim(), '\n') + 1
+    if (change.added) {
+      const ignoreNum = ignoreCount(change.value.trim().split('\n'))
+      additionsNum += count(change.value.trim(), '\n') + 1 - ignoreNum
+      ignoreAdditionsNum += ignoreNum
+      continue
+    }
+    if (change.removed) {
+      const ignoreNum = ignoreCount(change.value.trim().split('\n'))
+      deletionsNum += count(change.value.trim(), '\n') + 1 - ignoreNum
+      ignoreDeletionsNum += ignoreNum
+      continue
+    }
+  }
+  return {
+    additionsNum,
+    deletionsNum,
+    ignoreAdditionsNum,
+    ignoreDeletionsNum,
   }
-  return { additionsNum, deletionsNum }
 }
 
 export function createSplitDiff(
@@ -156,10 +171,12 @@ export function createSplitDiff(
   language = 'plaintext',
   diffStyle = 'word',
   context = 10,
+  ignoreMatchingLines?: string,
 ): SplitViewerChange {
   const newEmptySplitDiff = (): DiffLine => ({ type: DiffType.EMPTY })
   const newSplitDiff = (type: DiffType, num: number, code: string): DiffLine => ({ type, num, code })
   const changes = diffLines(oldString, newString)
+  const ignoreRegex = ignoreMatchingLines ? new RegExp(ignoreMatchingLines) : undefined
 
   let delNum = 0
   let addNum = 0
@@ -169,7 +186,7 @@ export function createSplitDiff(
   const result: SplitViewerChange = {
     changes: rawChanges,
     collector: [],
-    stat: calcDiffStat(changes),
+    stat: calcDiffStat(changes, ignoreRegex),
   }
 
   for (let i = 0; i < changes.length; i++) {
@@ -257,13 +274,17 @@ export function createSplitDiff(
           const leftLine = curLines.length === nextLines.length ? renderWords(nextLine, curLine, diffStyle) : curLine
           const rightLine = curLines.length === nextLines.length ? renderWords(curLine, nextLine, diffStyle) : nextLine
 
+          // 忽略匹配的行等价于相等
+          const leftDiffType = ignoreRegex?.test(curLine) ? DiffType.EQUAL : DiffType.DELETE
+          const rightDiffType = ignoreRegex?.test(nextLine) ? DiffType.EQUAL : DiffType.ADD
+
           const left
             = j < cur.count!
-              ? newSplitDiff(DiffType.DELETE, delNum, getHighlightCode(language, leftLine))
+              ? newSplitDiff(leftDiffType, delNum, getHighlightCode(language, leftLine))
               : newEmptySplitDiff()
           const right
             = j < next.count!
-              ? newSplitDiff(DiffType.ADD, addNum, getHighlightCode(language, rightLine))
+              ? newSplitDiff(rightDiffType, addNum, getHighlightCode(language, rightLine))
               : newEmptySplitDiff()
 
           rawChanges.push({ left, right })
@@ -341,8 +362,10 @@ export function createUnifiedDiff(
   language = 'plaintext',
   diffStyle = 'word',
   context = 10,
+  ignoreMatchingLines?: string,
 ): UnifiedViewerChange {
   const changes = diffLines(oldString, newString)
+  const ignoreRegex = ignoreMatchingLines ? new RegExp(ignoreMatchingLines) : undefined
 
   let delNum = 0
   let addNum = 0
@@ -352,7 +375,7 @@ export function createUnifiedDiff(
   const result: UnifiedViewerChange = {
     changes: rawChanges,
     collector: [],
-    stat: calcDiffStat(changes),
+    stat: calcDiffStat(changes, ignoreRegex),
   }
 
   for (let i = 0; i < changes.length; i++) {
@@ -414,7 +437,11 @@ export function createUnifiedDiff(
           delNum++
 
           const code = getHighlightCode(language, renderWords(nextLine, curLine, diffStyle))
-          rawChanges.push({ type: DiffType.DELETE, code, delNum })
+          rawChanges.push({
+            type: ignoreRegex?.test(curLine) ? DiffType.EQUAL : DiffType.DELETE,
+            code,
+            delNum,
+          })
         }
 
         for (let j = 0; j < nextLines.length; j++) {
@@ -423,7 +450,11 @@ export function createUnifiedDiff(
           addNum++
 
           const code = getHighlightCode(language, renderWords(curLine, nextLine, diffStyle))
-          rawChanges.push({ type: DiffType.ADD, code, addNum })
+          rawChanges.push({
+            type: ignoreRegex?.test(nextLine) ? DiffType.EQUAL : DiffType.ADD,
+            code,
+            addNum,
+          })
         }
 
         skip = true

vue2-playground/App.vue

@@ -2,10 +2,11 @@
 import { reactive, version } from 'vue-demi'
 
 const form = reactive({
-  oldString: '<script setup lang="ts">',
-  newString: '<script lang="ts" setup>',
-  language: 'python',
+  oldString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "往者不可谏，来者犹可追。",\n    "from": "论语·微子篇"\n  },\n  "time": "2024-01-12 17:27:03"\n}',
+  newString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "成熟的人眼里满是前途，稚嫩的人眼里满是爱恨情仇。",\n    "from": "网易云热评"\n  },\n  "time": "2024-01-12 17:27:06"\n}',
+  language: 'json',
   diffStyle: 'word',
+  ignoreMatchingLines: 'time',
 })
 </script>
 
@@ -21,6 +22,7 @@ const form = reactive({
       :new-string="form.newString"
       :language="form.language"
       :diff-style="form.diffStyle"
+      :ignore-matching-lines="form.ignoreMatchingLines"
       output-format="side-by-side"
     />
   </div>

vue2.7-playground/App.vue

@@ -3,10 +3,11 @@ import { version } from 'vue-demi'
 import { reactive } from 'vue'
 
 const form = reactive({
-  oldString: '<script setup lang="ts">',
-  newString: '<script lang="ts" setup>',
-  language: 'python',
+  oldString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "往者不可谏，来者犹可追。",\n    "from": "论语·微子篇"\n  },\n  "time": "2024-01-12 17:27:03"\n}',
+  newString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "成熟的人眼里满是前途，稚嫩的人眼里满是爱恨情仇。",\n    "from": "网易云热评"\n  },\n  "time": "2024-01-12 17:27:06"\n}',
+  language: 'json',
   diffStyle: 'word',
+  ignoreMatchingLines: 'time',
 })
 </script>
 
@@ -22,6 +23,7 @@ const form = reactive({
       :new-string="form.newString"
       :language="form.language"
       :diff-style="form.diffStyle"
+      :ignore-matching-lines="form.ignoreMatchingLines"
       output-format="side-by-side"
     />
   </div>

vue3-playground/App.vue

@@ -8,13 +8,14 @@ import { reactive } from 'vue'
 const form = reactive({
   // oldString: oldLongText,
   // newString: newLongText,
-  oldString: '123\n123\n123\n456\n123\n123\n123\n123\n123\n123\n123\n',
-  newString: '123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n',
+  oldString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "往者不可谏，来者犹可追。",\n    "from": "论语·微子篇"\n  },\n  "time": "2024-01-12 17:27:03"\n}',
+  newString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "成熟的人眼里满是前途，稚嫩的人眼里满是爱恨情仇。",\n    "from": "网易云热评"\n  },\n  "time": "2024-01-12 17:27:06"\n}',
   filename: 'oldFile',
   newFilename: 'newFile',
-  language: 'plaintext',
+  language: 'json',
   diffStyle: 'word',
-  outputFormat: 'line-by-line',
+  outputFormat: 'site-by-site',
+  ignoreMatchingLines: 'time',
   context: 3,
 })
 </script>
@@ -34,6 +35,7 @@ const form = reactive({
     :new-filename="form.newFilename"
     :language="form.language"
     :output-format="form.outputFormat"
+    :ignore-matching-lines="form.ignoreMatchingLines"
     :diff-style="form.diffStyle"
     :context="form.context"
   />