v-code-diff 1.13.2 → 1.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-code-diff",
   "type": "module",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "packageManager": "pnpm@11.2.2",
   "description": "A code diff viewer for Vue 2.6, Vue 2.7, and Vue 3",
   "license": "MIT",
@@ -37,6 +37,7 @@
     "types"
   ],
   "scripts": {
+    "benchmark": "pnpm build:3 && vitest bench --run && node --expose-gc benchmarks/render.mjs",
     "build": "npm run clean && run-s build:**",
     "build:2": "vue-demi-switch 2 vue2 && pnpm --filter vue2-playground build",
     "build:2:umd": "vue-demi-switch 2 vue2 && format=umd pnpm --filter vue2-playground build",
@@ -54,7 +55,8 @@
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.ts,.tsx,json --fix --ignore-path .gitignore",
     "postinstall": "node scripts/postinstall.cjs",
     "prepublishOnly": "npm run build",
-    "release": "bumpp --commit --no-push --tag && npm publish"
+    "release": "bumpp --commit --no-push --tag && npm publish",
+    "test": "vitest run"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.4.9",
@@ -87,6 +89,7 @@
     "typescript": "~4.7.4",
     "vite": "^5.4.2",
     "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vitest": "^2.1.9",
     "vue": "^3.4.38",
     "vue-i18n": "^9.14.0",
     "vue-tsc": "^0.40.13",

package/src/CodeDiff.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue-demi'
+import { computed, ref, shallowRef, watch } from 'vue-demi'
 import { createSplitDiff, createUnifiedDiff } from './utils'
 import UnifiedViewer from './unified/UnifiedViewer.vue'
 import SplitViewer from './split/SplitViewer.vue'
@@ -77,7 +77,7 @@ const raw = computed(() =>
     ? createUnifiedDiff(oldString.value, newString.value, props.language, props.diffStyle, props.forceInlineComparison, props.context, props.ignoreMatchingLines)
     : createSplitDiff(oldString.value, newString.value, props.language, props.diffStyle, props.forceInlineComparison, props.context, props.ignoreMatchingLines),
 )
-const diffChange = ref(raw.value)
+const diffChange = shallowRef(raw.value)
 const isNotChanged = computed(() => diffChange.value.stat.additionsNum === 0 && diffChange.value.stat.deletionsNum === 0)
 
 const currentDiffIndex = ref(-1)
@@ -169,8 +169,8 @@ watch(() => props, () => {
         </span>
       </div>
     </div>
-    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" />
-    <SplitViewer v-else :diff-change="diffChange" />
+    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" :language="language" />
+    <SplitViewer v-else :diff-change="diffChange" :language="language" />
   </div>
 </template>
 

package/src/split/SplitViewer.vue

@@ -1,18 +1,43 @@
 <script setup lang="ts">
+import { computed, ref, shallowRef, watch } from 'vue-demi'
 import type { SplitLineChange, SplitViewerChange } from '../types'
+import { RENDER_BATCH_SIZE, highlightSplitLine } from '../utils'
 import SplitLine from './SplitLine.vue'
 
 const props = defineProps<{
   diffChange: SplitViewerChange
+  language: string
 }>()
 
+const renderLimit = ref(RENDER_BATCH_SIZE)
+const visibleChanges = shallowRef(props.diffChange.changes.filter(line => !line.hide || line.hideIndex !== undefined))
+const renderedChanges = computed(() => visibleChanges.value.slice(0, renderLimit.value))
+const remainingLines = computed(() => visibleChanges.value.length - renderedChanges.value.length)
+const nextBatchSize = computed(() => Math.min(remainingLines.value, RENDER_BATCH_SIZE))
+
+watch(() => props.diffChange, (diffChange) => {
+  renderLimit.value = RENDER_BATCH_SIZE
+  visibleChanges.value = diffChange.changes.filter(line => !line.hide || line.hideIndex !== undefined)
+})
+
+function highlightRenderedChanges() {
+  renderedChanges.value.forEach(line => highlightSplitLine(line, props.language))
+}
+
 function expandHandler({ hideIndex }: SplitLineChange) {
   if (hideIndex === undefined)
     return
-  props.diffChange.collector[hideIndex!].lines.forEach((line) => {
+  props.diffChange.collector[hideIndex].lines.forEach((line) => {
     line.hide = false
     line.fold = false
   })
+  visibleChanges.value = props.diffChange.changes.filter(line => !line.hide || line.hideIndex !== undefined)
+  highlightRenderedChanges()
+}
+
+function loadMore() {
+  renderLimit.value += RENDER_BATCH_SIZE
+  highlightRenderedChanges()
 }
 </script>
 
@@ -25,7 +50,14 @@ function expandHandler({ hideIndex }: SplitLineChange) {
       <col>
     </colgroup>
     <tbody>
-      <SplitLine v-for="(item, index) in diffChange?.changes" :key="index" :split-line="item" @expand="expandHandler" />
+      <SplitLine v-for="(item, index) in renderedChanges" :key="index" :split-line="item" @expand="expandHandler" />
+      <tr v-if="remainingLines">
+        <td class="blob-code blob-code-hunk load-more" colspan="4">
+          <button class="load-more-button" type="button" @click="loadMore">
+            Show next {{ nextBatchSize }} lines ({{ remainingLines }} remaining)
+          </button>
+        </td>
+      </tr>
     </tbody>
   </table>
 </template>

package/src/style.scss

@@ -168,6 +168,24 @@
     .blob-code-hunk {
       background-color: var(--color-accent-subtle);
     }
+
+    .load-more {
+      padding: 8px;
+      text-align: center;
+    }
+
+    .load-more-button {
+      padding: 4px 12px;
+      color: var(--color-accent-fg);
+      background: transparent;
+      border: 1px solid var(--color-border-default);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .load-more-button:hover {
+      background-color: var(--color-accent-muted);
+    }
   }
 
   .file-diff-split {

package/src/types.ts

@@ -23,6 +23,7 @@ export interface DiffLine {
 
 export interface SplitLineChange {
   fold?: boolean
+  highlighted?: boolean
   left: DiffLine
   right: DiffLine
   hide?: boolean
@@ -31,6 +32,7 @@ export interface SplitLineChange {
 
 export interface UnifiedLineChange {
   fold?: boolean
+  highlighted?: boolean
   type: DiffType
   code: string
   delNum?: number

package/src/unified/UnifiedViewer.vue

@@ -1,25 +1,57 @@
 <script setup lang="ts">
+import { computed, ref, shallowRef, watch } from 'vue-demi'
 import type { UnifiedLineChange, UnifiedViewerChange } from '../types'
+import { RENDER_BATCH_SIZE, highlightUnifiedLine } from '../utils'
 import UnifiedLine from './UnifiedLine.vue'
 
 const props = defineProps<{
   diffChange: UnifiedViewerChange
+  language: string
 }>()
 
+const renderLimit = ref(RENDER_BATCH_SIZE)
+const visibleChanges = shallowRef(props.diffChange.changes.filter(line => !line.hide || line.hideIndex !== undefined))
+const renderedChanges = computed(() => visibleChanges.value.slice(0, renderLimit.value))
+const remainingLines = computed(() => visibleChanges.value.length - renderedChanges.value.length)
+const nextBatchSize = computed(() => Math.min(remainingLines.value, RENDER_BATCH_SIZE))
+
+watch(() => props.diffChange, (diffChange) => {
+  renderLimit.value = RENDER_BATCH_SIZE
+  visibleChanges.value = diffChange.changes.filter(line => !line.hide || line.hideIndex !== undefined)
+})
+
+function highlightRenderedChanges() {
+  renderedChanges.value.forEach(line => highlightUnifiedLine(line, props.language))
+}
+
 function expandHandler({ hideIndex }: UnifiedLineChange) {
   if (hideIndex === undefined)
     return
-  props.diffChange.collector[hideIndex!].lines.forEach((line) => {
+  props.diffChange.collector[hideIndex].lines.forEach((line) => {
     line.hide = false
     line.fold = false
   })
+  visibleChanges.value = props.diffChange.changes.filter(line => !line.hide || line.hideIndex !== undefined)
+  highlightRenderedChanges()
+}
+
+function loadMore() {
+  renderLimit.value += RENDER_BATCH_SIZE
+  highlightRenderedChanges()
 }
 </script>
 
 <template>
   <table class="diff-table">
     <tbody>
-      <UnifiedLine v-for="(item, index) in diffChange?.changes" :key="index" :line="item" @expand="expandHandler" />
+      <UnifiedLine v-for="(item, index) in renderedChanges" :key="index" :line="item" @expand="expandHandler" />
+      <tr v-if="remainingLines">
+        <td class="blob-code blob-code-hunk load-more" colspan="3">
+          <button class="load-more-button" type="button" @click="loadMore">
+            Show next {{ nextBatchSize }} lines ({{ remainingLines }} remaining)
+          </button>
+        </td>
+      </tr>
     </tbody>
   </table>
 </template>

package/src/utils.ts

@@ -7,6 +7,8 @@ import type { DiffLine, DiffStat, SplitLineChange, SplitLineUnchanges, SplitView
 
 const MODIFIED_START_TAG = '<code-diff-modified>'
 const MODIFIED_CLOSE_TAG = '</code-diff-modified>'
+const MAX_INLINE_DIFF_LENGTH = 10_000
+export const RENDER_BATCH_SIZE = 1_000
 
 const startEntity = MODIFIED_START_TAG.replace('<', '&lt;').replace('>', '&gt;')
 const closeEntity = MODIFIED_CLOSE_TAG.replace('<', '&lt;').replace('>', '&gt;')
@@ -32,45 +34,112 @@ function lineType(diff: Diff.Change): DiffType {
   return DiffType.EQUAL
 }
 
-function renderWords(prev?: string, current?: string, diffStyle = 'word'): string {
-  if (typeof prev === 'undefined')
-    return current!
-  if (typeof current === 'undefined')
-    return prev!
+function renderChangedLines(prev?: string, current?: string, diffStyle = 'word', force = false): [string | undefined, string | undefined] {
+  if (typeof prev === 'undefined' || typeof current === 'undefined')
+    return [prev, current]
+  if (!force && prev.length + current.length > MAX_INLINE_DIFF_LENGTH)
+    return [prev, current]
 
   type RenderFunctionType = (prev: string, old: string) => Change[]
   const func: RenderFunctionType = diffStyle === 'char' ? Diff.diffChars : Diff.diffWords
-  return func(prev, current)
+  const changes = func(prev, current)
+  const oldLine = changes
+    .filter(word => lineType(word) !== DiffType.ADD)
+    .map(word =>
+      lineType(word) === DiffType.DELETE ? `${MODIFIED_START_TAG}${word.value}${MODIFIED_CLOSE_TAG}` : word.value,
+    )
+    .join('')
+  const newLine = changes
     .filter(word => lineType(word) !== DiffType.DELETE)
     .map(word =>
       lineType(word) === DiffType.ADD ? `${MODIFIED_START_TAG}${word.value}${MODIFIED_CLOSE_TAG}` : word.value,
     )
     .join('')
+  return [oldLine, newLine]
 }
 
 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.replace(/\n$/, '').split('\n').length
-    const change: Diff.Change = {
-      count,
-      value: text,
-      removed: type === DIFF_DELETE,
-      added: type === DIFF_INSERT,
+  if (prev === current) {
+    return prev
+      ? [{ count: prev.replace(/\n$/, '').split('\n').length, value: prev }]
+      : []
+  }
+
+  const prevHasFinalNewline = prev.endsWith('\n')
+  const currentHasFinalNewline = current.endsWith('\n')
+  if (prevHasFinalNewline !== currentHasFinalNewline) {
+    if (prevHasFinalNewline)
+      prev = prev.slice(0, -1)
+    else
+      current = current.slice(0, -1)
+  }
+
+  let changes: Diff.Change[] | undefined
+  if (prev.length + current.length >= 100_000 && prev.includes('\n') && current.includes('\n')) {
+    const prevLines = prev ? prev.replace(/\n$/, '').split('\n') : []
+    const currentLines = current ? current.replace(/\n$/, '').split('\n') : []
+    const prevLineSet = new Set(prevLines)
+    const currentLineSet = new Set(currentLines)
+    const [smallerSet, largerSet] = prevLineSet.size < currentLineSet.size
+      ? [prevLineSet, currentLineSet]
+      : [currentLineSet, prevLineSet]
+    let sharedLines = 0
+    for (const line of smallerSet) {
+      if (largerSet.has(line))
+        sharedLines++
+    }
+    const overlap = smallerSet.size ? sharedLines / smallerSet.size : 0
+    const exceedsDmpLineLimit = prevLineSet.size >= 40_000 || prevLineSet.size + currentLineSet.size - sharedLines >= 65_535
+    const changedUniqueLines = prevLineSet.size + currentLineSet.size - sharedLines * 2
+
+    if (overlap < 0.01 || (exceedsDmpLineLimit && changedUniqueLines > 200)) {
+      // ponytail: complex large inputs use whole-file replacements; revisit if detailed move detection becomes necessary.
+      changes = []
+      if (prev)
+        changes.push({ count: prevLines.length, value: prev, removed: true })
+      if (current)
+        changes.push({ count: currentLines.length, value: current, added: true })
     }
-    return change
-  })
+    else if (exceedsDmpLineLimit) {
+      changes = Diff.diffLines(prev, current)
+    }
+  }
+
+  if (!changes) {
+    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)
+    changes = diffs.map((x) => {
+      const [type, text] = x
+      const count = text.replace(/\n$/, '').split('\n').length
+      const change: Diff.Change = {
+        count,
+        value: text,
+        removed: type === DIFF_DELETE,
+        added: type === DIFF_INSERT,
+      }
+      return change
+    })
+  }
+
+  if (prevHasFinalNewline !== currentHasFinalNewline) {
+    changes.push({
+      count: 1,
+      value: '',
+      removed: prevHasFinalNewline,
+      added: currentHasFinalNewline,
+    })
+  }
+
+  return changes
 }
 
 function getHighlightCode(language: string, code: string) {
-  if (typeof document === 'undefined') {
+  if (typeof document === 'undefined' || language === 'plaintext') {
     return escapeHtml(code)
       .replace(new RegExp(startEntity, 'g'), '<span class="x">')
       .replace(new RegExp(closeEntity, 'g'), '</span>')
@@ -152,6 +221,28 @@ function getHighlightCode(language: string, code: string) {
     .replace(new RegExp(closeEntity, 'g'), '</span>')
 }
 
+export function highlightUnifiedLine(line: UnifiedLineChange, language: string) {
+  if (line.highlighted)
+    return
+  line.code = getHighlightCode(language, line.code)
+  line.highlighted = true
+}
+
+export function highlightSplitLine(line: SplitLineChange, language: string) {
+  if (line.highlighted)
+    return
+  const leftCode = line.left.code
+  if (leftCode !== undefined)
+    line.left.code = getHighlightCode(language, leftCode)
+
+  if (line.right.code !== undefined) {
+    line.right.code = line.left.type === DiffType.EQUAL && line.right.type === DiffType.EQUAL && line.right.code === leftCode
+      ? line.left.code
+      : getHighlightCode(language, line.right.code)
+  }
+  line.highlighted = true
+}
+
 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
@@ -162,12 +253,20 @@ function calcDiffStat(changes: Change[], ignoreRegex?: RegExp): DiffStat {
   let ignoreDeletionsNum = 0
   for (const change of changes) {
     if (change.added) {
+      if (!ignoreRegex) {
+        additionsNum += change.count ?? 0
+        continue
+      }
       const ignoreNum = ignoreCount(change.value.trim().split('\n'))
       additionsNum += count(change.value.trim(), '\n') + 1 - ignoreNum
       ignoreAdditionsNum += ignoreNum
       continue
     }
     if (change.removed) {
+      if (!ignoreRegex) {
+        deletionsNum += change.count ?? 0
+        continue
+      }
       const ignoreNum = ignoreCount(change.value.trim().split('\n'))
       deletionsNum += count(change.value.trim(), '\n') + 1 - ignoreNum
       ignoreDeletionsNum += ignoreNum
@@ -224,25 +323,24 @@ export function createSplitDiff(
         let left: DiffLine = newEmptySplitDiff()
         let right: DiffLine = newEmptySplitDiff()
 
-        const highlightCode = getHighlightCode(language, line)
         if (curType === DiffType.EQUAL) {
           delNum++
           addNum++
 
-          left = newSplitDiff(DiffType.EQUAL, delNum, highlightCode)
-          right = newSplitDiff(DiffType.EQUAL, addNum, highlightCode)
+          left = newSplitDiff(DiffType.EQUAL, delNum, line)
+          right = newSplitDiff(DiffType.EQUAL, addNum, line)
         }
         if (curType === DiffType.DELETE) {
           delNum++
 
-          left = newSplitDiff(DiffType.DELETE, delNum, highlightCode)
+          left = newSplitDiff(DiffType.DELETE, delNum, line)
           right = newEmptySplitDiff()
         }
         if (curType === DiffType.ADD) {
           addNum++
 
           left = newEmptySplitDiff()
-          right = newSplitDiff(DiffType.ADD, addNum, highlightCode)
+          right = newSplitDiff(DiffType.ADD, addNum, line)
         }
         rawChanges.push({ left, right })
       }
@@ -256,10 +354,9 @@ export function createSplitDiff(
         delNum++
         addNum++
 
-        const highlightCode = getHighlightCode(language, line)
         rawChanges.push({
-          left: newSplitDiff(DiffType.EQUAL, delNum, highlightCode),
-          right: newSplitDiff(DiffType.EQUAL, addNum, highlightCode),
+          left: newSplitDiff(DiffType.EQUAL, delNum, line),
+          right: newSplitDiff(DiffType.EQUAL, addNum, line),
         })
       }
     }
@@ -272,7 +369,7 @@ export function createSplitDiff(
           delNum++
 
           rawChanges.push({
-            left: newSplitDiff(DiffType.DELETE, delNum, getHighlightCode(language, line)),
+            left: newSplitDiff(DiffType.DELETE, delNum, line),
             right: newEmptySplitDiff(),
           })
         }
@@ -289,8 +386,9 @@ export function createSplitDiff(
 
           const [curLine, nextLine] = [curLines[j], nextLines[j]]
           const shouldRenderWords = forceInlineComparison || curLines.length === nextLines.length
-          const leftLine = shouldRenderWords ? renderWords(nextLine, curLine, diffStyle) : curLine
-          const rightLine = shouldRenderWords ? renderWords(curLine, nextLine, diffStyle) : nextLine
+          const [leftLine, rightLine] = shouldRenderWords
+            ? renderChangedLines(curLine, nextLine, diffStyle, forceInlineComparison)
+            : [curLine, nextLine]
 
           // 忽略匹配的行等价于相等
           const leftDiffType = ignoreRegex?.test(curLine) ? DiffType.EQUAL : DiffType.DELETE
@@ -298,11 +396,11 @@ export function createSplitDiff(
 
           const left
             = j < cur.count!
-              ? newSplitDiff(leftDiffType, delNum, getHighlightCode(language, leftLine))
+              ? newSplitDiff(leftDiffType, delNum, leftLine!)
               : newEmptySplitDiff()
           const right
             = j < next.count!
-              ? newSplitDiff(rightDiffType, addNum, getHighlightCode(language, rightLine))
+              ? newSplitDiff(rightDiffType, addNum, rightLine!)
               : newEmptySplitDiff()
 
           rawChanges.push({ left, right })
@@ -315,7 +413,7 @@ export function createSplitDiff(
         addNum++
         rawChanges.push({
           left: newEmptySplitDiff(),
-          right: newSplitDiff(DiffType.ADD, addNum, getHighlightCode(language, line)),
+          right: newSplitDiff(DiffType.ADD, addNum, line),
         })
       }
     }
@@ -324,6 +422,7 @@ export function createSplitDiff(
   if (oldString === newString) {
     for (let i = 0; i < rawChanges.length; i++)
       rawChanges[i].fold = false
+    rawChanges.slice(0, RENDER_BATCH_SIZE).forEach(line => highlightSplitLine(line, language))
 
     return result
   }
@@ -370,6 +469,7 @@ export function createSplitDiff(
     unchanges = []
   }
   result.changes = processedChanges
+  result.changes.filter(line => !line.hide).slice(0, RENDER_BATCH_SIZE).forEach(line => highlightSplitLine(line, language))
 
   return result
 }
@@ -421,11 +521,9 @@ export function createUnifiedDiff(
         if (curType === DiffType.ADD)
           addNum++
 
-        const code = getHighlightCode(language, line)
-
         rawChanges.push({
           type: curType,
-          code,
+          code: line,
           addNum: curType === DiffType.DELETE ? undefined : addNum,
           delNum: curType === DiffType.ADD ? undefined : delNum,
         })
@@ -439,9 +537,7 @@ export function createUnifiedDiff(
       for (const line of curLines) {
         delNum++
         addNum++
-        const code = getHighlightCode(language, line)
-
-        rawChanges.push({ type: DiffType.EQUAL, code, delNum, addNum })
+        rawChanges.push({ type: DiffType.EQUAL, code: line, delNum, addNum })
       }
     }
 
@@ -450,28 +546,26 @@ export function createUnifiedDiff(
     if (curType === DiffType.DELETE) {
       // 下一处差异为新增，且删除与新增行数相同时，对每行依次 diff
       if (nextType === DiffType.ADD && (curLines.length === nextLines.length || forceInlineComparison)) {
+        const maxCount = Math.max(curLines.length, nextLines.length)
+        const renderedLines = Array.from({ length: maxCount }, (_, index) => renderChangedLines(curLines[index], nextLines[index], diffStyle, forceInlineComparison))
         for (let j = 0; j < curLines.length; j++) {
           const curLine = curLines[j]
-          const nextLine = nextLines[j]
           delNum++
 
-          const code = getHighlightCode(language, renderWords(nextLine, curLine, diffStyle))
           rawChanges.push({
             type: ignoreRegex?.test(curLine) ? DiffType.EQUAL : DiffType.DELETE,
-            code,
+            code: renderedLines[j][0]!,
             delNum,
           })
         }
 
         for (let j = 0; j < nextLines.length; j++) {
-          const curLine = curLines[j]
           const nextLine = nextLines[j]
           addNum++
 
-          const code = getHighlightCode(language, renderWords(curLine, nextLine, diffStyle))
           rawChanges.push({
             type: ignoreRegex?.test(nextLine) ? DiffType.EQUAL : DiffType.ADD,
-            code,
+            code: renderedLines[j][1]!,
             addNum,
           })
         }
@@ -483,8 +577,7 @@ export function createUnifiedDiff(
         for (const line of curLines) {
           delNum++
 
-          const code = getHighlightCode(language, line)
-          rawChanges.push({ type: DiffType.DELETE, code, delNum })
+          rawChanges.push({ type: DiffType.DELETE, code: line, delNum })
         }
       }
     }
@@ -492,9 +585,7 @@ export function createUnifiedDiff(
     if (curType === DiffType.ADD) {
       for (const line of curLines) {
         addNum++
-        const code = getHighlightCode(language, line)
-
-        rawChanges.push({ type: DiffType.ADD, code, addNum })
+        rawChanges.push({ type: DiffType.ADD, code: line, addNum })
       }
     }
   }
@@ -513,6 +604,7 @@ export function createUnifiedDiff(
   if (oldString === newString) {
     for (let i = 0; i < rawChanges.length; i++)
       rawChanges[i].fold = false
+    rawChanges.slice(0, RENDER_BATCH_SIZE).forEach(line => highlightUnifiedLine(line, language))
 
     return result
   }
@@ -551,6 +643,7 @@ export function createUnifiedDiff(
     unchanges = []
   }
   result.changes = processedChanges
+  result.changes.filter(line => !line.hide).slice(0, RENDER_BATCH_SIZE).forEach(line => highlightUnifiedLine(line, language))
 
   return result
 }