[fix] Event API & Preview page failed

[add] Vue 3 quick start in Read Me document

ReadMe.md

@@ -20,45 +20,68 @@ A real [JSX][1] wrapper for [ECharts][2] based on [TypeScript][3] & [Web compone
 | `>=1`  |  `main`  | ✅developing | Web components |
 |  `<1`  | `master` | ❌deprecated |     React      |
 
-## Quick start
+## Installation
 
-### Installation
-
-#### Core package
+### Core package
 
 ```shell
 npm i echarts-jsx
 ```
 
-#### View renderer
+### View renderer
 
 Any kinds of Render engines that you like can be used to render ECharts JSX tags.
 
-##### React 19+
+#### React 19+
 
 Old versions have a property bug of Custom elements: https://github.com/facebook/react/issues/11347
 
 ```shell
 npm i react@^19 react-dom@^19
 ```
 
-##### Preact
+#### Preact
 
 ```shell
 npm i preact
 ```
 
 then configure your tool-chain: https://preactjs.com/guide/v10/getting-started#integrating-into-an-existing-pipeline
 
-##### DOM Renderer v2 & WebCell v3
+#### DOM Renderer v2 & WebCell v3
 
 ```shell
 npm i dom-renderer@^2
 ```
 
 then configure your project as [the demo code](preview/).
 
-### Simple example
+#### Vue 3
+
+```shell
+npm create vite vue-echarts-app -- --template vue-ts
+```
+
+then configure your Vite as following code:
+
+```js
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    plugins: [
+        vue({
+            template: {
+                compilerOptions: {
+                    isCustomElement: tag => tag.startsWith('ec-')
+                }
+            }
+        })
+    ]
+});
+```
+
+## Simple example
 
 Origin: [ECharts official example][9]
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "echarts-jsx",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "A real JSX wrapper for ECharts based on TypeScript & Web components",
@@ -46,7 +46,7 @@
         "parcel": "~2.12.0",
         "prettier": "^3.2.5",
         "rimraf": "^5.0.5",
-        "typedoc": "^0.25.12",
+        "typedoc": "^0.25.13",
         "typedoc-plugin-mdn-links": "^3.1.19",
         "typescript": "~5.4.4"
     },

preview/index.tsx

@@ -6,7 +6,7 @@ import '../source/components/y-axis';
 import '../source/charts/line';
 
 new DOMRenderer().render(
-    <ec-svg-chart style={{ height: '75vh' }}>
+    <ec-svg-renderer style={{ height: '75vh' }} onClick={console.log}>
         <ec-title text="ECharts Getting Started Example" />
 
         <ec-x-axis
@@ -19,6 +19,6 @@ new DOMRenderer().render(
             data={[150, 230, 224, 218, 135, 147, 260]}
             onClick={console.log}
         />
-    </ec-svg-chart>,
+    </ec-svg-renderer>,
     document.querySelector('main')
 );

source/Option.ts

@@ -26,18 +26,28 @@ export abstract class ECOptionElement
     }
 
     get eventSelector() {
-        return [this.chartName || this.chartTagName, this['type']]
+        return [
+            this.isSeries && 'series',
+            this.chartName || this.chartTagName,
+            this['type']
+        ]
             .filter(Boolean)
             .join('.');
     }
 
+    get renderer() {
+        for (
+            let parent = this.parentElement;
+            parent;
+            parent = parent.parentElement
+        )
+            if (parent instanceof EChartsElement) return parent;
+    }
+
     connectedCallback() {
         for (const [key, value] of Object.entries(this.toJSON()))
             if (EventKeyPattern.test(key) && typeof value === 'function')
-                this.listen(
-                    key.slice(2) as ZRElementEventName,
-                    value as ZRElementEventHandler
-                );
+                this.addEventListener(key.slice(2), value);
         this.update();
     }
 
@@ -60,22 +70,29 @@ export abstract class ECOptionElement
         );
     }
 
