fix: theme switching problem

packages/vchart-semi-theme/__tests__/runtime/browser/src/chart-list.ts

@@ -0,0 +1,30 @@
+import type { IChartInfo } from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/interface';
+import area from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/area';
+import bar from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/bar';
+import column from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/column';
+import pie from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/pie';
+import rose from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/rose';
+import radar from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/radar';
+import scatter from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/scatter';
+import heatmap from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/heatmap';
+import markArea from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/mark-area';
+import markLine from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/mark-line';
+import markPoint from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/mark-point';
+import gauge from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/gauge';
+import funnel from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/funnel';
+
+export const charts: IChartInfo[] = [
+  area,
+  column,
+  pie,
+  bar,
+  rose,
+  radar,
+  scatter,
+  //heatmap,
+  gauge,
+  funnel,
+  markArea,
+  markLine,
+  markPoint
+];

packages/vchart-semi-theme/__tests__/runtime/browser/src/charts.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { isMobile } from 'react-device-detect';
-import { charts } from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts';
+import { charts } from './chart-list';
 import { VChart } from '@visactor/react-vchart';
 
 const chartHeight = 400;
@@ -28,9 +28,8 @@ const Charts = () => {
                 option={{
                   ...chart.option,
                   mode: isMobile ? 'mobile-browser' : 'desktop-browser',
-                  onError: err => {
-                    console.error(err);
-                  }
+                  onError: null,
+                  logLevel: 5
                 }}
               />
             </div>

packages/vchart-semi-theme/__tests__/runtime/browser/src/index.jsx

@@ -3,8 +3,11 @@ import { createRoot } from 'react-dom/client';
 import Frame from './frame.jsx';
 import './normalize.css';
 import { initVChartSemiTheme } from '../../../../src';
+import VChart from '@visactor/vchart';
 
-initVChartSemiTheme();
+initVChartSemiTheme({
+  isWatchingThemeSwitch: true
+});
 
 // 匹配系统亮暗模式
 const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -26,3 +29,5 @@ mql.addListener(matchMode);
 const dom = document.querySelector('#root');
 const root = createRoot(dom);
 root.render(<Frame />);
+
+window['VChart'] = VChart;

packages/vchart-semi-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vchart-semi-theme",
-  "version": "1.6.3",
+  "version": "1.7.2",
   "description": "Extended themes for VChart",
   "sideEffects": false,
   "main": "cjs/index.js",
@@ -25,9 +25,8 @@
     "test-watch": "DEBUG_MODE=1 jest --watch"
   },
   "peerDependencies": {
-    "@visactor/vchart": "^1.6.2",
-    "@visactor/vutils": "^0.16.7",
-    "@douyinfe/semi-ui": ">=2.46.1"
+    "@visactor/vchart": "~1.7.2",
+    "@douyinfe/semi-ui": "^2.46.1"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "0.1.1",
@@ -60,10 +59,9 @@
     "vite": "^4.5.0",
     "vite-plugin-svgr": "^4.1.0",
     "@babel/runtime": "latest",
-    "@visactor/vchart": "^1.6.2",
-    "@visactor/react-vchart": "^1.6.2",
-    "@visactor/vutils": "^0.16.7",
-    "@douyinfe/semi-ui": ">=2.46.1",
+    "@visactor/vchart": "~1.7.2",
+    "@visactor/react-vchart": "~1.7.2",
+    "@douyinfe/semi-ui": "^2.46.1",
     "@douyinfe/semi-icons": "latest",
     "@douyinfe/semi-icons-lab": "latest"
   },

packages/vchart-semi-theme/src/generator.ts

@@ -9,7 +9,6 @@ import { semiDesignDark } from './dark';
 import { semiDesignLight } from './light';
 import { dataSchemeTokenMap, paletteTokenMap } from './common/token-map';
 import { getTokenValue } from './util';
