From eecc4e94056967a2e0d4584874bfa82d9dd7d251 Mon Sep 17 00:00:00 2001
From: Yue JIN <40021217+kingyue737@users.noreply.github.com>
Date: Sun, 25 May 2025 00:24:38 +0800
Subject: [PATCH] build: migrate demo from webpack to Vite (#832)
---
.browserslistrc | 3 -
.gitignore | 2 +-
.npmrc | 1 -
.stackblitzrc | 4 -
README.md | 6 +-
README.zh-Hans.md | 6 +-
babel.config.json | 3 -
{src/demo => demo}/CodeGen.vue | 4 +-
{src/demo => demo}/Demo.vue | 24 +-
{src/demo => demo}/assets/Vue-ECharts.svg | 6 +-
{src/demo => demo}/assets/starfield.jpg | Bin
{src/demo => demo}/assets/world.jpg | Bin
{src/demo => demo}/china.json | 0
{src/demo => demo}/data/bar.js | 0
{src/demo => demo}/data/connect.js | 0
{src/demo => demo}/data/flight.json | 0
{src/demo => demo}/data/logo.js | 2 +-
{src/demo => demo}/data/map.js | 0
{src/demo => demo}/data/pie.js | 0
{src/demo => demo}/data/polar.js | 0
{src/demo => demo}/data/population.json | 0
{src/demo => demo}/data/radar.ts | 0
{src/demo => demo}/data/scatter.js | 0
{src/demo => demo}/examples/BarChart.vue | 4 +-
{src/demo => demo}/examples/ConnectChart.vue | 4 +-
{src/demo => demo}/examples/Example.vue | 2 -
{src/demo => demo}/examples/GeoChart.vue | 4 +-
{src/demo => demo}/examples/GlChart.vue | 4 +-
{src/demo => demo}/examples/LogoChart.vue | 2 +-
{src/demo => demo}/examples/ManualChart.vue | 4 +-
{src/demo => demo}/examples/PieChart.vue | 12 +-
{src/demo => demo}/examples/PolarChart.vue | 4 +-
{src/demo => demo}/examples/RadarChart.vue | 4 +-
{src/demo => demo}/examples/ScatterChart.vue | 4 +-
demo/index.html | 18 +
{src/demo => demo}/main.ts | 0
{public => demo/public}/favicon.ico | Bin
shims-vue.d.ts => demo/shims-vue.d.ts | 0
{src/demo => demo}/theme.json | 0
demo/tsconfig.json | 7 +
{src/demo => demo}/utils/LICENSE | 0
{src/demo => demo}/utils/codegen.js | 0
{src/demo => demo}/world.json | 0
package.json | 41 +-
pnpm-lock.yaml | 7851 ++----------------
public/index.html | 18 -
src/demo/jsconfig.json | 6 -
tsconfig.json | 22 +-
tsconfig.node.json | 18 +
vercel.json | 5 +
vite.config.ts | 17 +
vue.config.js | 41 -
52 files changed, 745 insertions(+), 7408 deletions(-)
delete mode 100644 .browserslistrc
delete mode 100644 .npmrc
delete mode 100644 .stackblitzrc
delete mode 100644 babel.config.json
rename {src/demo => demo}/CodeGen.vue (99%)
rename {src/demo => demo}/Demo.vue (92%)
rename {src/demo => demo}/assets/Vue-ECharts.svg (99%)
rename {src/demo => demo}/assets/starfield.jpg (100%)
rename {src/demo => demo}/assets/world.jpg (100%)
rename {src/demo => demo}/china.json (100%)
rename {src/demo => demo}/data/bar.js (100%)
rename {src/demo => demo}/data/connect.js (100%)
rename {src/demo => demo}/data/flight.json (100%)
rename {src/demo => demo}/data/logo.js (92%)
rename {src/demo => demo}/data/map.js (100%)
rename {src/demo => demo}/data/pie.js (100%)
rename {src/demo => demo}/data/polar.js (100%)
rename {src/demo => demo}/data/population.json (100%)
rename {src/demo => demo}/data/radar.ts (100%)
rename {src/demo => demo}/data/scatter.js (100%)
rename {src/demo => demo}/examples/BarChart.vue (95%)
rename {src/demo => demo}/examples/ConnectChart.vue (93%)
rename {src/demo => demo}/examples/Example.vue (97%)
rename {src/demo => demo}/examples/GeoChart.vue (94%)
rename {src/demo => demo}/examples/GlChart.vue (96%)
rename {src/demo => demo}/examples/LogoChart.vue (87%)
rename {src/demo => demo}/examples/ManualChart.vue (97%)
rename {src/demo => demo}/examples/PieChart.vue (88%)
rename {src/demo => demo}/examples/PolarChart.vue (95%)
rename {src/demo => demo}/examples/RadarChart.vue (94%)
rename {src/demo => demo}/examples/ScatterChart.vue (87%)
create mode 100644 demo/index.html
rename {src/demo => demo}/main.ts (100%)
rename {public => demo/public}/favicon.ico (100%)
rename shims-vue.d.ts => demo/shims-vue.d.ts (100%)
rename {src/demo => demo}/theme.json (100%)
create mode 100644 demo/tsconfig.json
rename {src/demo => demo}/utils/LICENSE (100%)
rename {src/demo => demo}/utils/codegen.js (100%)
rename {src/demo => demo}/world.json (100%)
delete mode 100644 public/index.html
delete mode 100644 src/demo/jsconfig.json
create mode 100644 tsconfig.node.json
create mode 100644 vercel.json
create mode 100644 vite.config.ts
delete mode 100644 vue.config.js
diff --git a/.browserslistrc b/.browserslistrc
deleted file mode 100644
index 214388f..0000000
--- a/.browserslistrc
+++ /dev/null
@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead
diff --git a/.gitignore b/.gitignore
index c4bfc3b..fb7a648 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,4 @@ pnpm-debug.log*
*.sln
*.sw?
-/demo
+/demo/dist
diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index aff8a32..0000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-strict-peer-dependencies = false
diff --git a/.stackblitzrc b/.stackblitzrc
deleted file mode 100644
index 3139644..0000000
--- a/.stackblitzrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "installDependencies": true,
- "startCommand": "pnpm serve"
-}
diff --git a/README.md b/README.md
index 6602b7c..3658839 100644
--- a/README.md
+++ b/README.md
@@ -133,7 +133,7 @@ app.component('v-chart', VueECharts)
-See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/src/demo).
+See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).
### Props
@@ -345,10 +345,10 @@ Read the breaking changes document in the [release log](https://github.com/ecomf
```sh
pnpm i
-pnpm serve
+pnpm dev
```
-Open `http://localhost:8080` to see the demo.
+Open `http://localhost:5173` to see the demo.
## Notice
diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index b77d4a8..f2aca66 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -133,7 +133,7 @@ app.component('v-chart', VueECharts)
-可以在[这里](https://github.com/ecomfe/vue-echarts/tree/main/src/demo)查看更多例子。
+可以在[这里](https://github.com/ecomfe/vue-echarts/tree/main/demo)查看更多例子。
### Prop
@@ -350,10 +350,10 @@ Read the breaking changes document in the [release log](https://github.com/ecomf
```sh
pnpm i
-pnpm serve
+pnpm dev
```
-打开 `http://localhost:8080` 来查看 demo。
+打开 `http://localhost:5173` 来查看 demo。
## 声明
diff --git a/babel.config.json b/babel.config.json
deleted file mode 100644
index 7895cad..0000000
--- a/babel.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "presets": ["@vue/cli-plugin-babel/preset"]
-}
diff --git a/src/demo/CodeGen.vue b/demo/CodeGen.vue
similarity index 99%
rename from src/demo/CodeGen.vue
rename to demo/CodeGen.vue
index 0fcd0d4..579b090 100644
--- a/src/demo/CodeGen.vue
+++ b/demo/CodeGen.vue
@@ -4,8 +4,6 @@ import {
computed,
watch,
onBeforeUnmount,
- defineProps,
- defineEmits,
onMounted,
nextTick
} from "vue";
@@ -16,7 +14,7 @@ import javascript from "highlight.js/lib/languages/javascript";
import typescript from "highlight.js/lib/languages/typescript";
import hljsVuePlugin from "@highlightjs/vue-plugin";
import { initialize, transform } from "esbuild-wasm";
-import wasmURL from "esbuild-wasm/esbuild.wasm";
+import wasmURL from "esbuild-wasm/esbuild.wasm?url";
import { track } from "@vercel/analytics";
import { getImportsFromOption } from "./utils/codegen";
diff --git a/src/demo/Demo.vue b/demo/Demo.vue
similarity index 92%
rename from src/demo/Demo.vue
rename to demo/Demo.vue
index 375be23..65202b9 100644
--- a/src/demo/Demo.vue
+++ b/demo/Demo.vue
@@ -3,21 +3,21 @@ import { provide, computed, ref, watch } from "vue";
import { useUrlSearchParams } from "@vueuse/core";
import { use } from "echarts/core";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
-import { INIT_OPTIONS_KEY } from "../ECharts";
+import { INIT_OPTIONS_KEY } from "../src/ECharts";
import { track } from "@vercel/analytics";
-import LogoChart from "./examples/LogoChart";
-import BarChart from "./examples/BarChart";
-import PieChart from "./examples/PieChart";
-import PolarChart from "./examples/PolarChart";
-import ScatterChart from "./examples/ScatterChart";
-import GeoChart from "./examples/GeoChart";
-import RadarChart from "./examples/RadarChart";
-import ConnectChart from "./examples/ConnectChart";
-import GlChart from "./examples/GlChart";
-import ManualChart from "./examples/ManualChart";
+import LogoChart from "./examples/LogoChart.vue";
+import BarChart from "./examples/BarChart.vue";
+import PieChart from "./examples/PieChart.vue";
+import PolarChart from "./examples/PolarChart.vue";
+import ScatterChart from "./examples/ScatterChart.vue";
+import GeoChart from "./examples/GeoChart.vue";
+import RadarChart from "./examples/RadarChart.vue";
+import ConnectChart from "./examples/ConnectChart.vue";
+import GlChart from "./examples/GlChart.vue";
+import ManualChart from "./examples/ManualChart.vue";
-import CodeGen from "./CodeGen";
+import CodeGen from "./CodeGen.vue";
use([CanvasRenderer, SVGRenderer]);
diff --git a/src/demo/assets/Vue-ECharts.svg b/demo/assets/Vue-ECharts.svg
similarity index 99%
rename from src/demo/assets/Vue-ECharts.svg
rename to demo/assets/Vue-ECharts.svg
index c8c2e4a..f5de0c5 100644
--- a/src/demo/assets/Vue-ECharts.svg
+++ b/demo/assets/Vue-ECharts.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/src/demo/assets/starfield.jpg b/demo/assets/starfield.jpg
similarity index 100%
rename from src/demo/assets/starfield.jpg
rename to demo/assets/starfield.jpg
diff --git a/src/demo/assets/world.jpg b/demo/assets/world.jpg
similarity index 100%
rename from src/demo/assets/world.jpg
rename to demo/assets/world.jpg
diff --git a/src/demo/china.json b/demo/china.json
similarity index 100%
rename from src/demo/china.json
rename to demo/china.json
diff --git a/src/demo/data/bar.js b/demo/data/bar.js
similarity index 100%
rename from src/demo/data/bar.js
rename to demo/data/bar.js
diff --git a/src/demo/data/connect.js b/demo/data/connect.js
similarity index 100%
rename from src/demo/data/connect.js
rename to demo/data/connect.js
diff --git a/src/demo/data/flight.json b/demo/data/flight.json
similarity index 100%
rename from src/demo/data/flight.json
rename to demo/data/flight.json
diff --git a/src/demo/data/logo.js b/demo/data/logo.js
similarity index 92%
rename from src/demo/data/logo.js
rename to demo/data/logo.js
index 8ef1404..9a86238 100644
--- a/src/demo/data/logo.js
+++ b/demo/data/logo.js
@@ -1,4 +1,4 @@
-import logo from "../assets/Vue-ECharts.svg";
+import logo from "../assets/Vue-ECharts.svg?raw";
const d = logo.match(/\bd="([^"]+)"/)[1];
diff --git a/src/demo/data/map.js b/demo/data/map.js
similarity index 100%
rename from src/demo/data/map.js
rename to demo/data/map.js
diff --git a/src/demo/data/pie.js b/demo/data/pie.js
similarity index 100%
rename from src/demo/data/pie.js
rename to demo/data/pie.js
diff --git a/src/demo/data/polar.js b/demo/data/polar.js
similarity index 100%
rename from src/demo/data/polar.js
rename to demo/data/polar.js
diff --git a/src/demo/data/population.json b/demo/data/population.json
similarity index 100%
rename from src/demo/data/population.json
rename to demo/data/population.json
diff --git a/src/demo/data/radar.ts b/demo/data/radar.ts
similarity index 100%
rename from src/demo/data/radar.ts
rename to demo/data/radar.ts
diff --git a/src/demo/data/scatter.js b/demo/data/scatter.js
similarity index 100%
rename from src/demo/data/scatter.js
rename to demo/data/scatter.js
diff --git a/src/demo/examples/BarChart.vue b/demo/examples/BarChart.vue
similarity index 95%
rename from src/demo/examples/BarChart.vue
rename to demo/examples/BarChart.vue
index 21198a1..87e7e8a 100644
--- a/src/demo/examples/BarChart.vue
+++ b/demo/examples/BarChart.vue
@@ -3,8 +3,8 @@ import { use, registerTheme } from "echarts/core";
import { BarChart } from "echarts/charts";
import { GridComponent, DatasetComponent } from "echarts/components";
import { shallowRef, onBeforeUnmount } from "vue";
-import VChart from "../../ECharts";
-import VExample from "./Example";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
import getData from "../data/bar";
import theme from "../theme.json";
diff --git a/src/demo/examples/ConnectChart.vue b/demo/examples/ConnectChart.vue
similarity index 93%
rename from src/demo/examples/ConnectChart.vue
rename to demo/examples/ConnectChart.vue
index 9a3f6fe..d92b667 100644
--- a/src/demo/examples/ConnectChart.vue
+++ b/demo/examples/ConnectChart.vue
@@ -8,8 +8,8 @@ import {
TooltipComponent
} from "echarts/components";
import { shallowRef, watch } from "vue";
-import VChart from "../../ECharts";
-import VExample from "./Example";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
import getData from "../data/connect";
use([
diff --git a/src/demo/examples/Example.vue b/demo/examples/Example.vue
similarity index 97%
rename from src/demo/examples/Example.vue
rename to demo/examples/Example.vue
index 232a44a..9109655 100644
--- a/src/demo/examples/Example.vue
+++ b/demo/examples/Example.vue
@@ -22,8 +22,6 @@
+