v-code-diff 1.14.0 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -55
- package/dist/v2/index.cjs +20 -18
- package/dist/v2/index.es.js +736 -685
- package/dist/v2/index.umd.js +22 -20
- package/dist/v2.7/index.cjs +15 -13
- package/dist/v2.7/index.es.js +222 -190
- package/dist/v2.7/index.umd.js +15 -13
- package/dist/v3/index.cjs +27 -25
- package/dist/v3/index.es.js +1564 -1531
- package/dist/v3/index.umd.js +27 -25
- package/package.json +4 -2
- package/src/CodeDiff.vue +8 -4
- package/src/split/SplitLine.vue +20 -2
- package/src/split/SplitViewer.vue +12 -2
- package/src/types.ts +7 -0
- package/src/unified/UnifiedLine.vue +21 -4
- package/src/unified/UnifiedViewer.vue +12 -2
- package/src/utils.ts +5 -0
- package/types/index.d.ts +69 -12
package/README.md
CHANGED
|
@@ -4,18 +4,19 @@
|
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
[](https://www.npmjs.com/package/v-code-diff)
|
|
6
6
|
|
|
7
|
-
> A code diff
|
|
7
|
+
> A code diff viewer for Vue 2.6, Vue 2.7, and Vue 3.
|
|
8
8
|
|
|
9
9
|
<p align='center'>
|
|
10
10
|
<b>English</b> | <a href="https://github.com/Shimada666/v-code-diff/blob/main/README-zh.md">简体中文</a>
|
|
11
11
|
</p>
|
|
12
12
|
|
|
13
|
-
Old
|
|
13
|
+
Old version:
|
|
14
14
|
|
|
15
|
-
0.x
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
The 0.x line ended at 0.3.12 and is no longer maintained. It was based on
|
|
16
|
+
[vue-code-diff](https://github.com/ddchef/vue-code-diff). Version 1.x aims to preserve its core behavior while keeping
|
|
17
|
+
migration straightforward.
|
|
18
|
+
|
|
19
|
+
This project draws inspiration from the following projects. Thanks to their original authors:
|
|
19
20
|
|
|
20
21
|
- [vue-diff](https://github.com/hoiheart/vue-diff)
|
|
21
22
|
- [vue-code-diff](https://github.com/ddchef/vue-code-diff)
|
|
@@ -34,7 +35,7 @@ This project references the following projects, and I would like to express my g
|
|
|
34
35
|
|
|
35
36
|
## Install
|
|
36
37
|
|
|
37
|
-
|
|
38
|
+
Install `v-code-diff`:
|
|
38
39
|
|
|
39
40
|
```bash
|
|
40
41
|
# npm
|
|
@@ -47,25 +48,26 @@ yarn add v-code-diff
|
|
|
47
48
|
pnpm add v-code-diff
|
|
48
49
|
```
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
scripts:
|
|
53
|
-
|
|
54
|
-
| Vue version | Import path |
|
|
55
|
-
| --- | --- |
|
|
56
|
-
| Vue 2.6 | `v-code-diff/vue2` |
|
|
57
|
-
| Vue 2.7 | `v-code-diff/vue2.7` |
|
|
58
|
-
| Vue 3 | `v-code-diff/vue3` |
|
|
51
|
+
`v-code-diff` uses `postinstall` to select the build for your Vue version. Do not install it with `--ignore-scripts`.
|
|
52
|
+
If pnpm reports that the build script was blocked, approve it and let pnpm run the script:
|
|
59
53
|
|
|
60
|
-
|
|
61
|
-
|
|
54
|
+
```shell
|
|
55
|
+
pnpm approve-builds v-code-diff
|
|
56
|
+
```
|
|
62
57
|
|
|
63
|
-
|
|
58
|
+
Vue 2.6 users must also install and register `@vue/composition-api`:
|
|
64
59
|
|
|
65
60
|
```shell
|
|
66
61
|
pnpm add @vue/composition-api
|
|
67
62
|
```
|
|
68
63
|
|
|
64
|
+
```ts
|
|
65
|
+
import Vue from 'vue'
|
|
66
|
+
import VueCompositionAPI from '@vue/composition-api'
|
|
67
|
+
|
|
68
|
+
Vue.use(VueCompositionAPI)
|
|
69
|
+
```
|
|
70
|
+
|
|
69
71
|
## Getting Started
|
|
70
72
|
|
|
71
73
|
### Vue3
|
|
@@ -74,7 +76,7 @@ pnpm add @vue/composition-api
|
|
|
74
76
|
> Recommend using local registration for better tree-shaking support.
|
|
75
77
|
```vue
|
|
76
78
|
<script setup>
|
|
77
|
-
import { CodeDiff } from 'v-code-diff
|
|
79
|
+
import { CodeDiff } from 'v-code-diff'
|
|
78
80
|
</script>
|
|
79
81
|
|
|
80
82
|
<template>
|
|
@@ -92,14 +94,13 @@ import { CodeDiff } from 'v-code-diff/vue3'
|
|
|
92
94
|
|
|
93
95
|
```ts
|
|
94
96
|
import { createApp } from 'vue'
|
|
95
|
-
import CodeDiff from 'v-code-diff
|
|
97
|
+
import CodeDiff from 'v-code-diff'
|
|
98
|
+
import App from './App.vue'
|
|
96
99
|
|
|
97
|
-
app
|
|
98
|
-
.use(CodeDiff)
|
|
99
|
-
.mount('#app')
|
|
100
|
+
createApp(App).use(CodeDiff).mount('#app')
|
|
100
101
|
```
|
|
101
102
|
|
|
102
|
-
|
|
103
|
+
Then use the component in any template:
|
|
103
104
|
|
|
104
105
|
```vue
|
|
105
106
|
<template>
|
|
@@ -117,8 +118,7 @@ then
|
|
|
117
118
|
> Recommend using local registration for better tree-shaking support.
|
|
118
119
|
```vue
|
|
119
120
|
<script>
|
|
120
|
-
|
|
121
|
-
import { CodeDiff } from 'v-code-diff/vue2'
|
|
121
|
+
import { CodeDiff } from 'v-code-diff'
|
|
122
122
|
export default {
|
|
123
123
|
components: {
|
|
124
124
|
CodeDiff
|
|
@@ -139,8 +139,7 @@ export default {
|
|
|
139
139
|
#### Register globally
|
|
140
140
|
```ts
|
|
141
141
|
import Vue from 'vue'
|
|
142
|
-
|
|
143
|
-
import CodeDiff from 'v-code-diff/vue2'
|
|
142
|
+
import CodeDiff from 'v-code-diff'
|
|
144
143
|
|
|
145
144
|
Vue.use(CodeDiff)
|
|
146
145
|
```
|
|
@@ -157,20 +156,21 @@ Vue.use(CodeDiff)
|
|
|
157
156
|
|
|
158
157
|
| Prop | Description | Type | Optional Values | Default Value |
|
|
159
158
|
|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|---------------------------|---------------|
|
|
160
|
-
| language |
|
|
159
|
+
| language | Syntax-highlighting language, such as javascript. Defaults to plain text. | string | - | plaintext |
|
|
161
160
|
| oldString | Old string | string | - | - |
|
|
162
161
|
| newString | New string | string | - | - |
|
|
163
|
-
| context |
|
|
164
|
-
| outputFormat | Display mode | string | line-by-line
|
|
165
|
-
| diffStyle |
|
|
166
|
-
|forceInlineComparison| Force inline comparison (word or char level)
|
|
162
|
+
| context | Number of unchanged lines shown around each change | number | - | 10 |
|
|
163
|
+
| outputFormat | Display mode | string | line-by-line, side-by-side | line-by-line |
|
|
164
|
+
| diffStyle | Inline difference granularity: words or characters | string | word, char | word |
|
|
165
|
+
| forceInlineComparison | Force inline comparison (word or char level) | boolean | - | false |
|
|
167
166
|
| trim | Remove blank characters at the beginning and end of the string | boolean | - | false |
|
|
168
|
-
| noDiffLineFeed |
|
|
167
|
+
| noDiffLineFeed | Normalize Windows (CRLF) and Unix (LF) line endings before comparison | boolean | - | false |
|
|
169
168
|
| maxHeight | Maximum height of component, for example: 300px | string | - | undefined |
|
|
170
169
|
| filename | Filename | string | - | undefined |
|
|
171
170
|
| newFilename | New filename | string | - | undefined |
|
|
172
171
|
| hideHeader | Hide header bar | boolean | - | false |
|
|
173
172
|
| hideStat | Hide statistical part in the header bar | boolean | - | false |
|
|
173
|
+
| hideNavigation | Hide the next/previous change buttons | boolean | - | false |
|
|
174
174
|
| theme | Add dark mode | ThemeType | light , dark | light |
|
|
175
175
|
| ignoreMatchingLines | Give a pattern to ignore matching lines eg: '(time\|token)' | string | - | undefined |
|
|
176
176
|
|
|
@@ -178,18 +178,18 @@ Vue.use(CodeDiff)
|
|
|
178
178
|
|
|
179
179
|
| Name | Description | Type |
|
|
180
180
|
| ---- | --------------------------- | ------------------------------------------------------------------------------- |
|
|
181
|
-
| diff |
|
|
181
|
+
| diff | Emitted after the diff is calculated | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
|
|
182
|
+
| change-click | Emitted when an added or removed line is clicked | (payload: {side: 'old' \| 'new', type: 'added' \| 'removed', lineNumber: number, event: MouseEvent}) => void |
|
|
182
183
|
|
|
183
184
|
## Slot
|
|
184
185
|
|
|
185
186
|
| Name | Description |
|
|
186
187
|
| ---- | ----------------------------------------------------------- |
|
|
187
|
-
| stat | Custom
|
|
188
|
+
| stat | Custom statistics content. The slot prop is `{ stat }`. |
|
|
188
189
|
|
|
189
190
|
## Extend languages
|
|
190
191
|
|
|
191
|
-
|
|
192
|
-
default.
|
|
192
|
+
To keep the bundle small, the following languages are registered by default:
|
|
193
193
|
|
|
194
194
|
- plaintext
|
|
195
195
|
- xml/html
|
|
@@ -201,7 +201,7 @@ default.
|
|
|
201
201
|
- bash
|
|
202
202
|
- sql
|
|
203
203
|
|
|
204
|
-
|
|
204
|
+
To use another language, import and register its highlighting module manually.
|
|
205
205
|
|
|
206
206
|
```shell
|
|
207
207
|
pnpm add highlight.js
|
|
@@ -244,17 +244,13 @@ CodeDiff.hljs.registerLanguage('c', c)
|
|
|
244
244
|
|
|
245
245
|
## Migrate from 0.x version
|
|
246
246
|
|
|
247
|
-
|
|
248
|
-
version. And we will try to align the functions with the 0.x version as much as possible to reduce your migration cost.
|
|
247
|
+
Version 1.x has a smaller bundle and better performance than 0.x while preserving its core behavior.
|
|
249
248
|
|
|
250
249
|
Key points:
|
|
251
250
|
|
|
252
|
-
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
- In the 1.x version, due to the fact that rendering and highlighting are performed at the same time, the component
|
|
256
|
-
events
|
|
257
|
-
have been removed.
|
|
251
|
+
- Version 1.x no longer detects or highlights languages automatically. Set the language explicitly, such as
|
|
252
|
+
`language="python"`; if omitted, it defaults to `plaintext` without syntax highlighting.
|
|
253
|
+
- The legacy `before-render` and `after-render` events were removed. The `diff` event remains available.
|
|
258
254
|
- Large results render 1,000 lines at a time. Use the load-more control to reveal the next batch.
|
|
259
255
|
- Inline word/character markers are skipped when a changed line pair exceeds 10,000 characters. Set
|
|
260
256
|
`force-inline-comparison` to keep detailed markers when the extra processing time is acceptable.
|
|
@@ -265,19 +261,18 @@ Key points:
|
|
|
265
261
|
- newFilename - new
|
|
266
262
|
- theme - new
|
|
267
263
|
|
|
268
|
-
|
|
264
|
+
The tables below summarize the migration details.
|
|
269
265
|
|
|
270
|
-
###
|
|
266
|
+
### Event changes
|
|
271
267
|
|
|
272
|
-
The
|
|
273
|
-
simultaneously.
|
|
268
|
+
The legacy `before-render` and `after-render` events are no longer provided in 1.x.
|
|
274
269
|
|
|
275
270
|
| Event Name | Change Status |
|
|
276
271
|
| ------------- | ------------------ |
|
|
277
272
|
| before-render | No longer provided |
|
|
278
273
|
| after-render | No longer provided |
|
|
279
274
|
|
|
280
|
-
###
|
|
275
|
+
### Prop changes
|
|
281
276
|
|
|
282
277
|
| Prop | Description | Change Status |
|
|
283
278
|
| ---------------------- | --------------------------------------------------------------------------- | ----------------------------------------------- |
|
|
@@ -290,8 +285,8 @@ simultaneously.
|
|
|
290
285
|
| diffStyle | Difference style, word-level differences or letter-level differences | None |
|
|
291
286
|
| drawFileList | Display file comparison list | Removed in version 1.x |
|
|
292
287
|
| renderNothingWhenEmpty | Do not render when there is no comparison | Removed in version 1.x |
|
|
293
|
-
| fileName | File name |
|
|
294
|
-
| newFilename |
|
|
288
|
+
| fileName | File name | Renamed to `filename` in 1.x |
|
|
289
|
+
| newFilename | New file name | Added in 1.x |
|
|
295
290
|
| isShowNoChange | Display source code when there is no comparison | Removed as it became the default in version 1.x |
|
|
296
291
|
| trim | Remove blank characters at the beginning and end of the string | None |
|
|
297
292
|
| noDiffLineFeed | Don't diff Windows line feed (CRLF) and Linux line feed (LF) | None |
|