[remove] Batch Defination & Async Loading of ECharts components & charts

package.json

@@ -37,6 +37,10 @@
             "./dist/component/*.d.ts",
             "./dist/chart/*",
             "./dist/chart/*.d.ts"
+        ],
+        "./chart": [
+            "./dist/chart.js",
+            "./dist/chart.d.ts"
         ]
     },
     "engines": {
@@ -80,9 +84,9 @@
         "prepare": "husky",
         "test": "lint-staged",
         "clean": "rimraf .parcel-cache/ dist/ docs/",
-        "preview": "npm run clean  &&  cd preview/  &&  parcel --dist-dir=../docs/preview/ --open",
+        "preview": "npm run clean  &&  cd preview/  &&  parcel --dist-dir=../docs/preview/",
         "pack-preview": "rimraf .parcel-cache/ docs/preview/  &&  cd preview/  &&  parcel build --public-url=. --dist-dir=../docs/preview/",
-        "pack-dist": "rm -rf dist/  &&  tsc  &&  microbundle --name EChartsJSX --globals lodash=_,echarts/core=echarts,web-utility=WebUtility",
+        "pack-dist": "rm -rf dist/  &&  tsc  &&  microbundle --name EChartsJSX --globals lodash=_,echarts/core=echarts,echarts/charts=echarts,echarts/components=echarts,web-utility=WebUtility",
         "pack-docs": "rm -rf docs/  &&  typedoc source/",
         "build": "npm run pack-dist  &&  npm run pack-docs  &&  npm run pack-preview",
         "start": "npm run pack-docs  &&  open-cli docs/index.html",

preview/index.tsx

@@ -1,5 +1,9 @@
 import { DOMRenderer } from 'dom-renderer';
-import '../source/';
+import '../source/chart';
+import '../source/components/title';
+import '../source/components/x-axis';
+import '../source/components/y-axis';
+import '../source/charts/line';
 
 new DOMRenderer().render(
     <ec-chart type="canvas" style={{ height: '75vh' }}>
@@ -11,8 +15,7 @@ new DOMRenderer().render(
         />
         <ec-y-axis type="value" />
 
-        <ec-series
-            type="line"
+        <ec-line-chart
             data={[150, 230, 224, 218, 135, 147, 260]}
             onClick={console.log}
         />

source/Option.ts

@@ -1,20 +1,9 @@
-import { JsxProps } from 'dom-renderer';
 import { EChartsOption } from 'echarts';
-import {
-    CustomElement,
-    HyphenCase,
-    PickSingle,
-    toCamelCase,
-    toHyphenCase
-} from 'web-utility';
-
-import { EChartsElement } from './Chart';
+import { CustomElement, toCamelCase } from 'web-utility';
+
+import { EChartsElement } from './chart';
 import { ProxyElement } from './Proxy';
 import {
-    BUILTIN_CHARTS_MAP,
-    BUITIN_COMPONENTS_MAP,
-    ECChartOptionName,
-    ECComponentOptionName,
     EventKeyPattern,
     ZRElementEventHandler,
     ZRElementEventName
@@ -29,11 +18,17 @@ export abstract class ECOptionElement
     }
 
     get isSeries() {
-        return this.chartTagName === 'series';
+        return this.chartTagName.endsWith('Chart');
+    }
+
+    get chartName() {
+        return this.isSeries ? this.chartTagName.replace(/Chart$/, '') : null;
     }
 
     get eventSelector() {
-        return [this.chartTagName, this['type']].filter(Boolean).join('.');
+        return [this.chartName || this.chartTagName, this['type']]
+            .filter(Boolean)
+            .join('.');
     }
 
     connectedCallback() {
@@ -58,9 +53,9 @@ export abstract class ECOptionElement
         this.dispatchEvent(
             new CustomEvent('optionchange', {
                 bubbles: true,
-                detail: {
-                    [this.chartTagName]: this.isSeries ? [data] : data
-                }
+                detail: this.isSeries
+                    ? { series: [{ ...data, type: this.chartName }] }
+                    : { [this.chartTagName]: data }
             })
         );
     }
@@ -93,27 +88,3 @@ export abstract class ECOptionElement
         this[key] = name === value || value;
     }
 }
-
-const ECOptionNames = [
-    ...Object.keys({ ...BUITIN_COMPONENTS_MAP, ...BUILTIN_CHARTS_MAP }),
-    'series'
-];
-
-for (const name of ECOptionNames)
-    customElements.define(
-        `ec-${toHyphenCase(name)}`,
-        class extends ECOptionElement {}
-    );
-
-type ECOptionName = ECComponentOptionName | ECChartOptionName | 'series';
-
-type ECOptionElements = {
-    [K in ECOptionName as `ec-${HyphenCase<K>}`]: JsxProps<ECOptionElement> &
-        PickSingle<EChartsOption[K]>;
-};
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements extends ECOptionElements {}
-    }
-}

source/Chart.ts → source/chart.ts

@@ -1,22 +1,16 @@
 import { JsxProps } from 'dom-renderer';
-import { EChartsOption, ResizeOpts, SeriesOption } from 'echarts';
+import { EChartsOption, ResizeOpts } from 'echarts';
 import { ECharts, init } from 'echarts/core';
 import { ECBasicOption } from 'echarts/types/dist/shared';
 import { Observable } from 'iterable-observer';
-import { debounce, merge } from 'lodash';
-import { CustomElement, makeArray, parseDOM } from 'web-utility';
+import { debounce } from 'lodash';
+import { CustomElement, parseDOM } from 'web-utility';
 