-import { isObject } from '@visactor/vutils';
 
 const baseThemeMap = {
   light: semiDesignLight,
@@ -49,7 +48,7 @@ const generatePalette = (mode: 'light' | 'dark', chartContainer?: HTMLElement):
   const baseTheme = baseThemeMap[mode];
   const newPalette = {};
   Object.keys(paletteTokenMap).forEach(key => {
-    const token = isObject(paletteTokenMap[key]) ? paletteTokenMap[key][mode] : paletteTokenMap[key];
+    const token = typeof paletteTokenMap[key] === 'object' ? paletteTokenMap[key][mode] : paletteTokenMap[key];
     newPalette[key] = getTokenValue(
       token,
       (baseTheme.colorScheme.default as IColorSchemeStruct).palette[key],

packages/vchart-semi-theme/src/index.ts

@@ -1,32 +1,53 @@
+import type { ITheme } from '@visactor/vchart';
+// eslint-disable-next-line no-duplicate-imports
 import VChart from '@visactor/vchart';
 import type { IInitVChartSemiThemeOption } from './interface';
-import { generateThemeName, getCurrentMode, observeAttribute } from './util';
+import { generateThemeName, getCurrentMode, observeAttribute, observeThemeSwitch } from './util';
 import { generateVChartSemiTheme } from './generator';
 
 export * from './theme-map';
 export * from './generator';
 export * from './light';
 export * from './dark';
 
-export const initVChartSemiTheme = (
-  options: IInitVChartSemiThemeOption = { isWatchingMode: true, isWatchingThemeSwitch: true }
-) => {
-  switchVChartSemiTheme(options?.defaultMode);
+export const initVChartSemiTheme = (options?: IInitVChartSemiThemeOption) => {
+  const { defaultMode, isWatchingMode = true, isWatchingThemeSwitch = false } = options ?? {};
 
-  if (options?.isWatchingMode) {
-    observeAttribute(document.body, 'theme-mode', () => {
-      switchVChartSemiTheme();
+  switchVChartSemiTheme(false, defaultMode);
+
+  if (isWatchingMode) {
+    observeAttribute(document.body, 'theme-mode', () => switchVChartSemiTheme());
+  }
+  if (isWatchingThemeSwitch) {
+    observeThemeSwitch(() => {
+      const mode = getCurrentMode();
+      const cacheColorScheme = JSON.stringify(generateVChartSemiTheme(mode).colorScheme);
+      // 轮询直到监测到主题变化
+      let times = 0;
+      const timer = setInterval(() => {
+        const theme = generateVChartSemiTheme(mode);
+        if (times > 50 || cacheColorScheme !== JSON.stringify(theme.colorScheme)) {
+          switchVChartSemiTheme(true, mode, theme);
+          clearInterval(timer);
+        }
+        times++;
+      }, 100);
     });
   }
 };
 
-export const switchVChartSemiTheme = (mode?: 'light' | 'dark') => {
+export const switchVChartSemiTheme = (force?: boolean, mode?: 'light' | 'dark', theme?: ITheme) => {
   if (!mode) {
     mode = getCurrentMode();
   }
   const themeName = generateThemeName(mode);
+  if (!force && VChart.ThemeManager.getCurrentTheme() === themeName) {
+    return;
+  } else if (force) {
+    VChart.ThemeManager.removeTheme(themeName);
+  }
   if (!VChart.ThemeManager.themeExist(themeName)) {
-    VChart.ThemeManager.registerTheme(themeName, generateVChartSemiTheme(mode));
+    VChart.ThemeManager.registerTheme(themeName, theme ?? generateVChartSemiTheme(mode));
   }
   VChart.ThemeManager.setCurrentTheme(themeName);
 };

packages/vchart-semi-theme/src/util.ts

@@ -1,8 +1,6 @@
-import { isValidNumber } from '@visactor/vutils';
-
 export const getTokenValue = <T>(token: string, defaultValue?: T, chartContainer?: HTMLElement): T | string => {
-  const value = getComputedStyle(chartContainer ?? document.documentElement).getPropertyValue(token) || defaultValue;
-  if (isValidNumber(value?.[0])) {
+  const value = getComputedStyle(chartContainer ?? document.body).getPropertyValue(token) || defaultValue;
+  if (value && !isNaN(value[0])) {
     return `rgba(${value})`;
   }
   return value;
@@ -27,3 +25,17 @@ export const observeAttribute = (
   });
   observer.observe(element, { attributes: true });
 };
+
+export const observeThemeSwitch = (callback: (mutation: MutationRecord, node: HTMLLinkElement) => void) => {
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      if (mutation.addedNodes.length === 1) {
+        const node = mutation.addedNodes[0] as HTMLLinkElement;
+        if (node.tagName === 'LINK' && node.getAttribute?.('semi-theme-switcher') === 'true') {
+          callback(mutation, node);
+        }
+      }
+    });
+  });
+  observer.observe(document.body, { childList: true });
+};

packages/vchart-theme/__tests__/runtime/browser/test-page/charts/heatmap.ts

@@ -63,7 +63,7 @@ const spec: IHeatmapChartSpec = {
         fields: ['value']
       }
     ],
-    range: ['#07A35A', { type: 'palette', key: 'backgroundColor' }, '#E33232']
+    range: ['#07A35A', '#ffffff', '#E33232']
   },
   axes: [
     {

packages/vchart-theme/__tests__/runtime/browser/test-page/util.ts

@@ -1,5 +1,3 @@
-import { isValid } from '@visactor/vutils';
-
 export const domDocument: Document | undefined = globalThis.document;
 
 export const createElement = <T extends HTMLElement = HTMLElement>(
@@ -24,7 +22,7 @@ export const createElement = <T extends HTMLElement = HTMLElement>(
     for (const key in attr) {
       const attrItem = document.createAttribute(key);
       const value = attr[key];
-      if (isValid(value)) {
+      if (value !== undefined) {
         attrItem.value = value;
         element.attributes.setNamedItem(attrItem);
       }

packages/vchart-theme/__tests__/runtime/browser/vite.config.js

@@ -1,7 +1,4 @@
-import * as path from 'path';
 import localConf from './vite.config.local';
-import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
-import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
 import rollupNodePolyFill from 'rollup-plugin-node-polyfills';
 
 export default {
@@ -20,15 +17,7 @@ export default {
       // Node.js global to browser globalThis
       define: {
         global: 'globalThis'
-      },
-      // Enable esbuild polyfill plugins
-      plugins: [
-        NodeGlobalsPolyfillPlugin({
-          process: true,
-          buffer: true
-        }),
-        NodeModulesPolyfillPlugin()
-      ]
+      }
     }
   },
   build: {
@@ -44,7 +33,6 @@ export default {
     ...localConf?.resolve,
     alias: {
       ...localConf?.resolve?.alias
-      //'@visactor/vutils-extension': path.resolve(__dirname, '../../../../vutils-extension/src/index.ts')
     }
   }
 };

packages/vchart-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vchart-theme",
-  "version": "1.6.3",
+  "version": "1.7.2",
   "description": "Extended themes for VChart",
   "sideEffects": false,
   "main": "cjs/index.js",
@@ -25,19 +25,16 @@
     "test-watch": "DEBUG_MODE=1 jest --watch"
   },
   "peerDependencies": {
-    "@visactor/vchart": "^1.6.2"
+    "@visactor/vchart": "~1.7.2"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "0.1.1",
-    "@esbuild-plugins/node-modules-polyfill": "0.1.4",
     "@internal/bundler": "workspace:*",
     "@internal/eslint-config": "workspace:*",
     "@internal/ts-config": "workspace:*",
     "@rushstack/eslint-patch": "~1.1.4",
-    "@visactor/vchart": "^1.6.2",
-    "@visactor/vchart-types": "^1.6.2",
-    "@visactor/vutils": "^0.16.7",
-    "@visactor/vchart-semi-theme": "workspace:1.6.3",
+    "@visactor/vchart": "~1.7.2",
+    "@visactor/vchart-types": "~1.7.2",
+    "@visactor/vchart-semi-theme": "workspace:1.7.2",
     "eslint": "~8.18.0",
     "vite": "^4.5.0",
     "typescript": "4.9.5",