docs: update version, deps and docs for 8.0 beta (#849)

* chore: up version and deps

* chore: use pnpm CLI to get versions

* add note for echarts 6 upgrade guide

* remove docs script

let cdn to redirect for us

* Revert "remove docs script"

This reverts commit 3bc237db9100864f2813249ac1693735a658e646.

* update demo links

.github/ISSUE_TEMPLATE.md

@@ -1,36 +0,0 @@
-> ## Help / 帮助
->
-> Replace the `[ ]` with `[x]` to check an option. / 将 `[ ]` 替换为 `[x]` 以选择对应选项。
-
-## The type of this issue / Issue 类型
-
-- [ ] Feature request / 新特性需求
-- [ ] Bug report / Bug 报告
-
-## Not introduced by ECharts / 非 ECharts 本身问题
-
-Problems about ECharts itself are not handled in this repo. / 本 repo 不负责处理 ECharts 本身的问题。
-
-- [ ] I've checked it's not a problem of ECharts itself. / 我已检查过，这个问题非 ECharts 本身的问题。
-
-## Details / 详情
-
-### Vue version / Vue 版本
-
-- [ ] Vue 3
-- [ ] Vue 2
-
-### How are you importing Vue-ECharts? / 你是如何引入 Vue-ECharts 的？
-
-- [ ] Importing `vue-echarts` with a bundler environment / 在 webpack 等打包工具环境下引入 `vue-echarts`
-- [ ] Using the global variable by including `<script>` tags / 通过 `<script>` 标签引入全局变量
-
-### The version of Vue-ECharts you are using / Vue-ECharts 的版本
-
-> eg. 6.0.0-beta.5
-
-## Reproduction link / 复现链接
-
-**For bug reports, please provide the steps to reproduce and if possible a minimal demo of the problem. Please paste the link to your CodeSandbox demo below: ([Vue 3 template](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue) / [Vue 2 template](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue))**
-
-**对于 Bug 报告，请在下面提供复现的步骤，最好是最小化的能够重现问题的 demo。请在下方贴入在 CodeSandbox 上 demo 的链接：（[Vue 3 模板](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue) / [Vue 2 模板](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue)）**

.github/ISSUE_TEMPLATE/bug-report.en-US.yml

@@ -41,6 +41,6 @@ body:
     id: repro
     attributes:
       label: Reproduction
-      description: "A link to a boiled-down reproduction (a minimal but runnable demo with unnecessary dependencies pruned). If the issue isn't reproducible within an online playground, please create a GitHub repo to reflect the problem. Please paste the link to your CodeSandbox demo or GitHub repo below: ([Vue 3 template](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue) / [Vue 2 template](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue))"
+      description: "A link to a boiled-down reproduction (a minimal but runnable demo with unnecessary dependencies pruned). If the issue isn't reproducible within an online playground, please create a GitHub repo to reflect the problem. Please paste the link to your [StackBlitz demo](https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue) or GitHub repo below:"
     validations:
       required: true

.github/ISSUE_TEMPLATE/bug-report.zh-Hans.yml

@@ -41,6 +41,6 @@ body:
     id: repro
     attributes:
       label: 问题复现
-      description: "请提供一个精炼的问题复现（去除无关依赖的最小化可运行 demo）。如果在线环境无法复现，可以创建对应的 GitHub repo 来提供复现环境。请在下方贴入在 CodeSandbox 上 demo 的链接或 GitHub repo 链接：（[Vue 3 模板](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue) / [Vue 2 模板](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue)）"
+      description: "请提供一个精炼的问题复现（去除无关依赖的最小化可运行 demo）。如果在线环境无法复现，可以创建对应的 GitHub repo 来提供复现环境。请在下方贴入 [StackBlitz demo](https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue) 的链接或 GitHub repo 链接："
     validations:
       required: true

CHANGELOG.md

@@ -1,3 +1,24 @@
+## 8.0.0-beta.1
+
+### Breaking changes
+
+- Updated peer dependency for `echarts` to `^6.0.0`.
+- Updated peer dependency for `vue` to `^3.3.0`.
+- Dropped support for browsers without native `class` support.
+- Removed `vue-echarts/csp` entry. Use `vue-echarts` instead. Only manually include `vue-echarts/style.css` if you are **both** enforcing a strict CSP that prevents inline `<style>` injection and targeting browsers that don't support the [`CSSStyleSheet()` constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility).
+
+### New features
+
+- ECharts 6 support.
+- Added slots for tooltip and data view.
+- Added support for getter in provide/inject.
+
+### Chore
+
+- Built with tsdown.
+- Switched Demo from Webpack to Rolldown-Vite.
+- Use ESLint flat config.
+
 ## 7.0.3
 
 - Fixed type for `autoresize` (again).

README.md

@@ -6,20 +6,20 @@
 
 ---
 
-> Still using v6? Read v6 docs [here →](https://github.com/ecomfe/vue-echarts/tree/6.x)
+> Still using Vue 2? Read v7 docs [here →](https://github.com/ecomfe/vue-echarts/tree/7.x)
 
 ## Installation & Usage
 
 ### npm
 
 ```sh
-npm add echarts vue-echarts
+npm install echarts vue-echarts
 ```
 
 #### Example
 
 <details>
-<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
+<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue">Demo →</a></summary>
 
 ```vue
 <template>
@@ -114,14 +114,14 @@ import "echarts";
 Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
 
 <details>
-<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
+<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-8-global?file=index.html">Demo →</a></summary>
 
 <!-- vue3Scripts:start -->
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0-beta.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5.18"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.0.0-beta.1"></script>
 ```
 
 <!-- vue3Scripts:end -->
@@ -413,9 +413,18 @@ Static methods can be accessed from [`echarts` itself](https://echarts.apache.or
 
 If you are **both** enforcing a strict CSP that prevents inline `<style>` injection and targeting browsers that don't support the [CSSStyleSheet() constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility), you need to manually include `vue-echarts/style.css`.
 
-## Migration to v7
+## Migration to v8
 
-Read the breaking changes document in the [release log](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0) and the migration shoud be straightforward.
+> [!NOTE]
+> Please make sure to read the [upgrade guide](https://echarts.apache.org/handbook/en/basics/release-note/v6-upgrade-guide/) for ECharts 6 as well.
+
+The following breaking changes are introduced in `vue-echarts@8`:
+
+- **Vue 2 support is dropped:** If you still need to stay on Vue 2, use [`vue-echarts@7`](https://github.com/ecomfe/vue-echarts/tree/7.x).
+
+- **Browser compatibility changes:** We no longer provide compatibility for browsers without native [`class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#browser_compatibility) support. If you need to support legacy browsers, you must transpile the code to ES5 yourself.
+
+- **CSP entry point removed:** The entry point `vue-echarts/csp` is removed. Use `vue-echarts` instead. You only need to manually include `vue-echarts/style.css` if you are **both** enforcing a strict CSP that prevents inline `<style>` injection and targeting browsers that don't support the [`CSSStyleSheet()` constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility).
 
 ## Local development
 

README.zh-Hans.md

@@ -6,20 +6,20 @@
 
 ---
 
-> 还在使用 v6？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/6.x/README.zh-Hans.md)
+> 还在使用 Vue 2？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/7.x/README.zh-Hans.md)
 
 ## 安装 & 使用
 
 ### npm
 
 ```sh
-npm add echarts vue-echarts
+npm install echarts vue-echarts
 ```
 
 #### 示例
 
 <details>
-<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
+<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue">Demo →</a></summary>
 
 ```vue
 <template>
@@ -114,14 +114,14 @@ import "echarts";
 用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：
 
 <details>
-<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
+<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-8-global?file=index.html">Demo →</a></summary>
 
 <!-- vue3Scripts:start -->
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0-beta.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5.18"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.0.0-beta.1"></script>
 ```
 
 <!-- vue3Scripts:end -->
@@ -270,11 +270,11 @@ import { provide } from "vue";
 
 provide(THEME_KEY, "dark");
 
-// or provide a ref
+// 或者 provide 一个 ref
 const theme = ref("dark");
 provide(THEME_KEY, theme);
 
-// getter is also supported
+// 也支持 getter
 provide(THEME_KEY, () => theme.value);
 ```
 
@@ -295,7 +295,7 @@ export default {
   }
 }
 
-// Or make injections reactive
+// 或者让注入项具有响应性
 export default {
   data() {
     return {
@@ -413,9 +413,18 @@ Vue-ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.f
 
 如果你执行严格的 CSP 策略来防止内联 `<style>` 注入，**并且**需要兼容不支持 [CSSStyleSheet() 构造函数](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility) 的浏览器，则需要手动引入 `vue-echarts/style.css`。
 
-## 迁移到 v7
+## 迁移到 v8
 
-请阅读[发布日志](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0)中的变更记录，之后迁移过程应该会相对简单。
+> [!NOTE]
+> 请确保同时查阅 [ECharts 6 的升级指南](https://echarts.apache.org/handbook/zh/basics/release-note/v6-upgrade-guide/)。
+
+`vue-echarts@8` 引入了以下破坏性变更：
+
+- **Vue 2 支持已移除：** 如果你仍需要继续使用 Vue 2，请使用 [`vue-echarts@7`](https://github.com/ecomfe/vue-echarts/tree/7.x)。
+
+- **浏览器兼容性变更：** 我们不再为不支持原生 [`class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#browser_compatibility) 的浏览器提供兼容性支持。如果你需要支持旧版浏览器，必须自行将代码转译为 ES5。
+
+- **CSP 入口点已移除：** 入口点 `vue-echarts/csp` 已被移除。请使用 `vue-echarts` 替代。如果你执行严格的 CSP 策略来防止内联 `<style>` 注入，**并且**需要兼容不支持 [`CSSStyleSheet()` 构造函数](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility) 的浏览器，则需要手动引入 `vue-echarts/style.css`。
 
 ## 本地开发
 

demo/Demo.vue

@@ -151,13 +151,6 @@ a {
   }
 }
 
-h1,
-h2,
-h3 {
-  color: #2c3e50;
-  font-weight: 400;
-}
-
 h1 {
   margin-bottom: 1em;
   font-family: Inter, "Helvetica Neue", Arial, sans-serif;
@@ -260,6 +253,8 @@ footer {
 h1,
 h2,
 h3 {
+  color: #2c3e50;
+  font-weight: 400;
   a,
   a:hover {
     text-decoration: none;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "7.0.3",
+  "version": "8.0.0-beta.1",
   "description": "Vue.js component for Apache ECharts™.",
   "license": "MIT",
   "repository": {
@@ -18,7 +18,7 @@
     "dev:build": "vite build",
     "dev:preview": "vite preview",
     "dev:typecheck": "vue-tsc -p ./demo",
-    "docs": "node ./scripts/docs.mjs",
+    "docs": "jiti ./scripts/docs.ts",
     "prepublishOnly": "pnpm run typecheck && pnpm run dev:typecheck && pnpm run build && publint"
   },
   "packageManager": "pnpm@10.14.0",
@@ -35,37 +35,44 @@
     "dist"
   ],
   "peerDependencies": {
-    "echarts": "^6.0.0-beta.1",
+    "echarts": "^6.0.0",
     "vue": "^3.3.0"
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@types/node": "^22.15.21",
+    "@types/node": "^22.17.0",
-    "@typescript-eslint/utils": "^8.32.1",
+    "@typescript-eslint/utils": "^8.39.0",
-    "@vercel/analytics": "^1.3.1",
+    "@vercel/analytics": "^1.5.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/tsconfig": "^0.7.0",
-    "@vueuse/core": "^13.1.0",
+    "@vueuse/core": "^13.6.0",
     "comment-mark": "^2.0.1",
-    "echarts": "^6.0.0-beta.1",
+    "echarts": "^6.0.0",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
-    "esbuild-wasm": "^0.23.0",
+    "esbuild-wasm": "^0.25.8",
-    "eslint": "^9.27.0",
+    "eslint": "^9.32.0",
-    "eslint-plugin-vue": "^10.1.0",
+    "eslint-plugin-vue": "^10.4.0",
-    "highlight.js": "^11.10.0",
+    "highlight.js": "^11.11.1",
-    "jiti": "^2.4.2",
+    "jiti": "^2.5.1",
-    "pinia": "^3.0.2",
+    "pinia": "^3.0.3",
     "postcss-nested": "^7.0.2",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "publint": "^0.3.12",
-    "tsdown": "^0.13.2",
+    "tsdown": "^0.13.3",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
-    "unplugin-raw": "^0.5.0",
+    "unplugin-raw": "^0.5.1",
-    "vite": "npm:rolldown-vite@latest",
+    "vite": "npm:rolldown-vite@^7.1.0",
-    "vue": "^3.5.13",
+    "vue": "^3.5.18",
     "vue-tsc": "^3.0.5"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "echarts": "6"
+      }
+    }
   }
 }

scripts/docs.ts

@@ -1,28 +1,34 @@
 import { readFileSync, writeFileSync } from "node:fs";
 import { commentMark } from "comment-mark";
-import { getPackageMeta, resolvePath } from "./utils.mjs";
+import { getPackageVersions, resolvePath } from "./utils";
 
-const { name, version } = getPackageMeta();
+const { name, version, devDependencies } = getPackageVersions([
+  "echarts",
+  "vue",
+]);
 
 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
 
 const DEP_VERSIONS = {
-  vue: "3.5.13",
+  ...Object.fromEntries(
-  echarts: "6.0.0-beta.1",
+    Object.entries(devDependencies).map(([name, { version }]) => [
+      name,
+      version,
+    ]),
+  ),
   [name]: version,
 };
 
 function getScripts() {
-  const deps = ["vue", "echarts", name];
+  return Object.entries(DEP_VERSIONS)
-  return deps
+    .map(([dep, version]) => {
-    .map((dep) => {
       const [, name] = dep.match(/^(.+?)(?:@.+)?$/) || [];
-      return `<script src="${CDN_PREFIX}${name}@${DEP_VERSIONS[dep]}"></script>`;
+      return `<script src="${CDN_PREFIX}${name}@${version}"></script>`;
     })
     .join("\n");
 }
 
-function getCodeBlock(code) {
+function getCodeBlock(code: string) {
   return "\n```html\n" + code + "\n```\n";
 }
 

scripts/utils.mjs

@@ -1,13 +0,0 @@
-import { readFileSync } from "node:fs";
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
-export function resolvePath(url, ...parts) {
-  return resolve(dirname(fileURLToPath(url)), ...parts);
-}
-
-export function getPackageMeta() {
-  return JSON.parse(
-    readFileSync(resolvePath(import.meta.url, "../package.json"), "utf8"),
-  );
-}

scripts/utils.ts

@@ -0,0 +1,20 @@
+import { execSync } from "node:child_process";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export function resolvePath(url: string, ...parts: string[]) {
+  return resolve(dirname(fileURLToPath(url)), ...parts);
+}
+
+type PackageVersions = {
+  name: string;
+  version: string;
+  devDependencies: Record<string, { version: string }>;
+};
+
+export function getPackageVersions(devDeps?: string[]): PackageVersions {
+  const stdOut = execSync(`pnpm ls ${devDeps?.join(" ") || ""} --json`, {
+    encoding: "utf-8",
+  });
+  return JSON.parse(stdOut)[0];
+}

tsconfig.node.json

@@ -1,5 +1,5 @@
 {
-  "include": ["*.config.*"],
+  "include": ["*.config.*", "scripts/**/*"],
   "compilerOptions": {
     "composite": true,
     "lib": ["ESNext"],