@agions/taroviz 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agions/taroviz",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "基于 Taro 和 ECharts 的多端图表组件库",
   "type": "module",
   "main": "dist/cjs/index.js",

package/src/adapters/h5/index.ts

@@ -76,9 +76,7 @@ class H5Adapter implements Adapter {
     // 获取容器元素
     const container = this.containerRef?.current || document.getElementById(this.canvasId);
     if (!container) {
-      console.error('[TaroViz] H5Adapter: container not found');
-      // 如果容器未找到，返回一个空对象
-      return {} as EChartsType;
+      throw new Error(`[TaroViz] H5Adapter: container not found (canvasId: ${this.canvasId})`);
     }
 
     // 初始化图表

package/src/adapters/index.ts

@@ -26,6 +26,7 @@ const PLATFORM_CONFIGS: Record<PlatformType, PlatformConfig> = {
   [PlatformType.DD]: { name: 'DingTalk', requireComponent: true },
   [PlatformType.QYWX]: { name: 'QiyeWechat' },
   [PlatformType.LARK]: { name: 'Lark' },
+  [PlatformType.KWAI]: { name: 'Kwai', requireComponent: true },
   [PlatformType.HARMONY]: { name: 'HarmonyOS', requireComponent: true },
 };
 
@@ -99,25 +100,40 @@ export function getEnv(): 'h5' | 'weapp' | 'unknown' {
 
 /**
  * 创建适配器实例
+ * 使用静态导入避免动态 require 的 ESM 问题
  */
 function createAdapterInstance(platform: PlatformType, options: AdapterOptions): Adapter {
-  const adapters: Record<PlatformType, () => Adapter> = {
-    [PlatformType.H5]: () => require('./h5').default.create(options),
-    [PlatformType.WEAPP]: () => require('./weapp').default.create(options),
-    [PlatformType.SWAN]: () => require('./swan').default.create(options),
-    [PlatformType.TT]: () => require('./tt').default.create(options),
-    [PlatformType.HARMONY]: () => require('./harmony').default.create(options),
-    [PlatformType.ALIPAY]: () => require('./h5').default.create(options),
-    [PlatformType.QQ]: () => require('./h5').default.create(options),
-    [PlatformType.JD]: () => require('./h5').default.create(options),
-    [PlatformType.DD]: () => require('./h5').default.create(options),
-    [PlatformType.QYWX]: () => require('./h5').default.create(options),
-    [PlatformType.LARK]: () => require('./h5').default.create(options),
-  };
-
-  return adapters[platform]();
+  // 预加载所有适配器（编译时解析，支持 tree-shaking）
+  switch (platform) {
+    case PlatformType.H5:
+    case PlatformType.ALIPAY:
+    case PlatformType.QQ:
+    case PlatformType.JD:
+    case PlatformType.DD:
+    case PlatformType.QYWX:
+    case PlatformType.LARK:
+    case PlatformType.KWAI:
+      return h5Adapter.create(options);
+    case PlatformType.WEAPP:
+      return weappAdapter.create(options);
+    case PlatformType.SWAN:
+      return swanAdapter.create(options);
+    case PlatformType.TT:
+      return ttAdapter.create(options);
+    case PlatformType.HARMONY:
+      return harmonyAdapter.create(options);
+    default:
+      return h5Adapter.create(options);
+  }
 }
 
+// 静态导入适配器
+import h5Adapter from './h5';
+import weappAdapter from './weapp';
+import swanAdapter from './swan';
+import ttAdapter from './tt';
+import harmonyAdapter from './harmony';
+
 /**
  * 获取适配器
  */
@@ -136,7 +152,7 @@ export function getAdapter(options: AdapterOptions): Adapter {
     return createAdapterInstance(platform, options);
   } catch (error) {
     console.error(`[TaroViz] Failed to load adapter for platform '${platform}':`, error);
-    return require('./h5').default.create(options);
+    return h5Adapter.create(options);
   }
 }
 
@@ -158,9 +174,4 @@ export default {
   getAdapter,
   getEnv,
   detectPlatform,
-  h5: require('./h5').default,
-  weapp: require('./weapp').default,
-  swan: require('./swan').default,
-  tt: require('./tt').default,
-  harmony: require('./harmony').default,
 };

package/src/charts/common/BaseChartWrapper.tsx

@@ -8,7 +8,7 @@ import React, { useEffect, useRef, useMemo } from 'react';
 import { getAdapter } from '../../adapters';
 import { uuid } from '../../core/utils';
 import { BaseChartProps } from '../types';
-import { processAdapterConfig, safeRenderAdapter } from '../utils';
+import { processAdapterConfig } from '../utils';
 
 /**
  * 基础图表包装组件
@@ -118,18 +118,12 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
     ...style,
   };
 
-  // 使用带有处理的适配器配置创建适配器实例
-  const adapter = getAdapter(adapterConfig);
-
   return (
     <div
       className={`taroviz-${chartType} ${className}`}
       style={mergedStyle}
       ref={containerRef as React.RefObject<HTMLDivElement>}
-    >
-      {/* 安全地渲染适配器 */}
-      {safeRenderAdapter(adapter)}
-    </div>
+    />
   );
 };
 

