v-code-diff 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-code-diff",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "template component for vue-demi, can dev and build",
   "main": "dist/index.cjs",
   "module": "dist/index.es.js",
@@ -23,9 +23,11 @@
     "build:2.7": "vue-demi-switch 2.7 vue2 && pnpm --filter vue2.7-playground build",
     "build:3": "vue-demi-switch 3 vue3 && pnpm --filter vue3-playground build",
     "clean": "rimraf ./dist",
+    "deploy:demo": "pnpm --filter demo gh-pages",
     "dev:2": "vue-demi-switch 2 vue2 && pnpm --filter vue2-playground dev",
     "dev:2.7": "vue-demi-switch 2.7 vue2 && pnpm --filter vue2.7-playground dev",
     "dev:3": "vue-demi-switch 3 vue3 && pnpm --filter vue3-playground dev",
+    "dev:demo": "vue-demi-switch 3 vue3 && pnpm --filter demo dev",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix --ignore-path .gitignore",
     "postinstall": "node scripts/postinstall.js",
     "prepublishOnly": "npm run build",
@@ -51,12 +53,14 @@
   },
   "dependencies": {
     "diff": "^5.0.0",
+    "diff-match-patch": "^1.0.5",
     "highlight.js": "^11.6.0",
     "vue-demi": "^0.13.11"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.34.0",
     "@types/diff": "^5.0.0",
+    "@types/diff-match-patch": "^1.0.32",
     "@types/node": "^18.11.18",
     "bumpp": "^8.2.1",
     "eslint": "^8.31.0",

package/scripts/postinstall.js

@@ -3,7 +3,7 @@ const { switchVersion, loadModule } = require('./utils')
 const Vue = loadModule('vue')
 
 if (!Vue || typeof Vue.version !== 'string')
-  console.warn('[vue-demi-sfc-component-template] Vue is not found. Please run "npm install vue" to install.')
+  console.warn('[v-code-diff] Vue is not found. Please run "npm install vue" to install.')
 
 else if (Vue.version.startsWith('2.7.'))
   switchVersion('2.7')
@@ -15,4 +15,4 @@ else if (Vue.version.startsWith('3.'))
   switchVersion('3')
 
 else
-  console.warn(`[vue-demi-sfc-component-template] Vue version v${Vue.version} is not suppported.`)
+  console.warn(`[v-code-diff] Vue version v${Vue.version} is not suppported.`)

package/src/CodeDiff.vue

@@ -17,6 +17,7 @@ interface Props {
   trim?: boolean
   noDiffLineFeed?: boolean
   maxHeight?: number
+  filename?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   trim: false,
   noDiffLineFeed: false,
   maxHeight: undefined,
+  filename: undefined,
 })
 
 const isUnifiedViewer = computed(() => props.outputFormat === 'line-by-line')
@@ -49,8 +51,17 @@ const diffChange = computed(() =>
 
 <template>
   <div class="code-diff-view" :style="{ maxHeight }">
-    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" />
-    <SplitViewer v-else :diff-change="diffChange" />
+    <div class="file-header">
+      <div class="file-info">
+        <span class="filename">{{ filename }}</span>
+        <span 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>
+        </span>
+      </div>
+    </div>
+    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange.changes" />
+    <SplitViewer v-else :diff-change="diffChange.changes" />
   </div>
 </template>
 

package/src/split/SplitLine.vue

@@ -17,10 +17,10 @@ const getCodeMarker = (type: DiffType) => {
 
 <template>
   <tr v-if="splitLine.fold">
-    <td class="blob-num blob-num-empty empty-cell" colspan="1">
+    <td class="blob-num blob-num-hunk" colspan="1">
       >
     </td>
-    <td class="blob-code blob-code-empty empty-cell" colspan="3" align="left">
+    <td class="blob-code blob-code-inner blob-code-hunk" colspan="3" align="left">
       ⋯
     </td>
   </tr>

package/src/style.scss

@@ -13,6 +13,35 @@
 
   overflow-y: auto;
 
+  .file-header {
+    background-color: var(--color-canvas-subtle);
+    border-bottom: 1px solid var(--color-border-default);
+    padding: 8px 16px;
+    font-size: 12px;
+    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+
+    .file-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 8px;
+      height: 24px;
+
+      .filename {
+        font-size: 13px;
+        color: var(--color-fg-default);
+      }
+      .diff-stat {
+        .diff-stat-added {
+          color: var(--color-diffstat-addition-bg)
+        }
+        .diff-stat-deleted {
+          color: var(--color-danger-emphasis)
+        }
+      }
+    }
+  }
+
   table {
     border-spacing: 0;
   }
@@ -95,6 +124,13 @@
       padding-right: 8px;
       content: attr(data-code-marker);
     }
