feat!: move to esm and drop support for vue 2.6

.eslintrc.js

@@ -1,25 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    ecmaVersion: 2020,
-    parser: "@typescript-eslint/parser"
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "vue/multi-word-component-names": "off"
-  },
-  overrides: [
-    {
-      files: ["*.ts"],
-      extends: [
-        "@vue/typescript/recommended",
-        "@vue/prettier/@typescript-eslint"
-      ]
-    }
-  ]
-};

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "parser": "@typescript-eslint/parser"
+  },
+  "rules": {
+    "no-console": "off",
+    "vue/multi-word-component-names": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "@vue/typescript/recommended",
+        "@vue/prettier/@typescript-eslint"
+      ]
+    }
+  ]
+}

README.md

@@ -13,7 +13,7 @@
 
 ---
 
-<h2>💡 Heads up 💡 <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%F0%9F%87%A8%F0%9F%87%B3-%E4%B8%AD%E6%96%87%E7%89%88-white?labelColor=white" alt="前往中文版" align="right" height="24"/></a></h2>
+<h2>💡 Heads up 💡 <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%E4%B8%AD%E6%96%87%E7%89%88-20c3aa" alt="前往中文版" align="right" height="24"/></a></h2>
 
 If you are migrating from `vue-echarts` ≤ 5, you should read the _[Migration to v6](#migration-to-v6)_ section before you update to v6.
 
@@ -236,9 +236,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.4.23"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.4.30"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -257,8 +257,8 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
 ```
 <!-- vue2Scripts:end -->
 

README.zh-Hans.md

@@ -236,9 +236,9 @@ import "echarts";
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.4.23"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.4.30"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -257,8 +257,8 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.7.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
 ```
 <!-- vue2Scripts:end -->
 

babel.config.js

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

babel.config.json

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

package.json

@@ -1,7 +1,9 @@
 {
   "name": "vue-echarts",
-  "version": "6.7.3",
+  "version": "7.0.0-beta.0",
   "description": "Vue.js component for Apache ECharts™.",
+  "license": "MIT",
+  "repository": "https://github.com/ecomfe/vue-echarts.git",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,14 +11,29 @@
     "build:2": "vue-demi-switch 2 vue2 && rollup -c rollup.vue2.config.js",
     "build:3": "vue-demi-switch 3 && rollup -c rollup.config.js",
     "lint": "vue-cli-service lint",
+    "publint": "publint",
     "build:demo": "vue-cli-service build",
-    "docs": "node ./scripts/docs.js",
+    "docs": "node ./scripts/docs.mjs",
-    "postinstall": "node ./scripts/postinstall.js",
+    "postinstall": "node ./scripts/postinstall.mjs",
-    "prepublishOnly": "pnpm run build"
+    "prepublishOnly": "pnpm run build && publint"
+  },
+  "type": "module",
+  "module": "dist/index.js",
+  "main": "dist/index.cjs",
+  "unpkg": "dist/index.min.js",
+  "jsdelivr": "dist/index.min.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./csp": {
+      "import": "./dist/csp/index.js",
+      "require": "./dist/csp/index.cjs"
+    },
+    "./csp/style.css": "./dist/csp/style.css"
   },
-  "main": "dist/index.cjs.min.js",
-  "module": "dist/index.esm.min.js",
-  "unpkg": "dist/index.umd.min.js",
   "files": [
     "dist",
     "scripts/postinstall.js"
@@ -24,6 +41,16 @@
   "dependencies": {
     "vue-demi": "^0.13.11"
   },
+  "peerDependencies": {
+    "@vue/runtime-core": "^3.0.0",
+    "echarts": "^5.5.1",
+    "vue": "^2.7.0 || ^3.1.1"
+  },
+  "peerDependenciesMeta": {
+    "@vue/runtime-core": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@highlightjs/vue-plugin": "^2.1.0",
@@ -38,7 +65,6 @@
     "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
     "@vue/compiler-sfc": "^3.4.24",
-    "@vue/composition-api": "^1.7.2",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vueuse/core": "^10.9.0",
@@ -57,32 +83,18 @@
     "postcss-loader": "^5.3.0",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.8.8",
+    "publint": "^0.2.8",
     "raw-loader": "^4.0.2",
     "resize-detector": "^0.3.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.1",
+    "rollup": "^4.12.0",
-    "rollup-plugin-dts": "^4.2.3",
+    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-esbuild": "^6.1.1",
-    "rollup-plugin-ts": "^2.0.7",
+    "rollup-plugin-import-css": "^3.5.0",
     "tslib": "^2.6.2",
     "typescript": "4.6.4",
     "vue": "^3.4.24",
     "vue2": "npm:vue@^2.7.16",
     "webpack": "^5.91.0"
-  },
-  "peerDependencies": {
-    "@vue/composition-api": "^1.0.5",
-    "@vue/runtime-core": "^3.0.0",
-    "echarts": "^5.4.1",
-    "vue": "^2.7.0 || ^3.1.1"
-  },
-  "jsdelivr": "dist/index.umd.min.js",
-  "license": "MIT",
-  "peerDependenciesMeta": {
-    "@vue/runtime-core": {
-      "optional": true
   }
-  },
-  "repository": "https://github.com/ecomfe/vue-echarts.git",
-  "types": "dist/index.d.ts"
 }

