v-code-diff 1.13.2 → 1.14.1

package/README.md

@@ -4,18 +4,19 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Downloads](https://img.shields.io/npm/dm/v-code-diff?minimal=true)](https://www.npmjs.com/package/v-code-diff)
 
-> A code diff display plugin, available for Vue2 / Vue3.
+> A code diff viewer for Vue 2.6, Vue 2.7, and Vue 3.
 
 <p align='center'>
 <b>English</b> | <a href="https://github.com/Shimada666/v-code-diff/blob/main/README-zh.md">简体中文</a>
 </p>
 
-Old Version:
+Old version:
 
-0.x version, latest version 0.3.12 (traditional version, improved based
-on [vue-code-diff](https://github.com/ddchef/vue-code-diff), is no longer maintained. We will try to align the
-functionality of 0.x version in 1.x version and minimize migration cost as much as possible).
-This project references the following projects, and I would like to express my gratitude to the original authors!
+The 0.x line ended at 0.3.12 and is no longer maintained. It was based on
+[vue-code-diff](https://github.com/ddchef/vue-code-diff). Version 1.x aims to preserve its core behavior while keeping
+migration straightforward.
+
+This project draws inspiration from the following projects. Thanks to their original authors:
 
 - [vue-diff](https://github.com/hoiheart/vue-diff)
 - [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
 
 ## Install
 
-install `v-code-diff`
+Install `v-code-diff`:
 
 ```bash
 # npm
@@ -47,25 +48,26 @@ yarn add v-code-diff
 pnpm add v-code-diff
 ```
 
-Use the explicit entry for your Vue version. These entries do not depend on
-`postinstall`, so they also work when the package manager blocks dependency
-scripts:
-
-| Vue version | Import path |
-| --- | --- |
-| Vue 2.6 | `v-code-diff/vue2` |
-| Vue 2.7 | `v-code-diff/vue2.7` |
-| Vue 3 | `v-code-diff/vue3` |
+`v-code-diff` uses `postinstall` to select the build for your Vue version. Do not install it with `--ignore-scripts`.
+If pnpm reports that the build script was blocked, approve it and let pnpm run the script:
 
-The legacy `v-code-diff` root entry remains available when dependency scripts
-are enabled.
+```shell
+pnpm approve-builds v-code-diff
+```
 
-Vue2.6 developers need install composition-api
+Vue 2.6 users must also install and register `@vue/composition-api`:
 
 ```shell
 pnpm add @vue/composition-api
 ```
 
+```ts
+import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
+
+Vue.use(VueCompositionAPI)
+```
+
 ## Getting Started
 
 ### Vue3
@@ -74,7 +76,7 @@ pnpm add @vue/composition-api
 > Recommend using local registration for better tree-shaking support.
 ```vue
 <script setup>
-import { CodeDiff } from 'v-code-diff/vue3'
+import { CodeDiff } from 'v-code-diff'
 </script>
 
 <template>
@@ -92,14 +94,13 @@ import { CodeDiff } from 'v-code-diff/vue3'
 
 ```ts
 import { createApp } from 'vue'
-import CodeDiff from 'v-code-diff/vue3'
+import CodeDiff from 'v-code-diff'
+import App from './App.vue'
 
-app
-  .use(CodeDiff)
-  .mount('#app')
+createApp(App).use(CodeDiff).mount('#app')
 ```
 
-then
+Then use the component in any template:
 
 ```vue
 <template>
@@ -117,8 +118,7 @@ then
 > Recommend using local registration for better tree-shaking support.
 ```vue
 <script>
-// Use v-code-diff/vue2.7 instead when running Vue 2.7.
-import { CodeDiff } from 'v-code-diff/vue2'
+import { CodeDiff } from 'v-code-diff'
 export default {
   components: {
     CodeDiff
@@ -139,8 +139,7 @@ export default {
 #### Register globally
 ```ts
 import Vue from 'vue'
-// Use v-code-diff/vue2.7 instead when running Vue 2.7.
-import CodeDiff from 'v-code-diff/vue2'
+import CodeDiff from 'v-code-diff'
 
 Vue.use(CodeDiff)
 ```
@@ -157,15 +156,15 @@ Vue.use(CodeDiff)
 
 | Prop                | Description                                                                                                                                                             | Type      | Optional Values           | Default Value |
 |---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|---------------------------|---------------|
-| language            | Code language, such as typescript, defaults to plain text. [View all supported languages](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) | string    | -                         | plaintext     |
+| language            | Syntax-highlighting language, such as javascript. Defaults to plain text.                                                                                               | string    | -                         | plaintext     |
 | oldString           | Old string                                                                                                                                                              | string    | -                         | -             |
 | newString           | New string                                                                                                                                                              | string    | -                         | -             |
-| 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  |
-| diffStyle           | Difference style, word-level differences or letter-level differences                                                                                                    | string    | word, char                | word          |
-|forceInlineComparison| Force inline comparison (word or char level)                                                                                                                            | boolean   | -                         | false         |
+| context             | Number of unchanged lines shown around each change                                                                                                                       | number    | -                         | 10            |
+| outputFormat        | Display mode                                                                                                                                                            | string    | line-by-line, side-by-side | line-by-line  |
+| diffStyle           | Inline difference granularity: words or characters                                                                                                                       | string    | word, char                | word          |
+| forceInlineComparison | Force inline comparison (word or char level)                                                                                                                           | boolean   | -                         | false         |
 | trim                | Remove blank characters at the beginning and end of the string                                                                                                          | boolean   | -                         | false         |
-| noDiffLineFeed      | Don't diff Windows line feed (CRLF) and Linux line feed (LF)                                                                                                            | boolean   | -                         | false         |
+| noDiffLineFeed      | Normalize Windows (CRLF) and Unix (LF) line endings before comparison                                                                                                   | boolean   | -                         | false         |
 | maxHeight           | Maximum height of component, for example: 300px                                                                                                                         | string    | -                         | undefined     |
 | filename            | Filename                                                                                                                                                                | string    | -                         | undefined     |
 | newFilename         | New filename                                                                                                                                                            | string    | -                         | undefined     |
@@ -178,18 +177,17 @@ Vue.use(CodeDiff)
 
 | Name | Description                 | Type                                                                            |
 | ---- | --------------------------- | ------------------------------------------------------------------------------- |
-| diff | triggers when diff finished | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
+| diff | Emitted after the diff is calculated | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
 
 ## Slot
 
 | Name | Description                                                 |
 | ---- | ----------------------------------------------------------- |
-| stat | Custom statistical content, The scope parameter is { stat } |
+| stat | Custom statistics content. The slot prop is `{ stat }`. |
 
 ## Extend languages
 
-In order to reduce the size of the packaged file, the system only supports the following commonly used languages by
-default.
+To keep the bundle small, the following languages are registered by default:
 
 - plaintext
 - xml/html
@@ -201,7 +199,7 @@ default.
 - bash
 - sql
 
-If the language you need is not included, you can manually import the relevant language highlighting module.
+To use another language, import and register its highlighting module manually.
 
 ```shell
 pnpm add highlight.js
@@ -244,17 +242,16 @@ CodeDiff.hljs.registerLanguage('c', c)
 
 ## Migrate from 0.x version
 
-The v-code-diff 1.x version has features such as reduced packaging size and improved performance compared to the 0.x
-version. And we will try to align the functions with the 0.x version as much as possible to reduce your migration cost.
+Version 1.x has a smaller bundle and better performance than 0.x while preserving its core behavior.
 
 Key points:
 
-- In the 1.x version, language recognition and highlighting will no longer be automatically performed, you need to
-  manually specify the language type, such as language="python", if not specified, it will default to plaintext
-  and will not be highlighted.
-- In the 1.x version, due to the fact that rendering and highlighting are performed at the same time, the component
-  events
-  have been removed.
+- Version 1.x no longer detects or highlights languages automatically. Set the language explicitly, such as
+  `language="python"`; if omitted, it defaults to `plaintext` without syntax highlighting.
+- The legacy `before-render` and `after-render` events were removed. The `diff` event remains available.
+- Large results render 1,000 lines at a time. Use the load-more control to reveal the next batch.
+- Inline word/character markers are skipped when a changed line pair exceeds 10,000 characters. Set
+  `force-inline-comparison` to keep detailed markers when the extra processing time is acceptable.
 - In the 1.x version, the following component properties (Prop) have been changed:
   - highlight - removed
   - drawFileList - removed
@@ -262,19 +259,18 @@ Key points:
   - newFilename - new
   - theme - new
 
-Below is a detailed comparison of the two versions, you can refer to it to complete the migration.
+The tables below summarize the migration details.
 
-### The difference of event.
+### Event changes
 
-The component events are no longer provided in the 1.x version as rendering and highlighting are carried out
-simultaneously.
+The legacy `before-render` and `after-render` events are no longer provided in 1.x.
 
 | Event Name    | Change Status      |
 | ------------- | ------------------ |
 | before-render | No longer provided |
 | after-render  | No longer provided |
 
-### The difference of prop.
+### Prop changes
 
 | Prop                   | Description                                                                 | Change Status                                   |
 | ---------------------- | --------------------------------------------------------------------------- | ----------------------------------------------- |
@@ -287,8 +283,8 @@ simultaneously.
 | diffStyle              | Difference style, word-level differences or letter-level differences        | None                                            |
 | drawFileList           | Display file comparison list                                                | Removed in version 1.x                          |
 | renderNothingWhenEmpty | Do not render when there is no comparison                                   | Removed in version 1.x                          |
-| fileName               | File name                                                                   | To be determined, not under development         |
-| newFilename            |                                                                | New in version 1. To be determined, not under development         |
+| fileName               | File name                                                                   | Renamed to `filename` in 1.x                    |
+| newFilename            | New file name                                                               | Added in 1.x                                    |
 | isShowNoChange         | Display source code when there is no comparison                             | Removed as it became the default in version 1.x |
 | trim                   | Remove blank characters at the beginning and end of the string              | None                                            |
 | noDiffLineFeed         | Don't diff Windows line feed (CRLF) and Linux line feed (LF)                | None                                            |