-    listen(event: ZRElementEventName, handler: ZRElementEventHandler) {
-        if (this.isConnected)
-            this.closest<EChartsElement>('ec-chart')?.onChild(
-                event,
-                this.eventSelector,
-                handler
-            );
+    #emit: ZRElementEventHandler = detail =>
+        this.dispatchEvent(new CustomEvent(`ec-${detail.type}`, { detail }));
+
+    addEventListener(event: string, handler: EventListener) {
+        if (!this.isConnected) return;
+
+        this.renderer?.onChild(
+            event as ZRElementEventName,
+            this.eventSelector,
+            this.#emit
+        );
+        super.addEventListener(`ec-${event}`, handler);
     }
 
-    forget(event: ZRElementEventName, handler: ZRElementEventHandler) {
-        if (this.isConnected)
-            this.closest<EChartsElement>('ec-chart')?.offChild(
-                event,
-                this.eventSelector,
-                handler
-            );
+    removeEventListener(event: string, handler: EventListener) {
+        if (!this.isConnected) return;
+
+        this.renderer?.offChild(
+            event as ZRElementEventName,
+            this.eventSelector,
+            this.#emit
+        );
+        super.removeEventListener(`ec-${event}`, handler);
     }
 
     setAttribute(name: string, value: string) {

source/Proxy.ts

@@ -22,9 +22,6 @@ export abstract class ProxyElement<T extends object> extends HTMLElement {
         );
     }
 
-    abstract listen(event: string, handler: (event: any) => any): any;
-    abstract forget(event: string, handler: (event: any) => any): any;
-
     setProperty(key: string, value: any) {
         const oldValue = this.#data[key],
             name = toHyphenCase(key),
@@ -40,7 +37,8 @@ export abstract class ProxyElement<T extends object> extends HTMLElement {
                 else super.removeAttribute(name);
                 break;
             case 'function':
-                if (EventKeyPattern.test(key)) this.listen(eventName, value);
+                if (EventKeyPattern.test(key))
+                    this.addEventListener(eventName, value);
                 break;
             default:
                 if (value != null)
@@ -54,7 +52,7 @@ export abstract class ProxyElement<T extends object> extends HTMLElement {
                     EventKeyPattern.test(key) &&
                     typeof oldValue === 'function'
                 )
-                    this.forget(eventName, value);
+                    this.removeEventListener(eventName, value);
                 else super.removeAttribute(name);
         }
     }

source/renderers/core.ts

@@ -74,8 +74,11 @@ export abstract class EChartsElement
 
         for (const [event, handler, selector] of this.#eventHandlers)
             if (selector) this.onChild(event, selector, handler);
-            else this.listen(event, handler);
-
+            else
+                this.addEventListener(
+                    event,
+                    handler as unknown as EventListener
+                );
         this.#eventHandlers.length = 0;
 
         for (const option of this.#eventData) this.setOption(option);
@@ -105,9 +108,16 @@ export abstract class EChartsElement
         this.setOption(this.toJSON());
     }
 
-    listen(event: ZRElementEventName, handler: ZRElementEventHandler) {
+    addEventListener(event: string, handler: EventListener) {
+        if (event === 'optionchange')
+            return super.addEventListener(event, handler);
+
         if (this.#core) this.#core.getZr().on(event, handler);
-        else this.#eventHandlers.push([event, handler]);
+        else
+            this.#eventHandlers.push([
+                event as ZRElementEventName,
+                handler as unknown as ZRElementEventHandler
+            ]);
     }
 
     onChild(
@@ -119,11 +129,17 @@ export abstract class EChartsElement
         else this.#eventHandlers.push([event, handler, selector]);
     }
 
-    forget(event: ZRElementEventName, handler: ZRElementEventHandler) {
+    removeEventListener(event: string, handler: EventListener) {
+        if (event === 'optionchange')
+            return super.removeEventListener(event, handler);
+
         if (this.#core) this.#core.getZr().off(event, handler);
         else {
             const index = this.#eventHandlers.findIndex(
-                item => item[0] === event && item[1] === handler && !item[2]
+                item =>
+                    item[0] === event &&
+                    item[1] === (handler as unknown as ZRElementEventHandler) &&
+                    !item[2]
             );
             if (index > -1) this.#eventHandlers.splice(index, 1);
         }