react-use-echarts 0.0.6 → 0.0.8

package/README.md

@@ -55,7 +55,7 @@ function MyChart() {
     option: options
   });
 
-  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
+  return <div ref={chartRef} style={{ width: '100%', height: '300px' }} />;
 }
 ```
 

package/dist/index.d.ts

@@ -1,11 +1,3 @@
-/**
- * react-use-echarts
- * A React hook library for Apache ECharts with TypeScript support
- * 基于 TypeScript 的 Apache ECharts React Hook 库
- *
- * @packageDocumentation
- */
-
 import { ECharts } from 'echarts';
 import { EChartsOption } from 'echarts';
 import { SetOptionOpts } from 'echarts';
@@ -122,7 +114,7 @@ export declare interface UseEchartsReturn {
      * Reference to the chart container element
      * 图表容器元素的引用
      */
-    chartRef: React.RefObject<HTMLDivElement>;
+    chartRef: React.RefObject<HTMLDivElement | null>;
     /**
      * Function to update chart options
      * 更新图表配置的函数

package/dist/index.es.js

@@ -1,72 +1,80 @@
-import { useRef as p, useCallback as z, useEffect as w } from "react";
-import * as C from "echarts";
-const R = ({
+import { useRef as z, useCallback as f, useEffect as C } from "react";
+import * as R from "echarts";
+const w = ({
   /** Chart configuration */
-  option: f,
+  option: a,
   /** Theme name */
-  theme: a,
+  theme: i,
   /** Skip merging with previous options */
-  notMerge: m = !1,
+  notMerge: d = !1,
   /** Enable lazy update mode */
   lazyUpdate: l = !1,
   /** Display loading animation */
-  showLoading: h = !1,
+  showLoading: p = !1,
   /** Loading animation config */
-  loadingOption: d,
+  loadingOption: O,
   /** Event handlers map */
-  onEvents: s
+  onEvents: c
 }) => {
-  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,
+  const s = z(null), n = z(void 0), k = () => n.current, b = f(() => ({
+    option: a,
+    theme: i,
+    notMerge: d,
+    lazyUpdate: l,
+    showLoading: p,
+    loadingOption: O,
+    onEvents: c
+  }), [
     a,
-    m,
-    l,
-    h,
+    i,
     d,
-    s
-  ]), b = z(
+    l,
+    p,
+    O,
+    c
+  ]), o = f(() => {
+    if (s.current && !n.current) {
+      const e = R.init(s.current, i);
+      n.current = e;
+      const r = b();
+      return r.onEvents && Object.entries(r.onEvents).forEach(
+        ([t, { handler: u, query: g, context: h }]) => {
+          g ? e.on(t, g, u, h) : e.on(t, u, h);
+        }
+      ), r.showLoading ? e.showLoading(r.loadingOption) : e.hideLoading(), e.setOption(r.option, {
+        notMerge: r.notMerge,
+        lazyUpdate: r.lazyUpdate
+      }), e;
+    }
+    return n.current;
+  }, [b, i]), M = f(
     (e, r) => {
-      requestAnimationFrame(() => {
-        const n = t.current || u();
-        n && n.setOption(e, r);
+      queueMicrotask(() => {
+        const t = n.current || o();
+        t && t.setOption(e, r);
       });
     },
-    [u]
+    [o]
   );
-  return w(() => {
-    const e = t.current;
+  return C(() => {
+    const e = n.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();
-    };
-  }, [s]), w(() => {
-    c.current && requestAnimationFrame(() => {
-      u();
+    const r = new ResizeObserver(() => {
+      e.resize();
     });
-  }, [c, u]), {
-    chartRef: c,
-    setOption: b,
-    getInstance: O
+    return r.observe(s.current), () => {
+      r.disconnect(), c && e && Object.entries(c).forEach(([t, { handler: u }]) => {
+        e.off(t, u);
+      }), e.dispose(), n.current = void 0;
+    };
+  }, [n, c]), C(() => {
+    s.current && queueMicrotask(o);
+  }, [s, o]), {
+    chartRef: s,
+    setOption: M,
+    getInstance: k
   };
 };
 export {
-  R as useEcharts
+  w as useEcharts
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(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"})});
+(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react"),require("echarts")):typeof define=="function"&&define.amd?define(["exports","react","echarts"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r["react-use-echarts"]={},r.React,r.echarts))})(this,function(r,n,y){"use strict";function k(s){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const u in s)if(u!=="default"){const a=Object.getOwnPropertyDescriptor(s,u);Object.defineProperty(c,u,a.get?a:{enumerable:!0,get:()=>s[u]})}}return c.default=s,Object.freeze(c)}const C=k(y),z=({option:s,theme:c,notMerge:u=!1,lazyUpdate:a=!1,showLoading:b=!1,loadingOption:h,onEvents:d})=>{const f=n.useRef(null),i=n.useRef(void 0),M=()=>i.current,O=n.useCallback(()=>({option:s,theme:c,notMerge:u,lazyUpdate:a,showLoading:b,loadingOption:h,onEvents:d}),[s,c,u,a,b,h,d]),l=n.useCallback(()=>{if(f.current&&!i.current){const e=C.init(f.current,c);i.current=e;const t=O();return t.onEvents&&Object.entries(t.onEvents).forEach(([o,{handler:p,query:g,context:j}])=>{g?e.on(o,g,p,j):e.on(o,p,j)}),t.showLoading?e.showLoading(t.loadingOption):e.hideLoading(),e.setOption(t.option,{notMerge:t.notMerge,lazyUpdate:t.lazyUpdate}),e}return i.current},[O,c]),R=n.useCallback((e,t)=>{queueMicrotask(()=>{const o=i.current||l();o&&o.setOption(e,t)})},[l]);return n.useEffect(()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(()=>{e.resize()});return t.observe(f.current),()=>{t.disconnect(),d&&e&&Object.entries(d).forEach(([o,{handler:p}])=>{e.off(o,p)}),e.dispose(),i.current=void 0}},[i,d]),n.useEffect(()=>{f.current&&queueMicrotask(l)},[f,l]),{chartRef:f,setOption:R,getInstance:M}};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.6",
+  "version": "0.0.8",
   "description": "A powerful React hooks library for Apache ECharts",
   "keywords": [
     "react",
@@ -41,31 +41,31 @@
     "dist"
   ],
   "devDependencies": {
-    "@eslint/js": "^9.16.0",
-    "@testing-library/react": "^16.0.1",
-    "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react-swc": "^3.7.2",
-    "@vitest/coverage-v8": "2.1.8",
-    "echarts": "^5.5.1",
-    "eslint": "^9.16.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.13.0",
-    "jsdom": "^25.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.17.0",
-    "vite": "^6.0.2",
-    "vite-plugin-dts": "^4.3.0",
-    "vitest": "^2.1.8"
+    "@eslint/js": "^9.21.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^22.13.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "@vitest/coverage-v8": "3.0.7",
+    "echarts": "^5.6.0",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "jsdom": "^26.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.26.0",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.0.7"
   },
   "peerDependencies": {
     "echarts": "^5.5.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
   },
   "scripts": {
     "dev": "vite",