docs: warning for large text comparison

Author: hoiheart

README.md

@@ -15,20 +15,22 @@ Vue diff viewer plugin
   * [props](#props)
 - [Custom theme](#custom-theme)
 - [Extend languages](#extend-languages)
+- [Large text comparison](#large-text-comparison)
 
 ## Introduction
 
 <img src="https://user-images.githubusercontent.com/25652218/104784360-7520e600-57cb-11eb-8abc-ce81dd309e05.png" alt="screenshot" style="max-width:100%;">
 
 You can see the difference between the two codes with the `vue-diff` plugin.  
-This plugin dependent on <a href="https://github.com/kpdecker/jsdiff">diff</a> and <a href="https://github.com/highlightjs/highlight.js/">highlight.js</a>, shows similar results to other diff viewers (e.g., Github Desktop).  
+This plugin dependent on <a href="https://github.com/JackuB/diff-match-patch">diff-match-patch</a> and <a href="https://github.com/highlightjs/highlight.js/">highlight.js</a>, shows similar results to other diff viewers (e.g., Github Desktop).  
 Here is the <a href="https://hoiheart.github.io/vue-diff/demo/index.html" target="_blank" style="font-size: 1.2em; text-decoration: underline;">demo</a>
 
 ## Features
 
 * [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
 * [ ] Support IE11 (IE 11 support for Vue@3 is still pending)
 
 ## Install plugin
@@ -145,4 +147,8 @@ VueDiff.hljs.registerLanguage('yaml', yaml)
 app.use(VueDiff)
 ```
 
-> <a href="https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md">Check supported languages of Highlight.js</a>
+> <a href="https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md">Check supported languages of Highlight.js</a>
+
+## Large text comparison
+
+⚠️ It's still hard to compare large texts. Virtual scroll for Vue3 must be created or found.

src/Diff.vue

@@ -57,7 +57,13 @@ export default defineComponent({
       () => props.prev,
       () => props.current
     ], () => {
-      lines.value = renderLines(props.mode, props.prev, props.current)
+      const render = renderLines(props.mode, props.prev, props.current)
+
+      if (render.length > 1000) {
+        console.warn('Comparison of many lines is not recommended because rendering delays occur.')
+      }
+
+      lines.value = render
     }, { immediate: true })
 
     return { lines }

src/utils.ts

@@ -79,7 +79,7 @@ const getSplitLines = (diffsMap: Array<Diffs>): Array<Lines> => {
     }
   })
 
-  return result.slice(0, 100) // todo debounce
+  return result
 }
 
 /**
@@ -125,7 +125,7 @@ const getUnifiedLines = (diffsMap: Array<Diffs>): Array<Lines> => {
     })
   })
 
-  return result.slice(0, 100) // todo debounce
+  return result
 }
 
 /**