v-code-diff - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

package.json

 {
   "name": "v-code-diff",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "template component for vue-demi, can dev and build",
@@ -26,5 +26,7 @@ "main": "dist/index.cjs",
     "clean": "rimraf ./dist",
+    "deploy:demo": "pnpm --filter demo gh-pages",
     "dev:2": "vue-demi-switch 2 vue2 && pnpm --filter vue2-playground dev",
     "dev:2.7": "vue-demi-switch 2.7 vue2 && pnpm --filter vue2.7-playground dev",
     "dev:3": "vue-demi-switch 3 vue3 && pnpm --filter vue3-playground dev",
+    "dev:demo": "vue-demi-switch 3 vue3 && pnpm --filter demo dev",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix --ignore-path .gitignore",
@@ -31,0 +33,0 @@ "postinstall": "node scripts/postinstall.js",

README.md

@@ -110,3 +110,3 @@ # v-code-diff
 | newString      | New string	                                                                                                                                                             | string  | -                         | -             |
-| context        | The number of lines to separate different parts so that they are not hidden                                                                                             | number  | -                         | -             |
+| context        | The number of lines to separate different parts so that they are not hidden                                                                                             | number  | -                         | 10            |
 | outputFormat   | Display mode	                                                                                                                                                           | string  | line-by-line，side-by-side | line-by-line  |
@@ -116,2 +116,4 @@ | diffStyle      | Difference style, word-level differences or letter-level differences                                                                                                    | string  | word, char                | word          |
 | noDiffLineFeed | Don't diff Windows line feed (CRLF) and Linux line feed (LF)                                                                                                            | boolean | -                         | false         |
+| maxHeight      | Maximum height of component, for example: 300px                                                                                                                         | string  | -                         | undefined     |
+| filename       | Filename                                                                                                                                                                | string  | -                         | undefined     |
 
@@ -160,5 +162,6 @@ ## Extend languages
   have been removed.
-* In the 1.x version, the following component properties (Prop) have been removed:
-  * highlight
-  * drawFileList
+* In the 1.x version, the following component properties (Prop) have been changed:
+  * highlight - removed
+  * drawFileList - removed
+  * fileName - rename to "filename"
 
@@ -199,3 +202,4 @@ Below is a detailed comparison of the two versions, you can refer to it to complete the migration.
 
-1. Remove the diff2html dependency and draw the UI by self. By getting rid of the diff2html dependency, many styling problems have been resolved.
+1. Remove the diff2html dependency and draw the UI by self. By getting rid of the diff2html dependency, many styling
+   problems have been resolved.
 2. More accurate syntax highlighting and faster highlighting speed.
@@ -202,0 +206,0 @@

scripts/postinstall.js

@@ -6,3 +6,3 @@ const { switchVersion, loadModule } = require('./utils')
 if (!Vue || typeof Vue.version !== 'string')
-  console.warn('[vue-demi-sfc-component-template] Vue is not found. Please run "npm install vue" to install.')
+  console.warn('[v-code-diff] Vue is not found. Please run "npm install vue" to install.')
 
@@ -19,2 +19,2 @@ else if (Vue.version.startsWith('2.7.'))
 else
-  console.warn(`[vue-demi-sfc-component-template] Vue version v${Vue.version} is not suppported.`)
+  console.warn(`[v-code-diff] Vue version v${Vue.version} is not suppported.`)

src/types.ts

@@ -28,3 +28,14 @@ export const enum DiffType {
 
-export type SplitViewerChange = SplitDiffLine[]
-export type UnifiedViewerChange = UnifiedLine[]
+export interface DiffStat {
+  additionsNum: number
+  deletionsNum: number
+}
+export interface SplitViewerChange {
+  changes: SplitDiffLine[]
+  stat: DiffStat
+}
+
+export interface UnifiedViewerChange {
+  changes: UnifiedLine[]
+  stat: DiffStat
+}

src/utils.ts

@@ -5,3 +5,3 @@ import * as Diff from 'diff'
 import { DiffType } from './types'
-import type { DiffLine, SplitViewerChange, UnifiedViewerChange } from './types'
+import type { DiffLine, DiffStat, SplitDiffLine, SplitViewerChange, UnifiedLine, UnifiedViewerChange } from './types'
 
@@ -117,2 +117,17 @@ const MODIFIED_START_TAG = '<code-diff-modified>'
 
+function calcDiffStat(changes: Change[]): DiffStat {
+  const count = (s: string, c: string) => (s.match(new RegExp(c, 'g')) || []).length
+
+  let additionsNum = 0
+  let deletionsNum = 0
+  for (const change of changes) {
+    if (change.added)
+      additionsNum += count(change.value.trim(), '\n') + 1
+
+    if (change.removed)
+      deletionsNum += count(change.value.trim(), '\n') + 1
+  }
+  return { additionsNum, deletionsNum }
+}
+
 export function createSplitDiff(
@@ -124,3 +139,3 @@ oldString: string,
   context = 10,
-) {
+): SplitViewerChange {
   const newEmptySplitDiff = (): DiffLine => ({ type: DiffType.EMPTY })
@@ -135,3 +150,8 @@ const newSplitDiff = (type: DiffType, num: number, code: string): DiffLine => ({ type, num, code })
 
-  const result: SplitViewerChange = []
+  const rawChanges: SplitDiffLine[] = []
+  const result: SplitViewerChange = {
+    changes: rawChanges,
+    stat: calcDiffStat(changes),
+  }
+
   for (let i = 0; i < changes.length; i++) {
@@ -175,3 +195,3 @@ if (skip) {
 
-        result.push({ left, right })
+        rawChanges.push({ left, right })
       }
@@ -189,3 +209,3 @@ break
         const highlightCode = getHighlightCode(language, line)
-        result.push({
+        rawChanges.push({
           left: newSplitDiff(DiffType.EQUAL, delNum, highlightCode),
@@ -204,3 +224,3 @@ right: newSplitDiff(DiffType.EQUAL, addNum, highlightCode),
 
-          result.push({
+          rawChanges.push({
             left: newSplitDiff(DiffType.DELETE, delNum, getHighlightCode(language, line)),
@@ -235,3 +255,3 @@ right: newEmptySplitDiff(),
 
-          result.push({ left, right })
+          rawChanges.push({ left, right })
         }
@@ -244,3 +264,3 @@ }
         addNum++
-        result.push({
+        rawChanges.push({
           left: newEmptySplitDiff(),
@@ -254,4 +274,4 @@ right: newSplitDiff(DiffType.ADD, addNum, getHighlightCode(language, line)),
   if (oldString === newString) {
-    for (let i = 0; i < result.length; i++)
-      result[i].fold = false
+    for (let i = 0; i < rawChanges.length; i++)
+      rawChanges[i].fold = false
 
@@ -261,8 +281,8 @@ return result
 
-  for (let i = 0; i < result.length; i++) {
-    const line = result[i]
+  for (let i = 0; i < rawChanges.length; i++) {
+    const line = rawChanges[i]
     if (line.left.type === DiffType.DELETE || line.right.type === DiffType.ADD) {
-      const [start, end] = [Math.max(i - context, 0), Math.min(i + context + 1, result.length)]
+      const [start, end] = [Math.max(i - context, 0), Math.min(i + context + 1, rawChanges.length)]
       for (let j = start; j < end; j++)
-        result[j].fold = false
+        rawChanges[j].fold = false
     }
@@ -273,16 +293,17 @@ if (line.fold === undefined)
 
-  const realResult = []
-  for (let i = 0; i < result.length; i++) {
-    const line = result[i]
+  const processedChanges = []
+  for (let i = 0; i < rawChanges.length; i++) {
+    const line = rawChanges[i]
     if (line.fold === false) {
-      realResult.push(line)
+      processedChanges.push(line)
       continue
     }
     if (line.fold === true) {
-      if (realResult[realResult.length - 1]?.fold !== true)
-        realResult.push(line)
+      if (processedChanges[processedChanges.length - 1]?.fold !== true)
+        processedChanges.push(line)
     }
   }
+  result.changes = processedChanges
 
-  return realResult
+  return result
 }
@@ -296,3 +317,3 @@
   context = 2,
-) {
+): UnifiedViewerChange {
   const changes = Diff.diffLines(oldString, newString)
@@ -304,3 +325,8 @@
 
-  const result: UnifiedViewerChange = []
+  const rawChanges: UnifiedLine[] = []
+  const result: UnifiedViewerChange = {
+    changes: rawChanges,
+    stat: calcDiffStat(changes),
+  }
+
   for (let i = 0; i < changes.length; i++) {
@@ -332,3 +358,3 @@ if (skip) {
 
-        result.push({
+        rawChanges.push({
           type: curType,
@@ -351,3 +377,3 @@ code,
 
-        result.push({ type: DiffType.EQUAL, code, delNum, addNum })
+        rawChanges.push({ type: DiffType.EQUAL, code, delNum, addNum })
       }
@@ -367,3 +393,3 @@ }
           const code = getHighlightCode(language, renderWords(nextLine, curLine, diffStyle))
-          result.push({ type: DiffType.DELETE, code, delNum })
+          rawChanges.push({ type: DiffType.DELETE, code, delNum })
         }
@@ -377,3 +403,3 @@
           const code = getHighlightCode(language, renderWords(curLine, nextLine, diffStyle))
-          result.push({ type: DiffType.ADD, code, addNum })
+          rawChanges.push({ type: DiffType.ADD, code, addNum })
         }
@@ -389,3 +415,3 @@
           const code = getHighlightCode(language, line)
-          result.push({ type: DiffType.DELETE, code, delNum })
+          rawChanges.push({ type: DiffType.DELETE, code, delNum })
         }
@@ -400,3 +426,3 @@ }
 
-        result.push({ type: DiffType.ADD, code, addNum })
+        rawChanges.push({ type: DiffType.ADD, code, addNum })
       }
@@ -406,8 +432,8 @@ }
 
-  for (let i = 0; i < result.length; i++) {
-    const line = result[i]
+  for (let i = 0; i < rawChanges.length; i++) {
+    const line = rawChanges[i]
     if (line.type === DiffType.DELETE || line.type === DiffType.ADD) {
-      const [start, end] = [Math.max(i - context, 0), Math.min(i + context + 1, result.length)]
+      const [start, end] = [Math.max(i - context, 0), Math.min(i + context + 1, rawChanges.length)]
       for (let j = start; j < end; j++)
-        result[j].fold = false
+        rawChanges[j].fold = false
     }
@@ -419,4 +445,4 @@ if (line.fold === undefined)
   if (oldString === newString) {
-    for (let i = 0; i < result.length; i++)
-      result[i].fold = false
+    for (let i = 0; i < rawChanges.length; i++)
+      rawChanges[i].fold = false
 
@@ -426,16 +452,17 @@ return result
 
-  const realResult = []
-  for (let i = 0; i < result.length; i++) {
-    const line = result[i]
+  const processedChanges = []
+  for (let i = 0; i < rawChanges.length; i++) {
+    const line = rawChanges[i]
     if (line.fold === false) {
-      realResult.push(line)
+      processedChanges.push(line)
       continue
     }
     if (line.fold === true) {
-      if (i === 0 || realResult[realResult.length - 1]?.fold !== true)
-        realResult.push(line)
+      if (i === 0 || processedChanges[processedChanges.length - 1]?.fold !== true)
+        processedChanges.push(line)
     }
   }
+  result.changes = processedChanges
 
-  return realResult
+  return result
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

697179

1.94%

Lines of code

15028

0.97%

Number of lines in readme file

300

1.35%

No dependency changes