v-code-diff 1.4.0 → 1.5.0

package/src/CodeDiff.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue-demi'
+import { computed, ref, watch } from 'vue-demi'
 import { createSplitDiff, createUnifiedDiff } from './utils'
 import UnifiedViewer from './unified/UnifiedViewer.vue'
 import SplitViewer from './split/SplitViewer.vue'
@@ -42,11 +42,15 @@ const newString = computed(() => {
   return props.noDiffLineFeed ? value.replace(/(\r\n)/g, '\n') : value
 })
 
-const diffChange = computed(() =>
+const raw = computed(() =>
   isUnifiedViewer.value
     ? createUnifiedDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context)
     : createSplitDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context),
 )
+const diffChange = ref(raw.value)
+watch(() => props, () => {
+  diffChange.value = raw.value
+}, { deep: true })
 </script>
 
 <template>
@@ -60,11 +64,9 @@ const diffChange = computed(() =>
         </span>
       </div>
     </div>
-    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange.changes" />
-    <SplitViewer v-else :diff-change="diffChange.changes" />
+    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" />
+    <SplitViewer v-else :diff-change="diffChange" />
   </div>
 </template>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>

package/src/split/SplitLine.vue

@@ -5,6 +5,7 @@ import type { SplitLineChange } from '../types'
 const props = defineProps<{
   splitLine: SplitLineChange
 }>()
+const emit = defineEmits(['expand'])
 
 const getCodeMarker = (type: DiffType) => {
   if (type === DiffType.DELETE)
@@ -16,15 +17,15 @@ const getCodeMarker = (type: DiffType) => {
 </script>
 
 <template>
-  <tr v-if="splitLine.fold">
-    <td class="blob-num blob-num-hunk" colspan="1">
+  <tr v-if="splitLine.hideIndex !== undefined && splitLine.hide">
+    <td class="blob-num blob-num-hunk" colspan="1" @click="emit('expand', splitLine)">
       >
     </td>
     <td class="blob-code blob-code-inner blob-code-hunk" colspan="3" align="left">
       ⋯
     </td>
   </tr>
-  <tr v-else>
+  <tr v-else-if="!splitLine.hide">
     <template v-for="line in [splitLine.left, splitLine.right]">
       <!-- eslint-disable -->
       <template v-if="line.type === DiffType.EMPTY">
@@ -32,29 +33,24 @@ const getCodeMarker = (type: DiffType) => {
         <td class="blob-code blob-code-empty empty-cell" />
       </template>
       <template v-else>
-        <td
-          class="blob-num"
-          :class="{
-            'blob-num-deletion': line.type === DiffType.DELETE,
-            'blob-num-addition': line.type === DiffType.ADD,
-            'blob-num-context': line.type === DiffType.EQUAL,
-          }"
-        >
+        <td class="blob-num" :class="{
+          'blob-num-deletion': line.type === DiffType.DELETE,
+          'blob-num-addition': line.type === DiffType.ADD,
+          'blob-num-context': line.type === DiffType.EQUAL,
+          'blob-num-hunk': splitLine.hide !== undefined,
+
+        }">
           {{ line.num }}
         </td>
-        <td
-          class="blob-code"
-          :class="{
-            'blob-code-deletion': line.type === DiffType.DELETE,
-            'blob-code-addition': line.type === DiffType.ADD,
-            'blob-code-context': line.type === DiffType.EQUAL,
-          }"
-        >
-          <span
-            class="blob-code-inner blob-code-marker"
-            :data-code-marker="getCodeMarker(line.type)"
-            v-html="line.code"
-          />
+        <td class="blob-code" :class="{
+          'blob-code-deletion': line.type === DiffType.DELETE,
+          'blob-code-addition': line.type === DiffType.ADD,
+          'blob-code-context': line.type === DiffType.EQUAL,
+          'blob-code-hunk': splitLine.hide !== undefined,
+
+        }">
+          <span class="blob-code-inner blob-code-marker" :data-code-marker="getCodeMarker(line.type)"
+            v-html="line.code" />
         </td>
       </template>
       <!-- eslint-enable -->
