fix(vchart): fix memory leaks in Player component and BaseComponent release logic

common/changes/@visactor/vchart/fix-memory-leaks.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: Fix memory leaks in Player component and BaseComponent release logic.",
+      "type": "patch",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "visactor@bytedance.com"
+}

docs/package.json

@@ -19,8 +19,8 @@
     "@visactor/vchart-theme": "~1.6.6",
     "@visactor/vmind": "1.2.4-alpha.5",
     "@visactor/vutils": "~1.0.22",
-    "@visactor/vrender": "~1.0.40",
-    "@visactor/vrender-kits": "~1.0.40",
+    "@visactor/vrender": "~1.0.41",
+    "@visactor/vrender-kits": "~1.0.41",
     "@visactor/vtable": "1.19.0-alpha.0",
     "@visactor/vtable-editors": "1.19.0-alpha.0",
     "@visactor/vtable-gantt": "1.19.0-alpha.0",
@@ -58,4 +58,4 @@
     "react-device-detect": "^2.2.2",
     "minimist": "1.2.8"
   }
-}
+}

packages/openinula-vchart/package.json

@@ -30,8 +30,8 @@
   "dependencies": {
     "@visactor/vchart": "workspace:2.0.17",
     "@visactor/vutils": "~1.0.22",
-    "@visactor/vrender-core": "~1.0.40",
-    "@visactor/vrender-kits": "~1.0.40",
+    "@visactor/vrender-core": "~1.0.41",
+    "@visactor/vrender-kits": "~1.0.41",
     "react-is": "^18.2.0"
   },
   "devDependencies": {
@@ -78,4 +78,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

packages/react-vchart/package.json

@@ -31,8 +31,8 @@
     "@visactor/vchart": "workspace:2.0.17",
     "@visactor/vchart-extension": "workspace:2.0.17",
     "@visactor/vutils": "~1.0.22",
-    "@visactor/vrender-core": "~1.0.40",
-    "@visactor/vrender-kits": "~1.0.40",
+    "@visactor/vrender-core": "~1.0.41",
+    "@visactor/vrender-kits": "~1.0.41",
     "react-is": "^18.2.0"
   },
   "devDependencies": {
@@ -83,4 +83,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

packages/vchart-extension/__tests__/runtime/browser/test-page/ranking-list.ts

@@ -250,7 +250,7 @@ const spec = {
   },
   // animation: false,
   customTransformSpec: spec => {
-    console.log('spec----', spec);
+    // console.log('spec----', spec);
     spec.axes[0].paddingOuter = 0.7;
   }
 };

packages/vchart-extension/package.json

@@ -21,10 +21,10 @@
     "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser"
   },
   "dependencies": {
-    "@visactor/vrender-core": "~1.0.40",
-    "@visactor/vrender-kits": "~1.0.40",
-    "@visactor/vrender-components": "~1.0.40",
-    "@visactor/vrender-animate": "~1.0.40",
+    "@visactor/vrender-core": "~1.0.41",
+    "@visactor/vrender-kits": "~1.0.41",
+    "@visactor/vrender-components": "~1.0.41",
+    "@visactor/vrender-animate": "~1.0.41",
     "@visactor/vchart": "workspace:2.0.17",
     "@visactor/vutils": "~1.0.22",
     "@visactor/vdataset": "~1.0.22",
@@ -66,4 +66,4 @@
     "directory": "packages/vchart-extension"
   },
   "license": "MIT"
-}
+}

packages/vchart/__tests__/runtime/browser/test-page/radar.ts

@@ -2,7 +2,7 @@ import { isMobile } from 'react-device-detect';
 import type { IRadarChartSpec } from '../../../../src/index';
 import { VChart } from '../../../../src/index';
 
-const run = () => {
+const run = async () => {
   const mockData: any[] = [];
   const types = ['A', 'B', 'C'];
 
@@ -69,7 +69,47 @@ const run = () => {
   cs.renderAsync().then(() => {
     console.timeEnd('renderTime');
   });
+
+  const c = document.createElement('button');
+  c.innerHTML = 'release';
+  c.style.marginRight = '5px';
+  c.style.marginTop = '5px';
+  function releaseChart() {
+    cs.release();
+    // cs.destroy();
+  }
+  c.onclick = releaseChart;
+  document?.getElementsByTagName('body')[0].appendChild(c);
+
+  const d = document.createElement('button');
+  d.innerHTML = 'reRender';
+  d.style.marginRight = '5px';
+  d.style.marginTop = '5px';
+  function reRenderChart() {
+    const cs = new VChart(spec, {
+      dom: document.getElementById('chart') as HTMLElement,
+      //theme: 'dark',
+      onError: err => {
+        console.error(err);
+      }
+    });
+    console.time('renderTime');
+
+    cs.renderSync();
+    window['vchart'] = cs;
+  }
+  d.onclick = reRenderChart;
+  document?.getElementsByTagName('body')[0].appendChild(d);
+
   window['vchart'] = cs;
   console.log(cs);
+
+  for (let i = 0; i < 1000; i++) {
+    await new Promise(resolve => setTimeout(resolve, 100));
+    window['vchart'].release();
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+    reRenderChart();
+  }
 };
 run();