Merge pull request #7 from hoiheart/develop

Develop

Author: hoiheart

.github/workflows/release.yaml

@@ -18,10 +18,6 @@ jobs:
           node-version: 12
       - name: Install dependencies
         run: npm ci
-      - name: Lint
-        run: npm run lint
-      - name: Test
-        run: npm run test
       - name: Build
         run: npm run build
       - name: Demo

.github/workflows/test.yaml

@@ -0,0 +1,24 @@
+name: Test
+on:
+  push:
+    branches:
+      - develop
+jobs:
+  test:
+    name: test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test

README.md

@@ -1,6 +1,6 @@
 # vue-diff
 
-Vue diff viewer plugin  
+Vue diff viewer plugin for Vue@3  
 <a href="https://hoiheart.github.io/vue-diff/demo/index.html" target="_blank">demo</a>
 
 > ⚠️ This plugin does not support Vue2
@@ -32,23 +32,22 @@ Here is the <a href="https://hoiheart.github.io/vue-diff/demo/index.html" target
 
 ## Features
 
-* [x] Support split / unified mode
-* [x] Support multiple languages and can be extended
-* [X] Support two themes (dark / light) and can be customized
-* [X] Virtual scroll for large text comparison (*Performance improvements are still needed.*)
-* [ ] Support IE11 (IE 11 support for Vue@3 is still pending)
+* Support split / unified mode
+* Support multiple languages and can be extended
+* Support two themes (dark / light) and can be customized
+* Virtual scroll for large text comparison
 
 ## Install plugin
 
 ```bash
 npm install vue-diff
 ```
 
-install plugin in vue application
+And install plugin in vue application
 
 ```ts
 import VueDiff from 'vue-diff'
-// import VueDiff from 'vue-diff/dist/index.es5' // If need to use es5 build
+
 import 'vue-diff/dist/index.css'
 
 app.use(VueDiff)
@@ -71,6 +70,9 @@ Insert the diff component with props.
 ### Settings with default props
 ```vue
 <template>
+  <!-- If the changed componentName
+  <VueDiff>
+  -->
   <Diff
     :mode="mode"
     :theme="theme"

dev/App.vue

@@ -38,15 +38,15 @@
         :language="selected.language"
         :prev="prev"
         :current="current"
-        :input-delay="0"
-        :virtual-scroll="{ height: 500, lineMinHeight: 24, delay: 100 }"
+        :input-delay="selected.inputDelay"
+        :virtual-scroll="selected.virtualScroll"
       />
     </section>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, watch } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 
 import template from './template'
 
@@ -112,13 +112,6 @@ export default defineComponent({
       immediate: true
     })
 
-    onMounted(() => {
-      const script = document.createElement('script')
-      script.async = true
-      script.defer = true
-      document.body.appendChild(script)
-    })
-
     return {
       modes,
       mode,

rollup.config.js

@@ -7,7 +7,7 @@ import autoprefixer from 'autoprefixer'
 import typescript from 'rollup-plugin-typescript2'
 import scss from 'rollup-plugin-scss'
 import css from 'rollup-plugin-css-only'
-import babel from '@rollup/plugin-babel'
+import babel, { getBabelOutputPlugin } from '@rollup/plugin-babel'
 
 const options = {
   input: 'src/index.ts',
@@ -45,7 +45,11 @@ export default [
     output: {
       file: 'dist/index.js',
       format: 'esm'
-    }
+    },
+    plugins: [
+      ...options.plugins,
+      getBabelOutputPlugin({ plugins: ['@babel/plugin-proposal-optional-chaining'] })
+    ]
   },
   // es5 build
   {

src/Diff.vue

@@ -28,12 +28,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  ref,
-  toRaw
-} from 'vue'
+import { computed, defineComponent, ref, toRaw } from 'vue'
 import { useVirtualScroll, useRender } from './hooks'
 import Line from './Line.vue'
 
@@ -89,7 +84,7 @@ export default defineComponent({
     const { minHeight } = useVirtualScroll(props, viewer, scrollOptions, meta)
 
     const setLineHeight = (index: number, height: number) => {
-      if (meta.value[index]) {
+      if (meta.value[index] && meta.value[index].height !== height) {
         meta.value[index].height = height
       }
     }

src/Line.vue

@@ -103,13 +103,13 @@ export default defineComponent({
     }
 
     const rendered = () => {
-      if (!line.value) return
+      if (!line.value || props.meta.height === line.value.offsetHeight) return
       emit('setLineHeight', props.meta.index, line.value.offsetHeight)
     }
 
     if (props.scrollOptions) {
       useResizeObserver(line, useThrottleFn(() => {
-        if (!line.value) return
+        if (!line.value || props.meta.height === line.value.offsetHeight) return
         emit('setLineHeight', props.meta.index, line.value.offsetHeight)
       }, props.scrollOptions.delay))
     }