feat: items limit

Author: Guillaume Chau

src/components/RecycleList.vue

@@ -34,6 +34,7 @@
 
 <script>
 import Scroller from '../mixins/scroller'
+import config from '../config'
 
 let uid = 0
 
@@ -249,6 +250,10 @@ export default {
         }
       }
 
+      if (endIndex - startIndex > config.itemsLimit) {
+        this.itemsLimitError()
+      }
+
       this.totalHeight = totalHeight
 
       let view

src/components/VirtualScroller.vue

@@ -59,6 +59,7 @@
 
 <script>
 import Scroller from '../mixins/scroller'
+import config from '../config'
 
 export default {
   name: 'virtual-scroller',
@@ -235,6 +236,10 @@ export default {
               containerHeight = l * itemHeight
             }
 
+            if (endIndex - startIndex > config.itemsLimit) {
+              this.itemsLimitError()
+            }
+
             if (
               force ||
               this.$_startIndex !== startIndex ||

src/config.js

@@ -0,0 +1,3 @@
+export default {
+  itemsLimit: 1000,
+}

src/index.js

@@ -1,3 +1,5 @@
+import config from './config'
+
 import VirtualScroller from './components/VirtualScroller.vue'
 import RecycleList from './components/RecycleList.vue'
 
@@ -20,6 +22,12 @@ const plugin = {
       componentsPrefix: '',
     }, options)
 
+    for (const key in finalOptions) {
+      if (typeof finalOptions[key] !== 'undefined') {
+        config[key] = finalOptions[key]
+      }
+    }
+
     if (finalOptions.installComponents) {
       registerComponents(Vue, finalOptions.componentsPrefix)
     }

src/mixins/scroller.js

@@ -149,5 +149,13 @@ export default {
     scrollToPosition (position) {
       this.$el.scrollTop = position
     },
+
+    itemsLimitError () {
+      setTimeout(() => {
+        console.log(`It seems the scroller element isn't scrolling, so it tries to render all the items at once.`, 'Scroller:', this.$el)
+        console.log(`Make sure the scroller has a fixed height and 'overflow-y' set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport.`)
+      })
+      throw new Error('Rendered items limit reached')
+    },
   },
 }