@agions/taroviz 1.3.1 → 1.6.0

package/package.json

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

package/src/__tests__/integration.test.tsx

@@ -33,16 +33,18 @@ jest.mock('echarts/components', () => ({
 }));
 
 jest.mock('../adapters', () => ({
-  getAdapter: jest.fn(() => ({
-    init: jest.fn(),
-    setOption: jest.fn(),
-    resize: jest.fn(),
-    dispose: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
-    showLoading: jest.fn(),
-    hideLoading: jest.fn(),
-  })),
+  getAdapter: jest.fn(() =>
+    Promise.resolve({
+      init: jest.fn(),
+      setOption: jest.fn(),
+      resize: jest.fn(),
+      dispose: jest.fn(),
+      on: jest.fn(),
+      off: jest.fn(),
+      showLoading: jest.fn(),
+      hideLoading: jest.fn(),
+    })
+  ),
 }));
 
 jest.mock('../charts/common/BaseChartWrapper', () => ({

package/src/adapters/BaseAdapter.ts

@@ -0,0 +1,116 @@
+/**
+ * TaroViz 适配器基类
+ * 提供通用方法，减少子类重复代码
+ * 注意：这是一个工具基类，不直接实现 Adapter 接口
+ * 子类负责实现真正的 Adapter 接口
+ */
+
+export abstract class BaseAdapter {
+  protected config: Record<string, unknown>;
+  protected chartInstance: unknown = null;
+
+  constructor(config: Record<string, unknown> = {}) {
+    this.config = config;
+  }
+
+  getInstance(): unknown {
+    return this.chartInstance;
+  }
+
+  setOption(option: unknown, opts?: unknown): void {
+    if (this.chartInstance) {
+      (this.chartInstance as { setOption: (opt: unknown, o?: unknown) => void }).setOption(
+        option,
+        opts
+      );
+    } else {
+      this.config['option'] = option;
+    }
+  }
+
+  setTheme(theme: string | object): void {
+    this.config['theme'] = theme;
+    const instance = this.chartInstance as { setTheme?: (t: string | object) => void };
+    if (instance?.setTheme) {
+      instance.setTheme(theme);
+    }
+  }
+
+  getWidth(): number {
+    const w = this.config['width'];
+    if (typeof w === 'number') return w;
+    if (typeof w === 'string') {
+      const parsed = parseInt(w, 10);
+      if (!isNaN(parsed)) return parsed;
+    }
+    return 300;
+  }
+
+  getHeight(): number {
+    const h = this.config['height'];
+    if (typeof h === 'number') return h;
+    if (typeof h === 'string') {
+      const parsed = parseInt(h, 10);
+      if (!isNaN(parsed)) return parsed;
+    }
+    return 300;
+  }
+
+  getDom(): HTMLElement | null {
+    return null;
+  }
+
+  convertToDataURL(opts?: unknown): string | undefined {
+    return (this.chartInstance as { getDataURL?: (o?: unknown) => string })?.getDataURL?.(opts);
+  }
+
+  clear(): void {
+    (this.chartInstance as { clear?: () => void })?.clear?.();
+  }
+
+  on(event: string, handler: (params: unknown) => void): void {
+    (this.chartInstance as { on?: (e: string, h: (p: unknown) => void) => void })?.on?.(
+      event,
+      handler
+    );
+  }
+
+  off(event: string, handler?: (params: unknown) => void): void {
+    (this.chartInstance as { off?: (e: string, h?: (p: unknown) => void) => void })?.off?.(
+      event,
+      handler
+    );
+  }
+
+  showLoading(opts?: object): void {
+    (this.chartInstance as { showLoading?: (o?: object) => void })?.showLoading?.(opts);
+  }
+
+  hideLoading(): void {
+    (this.chartInstance as { hideLoading?: () => void })?.hideLoading?.();
+  }
+
+  dispose(): void {
+    if (this.chartInstance) {
+      (this.chartInstance as { dispose?: () => void })?.dispose?.();
+      this.chartInstance = null;
+    }
+  }
+
+  resize(opts?: unknown): void {
+    (this.chartInstance as { resize?: (o?: unknown) => void })?.resize?.(opts);
+  }
+
+  setComponent(component: unknown): void {
+    this.config['component'] = component;
+  }
+
+  protected parseSize(value: number | string | undefined, defaultValue: number): number {
+    if (typeof value === 'number') return value;
+    if (typeof value === 'string') {
+      const parsed = parseInt(value, 10);
+      if (!isNaN(parsed)) return parsed;
+    }
+    return defaultValue;
+  }
+}

package/src/adapters/__tests__/index.test.ts

@@ -33,14 +33,14 @@ describe('Adapter Functions', () => {
   });
 
   describe('getAdapter', () => {
-    it('should return adapter instance for browser environment', () => {
-      const adapter = getAdapter({});
+    it('should return adapter instance for browser environment', async () => {
+      const adapter = await getAdapter({});
       expect(adapter).toBeDefined();
       expect(typeof adapter.init).toBe('function');
       expect(typeof adapter.setOption).toBe('function');
     });
 
-    it('should return adapter instance with custom options', () => {
+    it('should return adapter instance with custom options', async () => {
       const mockOptions = {
         width: 500,
         height: 300,
@@ -48,7 +48,7 @@ describe('Adapter Functions', () => {
         renderer: 'canvas' as const,
       };
 
-      const adapter = getAdapter(mockOptions);
+      const adapter = await getAdapter(mockOptions);
       expect(adapter).toBeDefined();
       expect(typeof adapter.init).toBe('function');
     });
@@ -62,8 +62,8 @@ describe('Adapter Functions', () => {
   });
 
   describe('Cross-Platform Compatibility', () => {
-    it('should have consistent interface across all platforms', () => {
-      const adapter = getAdapter({});
+    it('should have consistent interface across all platforms', async () => {
+      const adapter = await getAdapter({});
 
       // 确保所有平台的适配器都有相同的方法接口
       const requiredMethods = ['init', 'setOption', 'resize', 'dispose'];
@@ -73,7 +73,7 @@ describe('Adapter Functions', () => {
       });
     });
 
-    it('should handle different option types across platforms', () => {
+    it('should handle different option types across platforms', async () => {
       // 测试不同类型的选项
       const testOptions = [
         { width: 500, height: 300 },
@@ -82,10 +82,10 @@ describe('Adapter Functions', () => {
         { renderer: 'svg' as const },
       ];
 
-      testOptions.forEach((options) => {
-        const adapter = getAdapter(options);
+      for (const options of testOptions) {
+        const adapter = await getAdapter(options);
         expect(adapter).toBeDefined();
-      });
+      }
     });
   });
 });

package/src/adapters/index.ts

@@ -1,10 +1,11 @@
 /**
  * TaroViz 平台适配器
  * 自动检测并加载适合当前平台的适配器
+ *
+ * 使用动态导入实现按需加载，减少包体积
  */
 
 import { PlatformType } from '../core';
-
 import type { AdapterOptions, Adapter } from './types';
 
 /**
@@ -38,41 +39,26 @@ export function detectPlatform(): PlatformType {
     return PlatformType.H5;
   }
 
+  const win = window as Window & {
+    wx?: { getSystemInfoSync?: unknown; qy?: unknown };
+    my?: { getSystemInfoSync?: unknown };
+    swan?: { getSystemInfoSync?: unknown };
+    tt?: { getSystemInfoSync?: unknown; env?: { appName?: string } };
+    qq?: { getSystemInfoSync?: unknown };
+    jd?: { getSystemInfoSync?: unknown };
+    dd?: { getSystemInfoSync?: unknown };
+  };
+
   const checks: Array<{ test: () => boolean; platform: PlatformType }> = [
-    {
-      test: () =>
-        'wx' in window && (window as any).wx?.getSystemInfoSync && !(window as any).wx?.qy,
-      platform: PlatformType.WEAPP,
-    },
-    {
-      test: () => 'my' in window && (window as any).my?.getSystemInfoSync,
-      platform: PlatformType.ALIPAY,
-    },
-    {
-      test: () => 'swan' in window && (window as any).swan?.getSystemInfoSync,
-      platform: PlatformType.SWAN,
-    },
-    {
-      test: () => 'tt' in window && (window as any).tt?.getSystemInfoSync,
-      platform: PlatformType.TT,
-    },
-    {
-      test: () => 'qq' in window && (window as any).qq?.getSystemInfoSync,
-      platform: PlatformType.QQ,
-    },
-    {
-      test: () => 'jd' in window && (window as any).jd?.getSystemInfoSync,
-      platform: PlatformType.JD,
-    },
-    {
-      test: () => 'dd' in window && (window as any).dd?.getSystemInfoSync,
-      platform: PlatformType.DD,
-    },
-    { test: () => 'wx' in window && (window as any).wx?.qy, platform: PlatformType.QYWX },
-    {
-      test: () => 'tt' in window && (window as any).tt?.env?.appName === 'lark',
-      platform: PlatformType.LARK,
-    },
+    { test: () => !!win.wx?.getSystemInfoSync && !win.wx?.qy, platform: PlatformType.WEAPP },
+    { test: () => !!win.my?.getSystemInfoSync, platform: PlatformType.ALIPAY },
+    { test: () => !!win.swan?.getSystemInfoSync, platform: PlatformType.SWAN },
+    { test: () => !!win.tt?.getSystemInfoSync, platform: PlatformType.TT },
+    { test: () => !!win.qq?.getSystemInfoSync, platform: PlatformType.QQ },
+    { test: () => !!win.jd?.getSystemInfoSync, platform: PlatformType.JD },
+    { test: () => !!win.dd?.getSystemInfoSync, platform: PlatformType.DD },
+    { test: () => !!win.wx?.qy, platform: PlatformType.QYWX },
+    { test: () => win.tt?.env?.appName === 'lark', platform: PlatformType.LARK },
     { test: () => navigator.userAgent.includes('HarmonyOS'), platform: PlatformType.HARMONY },
   ];
 
@@ -92,52 +78,20 @@ export function getEnv(): 'h5' | 'weapp' | 'unknown' {
   if (typeof window !== 'undefined' && typeof document !== 'undefined') {
     return 'h5';
   }
-  if (typeof global !== 'undefined' && (global as any)?.wx?.getSystemInfoSync) {
+  if (
+    typeof global !== 'undefined' &&
+    (global as Global & { wx?: { getSystemInfoSync?: unknown } })?.wx?.getSystemInfoSync
+  ) {
     return 'weapp';
   }
   return 'unknown';
 }
 
-/**
- * 创建适配器实例
- * 使用静态导入避免动态 require 的 ESM 问题
- */
-function createAdapterInstance(platform: PlatformType, options: AdapterOptions): Adapter {
-  // 预加载所有适配器（编译时解析，支持 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';
-
 /**
  * 获取适配器
+ * 返回 Promise 以支持动态导入
  */
-export function getAdapter(options: AdapterOptions): Adapter {
+export async function getAdapter(options: AdapterOptions): Promise<Adapter> {
   const platform = detectPlatform();
   const config = PLATFORM_CONFIGS[platform];
 
@@ -149,9 +103,44 @@ export function getAdapter(options: AdapterOptions): Adapter {
   }
 
   try {
-    return createAdapterInstance(platform, options);
+    // 根据平台加载对应的适配器
+    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: {
+        const { default: h5Adapter } = await import('./h5');
+        return h5Adapter.create(options);
+      }
+      case PlatformType.WEAPP: {
+        const { default: weappAdapter } = await import('./weapp');
+        return weappAdapter.create(options);
+      }
+      case PlatformType.SWAN: {
+        const { default: swanAdapter } = await import('./swan');
+        return swanAdapter.create(options);
+      }
+      case PlatformType.TT: {
+        const { default: ttAdapter } = await import('./tt');
+        return ttAdapter.create(options);
+      }
+      case PlatformType.HARMONY: {
+        const { default: harmonyAdapter } = await import('./harmony');
+        return harmonyAdapter.create(options);
+      }
+      default: {
+        const { default: h5Adapter } = await import('./h5');
+        return h5Adapter.create(options);
+      }
+    }
   } catch (error) {
     console.error(`[TaroViz] Failed to load adapter for platform '${platform}':`, error);
+    // 降级到 H5 适配器
+    const { default: h5Adapter } = await import('./h5');
     return h5Adapter.create(options);
   }
 }

package/src/adapters/swan/index.ts

@@ -2,91 +2,25 @@
  * TaroViz 百度小程序适配器
  * 基于百度小程序canvas组件实现图表渲染
  */
-import * as React from 'react';
 
-import { Adapter, SwanAdapterOptions } from '../types';
+import { BaseAdapter } from '../BaseAdapter';
+import type { Adapter, SwanAdapterOptions } from '../types';
 
-// 扩展 SwanAdapterOptions 类型
-interface ExtendedSwanAdapterOptions extends SwanAdapterOptions {
-  /**
-   * 百度小程序组件实例
-   */
-  component?: any;
-  /**
-   * 画布ID
-   */
-  canvasId?: string;
-  /**
-   * 宽度
-   */
-  width?: number | string;
-  /**
-   * 高度
-   */
-  height?: number | string;
-  /**
-   * 主题
-   */
-  theme?: string | object;
-  /**
-   * 图表选项
-   */
-  option?: any;
-  /**
-   * 初始化回调
-   */
-  onInit?: (instance: any) => void;
-}
-
-/**
- * 百度小程序环境下的图表适配器
- */
-class SwanAdapter implements Adapter {
-  /**
-   * 配置项
-   */
-  private config: ExtendedSwanAdapterOptions;
-
-  /**
-   * 图表实例
-   */
-  private chartInstance: any | null = null;
-
-  /**
-   * 组件实例
-   */
-  private component: any | null = null;
+export class SwanAdapter extends BaseAdapter {
+  private component: unknown = null;
 
-  /**
-   * 构造函数
-   * @param config 适配器配置
-   */
-  constructor(config: ExtendedSwanAdapterOptions) {
-    this.config = config;
+  constructor(config: SwanAdapterOptions) {
+    super(config);
     this.component = config.component;
   }
 
-  /**
-   * 创建百度小程序适配器实例
-   * @param options 适配器选项
-   * @returns 适配器实例
-   */
-  static create(options: ExtendedSwanAdapterOptions): SwanAdapter {
-    return new SwanAdapter(options);
+  static create(options: SwanAdapterOptions): Adapter {
+    return new SwanAdapter(options) as unknown as Adapter;
   }
 
-  /**
-   * 获取图表实例
-   */
-  getInstance(): any {
-    return this.chartInstance;
-  }
-
-  /**
-   * 初始化图表
-   */
-  init(): any {
-    const { canvasId, width, height, theme, option } = this.config;
+  init(): unknown {
+    const config = this.config as SwanAdapterOptions & { canvasId?: string };
+    const { canvasId, width, height, theme, option } = config;
 
     if (!this.component) {
       console.error('[TaroViz] SwanAdapter: component is required');
@@ -98,176 +32,45 @@ class SwanAdapter implements Adapter {
       return null;
     }
 
-    // 创建图表实例
-    const chart = this.component.createChart({
+    const chart = (this.component as { createChart: (config: unknown) => unknown }).createChart({
       id: canvasId,
-      width: width,
-      height: height,
-      theme: theme,
+      width,
+      height,
+      theme,
     });
 
-    // 设置图表选项
     if (option) {
-      chart.setOption(option);
+      (chart as { setOption: (o: unknown) => void }).setOption(option);
     }
 
-    // 存储图表实例
     this.chartInstance = chart;
 
-    // 初始化回调
-    if (this.config.onInit) {
-      this.config.onInit(chart);
+    const onInit = this.config['onInit'] as ((instance: unknown) => void) | undefined;
+    if (onInit) {
+      onInit(chart);
     }
 
     return chart;
   }
 
-  /**
-   * 设置图表选项
-   */
-  setOption(option: any, opts?: any): void {
-    if (this.chartInstance) {
-      this.chartInstance.setOption(option, opts);
-    } else {
-      this.config.option = option;
-    }
-  }
-
-  /**
-   * 设置主题
-   */
-  setTheme(theme: string | object): void {
-    this.config.theme = theme;
-    if (this.chartInstance) {
-      this.chartInstance.setTheme?.(theme);
-    }
-  }
-
-  /**
-   * 获取图表宽度
-   */
   getWidth(): number {
-    return 0;
+    return this.parseSize((this.config as SwanAdapterOptions).width, 300);
   }
 
-  /**
-   * 获取图表高度
-   */
   getHeight(): number {
-    return 0;
-  }
-
-  /**
-   * 获取DOM元素
-   */
-  getDom(): HTMLElement | null {
-    return null;
-  }
-
-  /**
-   * 转换为DataURL
-   */
-  convertToDataURL(opts?: any): string | undefined {
-    return this.chartInstance?.getDataURL(opts);
-  }
-
-  /**
-   * 清空图表
-   */
-  clear(): void {
-    if (this.chartInstance) {
-      this.chartInstance.clear();
-    }
-  }
-
-  /**
-   * 绑定事件
-   */
-  on(event: string, handler: (params: any) => void): void {
-    if (this.chartInstance) {
-      this.chartInstance.on(event, handler);
-    }
-  }
-
-  /**
-   * 解绑事件
-   */
-  off(event: string, handler?: (params: any) => void): void {
-    if (this.chartInstance) {
-      this.chartInstance.off(event, handler);
-    }
-  }
-
-  /**
-   * 显示加载动画
-   */
-  showLoading(opts?: object): void {
-    if (this.chartInstance) {
-      this.chartInstance.showLoading(opts);
-    }
-  }
-
-  /**
-   * 隐藏加载动画
-   */
-  hideLoading(): void {
-    if (this.chartInstance) {
-      this.chartInstance.hideLoading();
-    }
+    return this.parseSize((this.config as SwanAdapterOptions).height, 300);
   }
 
-  /**
-   * 销毁图表
-   */
-  dispose(): void {
-    if (this.chartInstance) {
-      this.chartInstance.dispose();
-      this.chartInstance = null;
-    }
-  }
-
-  /**
-   * 处理图表大小变化
-   */
-  resize(opts?: any): void {
-    if (this.chartInstance) {
-      this.chartInstance.resize(opts);
-    }
-  }
-
-  /**
-   * 设置组件实例
-   */
-  setComponent(component: any): void {
+  setComponent(component: unknown): void {
     this.component = component;
   }
 
-  /**
-   * 渲染图表组件
-   */
-  render(): JSX.Element {
-    const { canvasId = 'ec-canvas', width = '100%', height = '300px', style = {} } = this.config;
-    // 注意：这里需要根据实际使用的Taro版本和组件库来调整
-    return React.createElement('view', {
-      id: canvasId,
-      style: { width, height, ...style },
-    });
-  }
-
-  /**
-   * 触发图表行为
-   */
-  dispatchAction(payload: any): void {
-    if (this.chartInstance) {
-      this.chartInstance.dispatchAction(payload);
-    }
+  dispatchAction(action: unknown): void {
+    (this.chartInstance as { dispatchAction?: (a: unknown) => void })?.dispatchAction?.(action);
   }
 
-  /**
-   * 获取DataURL
-   */
-  getDataURL(opts?: any): string | undefined {
-    return this.chartInstance?.getDataURL(opts);
+  getDataURL(opts?: unknown): string | undefined {
+    return (this.chartInstance as { getDataURL?: (o?: unknown) => string })?.getDataURL?.(opts);
   }
 }