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

Author: Justineo

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

@@ -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 autoresizeOptions = autoresize === true ? {} : autoresize;
-      const { throttle: wait = 100, onResize } = autoresizeOptions;
+      if (root && chart && autoresize) {
+        const { offsetWidth, offsetHeight } = root;
+        const autoresizeOptions = autoresize === true ? {} : autoresize;
+        const { throttle: wait = 100, onResize } = autoresizeOptions;
 
-      const callback = () => {
-        chart.resize();
-        onResize?.();
-      };
+        let initialResizeTriggered = false;
 
-      resizeListener = wait ? throttle(callback, wait) : callback;
-      addListener(root, resizeListener);
-    }
+        const callback = () => {
+          chart.resize();
+          onResize?.();
+        };
+
+        const resizeCallback = wait ? throttle(callback, wait) : callback;
 
-    cleanup(() => {
-      if (root && resizeListener) {
-        removeListener(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);
       }
-    });
-  });
+
+      onCleanup(() => {
+        if (ro) {
+          ro.disconnect();
+          ro = null;
+        }
+      });
+    }
+  );
 }
 
 export const autoresizeProps = {