@fanciers/echarts-react 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present, Tmk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @fanciers/echarts-react
+
+> Using ECharts in React the Idiomatic Way, with Treeshaking Support! 🍃

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import { LineSeriesOption, PieSeriesOption } from "echarts/charts";
+import { GridComponentOption } from "echarts/components";
+import * as echarts from "echarts/core";
+import { ComposeOption } from "echarts/core";
+import { ComponentOption } from "echarts/types/src/util/types.js";
+import { ComposeOption as ComposeOption$1, DataZoomComponentOption, DatasetComponentOption, GraphicComponentOption, LegendComponentOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, MatrixComponentOption, PolarComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption, VisualMapComponentOption } from "echarts";
+
+//#region src/shared.d.ts
+
+type EChartExt = Parameters<(typeof echarts)['use']>[0];
+type Simplify<T> = { [K in keyof T]: T[K] } & {};
+//#endregion
+//#region src/charts.d.ts
+interface ChartBaseProps<T extends readonly ChartComponentType<any>[]> {
+  className?: string;
+  style?: React.CSSProperties;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+  compose?: [...T];
+  children?: React.ReactNode;
+}
+type InferChartComponentOption<T extends readonly ChartComponentType<any>[], U = T[number]> = U extends ChartComponentType<infer P> ? P : never;
+interface ChartComponentType<T extends ComponentOption> {
+  <U extends readonly ChartComponentType<any>[] = []>(props: ChartBaseProps<U> & echarts.EChartsCoreOption & Simplify<ComposeOption<T | InferChartComponentOption<U>>> & {
+    ref?: React.Ref<echarts.ECharts>;
+  }): React.JSX.Element;
+  ext: EChartExt;
+}
+declare const LineChart: ChartComponentType<LineSeriesOption | GridComponentOption>;
+declare const PieChart: ChartComponentType<PieSeriesOption>;
+//#endregion
+//#region src/components.d.ts
+declare const Dataset: (props: ComposeOption$1<DatasetComponentOption>) => null;
+declare const DataZoom: (props: ComposeOption$1<DataZoomComponentOption>) => null;
+declare const Graphic: (props: ComposeOption$1<GraphicComponentOption>) => null;
+declare const Legend: (props: ComposeOption$1<LegendComponentOption>) => null;
+declare const MarkArea: (props: ComposeOption$1<MarkAreaComponentOption>) => null;
+declare const MarkLine: (props: ComposeOption$1<MarkLineComponentOption>) => null;
+declare const MarkPoint: (props: ComposeOption$1<MarkPointComponentOption>) => null;
+declare const Matrix: (props: ComposeOption$1<MatrixComponentOption>) => null;
+declare const Polar: (props: ComposeOption$1<PolarComponentOption>) => null;
+declare const Title: (props: ComposeOption$1<TitleComponentOption>) => null;
+declare const Toolbox: (props: ComposeOption$1<ToolboxComponentOption>) => null;
+declare const Tooltip: (props: ComposeOption$1<TooltipComponentOption>) => null;
+declare const VisualMap: (props: ComposeOption$1<VisualMapComponentOption>) => null;
+//#endregion
+//#region src/features.d.ts
+declare function AxisBreak(): null;
+//#endregion
+export { AxisBreak, DataZoom, Dataset, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, Title, Toolbox, Tooltip, VisualMap, echarts };

package/dist/index.js

