Optimise bundling

README.md

@@ -26,6 +26,7 @@ A quick example of how to create a simple chart:
 
 ```tsx
 import { EChart } from '@kbox-labs/react-echarts'
+import * as echarts from 'echarts';
 
 function App() {
   return (
@@ -34,6 +35,7 @@ function App() {
         height: '600px',
         width: '100%'
       }}
+      init={echarts.init}
       xAxis={{
         type: 'category',
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

docs/src/pages/docs/bundle-size.mdx

@@ -2,26 +2,17 @@ import { Callout } from 'nextra/components'
 
 # Bundle Size
 
-<Callout type='warning' emoji='⚠️'>
-  By default, and unless the `use` prop is specified all source code of ECharts
-  is included.
-</Callout>
-
 Controlling bundle size is crucial for optimizing the performance of your
-application. **By default, all source code of ECharts is included.**
-Nonetheless, you can leverage the tree-shakeable interface offered by ECharts by
-using the `use` prop.
-
-## The `use` prop
+application.
 
-In the context of React ECharts, you have the flexibility to include only the
-necessary components by utilizing the `use` prop.
+## The echarts `use` prop
 
-For a more tailored approach, you can leverage the tree-shakeable interface
+You can leverage the tree-shakeable interface
 offered by ECharts. This allows you to selectively bundle the required
 components, resulting in a more streamlined and minimal bundle size.
 
 ```tsx
+import * as echarts from 'echarts/core'
 import { EChart } from '@kbox-labs/react-echarts'
 import { BarChart } from 'echarts/charts'
 import { LabelLayout } from 'echarts/features'
@@ -32,16 +23,18 @@ import {
   GridComponent
 } from 'echarts/components'
 
+echarts.use([
+  BarChart,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  CanvasRenderer
+]);
+
 function App() {
   return (
     <EChart
-      use={[
-        BarChart,
-        TitleComponent,
-        TooltipComponent,
-        GridComponent,
-        CanvasRenderer
-      ]}
+      init={echarts.init}
       // ...your other props
     />
   )

docs/src/pages/docs/performance.mdx

@@ -11,9 +11,11 @@ re-renders.
 
 ```tsx
 import { EChart, EChartProps } from '@kbox-labs/react-echarts'
+import * as echarts from 'echarts';
 import { useMemo } from 'react'
 
 const staticProps: EChartProps = {
+  init: echarts.init,
   xAxis: {
     type: 'category'
   },

example/src/App.tsx

@@ -8,6 +8,16 @@ import {
 	GridComponent
 } from 'echarts/components'
 
+import * as echarts from 'echarts/core'
+
+echarts.use([
+	LineChart,
+	TitleComponent,
+	TooltipComponent,
+	GridComponent,
+	CanvasRenderer
+])
+
 function App() {
 	const [count, setCount] = useState(0)
 
@@ -20,13 +30,7 @@ function App() {
 			</button>
 
 			<EChart
-				use={[
-					LineChart,
-					TitleComponent,
-					TooltipComponent,
-					GridComponent,
-					CanvasRenderer
-				]}
+				init={echarts.init}
 				group='group1'
 				style={{
 					height: '600px',

src/echart.tsx

@@ -27,6 +27,7 @@ export type EChartProps = UseEChartsOptions &
  */
 export const EChart: FC<EChartProps> = ({
 	// Initialization options
+	init,
 	devicePixelRatio,
 	height,
 	locale,
@@ -135,6 +136,7 @@ export const EChart: FC<EChartProps> = ({
 	// Use ECharts hook
 	const [ref] = useECharts<HTMLDivElement>({
 		// Initialization options
+		init,
 		devicePixelRatio,
 		height,
 		locale,

src/use-echarts.ts

@@ -7,15 +7,15 @@ import { setupEventHandlers } from './utils/event-handlers'
 // Types
 import type { EChartEventsProps } from './events'
 import type { EChartsOption, SetOptionOpts } from 'echarts'
-import type { init, ECharts, use as echartsUse } from 'echarts/core'
+import type { init, ECharts } from 'echarts/core'
 
 export type UseEChartsOptions = EChartEventsProps &
 	SetOptionOpts &
 	EChartsOption &
 	Parameters<typeof init>[2] & {
 		group?: ECharts['group']
 		theme?: Parameters<typeof init>[1]
-		use?: Parameters<typeof echartsUse>[0]
+		init: typeof init
 	}
 
 export function useECharts<T extends HTMLElement>(

src/utils/chart-init.ts

@@ -1,21 +1,6 @@
-import { init, use as echartsUse, type ECharts } from 'echarts/core'
+import type { ECharts } from 'echarts/core'
 import type { UseEChartsOptions } from '../use-echarts'
 
-export async function getGlobalUse() {
-	const modules = [
-		import('echarts/features'),
-		import('echarts/charts'),
-		import('echarts/components'),
-		import('echarts/renderers')
-	]
-
-	const loadedModules = await Promise.all(
-		modules.map((m) => m.then((m) => Object.values(m)))
-	)
-
-	return loadedModules.flat()
-}
-
 export function initializeECharts<T extends HTMLElement>(
 	container: T,
 	options: UseEChartsOptions
@@ -32,7 +17,7 @@ export function initializeECharts<T extends HTMLElement>(
 		width
 	} = options
 
-	return init(container, theme, {
+	return options.init(container, theme, {
 		devicePixelRatio,
 		height,
 		locale,
@@ -49,9 +34,5 @@ export async function setupECharts<T extends HTMLElement>(
 	options: UseEChartsOptions
 ): Promise<ECharts | undefined> {
 	if (!container) return
-
-	const useOpts = options.use || (await getGlobalUse())
-	echartsUse(useOpts)
-
 	return initializeECharts(container, options)
 }