From 0a4601bc1a54d2930cbe36e989367579f7055e45 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Thu, 29 Dec 2022 18:13:51 +0800
Subject: [PATCH] feat: delay disposal to disconnection if possible

---
 CHANGELOG.md      |  4 ++++
 README.md         |  4 ++--
 README.zh-Hans.md |  4 ++--
 package.json      |  2 +-
 src/ECharts.ts    | 19 ++++++++++++++----
 src/wc.ts         | 51 +++++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 75 insertions(+), 9 deletions(-)
 create mode 100644 src/wc.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3321c5..7f11b7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 6.4.0
+
+* Delay the disposal of the ECharts instance to the moment the element is disconnected from the DOM if possible (#433).
+
 ## 6.3.3
 
 * Make autoresize work for grid layout by default (#675).
diff --git a/README.md b/README.md
index d895e82..0e33297 100644
--- a/README.md
+++ b/README.md
@@ -227,7 +227,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -247,7 +247,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index a4b7ed5..e175b7e 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -225,7 +225,7 @@ import "echarts";
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -245,7 +245,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
diff --git a/package.json b/package.json
index 349d5be..bbadd7d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.3.3",
+  "version": "6.4.0",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 1d51be3..237d068 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -8,7 +8,7 @@ import {
   computed,
   inject,
   onMounted,
-  onUnmounted,
+  onBeforeUnmount,
   h,
   nextTick,
   watchEffect,
@@ -38,9 +38,10 @@ import {
   loadingProps
 } from "./composables";
 import { omitOn, unwrapInjected } from "./utils";
+import { register, TAG_NAME, type EChartsElement } from "./wc";
 import "./style.css";
 
-const TAG_NAME = "x-vue-echarts";
+const wcRegistered = register();
 
 if (Vue2) {
   Vue2.config.ignoredElements.push(TAG_NAME);
@@ -70,7 +71,7 @@ export default defineComponent({
   emits: [] as unknown as Emits,
   inheritAttrs: false,
   setup(props, { attrs }) {
-    const root = shallowRef<HTMLElement>();
+    const root = shallowRef<EChartsElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
     const defaultTheme = inject(THEME_KEY, null);
@@ -273,7 +274,17 @@ export default defineComponent({
       init();
     });
 
-    onUnmounted(cleanup);
+    onBeforeUnmount(() => {
+      if (wcRegistered && root.value) {
+        // For registered web component, we can leverage the
+        // `disconnectedCallback` to dispose the chart instance
+        // so that we can delay the cleanup after exsiting leaving
+        // transition.
+        root.value.__dispose = cleanup;
+      } else {
+        cleanup();
+      }
+    });
 
     return {
       chart,
diff --git a/src/wc.ts b/src/wc.ts
new file mode 100644
index 0000000..e5bb03a
--- /dev/null
+++ b/src/wc.ts
@@ -0,0 +1,51 @@
+let registered: boolean | null = null;
+
+export const TAG_NAME = "x-vue-echarts";
+
+export interface EChartsElement extends HTMLElement {
+  __dispose: (() => void) | null;
+}
+
+export function register(): boolean {
+  if (registered != null) {
+    return registered;
+  }
+
+  if (
+    typeof HTMLElement === "undefined" ||
+    typeof customElements === "undefined"
+  ) {
+    return (registered = false);
+  }
+
+  try {
+    // Class definitions cannot be transpiled to ES5
+    // so we are doing a little trick here to ensure
+    // we are using native classes. As we use this as
+    // a progressive enhancement, it will be fine even
+    // if the browser doesn't support native classes.
+    const reg = new Function(
+      "tag",
+      `class EChartsElement extends HTMLElement {
+  __dispose = null;
+
+  disconnectedCallback() {
+    if (this.__dispose) {
+      this.__dispose();
+      this.__dispose = null;
+    }
+  }
+}
+
+if (customElements.get(tag) == null) {
+  customElements.define(tag, EChartsElement);
+}
+`
+    );
+    reg(TAG_NAME);
+  } catch (e) {
+    return (registered = false);
+  }
+
+  return (registered = true);
+}