fix(use-composable): add size work when onMounted is done (#175)

Author: productdevbook

packages/core/use-composable/src/useSize.ts

@@ -1,7 +1,7 @@
 /// <reference types="resize-observer-browser" />
 
 import type { Ref, WatchStopHandle } from 'vue'
-import { onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 interface Size {
   width: number
@@ -13,59 +13,61 @@ function useSize(element: Ref<HTMLElement | null>) {
   let stopHandle: WatchStopHandle
   let resizeObserver: ResizeObserver
 
-  watch(element, () => {
-    if (element.value) {
-      size.value = { width: element.value.offsetWidth, height: element.value.offsetHeight }
+  onMounted(() => {
+    watch(element, () => {
+      if (element.value) {
+        size.value = { width: element.value.offsetWidth, height: element.value.offsetHeight }
 
-      resizeObserver = new ResizeObserver((entries) => {
-        if (!Array.isArray(entries))
-          return
+        resizeObserver = new ResizeObserver((entries) => {
+          if (!Array.isArray(entries))
+            return
 
-        // Since we only observe the one element, we don't need to loop over the
-        // array
-        if (!entries.length)
-          return
+          // Since we only observe the one element, we don't need to loop over the
+          // array
+          if (!entries.length)
+            return
 
-        const entry = entries[0]
-        let width: number
-        let height: number
+          const entry = entries[0]
+          let width: number
+          let height: number
 
-        if ('borderBoxSize' in entry) {
-          const borderSizeEntry = entry.borderBoxSize
-          // iron out differences between browsers
-          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry
-          width = borderSize.inlineSize
-          height = borderSize.blockSize
-        }
-        else {
-          if (element.value) {
-            // for browsers that don't support `borderBoxSize`
-            // we calculate it ourselves to get the correct border box.
-            width = element.value.offsetWidth
-            height = element.value.offsetHeight
+          if ('borderBoxSize' in entry) {
+            const borderSizeEntry = entry.borderBoxSize
+            // iron out differences between browsers
+            const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry
+            width = borderSize.inlineSize
+            height = borderSize.blockSize
           }
           else {
-            width = 0
-            height = 0
+            if (element.value) {
+              // for browsers that don't support `borderBoxSize`
+              // we calculate it ourselves to get the correct border box.
+              width = element.value.offsetWidth
+              height = element.value.offsetHeight
+            }
+            else {
+              width = 0
+              height = 0
+            }
           }
-        }
 
-        size.value = { width, height }
-      })
+          size.value = { width, height }
+        })
 
-      resizeObserver.observe(element.value)
+        resizeObserver.observe(element.value)
 
-      stopHandle = watch(element, (newValue, oldValue) => {
-        if (oldValue)
-          resizeObserver.unobserve(oldValue)
+        stopHandle = watch(element, (newValue, oldValue) => {
+          if (oldValue)
+            resizeObserver.unobserve(oldValue)
 
-        if (newValue)
-          resizeObserver.observe(newValue)
-      })
-    }
-    else {
-      size.value = undefined
-    }
+          if (newValue)
+            resizeObserver.observe(newValue)
+        })
+      }
+      else {
+        size.value = undefined
+      }
+    })
   })
 
   onUnmounted(() => {