rollup.config.js

@@ -1,9 +1,8 @@
-import typescript from "rollup-plugin-ts";
-import terser from "@rollup/plugin-terser";
-import resolve from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
-import styles from "rollup-plugin-styles";
+import esbuild from "rollup-plugin-esbuild";
-import { injectVueDemi } from "./scripts/rollup";
+import { dts } from "rollup-plugin-dts";
+import css from "rollup-plugin-import-css";
+import { ignoreCss } from "./scripts/rollup.mjs";
 
 /**
  * Modifies the Rollup options for a build to support strict CSP
@@ -18,7 +17,7 @@ function configBuild(options, csp) {
   result.plugins = [
     ...(csp ? [replace({ __CSP__: `${csp}`, preventAssignment: true })] : []),
     ...plugins,
-    csp ? styles({ mode: ["extract", "style.css"] }) : styles()
+    csp ? css({ output: "style.css" }) : css({ inject: true })
   ];
 
   // modify output file names
@@ -39,97 +38,31 @@ function configBuild(options, csp) {
 const builds = [
   {
     input: "src/index.ts",
-    plugins: [
+    plugins: [esbuild()],
-      typescript({
+    external: ["vue-demi", /^echarts/],
-        tsconfig: resolvedConfig => ({ ...resolvedConfig, declaration: true }),
+    output: [
-        hook: {
+      {
-          outputPath: (path, kind) =>
+        file: "dist/index.js",
-            kind === "declaration" ? "dist/index.d.ts" : path
-        }
-      })
-    ],
-    external: ["vue-demi", "echarts/core", "resize-detector"],
-    output: {
-      file: "dist/index.esm.js",
         format: "esm",
         sourcemap: true
+      },
+      {
+        file: "dist/index.cjs",
+        format: "cjs",
+        exports: "named",
+        sourcemap: true
       }
+    ]
   },
   {
     input: "src/index.ts",
-    plugins: [typescript()],
+    plugins: [esbuild({ minify: true })],
-    external: ["vue-demi", "echarts/core", "resize-detector"],
+    external: ["vue-demi", /^echarts/],
     output: [
       {
-        file: "dist/index.esm.min.js",
+        file: "dist/index.min.js", // for unpkg/jsdelivr
         format: "esm",
-        sourcemap: true,
-        plugins: [
-          terser({
-            format: {
-              comments: false
-            }
-          })
-        ]
-      },
-      {
-        file: "dist/index.cjs.js",
-        format: "cjs",
-        exports: "named",
         sourcemap: true
-      },
-      {
-        file: "dist/index.cjs.min.js",
-        format: "cjs",
-        exports: "named",
-        sourcemap: true,
-        plugins: [
-          terser({
-            format: {
-              comments: false
-            }
-          })
-        ]
-      }
-    ]
-  },
-  {
-    input: "src/global.ts",
-    plugins: [resolve(), typescript()],
-    external: ["vue-demi", "echarts", "echarts/core"],
-    output: [
-      {
-        file: "dist/index.umd.js",
-        format: "umd",
-        name: "VueECharts",
-        exports: "default",
-        sourcemap: true,
-        globals: {
-          "vue-demi": "VueDemi",
-          echarts: "echarts",
-          "echarts/core": "echarts"
-        },
-        plugins: [injectVueDemi]
-      },
-      {
-        file: "dist/index.umd.min.js",
-        format: "umd",
-        name: "VueECharts",
-        exports: "default",
-        sourcemap: true,
-        globals: {
-          "vue-demi": "VueDemi",
-          echarts: "echarts",
-          "echarts/core": "echarts"
-        },
-        plugins: [
-          injectVueDemi,
-          terser({
-            format: {
-              comments: false
-            }
-          })
-        ]
       }
     ]
   }
@@ -137,5 +70,22 @@ const builds = [
 
 export default [
   ...builds.map(options => configBuild(options, false)),
-  ...builds.map(options => configBuild(options, true))
+  ...builds.map(options => configBuild(options, true)),
+  {
+    input: "src/index.ts",
+    plugins: [
+      ignoreCss,
+      dts({
+        compilerOptions: {
+          // see https://github.com/unjs/unbuild/pull/57/files
+          preserveSymlinks: false
+        }
+      })
+    ],
+    external: ["vue-demi", /^echarts/],
+    output: {
+      file: "dist/index.vue3.d.ts",
+      format: "esm"
+    }
+  }
 ];

rollup.vue2.config.js

@@ -1,4 +1,4 @@
-import dts from "rollup-plugin-dts";
+import { dts } from "rollup-plugin-dts";
 
 /** @type {import('rollup').RollupOptions[]} */
 const options = [
@@ -9,14 +9,6 @@ const options = [
       file: "dist/index.vue2.d.ts",
       format: "esm"
     }
-  },
-  {
-    input: "src/index.vue2_7.d.ts",
-    plugins: [dts()],
-    output: {
-      file: "dist/index.vue2_7.d.ts",
-      format: "esm"
-    }
   }
 ];
 

