v-code-diff 1.8.0 → 1.9.0

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "v-code-diff",
-  "version": "1.8.0",
+  "type": "module",
+  "version": "1.9.0",
   "description": "template component for vue-demi, can dev and build",
+  "license": "MIT",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "require": "./dist/index.cjs.js",
-      "import": "./dist/index.es.js"
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
     }
   },
   "main": "dist/index.cjs",
   "module": "dist/index.es.js",
   "types": "./types/index.d.ts",
   "files": [
-    "scripts",
     "dist",
+    "scripts",
     "src",
     "types"
   ],
@@ -34,8 +36,7 @@
     "dev:demo": "vue-demi-switch 3 vue3 && pnpm --filter demo dev",
     "lint": "eslint .",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.ts,.tsx,json --fix --ignore-path .gitignore",
-    "postinstall": "node scripts/postinstall.js",
-    "prepublishOnly": "npm run build",
+    "postinstall": "node scripts/postinstall.cjs",
     "release": "bumpp --commit --no-push --tag && npm publish"
   },
   "peerDependencies": {
@@ -48,26 +49,27 @@
     }
   },
   "dependencies": {
-    "diff": "^5.0.0",
+    "diff": "^5.1.0",
     "diff-match-patch": "^1.0.5",
     "highlight.js": "^11.9.0",
-    "vue-demi": "^0.13.11"
+    "vue-demi": "^0.14.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.8",
+    "@antfu/eslint-config": "^2.4.5",
     "@types/diff": "^5.0.0",
     "@types/diff-match-patch": "^1.0.32",
     "@types/node": "^18.11.18",
-    "@vueuse/core": "^10.6.1",
+    "@unocss/eslint-plugin": "^0.58.0",
+    "@vueuse/core": "^10.7.0",
     "bumpp": "^8.2.1",
-    "eslint": "^8.45.0",
+    "eslint": "^8.55.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.63.6",
+    "sass": "^1.69.5",
     "typescript": "~4.7.4",
-    "vite": "^4.4.4",
+    "vite": "^4.5.1",
     "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vue": "^3.3.4",
+    "vue": "^3.3.11",
     "vue-tsc": "^0.40.13",
     "vue2": "npm:vue@2",
     "vue3": "npm:vue@3"

package/scripts/{postinstall.js → postinstall.cjs}

@@ -1,6 +1,5 @@
-// eslint-disable-next-line unicorn/prefer-node-protocol
 const fs = require('fs')
-const { switchVersion, loadModule } = require('./utils')
+const { switchVersion, loadModule } = require('./utils.cjs')
 
 const Vue = loadModule('vue')
 

package/scripts/{utils.js → utils.cjs}

@@ -1,6 +1,4 @@
-// eslint-disable-next-line unicorn/prefer-node-protocol
 const fs = require('fs')
-// eslint-disable-next-line unicorn/prefer-node-protocol
 const path = require('path')
 
 const dir = path.resolve(__dirname, '..', 'dist')

package/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)
@@ -95,10 +98,9 @@ watch(() => props, () => {
           <div class="info-left">{{ newFilename }}</div>
         </span>
         <span v-if="!hideStat" class="diff-stat">
-          <slot name="stat">
+          <slot name="stat" :stat="diffChange.stat">
             <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
-            <span class="diff-stat-deleted" style="margin-left: 8px;">-{{ diffChange.stat.deletionsNum }}
-              deletions</span>
+            <span class="diff-stat-deleted">-{{ diffChange.stat.deletionsNum }} deletions</span>
           </slot>
         </span>
       </div>
@@ -108,10 +110,9 @@ watch(() => props, () => {
         <span class="info-right">
           <span style="margin-left: 20px;">{{ newFilename }}</span>
           <span v-if="!hideStat" class="diff-stat">
-            <slot name="stat">
+            <slot name="stat" :stat="diffChange.stat">
               <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
-              <span class="diff-stat-deleted" style="margin-left: 8px;">-{{ diffChange.stat.deletionsNum }}
-                deletions</span>
+              <span class="diff-stat-deleted">-{{ diffChange.stat.deletionsNum }} deletions</span>
             </slot>
           </span>
         </span>

package/src/style.scss

@@ -29,21 +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 {
           color: var(--color-danger-emphasis);
         }
+        .diff-stat-ignored {
+          color: var(--color-fg-subtle);
+        }
       }
     }
   }

package/src/types.ts

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

package/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

package/types/index.d.ts

@@ -1,14 +1,15 @@
-import { HLJSApi } from "highlight.js"
-import { DefineComponent } from "vue-demi"
+import type { HLJSApi } from 'highlight.js'
+import type { DefineComponent } from 'vue-demi'
 
 declare const _default: {
-  install: (app: any) => void,
+  install: (app: any) => void
   hljs: HLJSApi
 }
 
+// eslint-disable-next-line
 declare const CodeDiff: DefineComponent<{}, {}, any>
 export {
-  CodeDiff
+  CodeDiff,
 }
 
 export default _default