package/src/core/utils/chartInstances.ts

@@ -11,6 +11,15 @@ export const CHART_INSTANCES: Record<string, EChartsType> = {};
  * @param instance 图表实例
  */
 export function registerChart(id: string, instance: EChartsType): void {
+  // 如果已存在同名ID，先释放旧实例防止内存泄漏
+  if (CHART_INSTANCES[id]) {
+    try {
+      console.warn(`[TaroViz] Chart instance '${id}' already exists, replacing and disposing old instance`);
+      CHART_INSTANCES[id].dispose();
+    } catch (e) {
+      console.warn(`Failed to dispose old chart instance: ${id}`, e);
+    }
+  }
   CHART_INSTANCES[id] = instance;
 }
 

package/src/core/utils/codeGenerator/CodeGenerator.ts

@@ -79,6 +79,20 @@ export class CodeGenerator {
     });
   }
 
+  /**
+   * 转义代码生成用的字符串，防止 XSS
+   */
+  private escapeForCode(str: string): string {
+    if (!str) return '';
+    // 转义特殊字符防止代码注入
+    return str
+      .replace(/\\/g, '\\\\')
+      .replace(/`/g, '\\`')
+      .replace(/\$/g, '\\$')
+      .replace(/\{/g, '\\{')
+      .replace(/\}/g, '\\}');
+  }
+
   /**
    * 初始化内置模板
    */
@@ -511,15 +525,15 @@ export default chart;`,
     // 替换模板变量
     let code = template.content;
 
-    // 替换组件名称
-    const componentName = options.componentName || 'ChartComponent';
+    // 替换组件名称（转义防止XSS）
+    const componentName = this.escapeForCode(options.componentName || 'ChartComponent');
     code = code.replace(/\{componentName\}/g, componentName);
 
-    // 替换图表ID
-    const chartId = options.chartId || 'chart';
+    // 替换图表ID（转义防止XSS）
+    const chartId = this.escapeForCode(options.chartId || 'chart');
     code = code.replace(/\{chartId\}/g, chartId);
 
-    // 替换选项
+    // 替换选项（JSON.stringify已处理转义，但模板变量要转义）
     const optionStr = JSON.stringify(option, null, 2);
     code = code.replace(/\{\s*option\s*\}/g, optionStr);
 

package/src/core/utils/uuid.ts

@@ -4,11 +4,15 @@
  * @returns 唯一标识符字符串
  */
 export function uuid(): string {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0;
-    const v = c === 'x' ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
+  // 使用 crypto API 生成加密安全的 UUID
+  if (typeof globalThis.crypto?.randomUUID === 'function') {
+    return globalThis.crypto.randomUUID();
+  }
+  
+  // 回退：使用 Math.random() + 时间戳混合
+  const timestamp = Date.now().toString(36);
+  const randomPart = Math.random().toString(36).substring(2, 15);
+  return `${timestamp}-${randomPart}-${Math.random().toString(36).substring(2, 10)}`;
 }
 
 /**

package/src/hooks/index.ts

@@ -410,23 +410,35 @@ export function useDataPolling<T>(
   const [data, setData] = useState<T | null>(null);
   const [loading, setLoading] = useState(autoStart);
   const [error, setError] = useState<Error | null>(null);
-  const [refreshIndex, setRefreshIndex] = useState(0);
+  
+  // 用于取消进行中的请求
+  const abortRef = useRef<{ cancelled: boolean }>({ cancelled: false });
 
   const fetchData = useCallback(async () => {
+    // 取消之前的请求
+    abortRef.current.cancelled = true;
+    // 创建新的取消标记
+    abortRef.current = { cancelled: false };
+    const currentAbort = abortRef.current;
+    
     let retries = retryCount;
     setLoading(true);
     setError(null);
 
-    while (retries >= 0) {
+    while (retries >= 0 && !currentAbort.cancelled) {
       try {
         const result = await fetchFn();
-        setData(result);
-        setLoading(false);
+        if (!currentAbort.cancelled) {
+          setData(result);
+          setLoading(false);
+        }
         return;
       } catch (e) {
         retries--;
-        if (retries < 0) {
-          setError(e as Error);
+        if (retries < 0 || currentAbort.cancelled) {
+          if (!currentAbort.cancelled) {
+            setError(e as Error);
+          }
           setLoading(false);
         } else {
           await new Promise((resolve) => setTimeout(resolve, retryDelay));
@@ -442,12 +454,18 @@ export function useDataPolling<T>(
 
     if (interval > 0) {
       const timer = setInterval(fetchData, interval);
-      return () => clearInterval(timer);
+      return () => {
+        clearInterval(timer);
+        abortRef.current.cancelled = true;
+      };
     }
-  }, [interval, autoStart, fetchData, refreshIndex]);
+    
+    return () => {
+      abortRef.current.cancelled = true;
+    };
+  }, [interval, autoStart, fetchData]);
 
   const refresh = useCallback(() => {
-    setRefreshIndex((prev) => prev + 1);
     fetchData();
   }, [fetchData]);