scripts/docs.mjs

@@ -1,11 +1,8 @@
-const { readFileSync, writeFileSync } = require("fs");
+import { readFileSync, writeFileSync } from "node:fs";
-const { resolve } = require("path");
+import commentMark from "comment-mark";
-const commentMark = require("comment-mark");
+import { getPackageMeta, resolvePath } from "./utils.mjs";
-const { name, version } = require("../package.json");
 
-function resolvePath(...parts) {
+const { name, version } = getPackageMeta();
-  return resolve(__dirname, ...parts);
-}
 
 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
 
@@ -41,7 +38,7 @@ const scripts = {
 };
 
 const README_FILES = ["README.md", "README.zh-Hans.md"].map(name =>
-  resolvePath("..", name)
+  resolvePath(import.meta.url, "..", name)
 );
 
 README_FILES.forEach(file => {

scripts/postinstall.js

@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require("path");
-const fs = require("fs");
-
-const packageFile = path.resolve(__dirname, "../package.json");
-
-const typesPaths = {
-  3: "dist/index.d.ts",
-  2.7: "dist/index.vue2_7.d.ts",
-  2: "dist/index.vue2.d.ts"
-};
-
-function switchVersion(version) {
-  const typesPath = typesPaths[version];
-  const package = JSON.parse(fs.readFileSync(packageFile, "utf8"));
-  if (typesPath !== package.types) {
-    package.types = typesPath;
-    fs.writeFileSync(packageFile, JSON.stringify(package, null, "  "), "utf8");
-  }
-  console.log(`[vue-echarts] Switched to Vue ${version} environment.`);
-}
-
-function loadVue() {
-  try {
-    return require("vue");
-  } catch (e) {
-    return null;
-  }
-}
-
-const Vue = loadVue();
-
-// Align the process with vue-demi
-if (!Vue || typeof Vue.version !== "string") {
-  console.warn(
-    '[vue-echarts] Vue is not found. Please run "npm install vue" to install.'
-  );
-} else if (Vue.version.startsWith("3.")) {
-  switchVersion(3);
-} else if (Vue.version.startsWith("2.7.")) {
-  switchVersion(2.7);
-} else if (Vue.version.startsWith("2.")) {
-  switchVersion(2);
-} else {
-  console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
-}

scripts/postinstall.mjs

@@ -0,0 +1,57 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolvePath } from "./utils.mjs";
+
+function resolveDist(...paths) {
+  return resolvePath(import.meta.url, "../dist", ...paths);
+}
+
+const typesSource = {
+  3: "index.vue3.d.ts",
+  2: "index.vue2.d.ts"
+};
+
+const typesTargets = [
+  "index.d.ts",
+  "index.d.cts",
+  "csp/index.d.ts",
+  "csp/index.d.cts"
+];
+
+function switchVersion(version) {
+  const source = typesSource[version];
+  const content = readFileSync(resolveDist(source), "utf8");
+
+  typesTargets.forEach(target => {
+    writeFileSync(resolveDist(target), content, "utf8");
+  });
+
+  console.log(`[vue-echarts] Switched to Vue ${version} environment.`);
+}
+
+async function loadVue() {
+  try {
+    const Vue = await import("vue");
+    return Vue;
+  } catch (e) {
+    return null;
+  }
+}
+
+async function main() {
+  const Vue = await loadVue();
+
+  // Align the process with vue-demi
+  if (!Vue || typeof Vue.version !== "string") {
+    console.warn(
+      '[vue-echarts] Vue is not found. Please run "npm install vue" to install.'
+    );
+  } else if (Vue.version.startsWith("3.")) {
+    switchVersion(3);
+  } else if (Vue.version.startsWith("2.7.")) {
+    switchVersion(2);
+  } else {
+    console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
+  }
+}
+
+main();

scripts/rollup.js

@@ -1,30 +0,0 @@
-import { readFileSync } from "fs";
-
-const VUE_DEMI_IIFE = readFileSync(
-  require.resolve("vue-demi/lib/index.iife.js"),
-  "utf8"
-);
-
-/** @type {import('rollup').Plugin} */
-export const injectVueDemi = {
-  name: "inject-vue-demi",
-  banner() {
-    return `${VUE_DEMI_IIFE};\n;`;
-  }
-};
-
-const EMPTY_FILE_ID = "__rollup_empty__";
-
-/** @type {import('rollup').Plugin} */
-export const ingoreCss = {
-  name: "ignore-css",
-  resolveId(source) {
-    if (source.endsWith(".css")) {
-      return EMPTY_FILE_ID;
-    }
-    return null;
-  },
-  load(id) {
-    return id === EMPTY_FILE_ID ? "" : null;
-  }
-};

scripts/rollup.mjs

@@ -0,0 +1,15 @@
+const EMPTY_FILE_ID = "__rollup_empty__";
+
+/** @type {import('rollup').Plugin} */
+export const ignoreCss = {
+  name: "ignore-css",
+  resolveId(source) {
+    if (source.endsWith(".css")) {
+      return EMPTY_FILE_ID;
+    }
+    return null;
+  },
+  load(id) {
+    return id === EMPTY_FILE_ID ? "" : null;
+  }
+};

scripts/utils.mjs

@@ -0,0 +1,13 @@
+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")
+  );
+}

