[add] Event Handler wrap utility

[optimize] simplify Option Setting based on Call Bus

ReadMe.md

@@ -48,6 +48,8 @@ npm i preact
 
 then configure your tool-chain: https://preactjs.com/guide/v10/getting-started#integrating-into-an-existing-pipeline
 
+and write chart codes as this demo: https://idea2app.github.io/React-MobX-Bootstrap-ts/#/chart
+
 #### DOM Renderer v2 & WebCell v3
 
 ```shell
@@ -81,6 +83,8 @@ export default defineConfig({
 });
 ```
 
+and write chart codes as this demo: https://idea2app.github.io/Vue-Prime-ts/#/chart
+
 ## Simple example
 
 Origin: [ECharts official example][9]
@@ -138,7 +142,7 @@ render(
 [4]: https://www.webcomponents.org/
 [5]: https://libraries.io/npm/echarts-jsx
 [6]: https://github.com/idea2app/ECharts-JSX/actions/workflows/main.yml
-[7]: https://github.com/ecomfe/awesome-echarts
+[7]: https://github.com/ecomfe/awesome-echarts?tab=readme-ov-file#web-components
 [8]: https://nodei.co/npm/echarts-jsx/
 [9]: https://echarts.apache.org/handbook/en/get-started/
 [10]: https://codesandbox.io/p/devbox/echarts-jsx-1-0-demo-h2dz8t?file=%2Fsrc%2FBar.tsx&embed=1

package.json

@@ -1,6 +1,6 @@
 {
     "name": "echarts-jsx",
-    "version": "1.0.4",
+    "version": "1.1.0",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "A real JSX wrapper for ECharts based on TypeScript & Web components",
@@ -48,7 +48,7 @@
         "rimraf": "^5.0.5",
         "typedoc": "^0.25.13",
         "typedoc-plugin-mdn-links": "^3.1.19",
-        "typescript": "~5.4.4"
+        "typescript": "~5.4.5"
     },
     "prettier": {
         "singleQuote": true,

preview/index.tsx

@@ -6,7 +6,7 @@ import '../source/components/y-axis';
 import '../source/charts/line';
 
 new DOMRenderer().render(
-    <ec-svg-renderer style={{ height: '75vh' }} onClick={console.log}>
+    <ec-svg-renderer style={{ height: '75vh' }}>
         <ec-title text="ECharts Getting Started Example" />
 
         <ec-x-axis

source/Option.ts

@@ -3,9 +3,12 @@ import { CustomElement, toCamelCase } from 'web-utility';
 
 import { EChartsElement } from './renderers/core';
 import { ProxyElement } from './Proxy';
-import { ZRElementEventHandler, ZRElementEventName, callBus } from './utility';
-
-const EventHandlerMap = new WeakMap<EventListener, ZRElementEventHandler>();
+import {
+    ZRElementEventName,
+    callBus,
+    unwrapEventHandler,
+    wrapEventHandler
+} from './utility';
 
 export abstract class ECOptionElement
     extends ProxyElement<EChartsOption>
@@ -75,36 +78,21 @@ export abstract class ECOptionElement
             ? { series: [{ ...data, type: this.chartName }] }
             : { [this.chartTagName]: data };
 
-        this.renderer.core.setOption(option);
+        this.renderer.setOption(option);
     });
 
     addEventListener = callBus((name: string, handler: EventListener) => {
-        const wrapper: ZRElementEventHandler = detail => {
-            const event = new CustomEvent(name, { detail }),
-                meta = { enumerable: true, value: this };
-
-            Object.defineProperties(event, {
-                eventPhase: { ...meta, value: Event.AT_TARGET },
-                srcElement: meta,
-                target: meta,
-                currentTarget: meta
-            });
-            handler.call(this, event);
-        };
-
-        EventHandlerMap.set(handler, wrapper);
-
         this.renderer.core.on(
             name as ZRElementEventName,
             this.eventSelector,
-            wrapper
+            wrapEventHandler.call(this, name, handler)
         );
     });
 
     removeEventListener = callBus((event: string, handler: EventListener) => {
         this.renderer.core.off(
             event as ZRElementEventName,
-            EventHandlerMap.get(handler)
+            unwrapEventHandler(handler)
         );
     });