[add] Radar component & View Engine document

[optimize] export Chart & Component Element classes [fix] some detail bugs
idea2app · Apr 7, 2024 · c5fdc25 · c5fdc25 · github-actions · Apr 7, 2024
1 parent 2d52fb0
commit c5fdc25
Show file tree

Hide file tree

Showing 49 changed files with 242 additions and 179 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -24,22 +24,52 @@ A real [JSX][1] wrapper for [ECharts][2] based on [TypeScript][3] & [Web compone
 
 ### Installation
 
+#### Core package
+
 ```shell
 npm i echarts-jsx
 ```
 
+#### View renderer
+
+Any kinds of Render engines that you like can be used to render ECharts JSX tags.
+
+##### 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
+
+```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
+
+```shell
+npm i dom-renderer@^2
+```
+
+then configure your project as [the demo code](preview/).
+
 ### Simple example
 
 Origin: [ECharts official example][9]
 
-[![Edit ECharts-JSX-demo](https://codesandbox.io/static/img/play-codesandbox.svg)][10]
+[![Edit ECharts-JSX-1.0-demo](https://codesandbox.io/static/img/play-codesandbox.svg)][10]
 
 ```tsx
 import { render } from 'react-dom';
 import 'echarts-jsx';
 
 render(
-    <ec-svg-chart theme="dark" style={{ width: '100%', height: '75vh' }}>
+    <ec-svg-renderer theme="dark" style={{ width: '100%', height: '75vh' }}>
         <ec-title text="ECharts Getting Started Example" />
 
         <ec-legend data={['sales']} />
@@ -63,7 +93,7 @@ render(
             data={[5, 20, 36, 10, 10, 20]}
             onClick={console.log}
         />
-    </ec-svg-chart>,
+    </ec-svg-renderer>,
     document.body
 );
 ```
@@ -88,4 +118,4 @@ render(
 [7]: https://github.com/ecomfe/awesome-echarts
 [8]: https://nodei.co/npm/echarts-jsx/
 [9]: https://echarts.apache.org/handbook/en/get-started/
-[10]: https://codesandbox.io/p/devbox/5lknyg?migrateFrom=bouwsf&embed=1&file=%2Fsrc%2Fbar.tsx&showConsole=true
+[10]: https://codesandbox.io/p/devbox/echarts-jsx-1-0-demo-h2dz8t?file=%2Fsrc%2FBar.tsx&embed=1
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "echarts-jsx",
-    "version": "1.0.0-rc.5",
+    "version": "1.0.0",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "A real JSX wrapper for ECharts based on TypeScript & Web components",
@@ -66,7 +66,7 @@
         "clean": "rimraf .parcel-cache/ dist/ docs/",
         "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,echarts/charts=echarts,echarts/components=echarts,web-utility=WebUtility",
+        "pack-dist": "rm -rf dist/  &&  tsc  &&  microbundle --name EChartsJSX --globals lodash=_,echarts/core=echarts,echarts/renderers=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",

diff --git a/source/Proxy.ts b/source/Proxy.ts
@@ -43,7 +43,13 @@ export abstract class ProxyElement<T extends object> extends HTMLElement {
                 if (EventKeyPattern.test(key)) this.listen(eventName, value);
                 break;
             default:
-                if (value != null) super.setAttribute(name, value + '');
+                if (value != null)
+                    super.setAttribute(
+                        name,
+                        typeof value === 'string'
+                            ? value
+                            : JSON.stringify(value)
+                    );
                 else if (
                     EventKeyPattern.test(key) &&
                     typeof oldValue === 'function'

diff --git a/source/charts/bar.ts b/source/charts/bar.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-bar-chart',
-    class ECBarElement extends ECOptionElement {}
-);
 use(BarChart);
 
+export class ECBarChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-bar-chart', ECBarChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/boxplot.ts b/source/charts/boxplot.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-boxplot-chart',
-    class ECBoxplotElement extends ECOptionElement {}
-);
 use(BoxplotChart);
 
+export class ECBoxplotChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-boxplot-chart', ECBoxplotChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/candlestick.ts b/source/charts/candlestick.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-candlestick-chart',
-    class ECCandlestickElement extends ECOptionElement {}
-);
 use(CandlestickChart);
 
+export class ECCandlestickChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-candlestick-chart', ECCandlestickChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/custom.ts b/source/charts/custom.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-custom-chart',
-    class ECCustomElement extends ECOptionElement {}
-);
 use(CustomChart);
 
+export class ECCustomChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-custom-chart', ECCustomChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/effect-scatter.ts b/source/charts/effect-scatter.ts
@@ -5,11 +5,14 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
+use(EffectScatterChart);
+
+export class ECEffectScatterChart extends ECOptionElement {}
+
 globalThis.customElements?.define(
     'ec-effect-scatter-chart',
-    class ECEffectScatterElement extends ECOptionElement {}
+    ECEffectScatterChart
 );
-use(EffectScatterChart);
 
 declare global {
     namespace JSX {

diff --git a/source/charts/funnel.ts b/source/charts/funnel.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-funnel-chart',
-    class ECFunnelElement extends ECOptionElement {}
-);
 use(FunnelChart);
 
+export class ECFunnelChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-funnel-chart', ECFunnelChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/gauge.ts b/source/charts/gauge.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-gauge-chart',
-    class ECGaugeElement extends ECOptionElement {}
-);
 use(GaugeChart);
 
+export class ECGaugeChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-gauge-chart', ECGaugeChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/graph.ts b/source/charts/graph.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-graph-chart',
-    class ECGraphElement extends ECOptionElement {}
-);
 use(GraphChart);
 
+export class ECGraphChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-graph-chart', ECGraphChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/heatmap.ts b/source/charts/heatmap.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-heatmap-chart',
-    class ECHeatmapElement extends ECOptionElement {}
-);
 use(HeatmapChart);
 
+export class ECHeatmapChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-heatmap-chart', ECHeatmapChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/line.ts b/source/charts/line.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-line-chart',
-    class ECLineElement extends ECOptionElement {}
-);
 use(LineChart);
 
+export class ECLineChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-line-chart', ECLineChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/lines.ts b/source/charts/lines.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-lines-chart',
-    class ECLinesElement extends ECOptionElement {}
-);
 use(LinesChart);
 
+export class ECLinesChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-lines-chart', ECLinesChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/map.ts b/source/charts/map.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-map-chart',
-    class ECMapElement extends ECOptionElement {}
-);
 use(MapChart);
 
+export class ECMapChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-map-chart', ECMapChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/parallel.ts b/source/charts/parallel.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-parallel-chart',
-    class ECParallelElement extends ECOptionElement {}
-);
 use(ParallelChart);
 
+export class ECParallelChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-parallel-chart', ECParallelChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/pictorial-bar.ts b/source/charts/pictorial-bar.ts
@@ -5,11 +5,14 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
+use(PictorialBarChart);
+
+export class ECPictorialBarChart extends ECOptionElement {}
+
 globalThis.customElements?.define(
     'ec-pictorial-bar-chart',
-    class ECPictorialBarElement extends ECOptionElement {}
+    ECPictorialBarChart
 );
-use(PictorialBarChart);
 
 declare global {
     namespace JSX {

diff --git a/source/charts/pie.ts b/source/charts/pie.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-pie-chart',
-    class ECPieElement extends ECOptionElement {}
-);
 use(PieChart);
 
+export class ECPieChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-pie-chart', ECPieChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/radar.ts b/source/charts/radar.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-radar-chart',
-    class ECRadarElement extends ECOptionElement {}
-);
 use(RadarChart);
 
+export class ECRadarChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-radar-chart', ECRadarChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {

diff --git a/source/charts/sankey.ts b/source/charts/sankey.ts
@@ -5,12 +5,12 @@ import { use } from 'echarts/core';
 
 import { ECOptionElement } from '../Option';
 
-globalThis.customElements?.define(
-    'ec-sankey-chart',
-    class ECSankeyElement extends ECOptionElement {}
-);
 use(SankeyChart);
 
+export class ECSankeyChart extends ECOptionElement {}
+
+globalThis.customElements?.define('ec-sankey-chart', ECSankeyChart);
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {