Merge branch 'develop'

Author: hoiheart

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-unused-expressions': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off'
   },
   overrides: [

README.md

@@ -1,21 +1,26 @@
 # vue-diff
 
-Vue diff viewer plugin
+Vue diff viewer plugin  
+<a href="https://hoiheart.github.io/vue-diff/demo/index.html" target="_blank">demo</a>
 
-> ⚠️ This plugin supports only Vue3  
-> Vue2 doesn't have a support plan yet.
+> ⚠️ This plugin does not support Vue2
 
 ## Table of Contents
 
-- [Introduction](#introduction)
-- [Features](#features)
-- [Install plugin](#install-plugin)
-  * [Options](#options)
-- [Usage diff viewer](#usage-diff-viewer)
-  * [props](#props)
-- [Custom theme](#custom-theme)
-- [Extend languages](#extend-languages)
-- [Large text comparison](#large-text-comparison)
+* [Table of Contents](#table-of-contents)
+* [Introduction](#introduction)
+* [Features](#features)
+* [Install plugin](#install-plugin)
+  + [Options](#options)
+* [Usage diff viewer](#usage-diff-viewer)
+  + [Settings with default props](#settings-with-default-props)
+  + [Settings with full props](#settings-with-full-props)
+  + [Props](#props)
+* [Custom theme](#custom-theme)
+* [Extend languages](#extend-languages)
+  + [Default supported languages and values](#default-supported-languages-and-values)
+* [Virtual scroll](#virtual-scroll)
+    - [Object props](#object-props)
 
 ## Introduction
 
@@ -30,7 +35,7 @@ Here is the <a href="https://hoiheart.github.io/vue-diff/demo/index.html" target
 * [x] Support split / unified mode
 * [x] Support multiple languages and can be extended
 * [X] Support two themes (dark / light) and can be customized
-* [ ] Virtual scroll for large text comparison
+* [X] Virtual scroll for large text comparison (*Performance improvements are still needed.*)
 * [ ] Support IE11 (IE 11 support for Vue@3 is still pending)
 
 ## Install plugin
@@ -63,6 +68,20 @@ app.use(VueDiff, {
 ## Usage diff viewer
 
 Insert the diff component with props.
+### Settings with default props
+```vue
+<template>
+  <Diff
+    :mode="mode"
+    :theme="theme"
+    :language="language"
+    :prev="prev"
+    :current="current"
+  />
+</template>
+```
+
+### Settings with full props
 
 ```vue
 <template>
@@ -72,11 +91,13 @@ Insert the diff component with props.
     :language="language"
     :prev="prev"
     :current="current"
+    :input-delay="0"
+    :virtual-scroll="{ height: 500, lineMinHeight: 24, delay: 100 }"
   />
 </template>
 ```
 
-### props
+### Props
 
 | name | type | detault | values | description
 |- | - | - | - |- |
@@ -85,6 +106,8 @@ Insert the diff component with props.
 | language | `string` | `plaintext` |  | See <a href="#extend-languages">Extend languages</a>
 | prev | `string` | `''` |  | Prev code |
 | current | `string` | `''` |  | Current Code |
+| inputDelay | `number` | `0` |  | Setting up rendering debounce for changes for performance benefit (mode, prev, curr) |
+| virtualScroll | `boolean\|object` | `false` |  | *Default value when setting true :*<br>`{ height: 500, lineMinHeight: 24, delay: 100 }`<br>See <a href="#virtual-scroll">virtual scroll</a> |
 
 ## Custom theme
 
@@ -149,6 +172,17 @@ app.use(VueDiff)
 
 > <a href="https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md">Check supported languages of Highlight.js</a>
 
-## Large text comparison
+## Virtual scroll
+
+Comparing text from many lines can slow down performance.<br>
+With virtualScroll props, virtualScroll applies. (Self-made for this plug-in.)
+
+#### Object property value
+
+When using virtual scroll, the css of all code lines is changed to the absolute position, which requires detailed settings.
 
-⚠️ It's still hard to compare large texts. Virtual scroll for Vue3 must be created or found.
+* height (`number`): Diff box height (Applies only to px values)
+* lineMinHeight (`number`): minimum height of line
+  > Minimum height value of line is required for visible area calculation.<br>The default is 24, but you can set it yourself if you need to adjust it according to the page's front-size, line-height, etc.
+* delay (`number`): re-rendering delay when scrolling or resizing
+  > Performance problems occur when too often a re-rendering function is invoked based on scrolling or resizing<br>This setting applies a delay using throttle.

dev/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="form text-gray-100 mt-8">
-    <label for="language" class="mr-2">Language:</label>
-    <select v-model="language" id="language" class="bg-gray-900 w-40 py-1 px-3 mr-4 rounded border border-gray-500 text-gray-300">
-      <option :key="val" v-for="val in languages">{{ val }}</option>
+    <label for="language" class="mr-2">Type:</label>
+    <select v-model="selected" id="language" class="bg-gray-900 w-40 py-1 px-3 mr-4 rounded border border-gray-500 text-gray-300">
+      <option :key="item.title" :value="item" v-for="item in list">{{ item.title }}</option>
     </select>
     <label for="mode" class="mr-2">Mode:</label>
     <select v-model="mode" id="mode" class="bg-gray-900 w-40 py-1 px-3 mr-4 rounded border border-gray-500 text-gray-300">
@@ -29,12 +29,17 @@
   <div class="viewer">
     <section class="mt-8">
       <h2 class="text-2xl font-bold text-gray-100 mb-4">Diff</h2>
+      <p class="text-gray-100 mb-4">
+        inputDelay and virtualScroll option are set for large text diff.
+      </p>
       <Diff
         :mode="mode"
         :theme="theme"
-        :language="language"
+        :language="selected.language"
         :prev="prev"
         :current="current"
+        :input-delay="0"
+        :virtual-scroll="{ height: 500, lineMinHeight: 24, delay: 100 }"
       />
     </section>
   </div>
@@ -49,19 +54,60 @@ export default defineComponent({
   setup () {
     const modes = ref(['split', 'unified'])
     const mode = ref('split')
-    const languages = ref(['javascript', 'html', 'css', 'yaml'])
-    const language = ref('javascript')
+    const selected = ref<null|{}>(null)
     const themes = ref(['dark', 'light', 'custom'])
     const theme = ref('dark')
+    const list = ref([
+      {
+        key: 'javascript',
+        title: 'javascript',
+        language: 'javascript',
+        inputDelay: 0,
+        virtualScroll: false
+      },
+      {
+        key: 'html',
+        title: 'html',
+        language: 'html',
+        inputDelay: 0,
+        virtualScroll: false
+      },
+      {
+        key: 'css',
+        title: 'css',
+        language: 'css',
+        inputDelay: 0,
+        virtualScroll: false
+      },
+      {
+        key: 'yaml',
+        title: 'yaml',
+        language: 'yaml',
+        inputDelay: 0,
+        virtualScroll: false
+      },
+      {
+        key: 'jquery',
+        title: 'large text',
+        language: 'javascript',
+        inputDelay: 100,
+        virtualScroll: {
+          height: 500,
+          lineMinHeight: 24,
+          delay: 100
+        }
+      }
+    ])
 
     const prev = ref('')
     const current = ref('')
+    selected.value = list.value[0]
 
-    watch(() => language.value, () => {
+    watch(() => selected.value, () => {
       // @ts-ignore
-      prev.value = template[`${language.value}1`]
+      prev.value = template[`${selected?.value.key}1`]
       // @ts-ignore
-      current.value = template[`${language.value}2`]
+      current.value = template[`${selected?.value.key}2`]
     }, {
       immediate: true
     })
@@ -76,10 +122,10 @@ export default defineComponent({
     return {
       modes,
       mode,
-      languages,
-      language,
       themes,
       theme,
+      list,
+      selected,
       prev,
       current
     }