[migrate] replace Static options with ECharts elements

[optimize] support Auto Resizing of ECharts elements

package.json

@@ -22,6 +22,7 @@
         "github-web-widget": "^4.0.0-rc.2",
         "js-base64": "^3.7.6",
         "koajax": "^0.9.6",
+        "lodash.debounce": "^4.0.8",
         "lodash.memoize": "^4.1.2",
         "marked": "^12.0.0",
         "mobx": "^6.12.0",
@@ -36,6 +37,7 @@
         "@parcel/transformer-less": "~2.11.0",
         "@parcel/transformer-typescript-tsc": "~2.11.0",
         "@parcel/transformer-webmanifest": "~2.11.0",
+        "@types/lodash.debounce": "^4.0.9",
         "@types/lodash.memoize": "^4.1.9",
         "@types/node": "^18.19.17",
         "@typescript-eslint/eslint-plugin": "^7.0.1",

source/component/ECharts/Chart.tsx

@@ -1,8 +1,9 @@
 import { JsxProps } from 'dom-renderer';
-import { EChartsOption } from 'echarts';
+import { EChartsOption, ResizeOpts } from 'echarts';
 import { ECharts, init } from 'echarts/core';
 import { ECBasicOption } from 'echarts/types/dist/shared';
-import { parseDOM } from 'web-utility';
+import debounce from 'lodash.debounce';
+import { CustomElement, parseDOM } from 'web-utility';
 
 import { ProxyElement } from './Proxy';
 import {
@@ -26,11 +27,15 @@ export interface EChartsElementProps
         EChartsElementEventHandler {
     theme?: Parameters<typeof init>[1];
     initOptions?: Parameters<typeof init>[2];
+    resizeOptions?: ResizeOpts;
 }
 
 export type EChartsElementState = EChartsElementProps & EChartsOption;
 
-export class EChartsElement extends ProxyElement<EChartsElementState> {
+export class EChartsElement
+    extends ProxyElement<EChartsElementState>
+    implements CustomElement
+{
     #type: ChartType;
     #core?: ECharts;
     #eventHandlers: [ZRElementEventName, ZRElementEventHandler, string?][] = [];
@@ -59,6 +64,14 @@ export class EChartsElement extends ProxyElement<EChartsElementState> {
 
     connectedCallback() {
         this.type ||= 'svg';
+
+        globalThis.addEventListener?.('resize', this.handleResize);
+    }
+
+    disconnectedCallback() {
+        globalThis.removeEventListener?.('resize', this.handleResize);
+
+        this.#core.dispose();
     }
 
     async #init(type: ChartType) {
@@ -145,6 +158,10 @@ export class EChartsElement extends ProxyElement<EChartsElementState> {
             if (index > -1) this.#eventHandlers.splice(index, 1);
         }
     }
+
+    handleResize = debounce(() =>
+        this.#core.resize(this.toJSON().resizeOptions)
+    );
 }
 
 customElements.define('ec-chart', EChartsElement);

source/component/ECharts/Option.tsx

@@ -1,6 +1,12 @@
 import { JsxProps } from 'dom-renderer';
 import { EChartsOption } from 'echarts';
-import { HyphenCase, PickSingle, toCamelCase, toHyphenCase } from 'web-utility';
+import {
+    CustomElement,
+    HyphenCase,
+    PickSingle,
+    toCamelCase,
+    toHyphenCase
+} from 'web-utility';
 
 import { EChartsElement } from './Chart';
 import { ProxyElement } from './Proxy';
@@ -14,7 +20,10 @@ import {
     ZRElementEventName
 } from './utility';
 
-export abstract class ECOptionElement extends ProxyElement<EChartsOption> {
+export abstract class ECOptionElement
+    extends ProxyElement<EChartsOption>
+    implements CustomElement
+{
     get chartTagName() {
         return toCamelCase(this.tagName.split('-')[1].toLowerCase());
     }
@@ -85,19 +94,21 @@ export abstract class ECOptionElement extends ProxyElement<EChartsOption> {
     }
 }
 
-for (const name of Object.keys({
-    ...BUITIN_COMPONENTS_MAP,
-    ...BUILTIN_CHARTS_MAP
-}))
+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
-        | ECComponentOptionName
-        | ECChartOptionName as `ec-${HyphenCase<K>}`]: JsxProps<ECOptionElement> &
+    [K in ECOptionName as `ec-${HyphenCase<K>}`]: JsxProps<ECOptionElement> &
         PickSingle<EChartsOption[K]>;
 };
 

source/component/ECharts/Proxy.ts

@@ -1,12 +1,9 @@
 import { ECElementEvent } from 'echarts';
-import { CustomElement, proxyPrototype, toHyphenCase } from 'web-utility';
+import { proxyPrototype, toHyphenCase } from 'web-utility';
 
 import { EventKeyPattern } from './utility';
 
-export abstract class ProxyElement<T extends object>
-    extends HTMLElement
-    implements CustomElement
-{
+export abstract class ProxyElement<T extends object> extends HTMLElement {
     #data = {} as T;
 
     toJSON() {