build: migrate demo from webpack to Vite (#832)

.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead

.gitignore

@@ -22,4 +22,4 @@ pnpm-debug.log*
 *.sln
 *.sw?
 
-/demo
+/demo/dist

.npmrc

@@ -1 +0,0 @@
-strict-peer-dependencies = false

.stackblitzrc

@@ -1,4 +0,0 @@
-{
-  "installDependencies": true,
-  "startCommand": "pnpm serve"
-}

README.md

@@ -133,7 +133,7 @@ app.component('v-chart', VueECharts)
 
 </details>
 
-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
 
@@ -346,10 +346,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
 

README.zh-Hans.md

@@ -133,7 +133,7 @@ app.component('v-chart', VueECharts)
 
 </details>
 
-可以在[这里](https://github.com/ecomfe/vue-echarts/tree/main/src/demo)查看更多例子。
+可以在[这里](https://github.com/ecomfe/vue-echarts/tree/main/demo)查看更多例子。
 
 ### Prop
 
@@ -348,10 +348,10 @@ export default {
 
 ```sh
 pnpm i
-pnpm serve
+pnpm dev
 ```
 
-打开 `http://localhost:8080` 来查看 demo。
+打开 `http://localhost:5173` 来查看 demo。
 
 ## 声明
 

babel.config.json

@@ -1,3 +0,0 @@
-{
-  "presets": ["@vue/cli-plugin-babel/preset"]
-}

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";

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]);
 

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];
 

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";
 

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([

demo/examples/Example.vue

@@ -22,8 +22,6 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
-
 defineProps({
   id: {
     type: String,

demo/examples/GeoChart.vue

@@ -8,8 +8,8 @@ import {
   TooltipComponent
 } from "echarts/components";
 import { shallowRef } from "vue";
-import VChart from "../../ECharts";
-import VExample from "./Example";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
 import getData from "../data/map";
 import chinaMap from "../china.json";
 

demo/examples/GlChart.vue

@@ -4,8 +4,8 @@ import { Bar3DChart } from "echarts-gl/charts";
 import { VisualMapComponent } from "echarts/components";
 import { GlobeComponent } from "echarts-gl/components";
 import { shallowRef, onMounted } from "vue";
-import VChart from "../../ECharts";
-import VExample from "./Example";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
 import world from "../assets/world.jpg";
 import starfield from "../assets/starfield.jpg";
 

demo/examples/LogoChart.vue

@@ -2,7 +2,7 @@
 import { registerTheme } from "echarts/core";
 
 import "echarts-liquidfill";
-import VChart from "../../ECharts";
+import VChart from "../../src/ECharts";
 import theme from "../theme.json";
 import logo from "../data/logo";
 

demo/examples/ManualChart.vue

@@ -7,8 +7,8 @@ import {
   TooltipComponent
 } from "echarts/components";
 import { shallowRef } from "vue";
-import VChart from "../../ECharts";
-import VExample from "./Example";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
 import worldMap from "../world.json";
 
 use([LinesChart, GeoComponent, TitleComponent, TooltipComponent]);

demo/examples/PieChart.vue

@@ -7,9 +7,9 @@ import {
   LegendComponent,
   TooltipComponent
 } from "echarts/components";
-import { shallowRef, onMounted } from "vue";
-import VChart from "../../ECharts";
-import VExample from "./Example";
+import { shallowRef, onMounted, onUnmounted } from "vue";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
 import getData from "../data/pie";
 
 use([
@@ -27,10 +27,10 @@ let timer = null;
 
 onMounted(() => {
   startActions();
+});
 
-  return () => {
-    stopActions();
-  };
+onUnmounted(() => {
+  stopActions();
 });
 
 function startActions() {

demo/examples/PolarChart.vue

@@ -8,8 +8,8 @@ import {
   TooltipComponent
 } from "echarts/components";
 import { computed, shallowRef } from "vue";
-import VChart from "../../ECharts";
-import VExample from "./Example";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
 import getData from "../data/polar";
 
 use([

demo/examples/RadarChart.vue

@@ -7,8 +7,8 @@ import {
   TooltipComponent
 } from "echarts/components";
 import { shallowRef } from "vue";
-import VChart from "../../ECharts";
-import VExample from "./Example";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
 import { useScoreStore } from "../data/radar";
 
 use([RadarChart, PolarComponent, TitleComponent, TooltipComponent]);

demo/examples/ScatterChart.vue

@@ -7,8 +7,8 @@ import {
   LegendComponent
 } from "echarts/components";
 import { shallowRef } from "vue";
-import VChart from "../../ECharts";
-import VExample from "./Example";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
 import getData from "../data/scatter";
 
 use([ScatterChart, GridComponent, TitleComponent, LegendComponent]);

demo/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Inter:300,500;display=swap"
+      rel="stylesheet"
+    />
+    <title>Vue-ECharts: Vue.js component for Apache ECharts™.</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>

demo/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["./**/*", "./**/*.vue"],
+  "compilerOptions": {
+    "types": ["vite/client"]
+  }
+}

package.json

@@ -6,15 +6,18 @@
   "repository": "https://github.com/ecomfe/vue-echarts.git",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "pnpm run docs && rimraf dist && pnpm run build:rollup",
-    "build:rollup": "rollup -c rollup.config.js",
-    "lint": "vue-cli-service lint",
+    "dev": "vite",
+    "build": "pnpm run docs && rimraf dist && rollup -c",
+    "typecheck": "vue-tsc",
+    "lint": "eslint . --fix",
     "publint": "publint",
-    "build:demo": "vue-cli-service build",
+    "dev:build": "vite build",
+    "dev:preview": "vite preview",
+    "dev:typecheck": "vue-tsc -p ./demo",
     "docs": "node ./scripts/docs.mjs",
-    "prepublishOnly": "pnpm run build && publint"
+    "prepublishOnly": "pnpm run typecheck && pnpm run dev:typecheck && pnpm run build && publint"
   },
+  "packageManager": "pnpm@10.11.0",
   "type": "module",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
@@ -26,31 +29,25 @@
     "./csp/style.css": "./dist/csp/style.css"
   },
   "files": [
-    "dist",
-    "scripts/postinstall.js"
+    "dist"
   ],
   "peerDependencies": {
     "echarts": "^5.5.1",
     "vue": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
+    "@types/node": "^22.15.21",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
     "@vercel/analytics": "^1.3.1",
-    "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-plugin-typescript": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
-    "@vue/compiler-sfc": "^3.4.33",
+    "@vitejs/plugin-vue": "^5.2.4",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.7.0",
     "@vueuse/core": "^13.1.0",
     "comment-mark": "^1.1.1",
-    "core-js": "^3.37.1",
     "echarts": "^5.5.1",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
@@ -60,21 +57,17 @@
     "eslint-plugin-vue": "^9.27.0",
     "highlight.js": "^11.10.0",
     "pinia": "^3.0.2",
-    "postcss": "^8.4.39",
-    "postcss-loader": "^8.1.1",
-    "postcss-nested": "^6.2.0",
+    "postcss-nested": "^7.0.2",
     "prettier": "^3.3.3",
     "publint": "^0.2.9",
-    "raw-loader": "^4.0.2",
-    "resize-detector": "^0.3.0",
     "rimraf": "^6.0.1",
     "rollup": "^4.19.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-import-css": "^3.5.1",
-    "tslib": "^2.6.3",
-    "typescript": "5.5.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
     "vue": "^3.5.13",
-    "webpack": "^5.93.0"
+    "vue-tsc": "^2.2.10"
   }
 }

public/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link href="https://fonts.googleapis.com/css?family=Inter:300,500;display=swap" rel="stylesheet">
-    <title>Vue-ECharts: Vue.js component for Apache ECharts™.</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but Vue-ECharts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

src/demo/jsconfig.json

@@ -1,6 +0,0 @@
-{
-  "files": [
-    "./Demo.vue",
-    "./examples/RadarChart.vue"
-  ],
-}

tsconfig.json

@@ -1,27 +1,25 @@
 {
   "allowJs": true,
   "compilerOptions": {
-    "target": "ES5",
+    "target": "ESNext",
     "module": "ESNext",
     "strict": true,
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
     "removeComments": true,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
+    "noEmit": true,
     "baseUrl": ".",
     "lib": ["ESNext", "DOM", "DOM.Iterable", "ScriptHost"]
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "shims-vue.d.ts",
-    "src/demo/**/*.ts",
-    "src/demo/**/*.vue"
-  ],
-  "exclude": ["node_modules"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

tsconfig.node.json

@@ -0,0 +1,18 @@
+{
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "eslint.config.*",
+    "rollup.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "lib": ["ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

vercel.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "pnpm run dev:build",
+  "outputDirectory": "demo/dist"
+}

vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import postcssNested from "postcss-nested";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  root: "./demo",
+  server: {
+    host: true
+  },
+  css: {
+    postcss: {
+      plugins: [postcssNested()]
+    }
+  }
+});

vue.config.js

@@ -1,41 +0,0 @@
-import nested from "postcss-nested";
-
-export default {
-  outputDir: "demo",
-  css: {
-    loaderOptions: {
-      postcss: {
-        postcssOptions: {
-          plugins: [nested()]
-        }
-      }
-    }
-  },
-  chainWebpack: config => {
-    config.entry("app").clear().add("./src/demo/main.ts");
-
-    config.module
-      .rule("svg")
-      .clear()
-      .test(/\.svg$/)
-      .type("asset/source");
-
-    config.module
-      .rule("wasm")
-      .test(/\.wasm$/)
-      .type("asset/resource")
-      .set("generator", {
-        filename: "[name].[hash:8][ext]"
-      });
-
-    config.plugin("define").tap(([options]) => [
-      {
-        ...options,
-        __CSP__: "false"
-      }
-    ]);
-  },
-  devServer: {
-    allowedHosts: "all"
-  }
-};