From 3c7ff95331afced6da7d489f386b33f6ec87a840 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Sat, 11 May 2024 15:36:34 +0800
Subject: [PATCH] refactor!: remove resize-detector and update vue deps to 2.7+

---
 CHANGELOG.md                  |  7 ++++
 package.json                  |  6 +---
 pnpm-lock.yaml                |  6 ++--
 src/composables/autoresize.ts | 61 ++++++++++++++++++++++-------------
 4 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea9012d..6b2e6f0 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/package.json b/package.json
index 097b7f4..63c3eee 100644
--- a/package.json
+++ b/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
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3d09db..8ef6c5c 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/composables/autoresize.ts b/src/composables/autoresize.ts
index 9d2f6a3..7679628 100644
--- a/src/composables/autoresize.ts
+++ b/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 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?.();
+        };
 
-    cleanup(() => {
-      if (root && resizeListener) {
-        removeListener(root, resizeListener);
+        const resizeCallback = wait ? throttle(callback, wait) : callback;
+
+        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 = {