fix: compare Taro chart specs safely

packages/taro-vchart/package.json

@@ -9,6 +9,7 @@
     "cjs"
   ],
   "scripts": {
+    "test": "node scripts/test-spec-equal.cjs",
     "build": "bundle --clean",
     "build:tt": "taro build --type tt",
     "build:lark": "taro build --type lark",

packages/taro-vchart/scripts/test-spec-equal.cjs

@@ -0,0 +1,65 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const typescript = require('typescript');
+
+const source = fs.readFileSync(path.join(__dirname, '../src/utils/spec-equal.ts'), 'utf8');
+const { outputText, diagnostics = [] } = typescript.transpileModule(source, {
+  compilerOptions: {
+    module: typescript.ModuleKind.CommonJS,
+    target: typescript.ScriptTarget.ES2015
+  },
+  reportDiagnostics: true
+});
+assert.equal(diagnostics.length, 0, 'spec comparator should transpile without diagnostics');
+
+const compiledModule = { exports: {} };
+new Function('exports', 'require', 'module', outputText)(compiledModule.exports, require, compiledModule);
+const { isSpecEqual } = compiledModule.exports;
+
+const firstFormatter = () => 'first';
+const secondFormatter = () => 'second';
+assert.equal(isSpecEqual({ formatter: firstFormatter }, { formatter: secondFormatter }), false);
+assert.equal(isSpecEqual({ formatter: firstFormatter }, { formatter: firstFormatter }), true);
+assert.equal(isSpecEqual({ axis: { visible: true } }, { axis: { visible: true } }), true);
+assert.equal(isSpecEqual({ seriesField: undefined }, {}), true);
+assert.equal(isSpecEqual({}, { seriesField: undefined }), true);
+assert.equal(
+  isSpecEqual({ seriesField: undefined }, { seriesField: 'value' }),
+  false
+);
+assert.equal(isSpecEqual({ date: new Date(0) }, { date: new Date(0) }), true);
+assert.equal(isSpecEqual({ date: new Date(0) }, { date: new Date(1) }), false);
+
+class Row {
+  constructor(name, value) {
+    this.name = name;
+    this.value = value;
+  }
+}
+assert.equal(isSpecEqual({ data: [new Row('A', 3)] }, { data: [new Row('A', 3)] }), true);
+assert.equal(isSpecEqual({ data: [new Row('A', 3)] }, { data: [new Row('A', 4)] }), false);
+
+function cyclicSpec(value) {
+  const spec = { value };
+  spec.self = spec;
+  return spec;
+}
+assert.equal(isSpecEqual(cyclicSpec(1), cyclicSpec(1)), true);
+assert.equal(isSpecEqual(cyclicSpec(1), cyclicSpec(2)), false);
+
+function cyclicData(twoNodes) {
+  const first = { value: 1 };
+  if (twoNodes) {
+    const second = { value: 1 };
+    first.next = second;
+    second.next = first;
+  } else {
+    first.next = first;
+  }
+  return { data: first };
+}
+assert.equal(isSpecEqual(cyclicData(true), cyclicData(false)), false);
+assert.equal(isSpecEqual(cyclicData(false), cyclicData(true)), false);
+
+console.log('Taro VChart spec equality checks passed');

packages/taro-vchart/src/components/general-chart/index.tsx

@@ -6,7 +6,8 @@ import {
   style_cs_canvas,
   style_cs_canvas_hidden,
   style_cs_tooltip_canvas,
-  style_container
+  style_container,
+  isSpecEqual
 } from '../../utils';
 
 import { IChartProps, IVChart, IDomRef, RenderMode } from '../../typings';
@@ -83,7 +84,7 @@ export class GeneralChart extends React.Component<GeneralChartProps> {
     if (
       this.ttCanvas &&
       this.ttCanvas.chartInstance &&
-      JSON.stringify(prevProps.spec) !== JSON.stringify(this.props.spec)
+      !isSpecEqual(prevProps.spec, this.props.spec)
     ) {
       this.ttCanvas.updateSpec(this.props);
     }

packages/taro-vchart/src/components/web-chart/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isSpecEqual } from '../../utils';
 import { IChartProps, IVChart, RenderMode } from '../../typings';
 
 export interface WebChartProps extends IChartProps {
@@ -48,7 +49,7 @@ export class WebChart extends React.Component<WebChartProps> {
 
     const { spec, onChartReady } = this.props;
 
-    if (JSON.stringify(prevProps.spec) !== JSON.stringify(spec)) {
+    if (!isSpecEqual(prevProps.spec, spec)) {
       this.vchart.updateSpec(spec, true);
       onChartReady && onChartReady(this.vchart);
     }

packages/taro-vchart/src/utils/index.ts

@@ -1,3 +1,4 @@
 export { TTCanvas } from './tt-canvas';
+export { isSpecEqual } from './spec-equal';
 
 export { style_cs_canvas, style_cs_canvas_hidden, style_cs_tooltip_canvas, style_container } from './container-styles';

packages/taro-vchart/src/utils/spec-equal.ts

@@ -0,0 +1,98 @@
+function isComparableObject(value: object): boolean {
+  const prototype = Object.getPrototypeOf(value);
+  return (
+    prototype === Object.prototype ||
+    prototype === null ||
+    Object.keys(value).length > 0
+  );
+}
+
+function equalSpecValue(
+  left: unknown,
+  right: unknown,
+  active: WeakMap<object, object>,
+  activeReverse: WeakMap<object, object>
+): boolean {
+  if (left === right) return true;
+  if (typeof left === 'number' && typeof right === 'number' && Number.isNaN(left) && Number.isNaN(right)) {
+    return true;
+  }
+  if (typeof left !== typeof right || left === null || right === null) return false;
+  if (typeof left !== 'object' || typeof right !== 'object') return false;
+
+  if (left instanceof Date || right instanceof Date) {
+    if (!(left instanceof Date) || !(right instanceof Date)) return false;
+    const leftTime = left.getTime();
+    const rightTime = right.getTime();
+    return leftTime === rightTime || (Number.isNaN(leftTime) && Number.isNaN(rightTime));
+  }
+
+  const leftIsArray = Array.isArray(left);
+  if (leftIsArray !== Array.isArray(right)) return false;
+  if (!leftIsArray && (!isComparableObject(left) || !isComparableObject(right))) return false;
+
+  const leftObject = left as object;
+  const rightObject = right as object;
+  const activeRight = active.get(leftObject);
+  if (activeRight) return activeRight === rightObject;
+  const activeLeft = activeReverse.get(rightObject);
+  if (activeLeft) return activeLeft === leftObject;
+  active.set(leftObject, rightObject);
+  activeReverse.set(rightObject, leftObject);
+  const untrack = () => {
+    active.delete(leftObject);
+    activeReverse.delete(rightObject);
+  };
+
+  if (leftIsArray) {
+    const leftArray = left as unknown[];
+    const rightArray = right as unknown[];
+    if (leftArray.length !== rightArray.length) {
+      untrack();
+      return false;
+    }
+    for (let index = leftArray.length - 1; index >= 0; index--) {
+      if (!equalSpecValue(leftArray[index], rightArray[index], active, activeReverse)) {
+        untrack();
+        return false;
+      }
+    }
+    untrack();
+    return true;
+  }
+
+  const leftRecord = left as Record<string, unknown>;
+  const rightRecord = right as Record<string, unknown>;
+  const leftKeys = Object.keys(leftRecord);
+  const rightKeys = Object.keys(rightRecord);
+  let leftDefinedKeyCount = 0;
+  let rightDefinedKeyCount = 0;
+  for (const key of leftKeys) {
+    if (leftRecord[key] !== undefined) leftDefinedKeyCount++;
+  }
+  for (const key of rightKeys) {
+    if (rightRecord[key] !== undefined) rightDefinedKeyCount++;
+  }
+  if (leftDefinedKeyCount !== rightDefinedKeyCount) {
+    untrack();
+    return false;
+  }
+  for (const key of leftKeys) {
+    const leftValue = leftRecord[key];
+    if (leftValue === undefined) continue;
+    if (
+      !Object.prototype.hasOwnProperty.call(rightRecord, key) ||
+      !equalSpecValue(leftValue, rightRecord[key], active, activeReverse)
+    ) {
+      untrack();
+      return false;
+    }
+  }
+  untrack();
+  return true;
+}
+
+/** Compare chart specs without serializing callback values or cyclic data. */
+export function isSpecEqual(left: unknown, right: unknown): boolean {
+  return equalSpecValue(left, right, new WeakMap(), new WeakMap());
+}