v-code-diff 1.7.2 → 1.9.0

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "v-code-diff",
-  "version": "1.7.2",
+  "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,25 +49,27 @@
     }
   },
   "dependencies": {
-    "diff": "^5.0.0",
+    "diff": "^5.1.0",
     "diff-match-patch": "^1.0.5",
-    "highlight.js": "^11.6.0",
-    "vue-demi": "^0.13.11"
+    "highlight.js": "^11.9.0",
+    "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",
+    "@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

@@ -5,7 +5,6 @@ import UnifiedViewer from './unified/UnifiedViewer.vue'
 import SplitViewer from './split/SplitViewer.vue'
 
 import './style.scss'
-import 'highlight.js/scss/vs.scss'
 
 interface Props {
   newString: string
@@ -18,16 +17,12 @@ interface Props {
   noDiffLineFeed?: boolean
   maxHeight?: string
   filename?: string
+  newFilename?: string
   hideHeader?: boolean
   hideStat?: boolean
-}
-
-interface DiffResult {
-  stat: {
-    isChanged: boolean
-    addNum: number
-    delNum: number
-  }
+  theme?: 'light' | 'dark'
+  // Give a pattern to ignore matching lines eg: '(time|token)'
+  ignoreMatchingLines?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -39,14 +34,25 @@ const props = withDefaults(defineProps<Props>(), {
   noDiffLineFeed: false,
   maxHeight: undefined,
   filename: undefined,
+  newFilename: undefined,
   hideHeader: false,
   hideStat: false,
+  theme: 'light',
+  ignoreMatchingLines: undefined,
 })
 
 const emits = defineEmits<{
   (e: 'diff', diffResult: DiffResult): void
 }>()
 
+interface DiffResult {
+  stat: {
+    isChanged: boolean
+    addNum: number
+    delNum: number
+  }
+}
+
 const isUnifiedViewer = computed(() => props.outputFormat === 'line-by-line')
 
 const oldString = computed(() => {
@@ -64,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)
@@ -83,13 +89,32 @@ watch(() => props, () => {
 </script>
 
 <template>
-  <div class="code-diff-view" :style="{ maxHeight }">
+  <div class="code-diff-view" :theme="theme" :style="{ maxHeight }">
     <div v-if="!hideHeader" class="file-header">
-      <div class="file-info">
-        <span class="filename">{{ filename }}</span>
+      <!--  line by line -->
+      <div v-if="isUnifiedViewer" class="file-info">
+        <span>
+          <div class="info-left">{{ filename }}</div>
+          <div class="info-left">{{ newFilename }}</div>
+        </span>
         <span v-if="!hideStat" class="diff-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>
+          <slot name="stat" :stat="diffChange.stat">
+            <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
+            <span class="diff-stat-deleted">-{{ diffChange.stat.deletionsNum }} deletions</span>
+          </slot>
+        </span>
+      </div>
+      <!-- side by side -->
+      <div v-else class="file-info">
+        <span class="info-left">{{ filename }}</span>
+        <span class="info-right">
+          <span style="margin-left: 20px;">{{ newFilename }}</span>
+          <span v-if="!hideStat" class="diff-stat">
+            <slot name="stat" :stat="diffChange.stat">
+              <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
+              <span class="diff-stat-deleted">-{{ diffChange.stat.deletionsNum }} deletions</span>
+            </slot>
+          </span>
         </span>
       </div>
     </div>

package/src/style.scss

@@ -28,16 +28,27 @@
       margin-left: 8px;
       height: 24px;
 
-      .filename {
-        font-size: 13px;
+      .info-left {
         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)
+          color: var(--color-diffstat-addition-bg);
         }
         .diff-stat-deleted {
-          color: var(--color-danger-emphasis)
+          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