Replace ResizeSensor

learningequality · Feb 28, 2024 · 501e37c · 501e37c
1 parent 7971ea4
commit 501e37c
Showing 1 changed file with 19 additions and 7 deletions.
diff --git a/lib/composables/_useKResponsiveElement.js b/lib/composables/_useKResponsiveElement.js
@@ -1,13 +1,22 @@
-import ResizeSensor from 'css-element-queries/src/ResizeSensor';
 import { onMounted, onUnmounted, ref, getCurrentInstance } from '@vue/composition-api';
 
+let _resizeObserver;
+
+if (typeof window !== 'undefined' && window.ResizeObserver) {
+  _resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      if (entry.target._resizeListener) {
+        entry.target._resizeListener();
+      }
+    }
+  });
+}
+
 export default function useKResponsiveElement() {
   const elementWidth = ref(0);
   const elementHeight = ref(0);
   const instance = getCurrentInstance();
 
-  let _resizeSensor;
-
   function updateEl() {
     const { $el } = instance.proxy || {};
     const { clientHeight, clientWidth } = $el || {};
@@ -17,14 +26,17 @@ export default function useKResponsiveElement() {
 
   onMounted(() => {
     updateEl();
-    _resizeSensor = new ResizeSensor(instance.proxy.$el, updateEl);
+    if (_resizeObserver) {
+      instance.proxy.$el._resizeListener = updateEl;
+
+      _resizeObserver.observe(instance.proxy.$el);
+    }
   });
 
   onUnmounted(() => {
-    if (!_resizeSensor) {
-      return;
+    if (_resizeObserver) {
+      _resizeObserver.unobserve(instance.proxy.$el);
     }
-    _resizeSensor.detach(instance.proxy.$el, updateEl);
   });
 
   return {