v-code-diff 1.13.0 → 1.13.2

package/package.json

@@ -1,14 +1,30 @@
 {
   "name": "v-code-diff",
   "type": "module",
-  "version": "1.13.0",
-  "description": "template component for vue-demi, can dev and build",
+  "version": "1.13.2",
+  "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",
@@ -50,7 +66,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,6 +83,7 @@
     "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",
@@ -75,14 +92,5 @@
     "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

@@ -81,9 +81,10 @@ const diffChange = ref(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">

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/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/utils.ts

@@ -11,6 +11,17 @@ const MODIFIED_CLOSE_TAG = '</code-diff-modified>'
 const startEntity = MODIFIED_START_TAG.replace('<', '&lt;').replace('>', '&gt;')
 const closeEntity = MODIFIED_CLOSE_TAG.replace('<', '&lt;').replace('>', '&gt;')
 
+function escapeHtml(code: string): string {
+  const entities: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#39;',
+  }
+  return code.replace(/[&<>"']/g, char => entities[char])
+}
+
 function lineType(diff: Diff.Change): DiffType {
   if (diff === undefined)
     return DiffType.EQUAL
@@ -59,6 +70,12 @@ function diffLines(prev: string, current: string) {
 }
 
 function getHighlightCode(language: string, code: string) {
+  if (typeof document === 'undefined') {
+    return escapeHtml(code)
+      .replace(new RegExp(startEntity, 'g'), '<span class="x">')
+      .replace(new RegExp(closeEntity, 'g'), '</span>')
+  }
+
   const hasModifiedTags = code.match(new RegExp(`(${MODIFIED_START_TAG}|${MODIFIED_CLOSE_TAG})`, 'g'))
 
   if (!hasModifiedTags)

package/types/index.d.ts

@@ -8,8 +8,11 @@ declare const _default: {
 
 // eslint-disable-next-line
 declare const CodeDiff: DefineComponent<{}, {}, any>
+// eslint-disable-next-line
+declare const CodeReader: DefineComponent<{}, {}, any>
 export {
   CodeDiff,
+  CodeReader,
 }
 
 export default _default