-import { ECOptionElement } from './Option';
 import { ProxyElement } from './Proxy';
 import {
-    BUILTIN_CHARTS_MAP,
-    BUITIN_COMPONENTS_MAP,
     ChartType,
-    ECComponentOptionName,
     ZRElementEventHandler,
     ZRElementEventName,
-    loadChart,
-    loadComponent,
     loadRenderer
 } from './utility';
 
@@ -62,7 +56,7 @@ export class EChartsElement
         this.attachShadow({ mode: 'open' }).append(
             parseDOM('<div style="height: 100%" />')[0]
         );
-        // this.#boot();
+        this.#boot();
     }
 
     connectedCallback() {
@@ -89,18 +83,7 @@ export class EChartsElement
             theme,
             initOptions
         );
-        props = merge.apply(
-            null,
-            Array.from(this.children, (item: ECOptionElement) => ({
-                [item.chartTagName]:
-                    item.chartTagName === 'series'
-                        ? [item.toJSON()]
-                        : item.toJSON()
-            }))
-        );
-        console.log(props);
-
-        this.setOption(props);
+        this.setOption({ grid: {}, ...props });
 
         for (const [event, handler, selector] of this.#eventHandlers)
             if (selector) this.onChild(event, selector, handler);
@@ -133,14 +116,6 @@ export class EChartsElement
             this.#eventData.push(data);
             return;
         }
-
-        for (const [key, value] of Object.entries(data))
-            if (key in BUITIN_COMPONENTS_MAP)
-                await loadComponent(key as ECComponentOptionName);
-            else if (key === 'series')
-                for (const { type } of makeArray(value) as SeriesOption[])
-                    if (type in BUILTIN_CHARTS_MAP) await loadChart(type);
-
         this.#core.setOption(data, false, true);
     }
 

source/component/x-axis.ts → source/components/x-axis.ts

@@ -1,5 +1,7 @@
 import { JsxProps } from 'dom-renderer';
 import { EChartsOption } from 'echarts';
+import { GridComponent } from 'echarts/components';
+import { use } from 'echarts/core';
 import { PickSingle } from 'web-utility';
 
 import { ECOptionElement } from '../Option';
@@ -8,6 +10,7 @@ globalThis.customElements?.define(
     'ec-x-axis',
     class ECXAxisElement extends ECOptionElement {}
 );
+use(GridComponent);
 
 declare global {
     namespace JSX {

source/component/y-axis.ts → source/components/y-axis.ts

@@ -1,5 +1,7 @@
 import { JsxProps } from 'dom-renderer';
 import { EChartsOption } from 'echarts';
+import { GridComponent } from 'echarts/components';
+import { use } from 'echarts/core';
 import { PickSingle } from 'web-utility';
 
 import { ECOptionElement } from '../Option';
@@ -8,6 +10,7 @@ globalThis.customElements?.define(
     'ec-y-axis',
     class ECYAxisElement extends ECOptionElement {}
 );
+use(GridComponent);
 
 declare global {
     namespace JSX {

source/index.ts

@@ -1,48 +1,48 @@
 export * from './utility';
 export * from './Proxy';
 export * from './Option';
-export * from './Chart';
+export * from './chart';
 
-export * from './component/grid';
-export * from './component/polar';
-export * from './component/geo';
-export * from './component/single-axis';
-export * from './component/parallel';
-export * from './component/calendar';
-export * from './component/graphic';
-export * from './component/toolbox';
-export * from './component/tooltip';
-export * from './component/axis-pointer';
-export * from './component/brush';
-export * from './component/title';
-export * from './component/timeline';
-export * from './component/legend';
-export * from './component/data-zoom';
-export * from './component/visual-map';
-export * from './component/x-axis';
-export * from './component/y-axis';
-export * from './component/angle-axis';
-export * from './component/radius-axis';
+export * from './components/grid';
+export * from './components/polar';
+export * from './components/geo';
+export * from './components/single-axis';
+export * from './components/parallel';
+export * from './components/calendar';
+export * from './components/graphic';
+export * from './components/toolbox';
+export * from './components/tooltip';
+export * from './components/axis-pointer';
+export * from './components/brush';
+export * from './components/title';
+export * from './components/timeline';
+export * from './components/legend';
+export * from './components/data-zoom';
+export * from './components/visual-map';
+export * from './components/x-axis';
+export * from './components/y-axis';
+export * from './components/angle-axis';
+export * from './components/radius-axis';
 
-export * from './chart/line';
-export * from './chart/bar';
-export * from './chart/pie';
-export * from './chart/scatter';
-export * from './chart/radar';
-export * from './chart/map';
-export * from './chart/tree';
-export * from './chart/treemap';
-export * from './chart/graph';
-export * from './chart/gauge';
-export * from './chart/funnel';
-export * from './chart/parallel';
-export * from './chart/sankey';
-export * from './chart/boxplot';
-export * from './chart/candlestick';
-export * from './chart/effect-scatter';
-export * from './chart/lines';
-export * from './chart/heatmap';
-export * from './chart/pictorial-bar';
-export * from './chart/theme-river';
-export * from './chart/sunburst';
-export * from './chart/custom';
+export * from './charts/line';
+export * from './charts/bar';
+export * from './charts/pie';
+export * from './charts/scatter';
+export * from './charts/radar';
+export * from './charts/map';
+export * from './charts/tree';
+export * from './charts/treemap';
+export * from './charts/graph';
+export * from './charts/gauge';
+export * from './charts/funnel';
+export * from './charts/parallel';
+export * from './charts/sankey';
+export * from './charts/boxplot';
+export * from './charts/candlestick';
+export * from './charts/effect-scatter';
+export * from './charts/lines';
+export * from './charts/heatmap';
+export * from './charts/pictorial-bar';
+export * from './charts/theme-river';
+export * from './charts/sunburst';
+export * from './charts/custom';