v-code-diff 1.14.0 → 1.15.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-code-diff",
   "type": "module",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "packageManager": "pnpm@11.2.2",
   "description": "A code diff viewer for Vue 2.6, Vue 2.7, and Vue 3",
   "license": "MIT",
@@ -56,7 +56,9 @@
     "postinstall": "node scripts/postinstall.cjs",
     "prepublishOnly": "npm run build",
     "release": "bumpp --commit --no-push --tag && npm publish",
-    "test": "vitest run"
+    "test": "run-s test:unit test:types",
+    "test:types": "tsc --noEmit --skipLibCheck --module ESNext --moduleResolution node --target ES2020 tests/types.test-d.ts",
+    "test:unit": "vitest run"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.4.9",

package/src/CodeDiff.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef, watch } from 'vue-demi'
+import type { DiffChangeClickEvent } from './types'
 import { createSplitDiff, createUnifiedDiff } from './utils'
 import UnifiedViewer from './unified/UnifiedViewer.vue'
 import SplitViewer from './split/SplitViewer.vue'
@@ -23,6 +24,7 @@ interface Props {
   newFilename?: string
   hideHeader?: boolean
   hideStat?: boolean
+  hideNavigation?: boolean
   theme?: 'light' | 'dark'
   // Give a pattern to ignore matching lines eg: '(time|token)'
   ignoreMatchingLines?: string
@@ -41,12 +43,14 @@ const props = withDefaults(defineProps<Props>(), {
   newFilename: undefined,
   hideHeader: false,
   hideStat: false,
+  hideNavigation: false,
   theme: 'light',
   ignoreMatchingLines: undefined,
 })
 
 const emits = defineEmits<{
   (e: 'diff', diffResult: DiffResult): void
+  (e: 'change-click', payload: DiffChangeClickEvent): void
 }>()
 
 interface DiffResult {
@@ -132,7 +136,7 @@ watch(() => props, () => {
           <div class="info-left">{{ filename }}</div>
           <div class="info-left">{{ newFilename }}</div>
         </span>
-        <span class="diff-commandbar">
+        <span v-if="!hideNavigation" class="diff-commandbar">
           <button class="command-item-button" title="Next Change" @click="goToNextDiff">
             <DownArrowIcon />
           </button>
@@ -152,7 +156,7 @@ watch(() => props, () => {
         <span class="info-left">{{ filename }}</span>
         <span class="info-right">
           <span style="margin-left: 20px;">{{ newFilename }}</span>
-          <span class="diff-commandbar">
+          <span v-if="!hideNavigation" class="diff-commandbar">
             <button class="command-item-button" title="Next Change" @click="goToNextDiff">
               <DownArrowIcon />
             </button>
@@ -169,8 +173,8 @@ watch(() => props, () => {
         </span>
       </div>
     </div>
-    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" :language="language" />
-    <SplitViewer v-else :diff-change="diffChange" :language="language" />
+    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" :language="language" @change-click="emits('change-click', $event)" />
+    <SplitViewer v-else :diff-change="diffChange" :language="language" @change-click="emits('change-click', $event)" />
   </div>
 </template>
 

package/src/split/SplitLine.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { DiffType } from '../types'
-import type { SplitLineChange } from '../types'
+import type { DiffChangeClickEvent, DiffLine, SplitLineChange } from '../types'
 
 defineProps<{
   splitLine: SplitLineChange
 }>()
 
-const emit = defineEmits(['expand'])
+const emit = defineEmits<{
+  (e: 'expand', line: SplitLineChange): void
+  (e: 'change-click', payload: DiffChangeClickEvent): void
+}>()
 
 function getCodeMarker(type: DiffType) {
   if (type === DiffType.DELETE)
@@ -27,6 +30,20 @@ function onSplitLineMousedown(event: MouseEvent, side: 'left' | 'right') {
   for (const el of leftElements)
     el.classList.toggle('no-select', side === 'right')
 }
+
+function onChangeClick(event: MouseEvent, line: DiffLine, side: 'old' | 'new') {
+  if (line.type !== DiffType.ADD && line.type !== DiffType.DELETE)
+    return
+
+  // Vue 2 DOM templates require kebab-case event names.
+  // eslint-disable-next-line vue/custom-event-name-casing
+  emit('change-click', {
+    side,
+    type: line.type,
+    lineNumber: line.num!,
+    event,
+  })
+}
 </script>
 
 <template>
@@ -71,6 +88,7 @@ function onSplitLineMousedown(event: MouseEvent, side: 'left' | 'right') {
             'split-side-right': index === 1,
           }"
           @mousedown="onSplitLineMousedown($event, index === 0 ? 'left' : 'right')"
+          @click="onChangeClick($event, line, index === 0 ? 'old' : 'new')"
         >
           <span
             class="blob-code-inner blob-code-marker" :data-code-marker="getCodeMarker(line.type)"

package/src/split/SplitViewer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef, watch } from 'vue-demi'
-import type { SplitLineChange, SplitViewerChange } from '../types'
+import type { DiffChangeClickEvent, SplitLineChange, SplitViewerChange } from '../types'
 import { RENDER_BATCH_SIZE, highlightSplitLine } from '../utils'
 import SplitLine from './SplitLine.vue'
 
@@ -9,6 +9,10 @@ const props = defineProps<{
   language: string
 }>()
 
+const emit = defineEmits<{
+  (e: 'change-click', payload: DiffChangeClickEvent): void
+}>()
+
 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))
@@ -50,7 +54,13 @@ function loadMore() {
       <col>
     </colgroup>
     <tbody>
-      <SplitLine v-for="(item, index) in renderedChanges" :key="index" :split-line="item" @expand="expandHandler" />
+      <SplitLine
+        v-for="(item, index) in renderedChanges"
+        :key="index"
+        :split-line="item"
+        @expand="expandHandler"
+        @change-click="emit('change-click', $event)"
+      />
       <tr v-if="remainingLines">
         <td class="blob-code blob-code-hunk load-more" colspan="4">
           <button class="load-more-button" type="button" @click="loadMore">

package/src/types.ts

@@ -21,6 +21,13 @@ export interface DiffLine {
   num?: number
 }
 
+export interface DiffChangeClickEvent {
+  side: 'old' | 'new'
+  type: DiffType.ADD | DiffType.DELETE
+  lineNumber: number
+  event: MouseEvent
+}
+
 export interface SplitLineChange {
   fold?: boolean
   highlighted?: boolean

package/src/unified/UnifiedLine.vue

@@ -1,11 +1,28 @@
 <script lang="ts" setup>
-import type { UnifiedLineChange } from '../types'
+import type { DiffChangeClickEvent, UnifiedLineChange } from '../types'
 import { DiffType } from '../types'
 
-defineProps<{
+const props = defineProps<{
   line: UnifiedLineChange
 }>()
-const emit = defineEmits(['expand'])
+const emit = defineEmits<{
+  (e: 'expand', line: UnifiedLineChange): void
+  (e: 'change-click', payload: DiffChangeClickEvent): void
+}>()
+
+function onChangeClick(event: MouseEvent) {
+  if (props.line.type !== DiffType.ADD && props.line.type !== DiffType.DELETE)
+    return
+
+  // Vue 2 DOM templates require kebab-case event names.
+  // eslint-disable-next-line vue/custom-event-name-casing
+  emit('change-click', {
+    side: props.line.type === DiffType.DELETE ? 'old' : 'new',
+    type: props.line.type,
+    lineNumber: props.line.type === DiffType.DELETE ? props.line.delNum! : props.line.addNum!,
+    event,
+  })
+}
 
 function getCodeMarker(type: DiffType) {
   if (type === DiffType.DELETE)
@@ -25,7 +42,7 @@ function getCodeMarker(type: DiffType) {
       ⋯
     </td>
   </tr>
-  <tr v-else-if="!line.hide" :data-diff-change="line.type !== DiffType.EQUAL ? '' : undefined">
+  <tr v-else-if="!line.hide" :data-diff-change="line.type !== DiffType.EQUAL ? '' : undefined" @click="onChangeClick">
     <td
       class="blob-num"
       :class="{

package/src/unified/UnifiedViewer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef, watch } from 'vue-demi'
-import type { UnifiedLineChange, UnifiedViewerChange } from '../types'
+import type { DiffChangeClickEvent, UnifiedLineChange, UnifiedViewerChange } from '../types'
 import { RENDER_BATCH_SIZE, highlightUnifiedLine } from '../utils'
 import UnifiedLine from './UnifiedLine.vue'
 
@@ -9,6 +9,10 @@ const props = defineProps<{
   language: string
 }>()
 
+const emit = defineEmits<{
+  (e: 'change-click', payload: DiffChangeClickEvent): void
+}>()
+
 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))
@@ -44,7 +48,13 @@ function loadMore() {
 <template>
   <table class="diff-table">
     <tbody>
-      <UnifiedLine v-for="(item, index) in renderedChanges" :key="index" :line="item" @expand="expandHandler" />
+      <UnifiedLine
+        v-for="(item, index) in renderedChanges"
+        :key="index"
+        :line="item"
+        @expand="expandHandler"
+        @change-click="emit('change-click', $event)"
+      />
       <tr v-if="remainingLines">
         <td class="blob-code blob-code-hunk load-more" colspan="3">
           <button class="load-more-button" type="button" @click="loadMore">

package/src/utils.ts

@@ -74,6 +74,11 @@ function diffLines(prev: string, current: string) {
       current = current.slice(0, -1)
   }
 
+  if (prev)
+    prev += '\n'
+  if (current)
+    current += '\n'
+
   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') : []

package/types/index.d.ts

@@ -1,18 +1,75 @@
 import type { HLJSApi } from 'highlight.js'
-import type { DefineComponent } from 'vue-demi'
+import type { DefineComponent, VNode } from 'vue-demi'
 
-declare const _default: {
-  install: (app: any) => void
-  hljs: HLJSApi
+export interface CodeDiffProps {
+  newString: string
+  oldString: string
+  language?: string
+  context?: number
+  diffStyle?: 'word' | 'char'
+  forceInlineComparison?: boolean
+  outputFormat?: 'line-by-line' | 'side-by-side'
+  trim?: boolean
+  noDiffLineFeed?: boolean
+  maxHeight?: string
+  filename?: string
+  newFilename?: string
+  hideHeader?: boolean
+  hideStat?: boolean
+  hideNavigation?: boolean
+  theme?: 'light' | 'dark'
+  ignoreMatchingLines?: string
+}
+
+export interface CodeReaderProps {
+  text: string
+  language?: string
+}
+
+export interface DiffStat {
+  additionsNum: number
+  deletionsNum: number
+  ignoreAdditionsNum: number
+  ignoreDeletionsNum: number
+}
+
+export interface DiffResult {
+  stat: {
+    isChanged: boolean
+    addNum: number
+    delNum: number
+  }
+}
+
+export interface DiffChangeClickEvent {
+  side: 'old' | 'new'
+  type: 'added' | 'removed'
+  lineNumber: number
+  event: MouseEvent
 }
 
-// eslint-disable-next-line
-declare const CodeDiff: DefineComponent<{}, {}, any>
-// eslint-disable-next-line
-declare const CodeReader: DefineComponent<{}, {}, any>
-export {
-  CodeDiff,
-  CodeReader,
+export interface CodeDiffSlots {
+  stat: (props: { stat: DiffStat }) => VNode[]
+}
+
+interface CodeDiffEmits {
+  diff: (diffResult: DiffResult) => void
+  'change-click': (payload: DiffChangeClickEvent) => void
+}
+
+type Empty = Record<string, never>
+type CodeDiffComponent = DefineComponent<CodeDiffProps, Empty, Empty, Empty, Empty, Empty, Empty, CodeDiffEmits, 'diff' | 'change-click'>
+
+export declare const CodeDiff: CodeDiffComponent & {
+  new (): InstanceType<CodeDiffComponent> & { $slots: CodeDiffSlots }
+}
+
+export declare const CodeReader: DefineComponent<CodeReaderProps>
+export declare const hljs: HLJSApi
+
+declare const plugin: {
+  install: (app: { component: (name: string, component: unknown) => unknown }) => void
+  hljs: HLJSApi
 }
 
-export default _default
+export default plugin