react-use-echarts 0.0.3 → 0.0.5

package/README.md

@@ -2,6 +2,9 @@
 
 [![NPM version](https://img.shields.io/npm/v/react-use-echarts.svg)](https://www.npmjs.com/package/react-use-echarts)
 [![NPM downloads](https://img.shields.io/npm/dm/react-use-echarts.svg)](https://www.npmjs.com/package/react-use-echarts)
+[![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/chensid/react-use-echarts/npm-publish.yml)](https://github.com/chensid/react-use-echarts/actions/workflows/npm-publish.yml)
+[![GitHub issues](https://img.shields.io/github/issues/chensid/react-use-echarts)](https://github.com/chensid/react-use-echarts/issues)
+[![GitHub pull requests](https://img.shields.io/github/issues-pr/chensid/react-use-echarts)](https://github.com/chensid/react-use-echarts/pulls)
 [![GitHub license](https://img.shields.io/github/license/chensid/react-use-echarts.svg)](https://github.com/chensid/react-use-echarts/blob/main/LICENSE.txt)
 
 A powerful React hooks library for Apache ECharts, making it easy to use ECharts in your React applications with minimal boilerplate.
@@ -31,10 +34,10 @@ pnpm add react-use-echarts echarts
 ## 🔨 Usage
 
 ```tsx
-import { useECharts } from 'react-use-echarts';
+import { useEcharts, UseEchartsOptions } from 'react-use-echarts';
 
 function MyChart() {
-  const options = {
+  const options: UseEchartsOptions['option'] = {
     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
@@ -48,7 +51,9 @@ function MyChart() {
     }]
   };
 
-  const { chartRef } = useECharts(options);
+  const { chartRef } = useEcharts({
+    option: options
+  });
 
   return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
 }
@@ -56,25 +61,33 @@ function MyChart() {
 
 ## 📖 API
 
-### useECharts
+### useEcharts
 
 The main hook for using ECharts in React components.
 
 ```tsx
-const { chartRef, instance, setOption } = useECharts(options, theme?, opts?);
+const { chartRef, setOption, getInstance } = useEcharts({
+  option: UseEchartsOptions['option'];      // ECharts options configuration (required)
+  theme?: string | object;    // ECharts theme name or configuration
+  notMerge?: boolean;        // Whether to not merge with previous options
+  lazyUpdate?: boolean;      // Whether to update chart lazily
+  showLoading?: boolean;     // Whether to display loading animation
+  loadingOption?: object;    // Loading animation configuration
+  onEvents?: {              // Event handlers
+    [eventName: string]: {
+      handler: (params: any) => void;
+      query?: string | object;
+      context?: object;
+    }
+  }
+});
 ```
 
-#### Parameters
-
-- `options` (required): ECharts options configuration
-- `theme` (optional): ECharts theme name or configuration
-- `opts` (optional): ECharts initialization options
-
 #### Returns
 
 - `chartRef`: Ref object to attach to the chart container
-- `instance`: ECharts instance (available after component mounts)
 - `setOption`: Function to update chart options
+- `getInstance`: Function to get the ECharts instance (available after component mounts)
 
 ## 🤝 Contributing
 

package/dist/index.d.ts

@@ -55,44 +55,24 @@ export declare interface EChartsEvents {
 export declare type Theme = string | object | null;
 
 /**
- * A React hook for using Apache ECharts
- * React Hook 用于使用 Apache ECharts
- *
- * @param options - Configuration options for the chart
- * @param options.option - Chart configuration options
- * @param options.theme - Chart theme
- * @param options.notMerge - Whether to merge options or not
- * @param options.lazyUpdate - Whether to update chart lazily or not
- * @param options.showLoading - Whether to show loading animation or not
- * @param options.loadingOption - Loading animation configuration options
- * @param options.onEvents - Event handlers for the chart
- * @returns Object containing chart reference and control functions
- *
- * @example
- * ```typescript
- * const { chartRef, setOption, getInstance } = useECharts({
- *   option: {
- *     xAxis: { type: 'category', data: ['A', 'B', 'C'] },
- *     yAxis: { type: 'value' },
- *     series: [{ data: [120, 200, 150], type: 'line' }]
- *   },
- *   onEvents: {
- *     'click': {
- *       handler: (params) => console.log('clicked', params)
- *     }
- *   }
- * });
- *
- * return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
- * ```
+ * React hook for Apache ECharts integration
+ * @param options Configuration object
+ * @param options.option Chart configuration
+ * @param options.theme Chart theme name
+ * @param options.notMerge Skip merging with previous options
+ * @param options.lazyUpdate Enable lazy update mode
+ * @param options.showLoading Display loading animation
+ * @param options.loadingOption Loading animation config
+ * @param options.onEvents Event handlers map
+ * @returns Chart control methods and ref
  */
-export declare const useECharts: ({ option, theme, notMerge, lazyUpdate, showLoading, loadingOption, onEvents, }: UseEChartsOptions) => UseEChartsReturn;
+export declare const useEcharts: ({ option, theme, notMerge, lazyUpdate, showLoading, loadingOption, onEvents, }: UseEchartsOptions) => UseEchartsReturn;
 
 /**
- * Configuration options for useECharts hook
- * useECharts hook 的配置选项
+ * Configuration options for useEcharts hook
+ * useEcharts hook 的配置选项
  */
-export declare interface UseEChartsOptions {
+export declare interface UseEchartsOptions {
     /**
      * ECharts configuration options
      * ECharts 的配置项
@@ -134,10 +114,10 @@ export declare interface UseEChartsOptions {
 }
 
 /**
- * Return type for useECharts hook
- * useECharts hook 的返回类型
+ * Return type for useEcharts hook
+ * useEcharts hook 的返回类型
  */
-export declare interface UseEChartsReturn {
+export declare interface UseEchartsReturn {
     /**
      * Reference to the chart container element
      * 图表容器元素的引用

package/dist/index.es.js

@@ -1,84 +1,72 @@
-import { useRef as b, useCallback as m, useEffect as i } from "react";
-import * as R from "echarts";
-const x = ({
-  /**
-   * Chart configuration options
-   * 图表配置选项
-   */
+import { useRef as p, useCallback as z, useEffect as w } from "react";
+import * as C from "echarts";
+const R = ({
+  /** Chart configuration */
   option: f,
-  /**
-   * Chart theme
-   * 图表主题
-   */
-  theme: o,
-  /**
-   * Whether to merge options or not
-   * 是否合并选项
-   * @default false
-   */
-  notMerge: a = !1,
-  /**
-   * Whether to update chart lazily or not
-   * 是否懒更新图表
-   * @default false
-   */
+  /** Theme name */
+  theme: a,
+  /** Skip merging with previous options */
+  notMerge: m = !1,
+  /** Enable lazy update mode */
   lazyUpdate: l = !1,
-  /**
-   * Whether to show loading animation or not
-   * 是否显示加载动画
-   * @default false
-   */
-  showLoading: d = !1,
-  /**
-   * Loading animation configuration options
-   * 加载动画配置选项
-   */
-  loadingOption: h,
-  /**
-   * Event handlers for the chart
-   * 图表事件处理函数
-   */
-  onEvents: c
+  /** Display loading animation */
+  showLoading: h = !1,
+  /** Loading animation config */
+  loadingOption: d,
+  /** Event handlers map */
+  onEvents: s
 }) => {
-  const u = b(null), r = b(), z = m(() => r.current, []), L = m(
-    (e, t) => {
-      var n;
-      (n = r.current) == null || n.setOption(e, t);
+  const c = p(null), t = p(), O = () => t.current, u = z(() => {
+    if (c.current && !t.current) {
+      const e = C.init(c.current, a);
+      return t.current = e, s && Object.entries(s).forEach(
+        ([r, { handler: n, query: i, context: o }]) => {
+          i ? e.on(r, i, n, o) : e.on(r, n, o);
+        }
+      ), h ? e.showLoading(d) : e.hideLoading(), e.setOption(f, { notMerge: m, lazyUpdate: l }), e;
+    }
+    return t.current;
+  }, [
+    f,
+    a,
+    m,
+    l,
+    h,
+    d,
+    s
+  ]), b = z(
+    (e, r) => {
+      requestAnimationFrame(() => {
+        const n = t.current || u();
+        n && n.setOption(e, r);
+      });
     },
-    []
+    [u]
   );
-  return i(() => {
-    if (u.current)
-      return r.current || (r.current = R.init(u.current, o)), c && r.current && Object.entries(c).forEach(([e, t]) => {
-        var w, O;
-        const { handler: n, query: s, context: p } = t;
-        s ? (w = r.current) == null || w.on(e, s, n, p) : (O = r.current) == null || O.on(e, n, p);
-      }), () => {
-        r.current && (c && Object.entries(c).forEach(([e, t]) => {
-          var s;
-          const { handler: n } = t;
-          (s = r.current) == null || s.off(e, n);
-        }), r.current.dispose(), r.current = void 0);
-      };
-  }, [o, c]), i(() => {
-    r.current && (d ? r.current.showLoading(h) : r.current.hideLoading(), r.current.setOption(f, {
-      notMerge: a,
-      lazyUpdate: l
-    }));
-  }, [f, a, l, d, h]), i(() => {
-    const e = () => {
-      var t;
-      (t = r.current) == null || t.resize();
+  return w(() => {
+    const e = t.current;
+    if (!e) return;
+    const r = () => {
+      const i = setTimeout(() => {
+        e == null || e.resize();
+      }, 250);
+      return () => clearTimeout(i);
+    }, n = r();
+    return window.addEventListener("resize", r), () => {
+      s && Object.entries(s).forEach(([i, { handler: o }]) => {
+        e.off(i, o);
+      }), window.removeEventListener("resize", r), e.dispose(), t.current = void 0, n();
     };
-    return window.addEventListener("resize", e), () => {
-      window.removeEventListener("resize", e);
-    };
-  }, []), {
-    chartRef: u,
-    setOption: L,
-    getInstance: z
+  }, [s]), w(() => {
+    c.current && requestAnimationFrame(() => {
+      u();
+    });
+  }, [c, u]), {
+    chartRef: c,
+    setOption: b,
+    getInstance: O
   };
 };
 export {
-  x as useECharts
+  R as useEcharts
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("echarts")):typeof define=="function"&&define.amd?define(["exports","react","echarts"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n["react-use-echarts"]={},n.React,n.echarts))})(this,function(n,t,y){"use strict";function m(c){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const u in c)if(u!=="default"){const o=Object.getOwnPropertyDescriptor(c,u);Object.defineProperty(f,u,o.get?o:{enumerable:!0,get:()=>c[u]})}}return f.default=c,Object.freeze(f)}const g=m(y),w=({option:c,theme:f,notMerge:u=!1,lazyUpdate:o=!1,showLoading:h=!1,loadingOption:p,onEvents:a})=>{const l=t.useRef(null),e=t.useRef(),E=t.useCallback(()=>e.current,[]),R=t.useCallback((r,s)=>{var i;(i=e.current)==null||i.setOption(r,s)},[]);return t.useEffect(()=>{if(l.current)return e.current||(e.current=g.init(l.current,f)),a&&e.current&&Object.entries(a).forEach(([r,s])=>{var O,j;const{handler:i,query:d,context:b}=s;d?(O=e.current)==null||O.on(r,d,i,b):(j=e.current)==null||j.on(r,i,b)}),()=>{e.current&&(a&&Object.entries(a).forEach(([r,s])=>{var d;const{handler:i}=s;(d=e.current)==null||d.off(r,i)}),e.current.dispose(),e.current=void 0)}},[f,a]),t.useEffect(()=>{e.current&&(h?e.current.showLoading(p):e.current.hideLoading(),e.current.setOption(c,{notMerge:u,lazyUpdate:o}))},[c,u,o,h,p]),t.useEffect(()=>{const r=()=>{var s;(s=e.current)==null||s.resize()};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[]),{chartRef:l,setOption:R,getInstance:E}};n.useECharts=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(r,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("echarts")):typeof define=="function"&&define.amd?define(["exports","react","echarts"],t):(r=typeof globalThis<"u"?globalThis:r||self,t(r["react-use-echarts"]={},r.React,r.echarts))})(this,function(r,t,O){"use strict";function j(n){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const i in n)if(i!=="default"){const d=Object.getOwnPropertyDescriptor(n,i);Object.defineProperty(f,i,d.get?d:{enumerable:!0,get:()=>n[i]})}}return f.default=n,Object.freeze(f)}const T=j(O),z=({option:n,theme:f,notMerge:i=!1,lazyUpdate:d=!1,showLoading:m=!1,loadingOption:b,onEvents:o})=>{const l=t.useRef(null),c=t.useRef(),g=()=>c.current,h=t.useCallback(()=>{if(l.current&&!c.current){const e=T.init(l.current,f);return c.current=e,o&&Object.entries(o).forEach(([s,{handler:u,query:a,context:p}])=>{a?e.on(s,a,u,p):e.on(s,u,p)}),m?e.showLoading(b):e.hideLoading(),e.setOption(n,{notMerge:i,lazyUpdate:d}),e}return c.current},[n,f,i,d,m,b,o]),w=t.useCallback((e,s)=>{requestAnimationFrame(()=>{const u=c.current||h();u&&u.setOption(e,s)})},[h]);return t.useEffect(()=>{const e=c.current;if(!e)return;const s=()=>{const a=setTimeout(()=>{e==null||e.resize()},250);return()=>clearTimeout(a)},u=s();return window.addEventListener("resize",s),()=>{o&&Object.entries(o).forEach(([a,{handler:p}])=>{e.off(a,p)}),window.removeEventListener("resize",s),e.dispose(),c.current=void 0,u()}},[o]),t.useEffect(()=>{l.current&&requestAnimationFrame(()=>{h()})},[l,h]),{chartRef:l,setOption:w,getInstance:g}};r.useEcharts=z,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-use-echarts",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "A powerful React hooks library for Apache ECharts",
   "keywords": [
     "react",
@@ -42,21 +42,25 @@
   ],
   "devDependencies": {
     "@eslint/js": "^9.15.0",
-    "@types/node": "^22.9.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/node": "^22.9.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitest/coverage-v8": "2.1.5",
     "echarts": "^5.5.1",
     "eslint": "^9.15.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.12.0",
+    "jsdom": "^25.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "~5.6.3",
     "typescript-eslint": "^8.15.0",
     "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.3.0"
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.5"
   },
   "peerDependencies": {
     "echarts": "^5.5.1",
@@ -66,6 +70,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
     "lint": "eslint .",
     "typecheck": "tsc -b"
   }