[refactor] rewrite the whole project based on Web components (#14)

.github/workflows/main.yml

@@ -31,3 +31,12 @@ jobs:
                   publish_dir: ./docs
                   personal_token: ${{ secrets.GITHUB_TOKEN }}
                   force_orphan: true
+
+            - uses: amondnet/vercel-action@v25
+              with:
+                  vercel-token: ${{ secrets.VERCEL_TOKEN }}
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+                  vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+                  working-directory: ./docs
+                  vercel-args: --prod

.github/workflows/push.yml

@@ -0,0 +1,35 @@
+name: Commit preview
+on:
+    push:
+        branches-ignore:
+            - main
+jobs:
+    Build-and-Deploy:
+        env:
+            VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+            VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+            VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+
+            - uses: pnpm/action-setup@v2
+              with:
+                  version: 8
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  cache: pnpm
+            - name: Install & Build
+              run: |
+                  pnpm i --frozen-lockfile
+                  pnpm build
+
+            - uses: amondnet/vercel-action@v25
+              if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+              with:
+                  vercel-token: ${{ secrets.VERCEL_TOKEN }}
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+                  vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+                  working-directory: ./docs

.husky/pre-commit

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm test

.husky/pre-push

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm run build

.npmignore

@@ -1,4 +1,5 @@
-.parcel-cache/
+.parcel*
+preview/
 docs/
 .husky/
 .github/

ReadMe.md

@@ -1,69 +1,82 @@
 # ECharts JSX
 
-A real [JSX][1] wrapper for [ECharts][2] based on [TypeScript][3]
+A real [JSX][1] wrapper for [ECharts][2] based on [TypeScript][3] & [Web components][4]
 
-[![NPM Dependency](https://img.shields.io/librariesio/github/idea2app/ECharts-JSX.svg)][4]
-[![CI & CD](https://github.com/idea2app/ECharts-JSX/actions/workflows/main.yml/badge.svg)][5]
-[![](https://raw.githubusercontent.com/sindresorhus/awesome/main/media/mentioned-badge.svg)][6]
+[![NPM Dependency](https://img.shields.io/librariesio/github/idea2app/ECharts-JSX.svg)][5]
+[![CI & CD](https://github.com/idea2app/ECharts-JSX/actions/workflows/main.yml/badge.svg)][6]
+[![](https://raw.githubusercontent.com/sindresorhus/awesome/main/media/mentioned-badge.svg)][7]
 
-[![NPM](https://nodei.co/npm/echarts-jsx.png?downloads=true&downloadRank=true&stars=true)][7]
+[![NPM](https://nodei.co/npm/echarts-jsx.png?downloads=true&downloadRank=true&stars=true)][8]
 
 ## Features
 
 -   [x] All kinds of options & event handlers can be write in **JSX syntax**
-    -   [x] Parallel chart
-    -   [x] Line chart
-    -   [x] Scatter chart
-    -   [x] Bar chart
-    -   [x] Candle Stick chart
-    -   [x] Pie chart
-    -   [x] Radar chart
-    -   [x] Sunburst chart
-    -   [x] Gauge chart
-    -   [x] Tree chart
-    -   [x] Tree Map chart
-    -   [x] Sankey chart
-    -   [x] Heat Map chart
-    -   [x] Graph chart
-    -   [x] Funnel chart
-    -   [x] Theme River chart
--   [x] Async-load required modules automatically
+-   [x] **Tree shaking** supported based on ECMAScript 6+ modules
+
+## Versions
+
+| SemVer |  branch  |    status    | component API  |
+| :----: | :------: | :----------: | :------------: |
+| `>=1`  |  `main`  | ✅developing | Web components |
+|  `<1`  | `master` | ❌deprecated |     React      |
 
 ## Quick start
 
 ### 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 echarts-jsx react react-dom
+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][8]
+Origin: [ECharts official example][9]
 
-[![Edit ECharts-JSX-demo](https://codesandbox.io/static/img/play-codesandbox.svg)][9]
+[![Edit ECharts-JSX-1.0-demo](https://codesandbox.io/static/img/play-codesandbox.svg)][10]
 
 ```tsx
 import { render } from 'react-dom';
-import {
-    CanvasCharts,
-    Title,
-    Legend,
-    Tooltip,
-    XAxis,
-    YAxis,
-    BarSeries
-} from 'echarts-jsx';
+import 'echarts-jsx';
 
 render(
-    <CanvasCharts theme="dark">
-        <Title>ECharts Getting Started Example</Title>
+    <ec-svg-renderer theme="dark" style={{ width: '100%', height: '75vh' }}>
+        <ec-title text="ECharts Getting Started Example" />
 
-        <Legend data={['sales']} />
+        <ec-legend data={['sales']} />
 
-        <Tooltip />
+        <ec-tooltip />
 
-        <XAxis
+        <ec-x-axis
             data={[
                 'Shirts',
                 'Cardigans',
@@ -73,14 +86,14 @@ render(
                 'Socks'
             ]}
         />
-        <YAxis />
+        <ec-y-axis />
 
-        <BarSeries
+        <ec-bar-chart
             name="sales"
             data={[5, 20, 36, 10, 10, 20]}
             onClick={console.log}
         />
-    </CanvasCharts>,
+    </ec-svg-renderer>,
     document.body
 );
 ```
@@ -99,9 +112,10 @@ render(
 [1]: https://facebook.github.io/jsx/
 [2]: https://echarts.apache.org/
 [3]: https://www.typescriptlang.org/
-[4]: https://libraries.io/npm/echarts-jsx
-[5]: https://github.com/idea2app/ECharts-JSX/actions/workflows/main.yml
-[6]: https://github.com/ecomfe/awesome-echarts
-[7]: https://nodei.co/npm/echarts-jsx/
-[8]: https://echarts.apache.org/handbook/en/get-started/
-[9]: https://codesandbox.io/s/echarts-jsx-demo-bouwsf?autoresize=1&fontsize=14&module=%2Fsrc%2FBar.tsx&theme=dark
+[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
+[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,16 +1,18 @@
 {
     "name": "echarts-jsx",
-    "version": "0.5.4",
+    "version": "1.0.0",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
-    "description": "A real JSX wrapper for ECharts based on TypeScript",
+    "description": "A real JSX wrapper for ECharts based on TypeScript & Web components",
     "keywords": [
         "jsx",
         "tsx",
         "wrapper",
         "echarts",
         "chart",
-        "typescript"
+        "typescript",
+        "web-components",
+        "custom-elements"
     ],
     "homepage": "https://idea2app.github.io/ECharts-JSX/",
     "repository": {
@@ -25,25 +27,28 @@
     "module": "dist/index.js",
     "main": "dist/index.umd.js",
     "dependencies": {
-        "echarts": "^5.4.3",
+        "dom-renderer": "^2.1.4",
+        "echarts": ">=5",
+        "iterable-observer": "^1.0.1",
         "lodash": "^4.17.21",
-        "web-utility": "^4.1.3"
+        "web-utility": "^4.3.0"
     },
     "peerDependencies": {
-        "react": ">=16"
+        "@webcomponents/webcomponentsjs": "^2.8"
     },
     "devDependencies": {
-        "@types/lodash": "^4.14.200",
-        "@types/react": "^18.2.34",
-        "husky": "^8.0.3",
-        "lint-staged": "^15.0.2",
+        "@types/lodash": "^4.17.0",
+        "buffer": "^6.0.3",
+        "husky": "^9.0.11",
+        "lint-staged": "^15.2.2",
         "microbundle": "^0.15.1",
-        "open-cli": "^7.2.0",
-        "prettier": "^3.0.3",
-        "react": "^18.2.0",
-        "typedoc": "^0.25.3",
-        "typedoc-plugin-mdn-links": "^3.1.0",
-        "typescript": "~5.2.2"
+        "open-cli": "^8.0.0",
+        "parcel": "~2.12.0",
+        "prettier": "^3.2.5",
+        "rimraf": "^5.0.5",
+        "typedoc": "^0.25.12",
+        "typedoc-plugin-mdn-links": "^3.1.19",
+        "typescript": "~5.4.4"
     },
     "prettier": {
         "singleQuote": true,
@@ -56,11 +61,14 @@
     },
     "browserslist": "> 0.5%, last 2 versions, not dead, IE 11",
     "scripts": {
-        "prepare": "husky install",
+        "prepare": "husky",
         "test": "lint-staged",
-        "pack-dist": "rm -rf dist/  &&  microbundle --name EChartsJSX --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx,echarts/core=echarts,web-utility=WebUtility",
+        "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/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",
+        "build": "npm run pack-dist  &&  npm run pack-docs  &&  npm run pack-preview",
         "start": "npm run pack-docs  &&  open-cli docs/index.html",
         "prepublishOnly": "npm test  &&  npm run build"
     }