@yuhufe/wtool-vdiff 0.0.9 → 0.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yuhufe/wtool-vdiff",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "description": "Monaco diff viewer as Vue 3 Web Component",
   "keywords": [
@@ -11,6 +11,14 @@
     "vue3",
     "web-component"
   ],
+  "scripts": {
+    "vite": "pnpm run dev:site",
+    "dev:lib": "vite build --watch --mode development",
+    "build:site": "vite build --mode production --config site/vite.config.ts",
+    "dev:site": "vite --config site/vite.config.ts",
+    "build": "vite build --mode production",
+    "pub": "pnpm run build && pnpm publish"
+  },
   "main": "./dist/wtool-vdiff.cjs.js",
   "module": "./dist/wtool-vdiff.es.js",
   "files": [
@@ -31,26 +39,18 @@
     "@wsfe/vue-tree": "^4.1.1"
   },
   "devDependencies": {
+    "@yuhufe/web-common": "workspace:*",
+    "@yuhufe/web-ui": "workspace:*",
     "@vitejs/plugin-vue": "^5.2.0",
     "less": "4.6.4",
     "typescript": "^6.0.3",
     "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "5.0.1",
     "vite-plugin-dts": "^4.5.3",
-    "vue": "^3.5.0",
-    "@yuhufe/web-ui": "0.1.1",
-    "@yuhufe/web-common": "0.1.1"
+    "vue": "^3.5.40"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/defghy/web-toolkits.git"
-  },
-  "scripts": {
-    "vite": "pnpm run dev:site",
-    "dev:lib": "vite build --watch --mode development",
-    "build:site": "vite build --mode production --config site/vite.config.ts",
-    "dev:site": "vite --config site/vite.config.ts",
-    "build": "vite build --mode production",
-    "pub": "pnpm run build && pnpm publish"
   }
-}
+}

package/src/DiffViewer/DiffViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="diff-viewer-wrap" :style="viewerStyle" @viewStateChange="">
-    <TopBar class="top-bar" :diffPair="diffPair" :diffPatch="diffPatch" />
+    <TopBar class="top-bar" :diffPair="diffPair" />
     <div class="content-wrap" v-show="!viewed" v-loading="loading">
       <MonacoDiffViewer
         class="monaco-container"
@@ -28,6 +28,7 @@ import { useDiffViewer } from './useDiffView'
 import { patch2Pair } from './utils/patch2Pair'
 import { autoHeight } from './utils/autoHeight'
 import { HEIGHT_TOP_BAR } from './const'
