refactor!: remove resize-detector and update vue deps to 2.7+

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 7.0.0
+
+### Breaking changes
+
+* Dropped browsers without `ResizeObserver` support. Can work with [resize-observer-polyfill](https://www.npmjs.com/package/resize-observer-polyfill).
+* Dropped support for Vue < 2.7.
+
 ## 6.7.3
 
 * Fixed that `padding` on the component root doesn't work.

package.json

@@ -22,7 +22,6 @@
     "scripts/postinstall.js"
   ],
   "dependencies": {
-    "resize-detector": "^0.3.0",
     "vue-demi": "^0.13.11"
   },
   "devDependencies": {
@@ -75,14 +74,11 @@
     "@vue/composition-api": "^1.0.5",
     "@vue/runtime-core": "^3.0.0",
     "echarts": "^5.4.1",
-    "vue": "^2.6.12 || ^3.1.1"
+    "vue": "^2.7.0 || ^3.1.1"
   },
   "jsdelivr": "dist/index.umd.min.js",
   "license": "MIT",
   "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    },
     "@vue/runtime-core": {
       "optional": true
     }

pnpm-lock.yaml

@@ -11,9 +11,6 @@ importers:
       '@vue/runtime-core':
         specifier: ^3.0.0
         version: 3.4.24
-      resize-detector:
-        specifier: ^0.3.0
-        version: 0.3.0
       vue-demi:
         specifier: ^0.13.11
         version: 0.13.11(@vue/composition-api@1.7.2(vue@3.4.24(typescript@4.6.4)))(vue@3.4.24(typescript@4.6.4))
@@ -117,6 +114,9 @@ importers:
       raw-loader:
         specifier: ^4.0.2
         version: 4.0.2(webpack@5.91.0)
+      resize-detector:
+        specifier: ^0.3.0
+        version: 0.3.0
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2

src/composables/autoresize.ts

@@ -1,10 +1,5 @@
 import { watch, type Ref, type PropType } from "vue-demi";
 import { throttle } from "echarts/core";
-import {
-  addListener,
-  removeListener,
-  type ResizeCallback
-} from "resize-detector";
 import { type EChartsType } from "../types";
 
 type AutoresizeProp =
@@ -19,28 +14,50 @@ export function useAutoresize(
   autoresize: Ref<AutoresizeProp | undefined>,
   root: Ref<HTMLElement | undefined>
 ): void {
-  let resizeListener: ResizeCallback | null = null;
+  watch(
+    [root, chart, autoresize],
+    ([root, chart, autoresize], _, onCleanup) => {
+      let ro: ResizeObserver | null = null;
 
-  watch([root, chart, autoresize], ([root, chart, autoresize], _, cleanup) => {
       if (root && chart && autoresize) {
+        const { offsetWidth, offsetHeight } = root;
         const autoresizeOptions = autoresize === true ? {} : autoresize;
         const { throttle: wait = 100, onResize } = autoresizeOptions;
 
+        let initialResizeTriggered = false;
+
         const callback = () => {
           chart.resize();
           onResize?.();
         };
 
-      resizeListener = wait ? throttle(callback, wait) : callback;
+        const resizeCallback = wait ? throttle(callback, wait) : callback;
-      addListener(root, resizeListener);
+
+        ro = new ResizeObserver(() => {
+          // We just skip ResizeObserver's initial resize callback if the
+          // size has not changed since the chart is rendered.
+          if (!initialResizeTriggered) {
+            initialResizeTriggered = true;
+            if (
+              root.offsetWidth === offsetWidth &&
+              root.offsetHeight === offsetHeight
+            ) {
+              return;
+            }
+          }
+          resizeCallback();
+        });
+        ro.observe(root);
       }
 
-    cleanup(() => {
+      onCleanup(() => {
-      if (root && resizeListener) {
+        if (ro) {
-        removeListener(root, resizeListener);
+          ro.disconnect();
+          ro = null;
         }
       });
-  });
+    }
+  );
 }
 
 export const autoresizeProps = {