chore: up version and deps

2025-08-16 21:09:37 +08:00 · 2025-08-05 12:37:17 +08:00
parent 8a2cc966e7
commit 5f939eeb56
9 changed files with 812 additions and 694 deletions
--- a/CHANGELOG.md
+++ b/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).
--- a/README.md
+++ b/README.md
@ -6,7 +6,7 @@

 ---

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

@ -119,9 +119,9 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 <!-- 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-beta.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5.18"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.0.0-beta.1"></script>
 ```

 <!-- vue3Scripts:end -->
@ -415,9 +415,15 @@ 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.
+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

--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@ -6,7 +6,7 @@

 ---

-> 还在使用 v6？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/6.x/README.zh_CN.md)
+> 还在使用 Vue 2？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/7.x/README.zh_CN.md)

 ## 安装 & 使用

@ -119,9 +119,9 @@ import "echarts";
 <!-- 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-beta.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5.18"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></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 {
@ -415,12 +415,15 @@ 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

-Translate:
-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.
+`vue-echarts@8` 引入了以下破坏性变更：

-请阅读[发布日志](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0)中的变更记录，之后迁移过程应该会相对简单。
+- **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`。

 ## 本地开发

--- a/demo/Demo.vue
+++ b/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;
--- a/package.json
+++ b/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": "node ./scripts/docs.js",
    "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",
-    "@typescript-eslint/utils": "^8.32.1",
-    "@vercel/analytics": "^1.3.1",
+    "@types/node": "^22.17.0",
+    "@typescript-eslint/utils": "^8.39.0",
+    "@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",
-    "eslint": "^9.27.0",
-    "eslint-plugin-vue": "^10.1.0",
-    "highlight.js": "^11.10.0",
-    "jiti": "^2.4.2",
-    "pinia": "^3.0.2",
+    "esbuild-wasm": "^0.25.8",
+    "eslint": "^9.32.0",
+    "eslint-plugin-vue": "^10.4.0",
+    "highlight.js": "^11.11.1",
+    "jiti": "^2.5.1",
+    "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",
-    "typescript": "^5.8.3",
-    "unplugin-raw": "^0.5.0",
-    "vite": "npm:rolldown-vite@latest",
-    "vue": "^3.5.13",
+    "tsdown": "^0.13.3",
+    "typescript": "^5.9.2",
+    "unplugin-raw": "^0.5.1",
+    "vite": "npm:rolldown-vite@7.1.0-beta.0",
+    "vue": "^3.5.18",
    "vue-tsc": "^3.0.5"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "echarts": "6"
+      }
+    }
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/scripts/docs.mjs
+++ b/scripts/docs.mjs
@ -1,23 +1,21 @@
 import { readFileSync, writeFileSync } from "node:fs";
 import { commentMark } from "comment-mark";
-import { getPackageMeta, resolvePath } from "./utils.mjs";
+import { getPackageMeta, resolvePath, getVersions } from "./utils.js";

-const { name, version } = getPackageMeta();
+const { name, version, devDependencies } = getPackageMeta();

 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";

 const DEP_VERSIONS = {
-  vue: "3.5.13",
-  echarts: "6.0.0-beta.1",
+  ...getVersions(["vue", "echarts"], devDependencies),
  [name]: version,
 };

 function getScripts() {
-  const deps = ["vue", "echarts", name];
-  return deps
-    .map((dep) => {
+  return Object.entries(DEP_VERSIONS)
+    .map(([dep, version]) => {
      const [, name] = dep.match(/^(.+?)(?:@.+)?$/) || [];
-      return `<script src="${CDN_PREFIX}${name}@${DEP_VERSIONS[dep]}"></script>`;
+      return `<script src="${CDN_PREFIX}${name}@${version}"></script>`;
    })
    .join("\n");
 }
--- a/scripts/utils.js
+++ b/scripts/utils.js
@ -0,0 +1,52 @@
+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"),
+  );
+}
+
+/**
+ * Get package versions from version record object (like dependencies or devDependencies)
+ * @param {string|string[]} packageNames - Package name or array of package names
+ * @param {Object} versionRecord - Version record object (e.g., dependencies, devDependencies)
+ * @returns {Object|string} - Returns version string for single package, or {packageName: version} object for array
+ */
+export function getVersions(packageNames, versionRecord) {
+  if (!versionRecord || typeof versionRecord !== "object") {
+    return null;
+  }
+
+  // Helper function to extract clean version number
+  const extractVersion = (versionString) => {
+    if (!versionString) return null;
+    // Remove prefixes like ^, ~, >=, etc. and return clean version
+    return versionString.replace(/^[\^~>=<]+/, "");
+  };
+
+  // If single string, return single version
+  if (typeof packageNames === "string") {
+    const version = extractVersion(versionRecord[packageNames]);
+    return version || null;
+  }
+
+  // If array, return object with package names as keys
+  if (Array.isArray(packageNames)) {
+    const result = {};
+    for (const pkg of packageNames) {
+      const version = extractVersion(versionRecord[pkg]);
+      if (version) {
+        result[pkg] = version;
+      }
+    }
+    return result;
+  }
+
+  return null;
+}
--- a/scripts/utils.mjs
+++ b/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"),
-  );
-}