v-code-diff 1.13.1 → 1.14.0

package/package.json

@@ -1,14 +1,30 @@
 {
   "name": "v-code-diff",
   "type": "module",
-  "version": "1.13.1",
-  "description": "template component for vue-demi, can dev and build",
+  "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",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
+      "require": "./dist/index.cjs"
+    },
+    "./vue2": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/v2/index.es.js",
+      "require": "./dist/v2/index.cjs"
+    },
+    "./vue2.7": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/v2.7/index.es.js",
+      "require": "./dist/v2.7/index.cjs"
+    },
+    "./vue3": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/v3/index.es.js",
+      "require": "./dist/v3/index.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -21,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",
@@ -38,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",
@@ -50,7 +68,7 @@
     }
   },
   "dependencies": {
-    "diff": "^5.2.0",
+    "diff": "^5.2.2",
     "diff-match-patch": "^1.0.5",
     "highlight.js": "^11.10.0",
     "vue-demi": "^0.14.6"
@@ -67,22 +85,15 @@
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "sass": "^1.69.5",
+    "tsx": "^4.19.4",
     "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",
     "vue2": "npm:vue@2",
     "vue3": "npm:vue@3"
-  },
-  "pnpm": {
-    "packageExtensions": {
-      "vue-template-compiler": {
-        "peerDependencies": {
-          "vue": "~2.6.14"
-        }
-      }
-    }
   }
 }

package/scripts/perf-test.ts

@@ -0,0 +1,40 @@
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createSplitDiff } from '../src/utils'
+
+// 获取当前文件的 URL 和目录路径
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// 构建文件的绝对路径
+const oldTextPath = path.join(__dirname, '../demo/text/old-long-text.txt')
+const newTextPath = path.join(__dirname, '../demo/text/new-long-text.txt')
+
+// 同步读取文件内容
+const oldLongText = fs.readFileSync(oldTextPath, 'utf-8')
+const newLongText = fs.readFileSync(newTextPath, 'utf-8')
+
+console.log('开始执行性能测试...') // 更新日志消息以匹配函数名
+
+const label = 'createSplitDiff execution time' // 更新标签以匹配函数名
+
+// 开始计时
+console.time(label)
+
+// 执行函数
+try {
+  const _result = createSplitDiff(oldLongText, newLongText) // 将 result 重命名为 _result 以消除未使用变量的警告
+  console.log(_result.changes.length)
+}
+catch (error) {
+  console.error('执行 createSplitDiff 时出错:', error) // 更新错误消息
+}
+
+// 结束计时并打印时间
+console.timeEnd(label)
+
+console.log('性能测试完成.')
+
+// 你可能还需要一个空的 export {} 来让 TypeScript 将其视为一个模块（如果需要）
+// export {};

package/scripts/postinstall.cjs

@@ -1,21 +1,18 @@
-const fs = require('fs')
-const { switchVersion, loadModule } = require('./utils.cjs')
+const fs = require('node:fs')
+const { switchVersion } = require('./utils.cjs')
 
-const Vue = loadModule('vue')
-
-if (fs.existsSync('.local'))
+if (fs.existsSync('.local')) {
   console.log('Currently, it is the local development environment, not doing anything.')
+}
+else {
+  const { version } = require('vue')
 
-else if (!Vue || typeof Vue.version !== 'string')
-  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')
-
-else if (Vue.version.startsWith('2.'))
-  switchVersion('2')
-
-else if (Vue.version.startsWith('3.'))
-  switchVersion('3')
-
-else console.warn(`[v-code-diff] Vue version v${Vue.version} is not suppported.`)
+  if (version.startsWith('2.7.'))
+    switchVersion('2.7')
+  else if (version.startsWith('2.'))
+    switchVersion('2')
+  else if (version.startsWith('3.'))
+    switchVersion('3')
+  else
+    throw new Error(`[v-code-diff] Vue version v${version} is not supported.`)
+}

package/scripts/utils.cjs

@@ -1,36 +1,21 @@
-const fs = require('fs')
-const path = require('path')
+const fs = require('node:fs')
+const path = require('node:path')
 
 const dir = path.resolve(__dirname, '..', 'dist')
 
-function loadModule(name) {
-  try {
-    return require(name)
-  }
-  catch (e) {
-    return undefined
-  }
-}
-
 function copy(name, version, vue) {
   vue = vue || 'vue'
   const src = path.join(dir, `v${version}`, name)
   const dest = path.join(dir, name)
   let content = fs.readFileSync(src, 'utf-8')
   content = content.replace(/'vue'/g, `'${vue}'`)
-  // unlink for pnpm, #92
-  try {
-    fs.unlinkSync(dest)
-  }
-  catch (error) {
-  }
+  fs.rmSync(dest, { force: true })
   fs.writeFileSync(dest, content, 'utf-8')
 }
 
 function switchVersion(version, vue) {
   copy('index.es.js', version, vue)
-  copy('index.cjs.js', version, vue)
+  copy('index.cjs', version, vue)
 }
 
