chore: virtual scroll

Author: hoiheart

dev/App.vue

@@ -35,6 +35,7 @@
         :language="language"
         :prev="prev"
         :current="current"
+        :virtual-scroll="{ height: 500, lineMinHeight: 24 }"
       />
     </section>
   </div>

package-lock.json

@@ -36,7 +36,8 @@
   },
   "dependencies": {
     "diff-match-patch": "^1.0.5",
-    "highlight.js": "^10.5.0"
+    "highlight.js": "^10.5.0",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.12.1",
@@ -49,6 +50,7 @@
     "@types/diff-match-patch": "^1.0.32",
     "@types/highlight.js": "^10.1.0",
     "@types/jest": "^24.0.19",
+    "@types/lodash-es": "^4.17.4",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vitejs/plugin-vue": "^1.0.5",

package.json

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, watch } from 'vue'
+import { defineComponent, ref, onMounted, watch, nextTick } from 'vue'
 import { setHighlightCode } from './utils'
 
 export default defineComponent({
@@ -17,7 +17,8 @@ export default defineComponent({
       required: true
     }
   },
-  setup (props) {
+  emits: ['rendered'],
+  setup (props, { emit }) {
     const highlightCode = ref('')
 
     onMounted(() => {
@@ -27,6 +28,8 @@ export default defineComponent({
           language: props.language,
           code: props.code
         })
+
+        nextTick(() => emit('rendered'))
       }, { immediate: true })
     })
 

src/Code.vue

@@ -1,28 +1,52 @@
 <template>
-  <div class="vue-diff-wrapper" :class="`vue-diff-mode-${mode} vue-diff-theme-${theme}`">
-    <div ref="viewer" class="vue-diff-viewer">
-      <table>
-        <tbody>
-          <Line
-            :key="index"
-            v-for="(data, index) in lines"
-            :mode="mode"
-            :language="language"
-            :data="data"
-          />
-        </tbody>
-      </table>
+  <div
+    class="vue-diff-wrapper"
+    :class="`vue-diff-mode-${mode} vue-diff-theme-${theme}`"
+  >
+    <div
+      ref="viewer"
+      class="vue-diff-viewer"
+      :style="{ height: viewerHeight ? viewerHeight + 'px' : undefined }"
+    >
+      <div
+        class="vue-diff-viewer-inner"
+        :style="{ minHeight: innerMinHeight ? innerMinHeight + 'px' : undefined }"
+      >
+        <Line
+          :key="index"
+          v-for="(data, index) in visibleData"
+          :index="index"
+          :mode="mode"
+          :language="language"
+          :data="data"
+          :virtualScroll="virtualScroll"
+          @set-line-height="setLineHeight"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue'
-import { renderLines } from './utils'
+import { defineComponent, PropType, ref, watch, onMounted, onBeforeUnmount, computed, readonly, toRaw } from 'vue'
+import throttle from 'lodash-es/throttle'
+import { renderLines, renderWords } from './utils'
 import Line from './Line.vue'
 
 import type { Mode, Theme, Lines } from './utils'
 
+interface VirtualScroll {
+  height?: number;
+  lineMinHeight?: number;
+}
+
+interface Data {
+  key: number;
+  render: Lines;
+  top?: number;
+  height?: number;
+}
+
 export default defineComponent({
   components: {
     Line
@@ -47,26 +71,103 @@ export default defineComponent({
     current: {
       type: String,
       default: ''
+    },
+    virtualScroll: {
+      type: false || Object as PropType<VirtualScroll>,
+      default: false
     }
   },
   setup (props) {
-    const lines = ref<Array<Lines>>([])
+    const viewer = ref<null|HTMLElement>(null)
+    const source = ref<Array<Data>>([])
+    const visibleData = ref<Array<Data>>([])
+    const heightList = ref<Array<number>>([])
+
+    const viewerHeight = computed(() => {
+      if (!props.virtualScroll) return false
+      return props.virtualScroll.height || 500
+    })
+
+    const innerMinHeight = computed(() => {
+      if (!props.virtualScroll) return false
+      return heightList.value.reduce((acc, curr) => acc + curr, 0)
+    })
+
+    const getVisibleData = () => {
+      if (!viewer.value || !viewerHeight.value) return []
+
+      const result: Data[] = []
+      const start = viewer.value.scrollTop - viewerHeight.value
+      const end = viewer.value.scrollTop + viewerHeight.value * 2
+
+      heightList.value.reduce((acc, curr, index: number) => {
+        if (acc >= start && acc <= end) {
+          result.push({
+            key: index,
+            render: source.value[index].render,
+            top: acc,
+            height: 24
+          })
+        }
+
+        return acc + curr
+      }, 0)
 
-    watch([
-      () => props.mode,
-      () => props.prev,
-      () => props.current
-    ], () => {
-      const render = renderLines(props.mode, props.prev, props.current)
+      return result
+    }
+
+    const handleScroll = () => {
+      visibleData.value = getVisibleData()
+    }
 
-      if (render.length > 1000) {
-        console.warn('Comparison of many lines is not recommended because rendering delays occur.')
+    const setLineHeight = (index: number, height: number) => {
+      const item = source.value.find(item => item.key === index)
+      if (item) {
+        item.height = height
       }
+    }
+
+    onMounted(() => {
+      if (!viewer.value) return
+      viewer.value.addEventListener('scroll', throttle(handleScroll, 500))
 
-      lines.value = render
-    }, { immediate: true })
+      watch([
+        () => props.mode,
+        () => props.prev,
+        () => props.current
+      ], () => {
+        source.value = renderLines(props.mode, props.prev, props.current).map((render, index) => {
+          return {
+            key: index,
+            render,
+            height: 24
+          }
+        })
 
-    return { lines }
+        if (!props.virtualScroll) {
+          if (source.value.length > 500) {
+            console.warn('If there are many lines, please use virtualScroll property.')
+          }
+
+          visibleData.value = source.value
+        } else {
+          visibleData.value = getVisibleData()
+        }
+      }, { immediate: true })
+    })
+
+    onBeforeUnmount(() => {
+      if (!viewer.value) return
+      viewer.value.removeEventListener('scroll', throttle(handleScroll, 500))
+    })
+
+    return {
+      visibleData,
+      viewer,
+      viewerHeight,
+      innerMinHeight,
+      setLineHeight
+    }
   }
 })
 </script>

src/Diff.vue

@@ -1,48 +1,68 @@
 <template>
-  <!-- split view -->
-  <tr v-if="mode === 'split'" :class="`vue-diff-row-${mode}`">
-    <template :key="index" v-for="(line, index) in data">
-      <td class="lineNum" :class="`vue-diff-cell-${line.type}`">
-        {{ line.lineNum }}
-      </td>
-      <td class="code" :class="`vue-diff-cell-${line.type}`">
-        <Code
-          :language="language"
-          :code="setCode(line, data, index)"
-        />
-      </td>
+  <div
+    ref="line"
+    class="vue-diff-row"
+    :class="`vue-diff-row-${mode}`"
+    :style="virtualScroll ? {
+      position: 'absoltue',
+      minHeight: virtualScroll.minHeight + 'px'
+    } : undefined">
+    <!-- split view -->
+    <template v-if="mode === 'split'">
+      <template :key="index" v-for="(line, index) in data.render">
+        <div class="lineNum" :class="`vue-diff-cell-${line.type}`">
+          {{ line.lineNum }}
+        </div>
+        <div class="code" :class="`vue-diff-cell-${line.type}`">
+          <Code
+            :language="language"
+            :code="setCode(line, data.render, index)"
+            @rendered="rendered"
+          />
+        </div>
+      </template>
     </template>
-  </tr>
-  <!-- // split view -->
-  <!-- unified view -->
-  <template v-if="mode === 'unified'">
-    <tr :class="`vue-diff-row-${mode}`">
-      <td class="lineNum" :class="`vue-diff-cell-${data[0].type}`">
-        {{ data[0].lineNum }}
-      </td>
-      <td class="code" :class="`vue-diff-cell-${data[0].type}`">
+    <!-- // split view -->
+    <!-- unified view -->
+    <template v-if="mode === 'unified'">
+      <div class="lineNum" :class="`vue-diff-cell-${data.render[0].type}`">
+        {{ data.render[0].lineNum }}
+      </div>
+      <div class="code" :class="`vue-diff-cell-${data.render[0].type}`">
         <Code
           :language="language"
-          :code="setCode(data[0])"
+          :code="setCode(data.render[0])"
+          @rendered="rendered"
         />
-      </td>
-    </tr>
-  </template>
-  <!-- // unified view -->
+      </div>
+    </template>
+    <!-- // unified view -->
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, watch, ref } from 'vue'
 import Code from './Code.vue'
 import { renderWords } from './utils'
 
 import type { Mode, Lines, Line } from './utils'
 
+interface Data {
+  key: number;
+  render: Lines;
+  top?: number;
+  height?: number;
+}
+
 export default defineComponent({
   components: {
     Code
   },
   props: {
+    index: {
+      type: Number,
+      required: true
+    },
     mode: {
       type: String as PropType<Mode>,
       required: true
@@ -54,9 +74,13 @@ export default defineComponent({
     data: {
       type: Object as PropType<Lines>,
       required: true
-    }
+    },
+    virtualScroll: {},
+    lineInfo: {}
   },
-  setup () {
+  emits: ['setLineHeight'],
+  setup (props, { emit }) {
+    const line = ref<null|HTMLElement>(null)
     const setCode = (line: Line, data?: Lines, index?: number) => {
       if (!line.value) return '\n'
 
@@ -72,7 +96,12 @@ export default defineComponent({
       return renderWords(differ.value, line.value) // render with modified tags
     }
 
-    return { setCode }
+    const rendered = () => {
+      if (!line.value) return
+      emit('setLineHeight', props.index, line.value.offsetHeight)
+    }
+
+    return { line, setCode, rendered }
   }
 })
 </script>

src/Line.vue

@@ -1,3 +1,4 @@
+declare module 'lodash-es/throttle'
 declare module 'highlight.js/lib/core'
 declare module 'highlight.js/lib/languages/css'
 declare module 'highlight.js/lib/languages/xml'