feat: resize observer + undefinedSizes cleaner code

Author: Akryum

src/components/DynamicScroller.vue

@@ -43,9 +43,28 @@ export default {
   inheritAttrs: false,
 
   provide () {
+    if (typeof ResizeObserver !== 'undefined') {
+      this.$_resizeObserver = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          if (entry.target) {
+            const event = new CustomEvent(
+              'resize',
+              {
+                detail: {
+                  contentRect: entry.contentRect,
+                },
+              },
+            )
+            entry.target.dispatchEvent(event)
+          }
+        }
+      })
+    }
+
     return {
       vscrollData: this.vscrollData,
       vscrollParent: this,
+      vscrollResizeObserver: this.$_resizeObserver,
     }
   },
 
@@ -82,10 +101,6 @@ export default {
         const id = simpleArray ? i : item[keyField]
         let size = sizes[id]
         if (typeof size === 'undefined' && !this.$_undefinedMap[id]) {
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.$_undefinedSizes++
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.$_undefinedMap[id] = true
           size = 0
         }
         result.push({
@@ -176,14 +191,18 @@ export default {
       const el = this.$el
       // Item is inserted to the DOM
       this.$nextTick(() => {
+        el.scrollTop = Number.MAX_SAFE_INTEGER
         // Item sizes are computed
         const cb = () => {
-          el.scrollTop = el.scrollHeight
-          if (this.$_undefinedSizes === 0) {
-            this.$_scrollingToBottom = false
-          } else {
-            requestAnimationFrame(cb)
-          }
+          el.scrollTop = Number.MAX_SAFE_INTEGER
+          requestAnimationFrame(() => {
+            el.scrollTop = Number.MAX_SAFE_INTEGER
+            if (this.$_undefinedSizes === 0) {
+              this.$_scrollingToBottom = false
+            } else {
+              requestAnimationFrame(cb)
+            }
+          })
         }
         requestAnimationFrame(cb)
       })

src/components/DynamicScrollerItem.vue

@@ -5,6 +5,7 @@ export default {
   inject: [
     'vscrollData',
     'vscrollParent',
+    'vscrollResizeObserver',
   ],
 
   props: {
@@ -63,9 +64,31 @@ export default {
     },
 
     active (value) {
+      if (!this.size) {
+        if (value) {
+          if (!this.vscrollParent.$_undefinedMap[this.id]) {
+            this.vscrollParent.$_undefinedSizes++
+            this.vscrollParent.$_undefinedMap[this.id] = true
+          }
+        } else {
+          if (this.vscrollParent.$_undefinedMap[this.id]) {
+            this.vscrollParent.$_undefinedSizes--
+            this.vscrollParent.$_undefinedMap[this.id] = false
+          }
+        }
+      }
+
       if (value && this.$_pendingVScrollUpdate === this.id) {
         this.updateSize()
       }
+
+      if (this.vscrollResizeObserver) {
+        if (value) {
+          this.observeSize()
+        } else {
+          this.unobserveSize()
+        }
+      }
     },
   },
 
@@ -75,23 +98,27 @@ export default {
     this.$_forceNextVScrollUpdate = null
     this.updateWatchData()
 
-    for (const k in this.sizeDependencies) {
-      this.$watch(() => this.sizeDependencies[k], this.onDataUpdate)
-    }
+    if (!this.vscrollResizeObserver) {
+      for (const k in this.sizeDependencies) {
+        this.$watch(() => this.sizeDependencies[k], this.onDataUpdate)
+      }
 
-    this.vscrollParent.$on('vscroll:update', this.onVscrollUpdate)
-    this.vscrollParent.$on('vscroll:update-size', this.onVscrollUpdateSize)
+      this.vscrollParent.$on('vscroll:update', this.onVscrollUpdate)
+      this.vscrollParent.$on('vscroll:update-size', this.onVscrollUpdateSize)
+    }
   },
 
   mounted () {
     if (this.vscrollData.active) {
       this.updateSize()
+      this.observeSize()
     }
   },
 
   beforeDestroy () {
     this.vscrollParent.$off('vscroll:update', this.onVscrollUpdate)
     this.vscrollParent.$off('vscroll:update-size', this.onVscrollUpdateSize)
+    this.unobserveSize()
   },
 
   methods: {
@@ -137,26 +164,44 @@ export default {
     },
 
     computeSize (id) {
+      if (this.vscrollResizeObserver) return
       this.$nextTick(() => {
         if (this.id === id) {
-          const bounds = {
-            width: this.$el.offsetWidth,
-            height: this.$el.offsetHeight,
-          }
-          const size = Math.round(this.vscrollParent.direction === 'vertical' ? bounds.height : bounds.width)
-          if (size && this.size !== size) {
-            if (this.vscrollParent.$_undefinedMap[id]) {
-              this.vscrollParent.$_undefinedSizes--
-              this.vscrollParent.$_undefinedMap[id] = undefined
-            }
-            this.$set(this.vscrollData.sizes, this.id, size)
-            this.$set(this.vscrollData.validSizes, this.id, true)
-            if (this.emitResize) this.$emit('resize', this.id)
-          }
+          const width = this.$el.offsetWidth
+          const height = this.$el.offsetHeight
+          this.applySize(width, height)
         }
         this.$_pendingSizeUpdate = null
       })
     },
+
+    applySize (width, height) {
+      const size = Math.round(this.vscrollParent.direction === 'vertical' ? height : width)
+      if (size && this.size !== size) {
+        if (this.vscrollParent.$_undefinedMap[this.id]) {
+          this.vscrollParent.$_undefinedSizes--
+          this.vscrollParent.$_undefinedMap[this.id] = undefined
+        }
+        this.$set(this.vscrollData.sizes, this.id, size)
+        this.$set(this.vscrollData.validSizes, this.id, true)
+        if (this.emitResize) this.$emit('resize', this.id)
+      }
+    },
+
+    observeSize () {
+      this.vscrollResizeObserver.observe(this.$el.parentNode)
+      this.$el.parentNode.addEventListener('resize', this.onResize)
+    },
+
+    unobserveSize () {
+      this.vscrollResizeObserver.unobserve(this.$el.parentNode)
+      this.$el.parentNode.removeEventListener('resize', this.onResize)
+    },
+
+    onResize (event) {
+      const { width, height } = event.detail.contentRect
+      this.applySize(width, height)
+    },
   },
 
   render (h) {