-module.exports.loadModule = loadModule
 module.exports.switchVersion = switchVersion

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,13 +77,14 @@ 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)
+const root = ref<HTMLElement>()
 
 function goToNextDiff() {
-  const diffs = document.querySelectorAll('.blob-code-addition')
+  const diffs = root.value!.querySelectorAll('[data-diff-change]')
   if (currentDiffIndex.value < diffs.length - 1) {
     currentDiffIndex.value++
     updateCurrentDiffHighlight(diffs)
@@ -91,7 +92,7 @@ function goToNextDiff() {
 }
 
 function goToPrevDiff() {
-  const diffs = document.querySelectorAll('.blob-code-addition')
+  const diffs = root.value!.querySelectorAll('[data-diff-change]')
   if (currentDiffIndex.value > 0) {
     currentDiffIndex.value--
     updateCurrentDiffHighlight(diffs)
@@ -99,17 +100,18 @@ function goToPrevDiff() {
 }
 
 function updateCurrentDiffHighlight(diffs: NodeListOf<Element>) {
-  diffs.forEach((diff: { classList: { remove: (arg0: string) => any } }) => diff.classList.remove('current-diff'))
+  root.value!.querySelectorAll('.current-diff').forEach(diff => diff.classList.remove('current-diff'))
 
   const currentDiff = diffs[currentDiffIndex.value]
 
   if (currentDiff) {
-    currentDiff.classList.add('current-diff')
+    currentDiff.querySelectorAll('.blob-code').forEach(diff => diff.classList.add('current-diff'))
     currentDiff.scrollIntoView({ behavior: 'smooth', block: 'center' })
   }
 }
 
 watch(() => props, () => {
+  currentDiffIndex.value = -1
   diffChange.value = raw.value
   emits('diff', {
     stat: {
@@ -122,7 +124,7 @@ watch(() => props, () => {
 </script>
 
 <template>
-  <div class="code-diff-view" :theme="theme" :style="{ maxHeight }">
+  <div ref="root" class="code-diff-view" :theme="theme" :style="{ maxHeight }">
     <div v-if="!hideHeader" class="file-header">
       <!--  line by line -->
       <div v-if="isUnifiedViewer" class="file-info">
@@ -167,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/SplitLine.vue

@@ -16,9 +16,10 @@ function getCodeMarker(type: DiffType) {
   return ''
 }
 
-function onSplitLineMousedown(side: 'left' | 'right') {
-  const leftElements = document.querySelectorAll('.file-diff-split .split-side-left')!
-  const rightElements = document.querySelectorAll('.file-diff-split .split-side-right')!
+function onSplitLineMousedown(event: MouseEvent, side: 'left' | 'right') {
+  const table = (event.currentTarget as HTMLElement).closest('.file-diff-split')!
+  const leftElements = table.querySelectorAll('.split-side-left')
+  const rightElements = table.querySelectorAll('.split-side-right')
 
   for (const el of rightElements)
     el.classList.toggle('no-select', side === 'left')
@@ -37,7 +38,10 @@ function onSplitLineMousedown(side: 'left' | 'right') {
       ⋯
     </td>
   </tr>
-  <tr v-else-if="!splitLine.hide">
+  <tr
+    v-else-if="!splitLine.hide"
+    :data-diff-change="splitLine.left.type === DiffType.DELETE || splitLine.right.type === DiffType.ADD ? '' : undefined"
+  >
     <template v-for="(line, index) in [splitLine.left, splitLine.right]">
       <!-- eslint-disable -->
       <template v-if="line.type === DiffType.EMPTY">
@@ -66,7 +70,7 @@ function onSplitLineMousedown(side: 'left' | 'right') {
             'split-side-left': index === 0,
             'split-side-right': index === 1,
           }"
-          @mousedown="onSplitLineMousedown(index === 0 ? 'left' : 'right')"
+          @mousedown="onSplitLineMousedown($event, index === 0 ? 'left' : 'right')"
         >
           <span
             class="blob-code-inner blob-code-marker" :data-code-marker="getCodeMarker(line.type)"

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/UnifiedLine.vue

@@ -25,7 +25,7 @@ function getCodeMarker(type: DiffType) {
       ⋯
     </td>
   </tr>
-  <tr v-else-if="!line.hide">
+  <tr v-else-if="!line.hide" :data-diff-change="line.type !== DiffType.EQUAL ? '' : undefined">
     <td
       class="blob-num"
       :class="{

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>