+
+    .blob-num-hunk {
+      background-color: var(--color-diff-blob-hunk-num-bg);
+    }
+    .blob-code-hunk {
+      background-color: var(--color-accent-subtle);
+    }
   }
 
   .file-diff-split {

package/src/types.ts

@@ -25,5 +25,16 @@ export interface UnifiedLine {
   addNum?: number
 }
 
-export type SplitViewerChange = SplitDiffLine[]
-export type UnifiedViewerChange = UnifiedLine[]
+export interface DiffStat {
+  additionsNum: number
+  deletionsNum: number
+}
+export interface SplitViewerChange {
+  changes: SplitDiffLine[]
+  stat: DiffStat
+}
+
+export interface UnifiedViewerChange {
+  changes: UnifiedLine[]
+  stat: DiffStat
+}

package/src/unified/UnifiedLine.vue

@@ -17,13 +17,13 @@ const getCodeMarker = (type: DiffType) => {
 
 <template>
   <tr v-if="line.fold">
-    <td class="blob-num blob-num-empty empty-cell">
+    <td class="blob-num blob-num-hunk">
       >
     </td>
-    <td class="blob-num blob-num-empty empty-cell">
+    <td class="blob-num blob-num-hunk">
       >
     </td>
-    <td class="blob-code blob-code-empty empty-cell" align="left">
+    <td class="blob-code blob-code-hunk" align="left">
       ⋯
     </td>
   </tr>

package/src/utils.ts

@@ -1,8 +1,9 @@
 import * as Diff from 'diff'
 import type { Change } from 'diff'
+import { DIFF_DELETE, DIFF_INSERT, diff_match_patch as DiffMatchPatch } from 'diff-match-patch'
 import hljs from './highlight'
 import { DiffType } from './types'
-import type { DiffLine, SplitViewerChange, UnifiedViewerChange } from './types'
+import type { DiffLine, DiffStat, SplitDiffLine, SplitViewerChange, UnifiedLine, UnifiedViewerChange } from './types'
 
 const MODIFIED_START_TAG = '<code-diff-modified>'
 const MODIFIED_CLOSE_TAG = '</code-diff-modified>'
@@ -36,6 +37,27 @@ const renderWords = (prev?: string, current?: string, diffStyle = 'word'): strin
     .join('')
 }
 
+function diffLines(prev: string, current: string) {
+  const dmp = new DiffMatchPatch()
+  const a = dmp.diff_linesToChars_(prev, current)
+  const linePrev = a.chars1
+  const lineCurrent = a.chars2
+  const lineArray = a.lineArray
+  const diffs: any[] = dmp.diff_main(linePrev, lineCurrent, false)
+  dmp.diff_charsToLines_(diffs, lineArray)
+  return diffs.map((x) => {
+    const [type, text] = x
+    const count = text.trim().split('\n').length
+    const change: Diff.Change = {
+      count,
+      value: text,
+      removed: type === DIFF_DELETE,
+      added: type === DIFF_INSERT,
+    }
+    return change
+  })
+}
+
 const getHighlightCode = (language: string, code: string) => {
   const hasModifiedTags = code.match(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g'))
 
@@ -113,23 +135,42 @@ const getHighlightCode = (language: string, code: string) => {
     .replace(new RegExp(closeEntity, 'g'), '</span>')
 }
 
+function calcDiffStat(changes: Change[]): DiffStat {
+  const count = (s: string, c: string) => (s.match(new RegExp(c, 'g')) || []).length
+
+  let additionsNum = 0
+  let deletionsNum = 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
+  }
+  return { additionsNum, deletionsNum }
+}
+
 export function createSplitDiff(
   oldString: string,
   newString: string,
   language = 'plaintext',
   diffStyle = 'word',
   context = 10,
-) {
+): SplitViewerChange {
   const newEmptySplitDiff = (): DiffLine => ({ type: DiffType.EMPTY })
   const newSplitDiff = (type: DiffType, num: number, code: string): DiffLine => ({ type, num, code })
-
-  const changes = Diff.diffLines(oldString, newString)
+  const changes = diffLines(oldString, newString)
 
   let delNum = 0
   let addNum = 0
   let skip = false
 
-  const result: SplitViewerChange = []
+  const rawChanges: SplitDiffLine[] = []
+  const result: SplitViewerChange = {
+    changes: rawChanges,
+    stat: calcDiffStat(changes),
+  }
+
   for (let i = 0; i < changes.length; i++) {
     if (skip) {
       skip = false
@@ -168,7 +209,7 @@ export function createSplitDiff(
           right = newSplitDiff(DiffType.ADD, addNum, highlightCode)
         }
 
-        result.push({ left, right })
+        rawChanges.push({ left, right })
       }
       break
     }
@@ -181,7 +222,7 @@ export function createSplitDiff(
         addNum++
 
         const highlightCode = getHighlightCode(language, line)
-        result.push({
+        rawChanges.push({
           left: newSplitDiff(DiffType.EQUAL, delNum, highlightCode),
           right: newSplitDiff(DiffType.EQUAL, addNum, highlightCode),
         })
@@ -195,7 +236,7 @@ export function createSplitDiff(
         for (const line of curLines) {
           delNum++
 
-          result.push({
+          rawChanges.push({
             left: newSplitDiff(DiffType.DELETE, delNum, getHighlightCode(language, line)),
             right: newEmptySplitDiff(),
           })
@@ -225,7 +266,7 @@ export function createSplitDiff(
               ? newSplitDiff(DiffType.ADD, addNum, getHighlightCode(language, rightLine))
               : newEmptySplitDiff()
 
-          result.push({ left, right })
+          rawChanges.push({ left, right })
         }
       }
     }
@@ -233,7 +274,7 @@ export function createSplitDiff(
     if (curType === DiffType.ADD) {
       for (const line of curLines) {
         addNum++
-        result.push({
+        rawChanges.push({
           left: newEmptySplitDiff(),
           right: newSplitDiff(DiffType.ADD, addNum, getHighlightCode(language, line)),
         })
@@ -242,37 +283,38 @@ export function createSplitDiff(
   }
 
   if (oldString === newString) {
-    for (let i = 0; i < result.length; i++)
-      result[i].fold = false
+    for (let i = 0; i < rawChanges.length; i++)
+      rawChanges[i].fold = false
 
     return result
   }
 
-  for (let i = 0; i < result.length; i++) {
-    const line = result[i]
+  for (let i = 0; i < rawChanges.length; i++) {
+    const line = rawChanges[i]
     if (line.left.type === DiffType.DELETE || line.right.type === DiffType.ADD) {
-      const [start, end] = [Math.max(i - context, 0), Math.min(i + context + 1, result.length)]
+      const [start, end] = [Math.max(i - context, 0), Math.min(i + context + 1, rawChanges.length)]
       for (let j = start; j < end; j++)
-        result[j].fold = false
+        rawChanges[j].fold = false
     }
     if (line.fold === undefined)
       line.fold = true
   }
 
-  const realResult = []
-  for (let i = 0; i < result.length; i++) {
-    const line = result[i]
+  const processedChanges = []
+  for (let i = 0; i < rawChanges.length; i++) {
+    const line = rawChanges[i]
     if (line.fold === false) {
-      realResult.push(line)
+      processedChanges.push(line)
       continue
     }
     if (line.fold === true) {
-      if (realResult[realResult.length - 1]?.fold !== true)
-        realResult.push(line)
+      if (processedChanges[processedChanges.length - 1]?.fold !== true)
+        processedChanges.push(line)
     }
   }
+  result.changes = processedChanges
 
-  return realResult
+  return result
 }
 
 export function createUnifiedDiff(
@@ -280,15 +322,20 @@ export function createUnifiedDiff(
   newString: string,
   language = 'plaintext',
   diffStyle = 'word',
-  context = 2,
-) {
-  const changes = Diff.diffLines(oldString, newString)
+  context = 10,
+): UnifiedViewerChange {
+  const changes = diffLines(oldString, newString)
 
   let delNum = 0
   let addNum = 0
   let skip = false
 
-  const result: UnifiedViewerChange = []
+  const rawChanges: UnifiedLine[] = []
+  const result: UnifiedViewerChange = {
+    changes: rawChanges,
+    stat: calcDiffStat(changes),
+  }
+
   for (let i = 0; i < changes.length; i++) {
     if (skip) {
       skip = false
@@ -315,7 +362,7 @@ export function createUnifiedDiff(
 
         const code = getHighlightCode(language, line)
 
-        result.push({
+        rawChanges.push({
           type: curType,
           code,
           addNum: curType === DiffType.DELETE ? undefined : addNum,
@@ -333,7 +380,7 @@ export function createUnifiedDiff(
         addNum++
         const code = getHighlightCode(language, line)
 
-        result.push({ type: DiffType.EQUAL, code, delNum, addNum })
+        rawChanges.push({ type: DiffType.EQUAL, code, delNum, addNum })
       }
     }
 
@@ -348,7 +395,7 @@ export function createUnifiedDiff(
           delNum++
 
           const code = getHighlightCode(language, renderWords(nextLine, curLine, diffStyle))
-          result.push({ type: DiffType.DELETE, code, delNum })
+          rawChanges.push({ type: DiffType.DELETE, code, delNum })
         }
 
         for (let j = 0; j < nextLines.length; j++) {
@@ -357,7 +404,7 @@ export function createUnifiedDiff(
           addNum++
 
           const code = getHighlightCode(language, renderWords(curLine, nextLine, diffStyle))
-          result.push({ type: DiffType.ADD, code, addNum })
+          rawChanges.push({ type: DiffType.ADD, code, addNum })
         }
 
         skip = true
@@ -368,7 +415,7 @@ export function createUnifiedDiff(
           delNum++
 
           const code = getHighlightCode(language, line)
-          result.push({ type: DiffType.DELETE, code, delNum })
+          rawChanges.push({ type: DiffType.DELETE, code, delNum })
         }
       }
     }
@@ -378,41 +425,42 @@ export function createUnifiedDiff(
         addNum++
         const code = getHighlightCode(language, line)
 
-        result.push({ type: DiffType.ADD, code, addNum })
+        rawChanges.push({ type: DiffType.ADD, code, addNum })
       }
     }
   }
 
-  for (let i = 0; i < result.length; i++) {
-    const line = result[i]
+  for (let i = 0; i < rawChanges.length; i++) {
+    const line = rawChanges[i]
     if (line.type === DiffType.DELETE || line.type === DiffType.ADD) {
-      const [start, end] = [Math.max(i - context, 0), Math.min(i + context + 1, result.length)]
+      const [start, end] = [Math.max(i - context, 0), Math.min(i + context + 1, rawChanges.length)]
       for (let j = start; j < end; j++)
-        result[j].fold = false
+        rawChanges[j].fold = false
     }
     if (line.fold === undefined)
       line.fold = true
   }
 
   if (oldString === newString) {
-    for (let i = 0; i < result.length; i++)
-      result[i].fold = false
+    for (let i = 0; i < rawChanges.length; i++)
+      rawChanges[i].fold = false
 
     return result
   }
 
-  const realResult = []
-  for (let i = 0; i < result.length; i++) {
-    const line = result[i]
+  const processedChanges = []
+  for (let i = 0; i < rawChanges.length; i++) {
+    const line = rawChanges[i]
     if (line.fold === false) {
-      realResult.push(line)
+      processedChanges.push(line)
       continue
     }
     if (line.fold === true) {
-      if (i === 0 || realResult[realResult.length - 1]?.fold !== true)
-        realResult.push(line)
+      if (i === 0 || processedChanges[processedChanges.length - 1]?.fold !== true)
+        processedChanges.push(line)
     }
   }
+  result.changes = processedChanges
 
-  return realResult
+  return result
 }