src/global.ts

@@ -1,7 +0,0 @@
-import "echarts";
-import ECharts, * as exported from "./index";
-
-export default {
-  ...ECharts,
-  ...exported
-};

src/index.vue2.d.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import type { DefineComponent } from "@vue/runtime-core";
+import type { Ref, DefineComponent } from "vue-demi";
-import type { Ref } from "vue-demi";
 import type {
   Option,
   InitOptions,

src/index.vue2_7.d.ts

@@ -1,63 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-import type { Ref, DefineComponent } from "vue-demi";
-import type {
-  Option,
-  InitOptions,
-  UpdateOptions,
-  EChartsType,
-  Emits
-} from "./types";
-
-declare const LOADING_OPTIONS_KEY = "ecLoadingOptions";
-declare const THEME_KEY = "ecTheme";
-declare const INIT_OPTIONS_KEY = "ecInitOptions";
-declare const UPDATE_OPTIONS_KEY = "ecUpdateOptions";
-
-declare type ChartProps = {
-  loading?: boolean;
-  loadingOptions?: Record<string, unknown>;
-  autoresize?: boolean;
-  option?: Option;
-  theme?: string | Record<string, unknown>;
-  initOptions?: InitOptions;
-  updateOptions?: UpdateOptions;
-  group?: string;
-  manualUpdate?: boolean;
-};
-
-type MethodNames =
-  | "getWidth"
-  | "getHeight"
-  | "getDom"
-  | "getOption"
-  | "resize"
-  | "dispatchAction"
-  | "convertToPixel"
-  | "convertFromPixel"
-  | "containPixel"
-  | "getDataURL"
-  | "getConnectedDataURL"
-  | "appendData"
-  | "clear"
-  | "isDisposed"
-  | "dispose"
-  | "setOption";
-
-declare type ChartMethods = Pick<EChartsType, MethodNames>;
-
-declare const Chart: DefineComponent<
-  ChartProps,
-  {
-    root: Ref<HTMLElement | undefined>;
-    chart: Ref<EChartsType | undefined>;
-  },
-  {},
-  {},
-  ChartMethods,
-  {},
-  {},
-  Emits
->;
-
-export default Chart;
-export { INIT_OPTIONS_KEY, LOADING_OPTIONS_KEY, THEME_KEY, UPDATE_OPTIONS_KEY };

vue.config.js

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+import nested from "postcss-nested";
-const nested = require("postcss-nested");
 
-module.exports = {
+export default {
   outputDir: "demo",
   css: {
     loaderOptions: {