@@ -62,5 +58,4 @@ const getCodeMarker = (type: DiffType) => {
   </tr>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

package/src/split/SplitViewer.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
-import type { SplitViewerChange } from '../types'
+import type { SplitLineChange, SplitViewerChange } from '../types'
 import SplitLine from './SplitLine.vue'
 
 const props = defineProps<{
   diffChange: SplitViewerChange
 }>()
+
+function expandHandler({ hideIndex }: SplitLineChange) {
+  if (hideIndex === undefined)
+    return
+  props.diffChange.collector[hideIndex!].lines.forEach((line) => {
+    line.hide = false
+    line.fold = false
+  })
+}
 </script>
 
 <template>
@@ -16,7 +25,7 @@ const props = defineProps<{
       <col>
     </colgroup>
     <tbody>
-      <SplitLine v-for="(item, index) in diffChange" :key="index" :split-line="item" />
+      <SplitLine v-for="(item, index) in diffChange?.changes" :key="index" :split-line="item" @expand="expandHandler" />
     </tbody>
   </table>
 </template>

package/src/types.ts

@@ -5,6 +5,16 @@ export const enum DiffType {
   EMPTY = 'empty',
 }
 
+export interface UnifiedLineUnchanges {
+  lines: UnifiedLineChange[]
+  fold: boolean
+}
+
+export interface SplitLineUnchanges {
+  lines: SplitLineChange[]
+  fold: boolean
+}
+
 export interface DiffLine {
   type: DiffType
   code?: string
@@ -15,6 +25,8 @@ export interface SplitLineChange {
   fold?: boolean
   left: DiffLine
   right: DiffLine
+  hide?: boolean
+  hideIndex?: number
 }
 
 export interface UnifiedLineChange {
@@ -23,18 +35,23 @@ export interface UnifiedLineChange {
   code: string
   delNum?: number
   addNum?: number
+  hide?: boolean
+  hideIndex?: number
 }
 
 export interface DiffStat {
   additionsNum: number
   deletionsNum: number
 }
+
 export interface SplitViewerChange {
   changes: SplitLineChange[]
+  collector: SplitLineUnchanges[]
   stat: DiffStat
 }
 
 export interface UnifiedViewerChange {
   changes: UnifiedLineChange[]
+  collector: UnifiedLineUnchanges[]
   stat: DiffStat
 }

package/src/unified/UnifiedLine.vue

@@ -5,6 +5,7 @@ import { DiffType } from '../types'
 const props = defineProps<{
   line: UnifiedLineChange
 }>()
+const emit = defineEmits(['expand'])
 
 const getCodeMarker = (type: DiffType) => {
   if (type === DiffType.DELETE)
@@ -16,24 +17,22 @@ const getCodeMarker = (type: DiffType) => {
 </script>
 
 <template>
-  <tr v-if="line.fold">
-    <td class="blob-num blob-num-hunk">
-      >
-    </td>
-    <td class="blob-num blob-num-hunk">
+  <tr v-if="line.hideIndex !== undefined && line.hide">
+    <td class="blob-num blob-num-hunk text-center" colspan="2" @click="emit('expand', line)">
       >
     </td>
     <td class="blob-code blob-code-hunk" align="left">
       ⋯
     </td>
   </tr>
-  <tr v-else>
+  <tr v-else-if="!line.hide">
     <td
       class="blob-num"
       :class="{
         'blob-num-deletion': line.type === DiffType.DELETE,
         'blob-num-addition': line.type === DiffType.ADD,
         'blob-num-context': line.type === DiffType.EQUAL,
+        'blob-num-hunk': line.hide !== undefined,
       }"
     >
       {{ line.delNum }}
@@ -44,6 +43,7 @@ const getCodeMarker = (type: DiffType) => {
         'blob-num-deletion': line.type === DiffType.DELETE,
         'blob-num-addition': line.type === DiffType.ADD,
         'blob-num-context': line.type === DiffType.EQUAL,
+        'blob-num-hunk': line.hide !== undefined,
       }"
     >
       {{ line.addNum }}
@@ -54,6 +54,7 @@ const getCodeMarker = (type: DiffType) => {
         'blob-code-deletion': line.type === DiffType.DELETE,
         'blob-code-addition': line.type === DiffType.ADD,
         'blob-code-context': line.type === DiffType.EQUAL,
+        'blob-code-hunk': line.hide !== undefined,
       }"
     >
       <span class="blob-code-inner blob-code-marker" :data-code-marker="getCodeMarker(line.type)" v-html="line.code" />

package/src/unified/UnifiedViewer.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
-import type { UnifiedLineChange } from '../types'
+import type { UnifiedLineChange, UnifiedViewerChange } from '../types'
 import UnifiedLine from './UnifiedLine.vue'
 
 const props = defineProps<{
-  diffChange: UnifiedLineChange[]
+  diffChange: UnifiedViewerChange
 }>()
+
+function expandHandler({ hideIndex }: UnifiedLineChange) {
+  if (hideIndex === undefined)
+    return
+  props.diffChange.collector[hideIndex!].lines.forEach((line) => {
+    line.hide = false
+    line.fold = false
+  })
+}
 </script>
 
 <template>
   <table class="diff-table">
     <tbody>
-      <UnifiedLine v-for="(item, index) in diffChange" :key="index" :line="item" />
+      <UnifiedLine v-for="(item, index) in diffChange?.changes" :key="index" :line="item" @expand="expandHandler" />
     </tbody>
   </table>
 </template>

package/src/utils.ts

@@ -3,7 +3,7 @@ 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, SplitLineChange, SplitViewerChange, UnifiedLineChange, UnifiedViewerChange } from './types'
+import type { DiffLine, DiffStat, SplitLineChange, SplitLineUnchanges, SplitViewerChange, UnifiedLineChange, UnifiedLineUnchanges, UnifiedViewerChange } from './types'
 
 const MODIFIED_START_TAG = '<code-diff-modified>'
 const MODIFIED_CLOSE_TAG = '</code-diff-modified>'
@@ -168,6 +168,7 @@ export function createSplitDiff(
   const rawChanges: SplitLineChange[] = []
   const result: SplitViewerChange = {
     changes: rawChanges,
+    collector: [],
     stat: calcDiffStat(changes),
   }
 
@@ -208,7 +209,6 @@ export function createSplitDiff(
           left = newEmptySplitDiff()
           right = newSplitDiff(DiffType.ADD, addNum, highlightCode)
         }
-
         rawChanges.push({ left, right })
       }
       break
@@ -300,17 +300,35 @@ export function createSplitDiff(
       line.fold = true
   }
 
-  const processedChanges = []
+  const processedChanges: SplitViewerChange['changes'] = []
+  let unchanges: SplitLineUnchanges['lines'] = [] // collector for unchanged lines.
+
   for (let i = 0; i < rawChanges.length; i++) {
     const line = rawChanges[i]
     if (line.fold === false) {
+      if (unchanges.length) {
+        unchanges[0].hideIndex = result.collector.length
+        result.collector.push({
+          lines: unchanges,
+          fold: true,
+        })
+        unchanges = []
+      }
       processedChanges.push(line)
       continue
     }
-    if (line.fold === true) {
-      if (processedChanges[processedChanges.length - 1]?.fold !== true)
-        processedChanges.push(line)
-    }
+
+    line.hide = true
+    unchanges.push(line)
+    processedChanges.push(line)
+  }
+  if (unchanges.length) {
+    unchanges[0].hideIndex = result.collector.length
+    result.collector.push({
+      lines: unchanges,
+      fold: true,
+    })
+    unchanges = []
   }
   result.changes = processedChanges
 
@@ -333,6 +351,7 @@ export function createUnifiedDiff(
   const rawChanges: UnifiedLineChange[] = []
   const result: UnifiedViewerChange = {
     changes: rawChanges,
+    collector: [],
     stat: calcDiffStat(changes),
   }
 
@@ -449,16 +468,37 @@ export function createUnifiedDiff(
   }
 
   const processedChanges = []
+  let unchanges: UnifiedLineUnchanges['lines'] = [] // collector for unchanged lines.
+
   for (let i = 0; i < rawChanges.length; i++) {
     const line = rawChanges[i]
     if (line.fold === false) {
+      if (unchanges.length) {
+        unchanges[0].hideIndex = result.collector.length
+        // Keeps "hideIndex" in first element of collector
+        // for delegating lines to expand.
+        result.collector.push({
+          lines: unchanges,
+          fold: true,
+        })
+        unchanges = []
+      }
       processedChanges.push(line)
       continue
     }
-    if (line.fold === true) {
-      if (i === 0 || processedChanges[processedChanges.length - 1]?.fold !== true)
-        processedChanges.push(line)
+    if (line.type === 'equal') {
+      line.hide = true
+      unchanges.push(line)
     }
+    processedChanges.push(line)
+  }
+  if (unchanges.length) {
+    unchanges[0].hideIndex = result.collector.length
+    result.collector.push({
+      lines: unchanges,
+      fold: true,
+    })
+    unchanges = []
   }
   result.changes = processedChanges