v-code-diff 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-code-diff",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "template component for vue-demi, can dev and build",
   "main": "dist/index.cjs",
   "module": "dist/index.es.js",
@@ -53,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/src/CodeDiff.vue

@@ -16,7 +16,7 @@ interface Props {
   outputFormat?: 'line-by-line' | 'side-by-side'
   trim?: boolean
   noDiffLineFeed?: boolean
-  maxHeight?: number
+  maxHeight?: string
   filename?: string
 }
 

package/src/split/SplitLine.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { DiffType } from '../types'
-import type { SplitDiffLine } from '../types'
+import type { SplitLineChange } from '../types'
 
 const props = defineProps<{
-  splitLine: SplitDiffLine
+  splitLine: SplitLineChange
 }>()
 
 const getCodeMarker = (type: DiffType) => {

package/src/types.ts

@@ -11,13 +11,13 @@ export interface DiffLine {
   num?: number
 }
 
-export interface SplitDiffLine {
+export interface SplitLineChange {
   fold?: boolean
   left: DiffLine
   right: DiffLine
 }
 
-export interface UnifiedLine {
+export interface UnifiedLineChange {
   fold?: boolean
   type: DiffType
   code: string
@@ -30,11 +30,11 @@ export interface DiffStat {
   deletionsNum: number
 }
 export interface SplitViewerChange {
-  changes: SplitDiffLine[]
+  changes: SplitLineChange[]
   stat: DiffStat
 }
 
 export interface UnifiedViewerChange {
-  changes: UnifiedLine[]
+  changes: UnifiedLineChange[]
   stat: DiffStat
 }

package/src/unified/UnifiedLine.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { UnifiedLine } from '../types'
+import type { UnifiedLineChange } from '../types'
 import { DiffType } from '../types'
 
 const props = defineProps<{
-  line: UnifiedLine
+  line: UnifiedLineChange
 }>()
 
 const getCodeMarker = (type: DiffType) => {

package/src/unified/UnifiedViewer.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { UnifiedViewerChange } from '../types'
+import type { UnifiedLineChange } from '../types'
 import UnifiedLine from './UnifiedLine.vue'
 
 const props = defineProps<{
-  diffChange: UnifiedViewerChange
+  diffChange: UnifiedLineChange[]
 }>()
 </script>
 

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, DiffStat, SplitDiffLine, SplitViewerChange, UnifiedLine, UnifiedViewerChange } from './types'
+import type { DiffLine, DiffStat, SplitLineChange, SplitViewerChange, UnifiedLineChange, 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'))
 
@@ -137,14 +159,13 @@ export function createSplitDiff(
 ): 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 rawChanges: SplitDiffLine[] = []
+  const rawChanges: SplitLineChange[] = []
   const result: SplitViewerChange = {
     changes: rawChanges,
     stat: calcDiffStat(changes),
@@ -301,15 +322,15 @@ export function createUnifiedDiff(
   newString: string,
   language = 'plaintext',
   diffStyle = 'word',
-  context = 2,
+  context = 10,
 ): UnifiedViewerChange {
-  const changes = Diff.diffLines(oldString, newString)
+  const changes = diffLines(oldString, newString)
 
   let delNum = 0
   let addNum = 0
   let skip = false
 
-  const rawChanges: UnifiedLine[] = []
+  const rawChanges: UnifiedLineChange[] = []
   const result: UnifiedViewerChange = {
     changes: rawChanges,
     stat: calcDiffStat(changes),