@@ -0,0 +1,115 @@
+import React, { forwardRef, useLayoutEffect, useRef } from "react";
+import { LineChart as LineChart$1, PieChart as PieChart$1 } from "echarts/charts";
+import { DataZoomComponent, DatasetComponent, GraphicComponent, GridComponent, LegendComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, MatrixComponent, PolarComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent, VisualMapComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AxisBreak as AxisBreak$1 } from "echarts/features";
+
+//#region src/shared.tsx
+const defaultSetOptionOpt = {
+	notMerge: false,
+	lazyUpdate: true
+};
+const ChartContext = React.createContext(null);
+const useInitialChartContext = () => {
+	const [chartContextValue] = React.useState(() => ({ options: [] }));
+	return chartContextValue;
+};
+const useChartContext = () => {
+	const ctx = React.useContext(ChartContext);
+	if (process.env.NODE_ENV === "development" && !ctx) throw new Error("The component should render within ChartContext");
+	return ctx;
+};
+function useRegister(fn) {
+	const isExecuted = React.useRef(false);
+	if (isExecuted.current) return;
+	isExecuted.current = true;
+	fn(echarts);
+}
+
+//#endregion
+//#region src/charts.tsx
+function assignForwardedRef(ref, value) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(value);
+	else ref.current = value;
+}
+function defineChart(ext) {
+	const ChartComponent = forwardRef(({ className, style, containerProps, compose, children,...props }, ref) => {
+		const containerRef = useRef(null);
+		const chartRef = useRef(null);
+		const ctx = useInitialChartContext();
+		useRegister((echarts$1) => {
+			echarts$1.use([ext, compose?.map((comp) => comp.ext).flat() || []].flat());
+		});
+		useLayoutEffect(() => {
+			const chart = chartRef.current = echarts.init(containerRef.current, null);
+			assignForwardedRef(ref, chart);
+			return () => {
+				chart.dispose();
+				assignForwardedRef(ref, null);
+			};
+		}, []);
+		useLayoutEffect(() => {
+			const chart = chartRef.current;
+			if (!chart) return;
+			for (const opt of ctx.options) chart.setOption(opt, defaultSetOptionOpt);
+			chart.setOption(props, defaultSetOptionOpt);
+			chart.setOption(chart.getOption(), { notMerge: true });
+			ctx.options.length = 0;
+		});
+		return /* @__PURE__ */ jsxs(ChartContext.Provider, {
+			value: ctx,
+			children: [/* @__PURE__ */ jsx("div", {
+				className,
+				style,
+				...containerProps,
+				ref: containerRef
+			}), children]
+		});
+	});
+	ChartComponent.ext = ext;
+	return ChartComponent;
+}
+const LineChart = /* @__PURE__ */ defineChart([LineChart$1, GridComponent]);
+const PieChart = /* @__PURE__ */ defineChart([PieChart$1]);
+
+//#endregion
+//#region src/components.tsx
+function defineComponent(ext) {
+	return function ChartComponent(props) {
+		const ctx = useChartContext();
+		useRegister((echarts$1) => {
+			echarts$1.use(ext);
+		});
+		React.useLayoutEffect(() => {
+			ctx.options.push(props);
+		});
+		return null;
+	};
+}
+const Dataset = /* @__PURE__ */ defineComponent([DatasetComponent, TransformComponent]);
+const DataZoom = /* @__PURE__ */ defineComponent([DataZoomComponent]);
+const Graphic = /* @__PURE__ */ defineComponent([GraphicComponent]);
+const Legend = /* @__PURE__ */ defineComponent(LegendComponent);
+const MarkArea = /* @__PURE__ */ defineComponent(MarkAreaComponent);
+const MarkLine = /* @__PURE__ */ defineComponent(MarkLineComponent);
+const MarkPoint = /* @__PURE__ */ defineComponent(MarkPointComponent);
+const Matrix = /* @__PURE__ */ defineComponent(MatrixComponent);
+const Polar = /* @__PURE__ */ defineComponent(PolarComponent);
+const Title = /* @__PURE__ */ defineComponent(TitleComponent);
+const Toolbox = /* @__PURE__ */ defineComponent(ToolboxComponent);
+const Tooltip = /* @__PURE__ */ defineComponent(TooltipComponent);
+const VisualMap = /* @__PURE__ */ defineComponent(VisualMapComponent);
+
+//#endregion
+//#region src/features.tsx
+function AxisBreak() {
+	useRegister((echarts$1) => {
+		echarts$1.use(AxisBreak$1);
+	});
+	return null;
+}
+
+//#endregion
+export { AxisBreak, DataZoom, Dataset, Graphic, Legend, LineChart, MarkArea, MarkLine, MarkPoint, Matrix, PieChart, Polar, Title, Toolbox, Tooltip, VisualMap, echarts };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@fanciers/echarts-react",
+  "version": "0.0.0",
+  "description": "ECharts <3 React",
+  "author": "Tmk <i@tmk.im>",
+  "keywords": [
+    "echarts",
+    "react",
+    "component",
+    "chart",
+    "visualization"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "typings": "./dist/index.d.ts",
+  "devDependencies": {
+    "@rsbuild/core": "^1.4.15",
+    "@rsbuild/plugin-react": "^1.3.5",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/react": "^9.1.2",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "echarts": "^6.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^9.1.2",
+    "storybook-react-rsbuild": "^2.0.4",
+    "swr": "^2.3.6",
+    "tsdown": "^0.14.1",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "echarts": "^6.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "storybook dev",
+    "lint": "tsc --noEmit"
+  }
+}