+import { debugLog } from '../utils'
 
 const emit = defineEmits<{
   viewStateChange: [data: { viewed: boolean; rawed: boolean }]
@@ -39,7 +40,7 @@ const loading = ref(true)
 const _renderStart = performance.now()
 const onMonacoRenderComplete = async () => {
   const cost = performance.now() - _renderStart
-  console.log(`[DiffViewer] 渲染耗时: ${cost.toFixed(2)} ms`)
+  debugLog(`[DiffViewer] 渲染耗时: ${cost.toFixed(2)} ms`)
   loading.value = false
 }
 
@@ -62,7 +63,7 @@ const initDiff = function () {
   diffPair.value = patch2Pair(props.diffPatch)
 }
 initDiff()
-console.log(`[DiffViewer] patch耗时: ${(performance.now() - _renderStart).toFixed(2)} ms`)
+debugLog(`[DiffViewer] patch耗时: ${(performance.now() - _renderStart).toFixed(2)} ms`)
 
 const originalCode = computed(() => diffPair.value[0]?.content ?? '')
 const modifiedCode = computed(() => diffPair.value[1]?.content ?? '')

package/src/DiffViewer/TopBar.vue

@@ -4,8 +4,8 @@
       <div class="filename">{{ filenameDisplay }}</div>
       <span :class="['diff-type-tag', diffType]">{{ diffTypeLabel }}</span>
       <div class="diff-line-num">
-        <div class="add" v-if="diffType !== 'del'">+{{ displayedChanged.added }}</div>
-        <div class="del" v-if="diffType !== 'add'">-{{ displayedChanged.removed }}</div>
+        <div class="add" v-if="diffType !== 'del'">+{{ changed.added }}</div>
+        <div class="del" v-if="diffType !== 'add'">-{{ changed.removed }}</div>
       </div>
     </div>
     <div class="toolbar">
@@ -25,18 +25,15 @@
 import { computed, ref, onMounted } from 'vue'
 import { useDiffViewer } from './useDiffView'
 import { HEIGHT_TOP_BAR } from './const'
-import { parsePatchHunks } from '@/utils/patch'
 
 const { funcs, registerFunc } = useDiffViewer()
 
 const props = withDefaults(
   defineProps<{
     diffPair?: { filename: string; content: string | null }[]
-    diffPatch?: string
   }>(),
   {
     diffPair: () => [],
-    diffPatch: '',
   }
 )
 
@@ -90,22 +87,6 @@ onMounted(() => {
 
 // 变更行数
 const changed = ref({ added: 0, removed: 0 })
-const patchChanged = computed(() => {
-  const result = { added: 0, removed: 0 }
-
-  for (const hunk of parsePatchHunks(props.diffPatch)) {
-    for (const line of hunk.lines) {
-      if (line.startsWith('+')) {
-        result.added++
-      } else if (line.startsWith('-')) {
-        result.removed++
-      }
-    }
-  }
-
-  return result
-})
-const displayedChanged = computed(() => (props.diffPatch ? patchChanged.value : changed.value))
 function updateChangedLines(newVal) {
   Object.assign(changed.value, newVal)
 }

package/src/DiffViewer/utils/patch2Pair.ts

@@ -2,7 +2,7 @@ import { parsePatchFilenames, parsePatchHunks } from '@/utils/patch'
 
 export interface FilePair {
   filename: string
-  content: string
+  content: string | null
 }
 
 export interface PatchChangedLineBlock {
@@ -23,8 +23,8 @@ export interface PatchPairLayout {
  *   - hunk 之外的行（patch 未提供内容）：两侧各补一个空行撑开行号，
  *     Monaco hideUnchangedRegions 会将这些相同的空行折叠并显示正确的行号范围
  *   - context 行（' '）：两侧均写入真实内容
- *   - 连续的删除（'-'）/ 新增（'+'）块：收集后成对对齐写入，
- *     行数较少的一侧补空行，使 Monaco 能在同一视觉行渲染替换关系
+ *   - 连续的删除（'-'）/ 新增（'+'）块：分别写入对应侧，
+ *     由 Monaco 自己为纯新增、纯删除和不等长替换生成视觉占位
  */
 export const patch2PairWithLayout = function (patch: string): PatchPairLayout {
   if (!patch) {
@@ -47,17 +47,17 @@ export const patch2PairWithLayout = function (patch: string): PatchPairLayout {
 
   const pendingDel: string[] = []
   const pendingAdd: string[] = []
+  let layoutLineCount = 0
 
   const flushPending = () => {
     const maxLen = Math.max(pendingDel.length, pendingAdd.length)
     if (maxLen > 0) {
-      const start = Math.max(origLines.length, modLines.length) + 1
+      const start = layoutLineCount + 1
       changedLineBlocks.push({ start, end: start + maxLen - 1 })
+      layoutLineCount += maxLen
     }
-    for (let i = 0; i < maxLen; i++) {
-      origLines.push(pendingDel[i] ?? '')
-      modLines.push(pendingAdd[i] ?? '')
-    }
+    origLines.push(...pendingDel)
+    modLines.push(...pendingAdd)
     pendingDel.length = 0
     pendingAdd.length = 0
   }
@@ -67,6 +67,8 @@ export const patch2PairWithLayout = function (patch: string): PatchPairLayout {
 
   for (const hunk of hunks) {
     // hunk 之前（或两个 hunk 之间）的 gap：两侧各补空行对齐行号
+    const origGap = hunk.origStart - origCursor
+    const modGap = hunk.modStart - modCursor
     while (origCursor < hunk.origStart) {
       origLines.push('')
       origCursor++
@@ -75,6 +77,7 @@ export const patch2PairWithLayout = function (patch: string): PatchPairLayout {
       modLines.push('')
       modCursor++
     }
+    layoutLineCount += Math.max(0, origGap, modGap)
 
     for (const line of hunk.lines) {
       const prefix = line[0]
@@ -86,6 +89,7 @@ export const patch2PairWithLayout = function (patch: string): PatchPairLayout {
         modLines.push(content)
         origCursor++
         modCursor++
+        layoutLineCount++
       } else if (prefix === '-') {
         pendingDel.push(content)
         origCursor++
@@ -98,13 +102,16 @@ export const patch2PairWithLayout = function (patch: string): PatchPairLayout {
     flushPending()
   }
 
+  const originalContent = origLines.length === 0 && modLines.length > 0 ? null : origLines.join('\n')
+  const modifiedContent = modLines.length === 0 && origLines.length > 0 ? null : modLines.join('\n')
+
   return {
     pair: [
-      { filename: origFilename, content: origLines.join('\n') },
-      { filename: modFilename, content: modLines.join('\n') },
+      { filename: origFilename, content: originalContent },
+      { filename: modFilename, content: modifiedContent },
     ],
     changedLineBlocks,
-    totalLines: Math.max(origLines.length, modLines.length),
+    totalLines: layoutLineCount,
   }
 }
 

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+export const debugLog = function (...args: unknown[]) {
+  if (import.meta.env.DEV) {
+    console.log(...args)
+  }
+}