build: move to esm (wip)

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.3 to 1.15.4.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.3...v1.15.4)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.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"
+      ]
+    }
+  ]
+}

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 6.6.9
+
+* Fixed that the chart may not be the same size as the component root element ([#761](https://github.com/ecomfe/vue-echarts/issues/761)).
+
+## 6.6.8
+
+* Fixed the postinstall script to patch the correct `types` entry for Vue 2.7.
+
+## 6.6.7
+
+* Added missing type file for Vue 2.7.
+
+## 6.6.6
+
+* Fixed types for Vue < 2.7.
+
 ## 6.6.5
 
 * Fixed type for `option` regressed in v6.6.2.

README.md

@@ -1,6 +1,6 @@
 <h1 align="center">Vue-ECharts</h1>
 
-<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts <sup>(v5)</sup>.</p>
+<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts™ <sup>(v5)</sup>.</p>
 <p align="center"><a href="https://vue-echarts.dev/">View Demo →</a></p>
 <p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
 
@@ -23,17 +23,18 @@ Not ready yet? Read documentation for older versions [here →](https://github.c
 
 ### npm & ESM
 
-```bash
+```sh
-npm install echarts vue-echarts
+npm i echarts vue-echarts
 ```
 
-To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed:
+To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed (`@vue/runtime-core` for TypeScript support):
 
 ```sh
 npm i @vue/composition-api
+npm i @vue/runtime-core # for TypeScript support
 ```
 
-If you are using _NuxtJS_ on top of _Vue 2_, you'll also need `@nuxtjs/composition-api`:
+If you are using _NuxtJS_ on top of _Vue 2_, you'll need `@nuxtjs/composition-api`:
 
 ```sh
 npm i @nuxtjs/composition-api
@@ -235,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.3.7"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.4.19"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -255,9 +256,9 @@ app.component('v-chart', VueECharts)
 
 <!-- vue2Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@2.7.15"></script>
+<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/vue-echarts@6.6.5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -475,7 +476,7 @@ The following breaking changes are introduced in `vue-echarts@6`:
 
 ### Vue 2 support
 
-- If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2.
+- If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2 (and also `@vue/runtime-core` for TypeScript support).
 
 ### Props
 
@@ -500,7 +501,7 @@ The following breaking changes are introduced in `vue-echarts@6`:
 
 ## Local development
 
-```bash
+```sh
 pnpm i
 pnpm serve
 ```

README.zh-Hans.md

@@ -1,6 +1,6 @@
 <h1 align="center">Vue-ECharts</h1>
 
-<p align="center">Apache ECharts <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
+<p align="center">Apache ECharts™ <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
 <p align="center"><a href="https://vue-echarts.dev/">查看 Demo →</a></p>
 <p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
 
@@ -23,17 +23,18 @@
 
 ### npm & ESM
 
-```bash
+```sh
-npm install echarts vue-echarts
+npm i echarts vue-echarts
 ```
 
-要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
+要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装（TypeScript 支持还需要 `@vue/runtime-core`）：
 
 ```sh
 npm i @vue/composition-api
+npm i @vue/runtime-core # TypeScript 支持
 ```
 
-如果你在使用基于 _Vue 2_ 的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：
+如果你在使用基于 _Vue 2_ 的 _NuxtJS_，则需要安装 `@nuxtjs/composition-api`：
 
 ```sh
 npm i @nuxtjs/composition-api
@@ -235,9 +236,9 @@ import "echarts";
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.3.7"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.4.19"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -255,9 +256,9 @@ app.component('v-chart', VueECharts)
 
 <!-- vue2Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@2.7.15"></script>
+<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/vue-echarts@6.6.5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -475,7 +476,7 @@ import { THEME_KEY } from 'vue-echarts'
 
 ### Vue 2 支持
 
-- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`。
+- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`（还需要安装 `@vue/runtime-core` 来支持 TypeScript）。
 
 ### Prop
 
@@ -500,7 +501,7 @@ import { THEME_KEY } from 'vue-echarts'
 
 ## 本地开发
 
-```bash
+```sh
 pnpm i
 pnpm serve
 ```

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,8 @@
 {
   "name": "vue-echarts",
-  "version": "6.6.5",
+  "version": "6.6.9",
-  "description": "Vue.js component for Apache ECharts.",
+  "type": "module",
+  "description": "Vue.js component for Apache ECharts™.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -28,9 +29,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "@rollup/plugin-terser": "^0.4.4",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@vercel/analytics": "^1.1.1",
@@ -45,7 +44,7 @@
     "@vueuse/core": "^10.5.0",
     "comment-mark": "^1.1.1",
     "core-js": "^3.33.2",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.0",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "esbuild-wasm": "^0.19.2",
@@ -61,10 +60,10 @@
     "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.3.7",
@@ -73,6 +72,7 @@
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.5",
+    "@vue/runtime-core": "^3.0.0",
     "echarts": "^5.4.1",
     "vue": "^2.6.12 || ^3.1.1"
   },
@@ -81,6 +81,9 @@
   "peerDependenciesMeta": {
     "@vue/composition-api": {
       "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
     }
   },
   "repository": "https://github.com/ecomfe/vue-echarts.git",

public/index.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="">
+<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>
+    <title>Vue-ECharts: Vue.js component for Apache ECharts™.</title>
   </head>
   <body>
     <noscript>

rollup.config.js

@@ -1,9 +1,8 @@
-import typescript from "rollup-plugin-ts";
+import esbuild from "rollup-plugin-esbuild";
-import terser from "@rollup/plugin-terser";
+import { dts } from "rollup-plugin-dts";
-import resolve from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
-import styles from "rollup-plugin-styles";
+import css from "rollup-plugin-import-css";
-import { injectVueDemi } from "./scripts/rollup";
+import { ignoreCss } from "./scripts/rollup.js";
 
 /**
  * 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,37 @@ function configBuild(options, csp) {
 const builds = [
   {
     input: "src/index.ts",
-    plugins: [
+    plugins: [esbuild()],
-      typescript({
+    external: ["vue-demi", /^echarts/, "resize-detector"],
-        tsconfig: resolvedConfig => ({ ...resolvedConfig, declaration: true }),
-        hook: {
-          outputPath: (path, kind) =>
-            kind === "declaration" ? "dist/index.d.ts" : path
-        }
-      })
-    ],
-    external: ["vue-demi", "echarts/core", "resize-detector"],
-    output: {
-      file: "dist/index.esm.js",
-      format: "esm",
-      sourcemap: true
-    }
-  },
-  {
-    input: "src/index.ts",
-    plugins: [typescript()],
-    external: ["vue-demi", "echarts/core", "resize-detector"],
     output: [
       {
-        file: "dist/index.esm.min.js",
+        file: "dist/index.esm.js",
         format: "esm",
-        sourcemap: true,
+        sourcemap: true
-        plugins: [
-          terser({
-            format: {
-              comments: false
-            }
-          })
-        ]
       },
       {
         file: "dist/index.cjs.js",
         format: "cjs",
         exports: "named",
         sourcemap: true
+      }
+    ]
+  },
+  {
+    input: "src/index.ts",
+    plugins: [esbuild({ minify: true })],
+    external: ["vue-demi", /^echarts/, "resize-detector"],
+    output: [
+      {
+        file: "dist/index.esm.min.js",
+        format: "esm",
+        sourcemap: true
       },
       {
         file: "dist/index.cjs.min.js",
         format: "cjs",
         exports: "named",
-        sourcemap: true,
+        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 +76,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/, "resize-detector"],
+    output: {
+      file: "dist/index.d.ts",
+      format: "esm"
+    }
+  }
 ];

rollup.vue2.config.js

@@ -9,6 +9,14 @@ 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.js

@@ -1,17 +1,14 @@
-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";
-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/";
 
 const DEP_VERSIONS = {
-  "vue@3": "3.3.7",
+  "vue@3": "3.4.19",
-  "vue@2": "2.7.15",
+  "vue@2": "2.7.16",
   echarts: "5.4.3",
   [name]: version
 };
@@ -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,43 +1,51 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const path = require("path");
+import fs from "node:fs";
-const fs = require("fs");
+import { resolvePath } from "./utils.js";
 
-const packageFile = path.resolve(__dirname, "../package.json");
+const packageFile = resolvePath(import.meta.url, "../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"));
+  const pkg = JSON.parse(fs.readFileSync(packageFile, "utf8"));
-  if (typesPath !== package.types) {
+  if (typesPath !== pkg.types) {
-    package.types = typesPath;
+    pkg.types = typesPath;
-    fs.writeFileSync(packageFile, JSON.stringify(package, null, "  "), "utf8");
+    fs.writeFileSync(packageFile, JSON.stringify(pkg, null, "  "), "utf8");
   }
   console.log(`[vue-echarts] Switched to Vue ${version} environment.`);
 }
 
-function loadVue() {
+async function loadVue() {
   try {
-    return require("vue");
+    const Vue = await import("vue");
+    return Vue;
   } catch (e) {
     return null;
   }
 }
 
-const Vue = loadVue();
+async function main() {
+  const Vue = await loadVue();
 
-// Align the process with vue-demi
+  // Align the process with vue-demi
-if (!Vue || typeof Vue.version !== "string") {
+  if (!Vue || typeof Vue.version !== "string") {
-  console.warn(
+    console.warn(
-    '[vue-echarts] Vue is not found. Please run "npm install vue" to install.'
+      '[vue-echarts] Vue is not found. Please run "npm install vue" to install.'
-  );
+    );
-} else if (Vue.version.startsWith("3.")) {
+  } else if (Vue.version.startsWith("3.")) {
-  switchVersion(3);
+    switchVersion(3);
-} else if (Vue.version.startsWith("2.")) {
+  } else if (Vue.version.startsWith("2.7.")) {
-  switchVersion(2);
+    switchVersion(2.7);
-} else {
+  } else if (Vue.version.startsWith("2.")) {
-  console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
+    switchVersion(2);
+  } else {
+    console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
+  }
 }
+
+main();

scripts/rollup.js

@@ -1,22 +1,7 @@
-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 = {
+export const ignoreCss = {
   name: "ignore-css",
   resolveId(source) {
     if (source.endsWith(".css")) {

scripts/utils.js

@@ -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/ECharts.ts

@@ -13,11 +13,20 @@ import {
   nextTick,
   watchEffect,
   getCurrentInstance,
-  Vue2,
+  Vue2
-  type PropType,
-  type InjectionKey
 } from "vue-demi";
 import { init as initChart } from "echarts/core";
+import {
+  usePublicAPI,
+  useAutoresize,
+  autoresizeProps,
+  useLoading,
+  loadingProps
+} from "./composables";
+import { omitOn, unwrapInjected } from "./utils";
+import { register, TAG_NAME } from "./wc";
+
+import type { PropType, InjectionKey } from "vue-demi";
 import type {
   EChartsType,
   EventTarget,
@@ -30,15 +39,8 @@ import type {
   UpdateOptionsInjection,
   Emits
 } from "./types";
-import {
+import type { EChartsElement } from "./wc";
-  usePublicAPI,
+
-  useAutoresize,
-  autoresizeProps,
-  useLoading,
-  loadingProps
-} from "./composables";
-import { omitOn, unwrapInjected } from "./utils";
-import { register, TAG_NAME, type EChartsElement } from "./wc";
 import "./style.css";
 
 const __CSP__ = false;
@@ -308,7 +310,7 @@ export default defineComponent({
     attrs.ref = "root";
     attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
     return h(TAG_NAME, attrs, [
-      h("div", { ref: "inner", class: "echarts-inner" })
+      h("div", { ref: "inner", class: "vue-echarts-inner" })
     ]);
   }
 });

src/composables/api.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Ref } from "vue-demi";
+import type { Ref } from "vue-demi";
-import { EChartsType } from "../types";
+import type { EChartsType } from "../types";
 
 const METHOD_NAMES = [
   "getWidth",

src/composables/autoresize.ts

@@ -1,11 +1,10 @@
-import { watch, type Ref, type PropType } from "vue-demi";
+import { watch } from "vue-demi";
 import { throttle } from "echarts/core";
-import {
+import { addListener, removeListener } from "resize-detector";
-  addListener,
+
-  removeListener,
+import type { Ref, PropType } from "vue-demi";
-  type ResizeCallback
+import type { ResizeCallback } from "resize-detector";
-} from "resize-detector";
+import type { EChartsType } from "../types";
-import { type EChartsType } from "../types";
 
 type AutoresizeProp =
   | boolean

src/composables/loading.ts

@@ -1,12 +1,7 @@
+import { inject, computed, watchEffect } from "vue-demi";
 import { unwrapInjected } from "../utils";
-import {
+
-  inject,
+import type { Ref, InjectionKey, PropType } from "vue-demi";
-  computed,
-  watchEffect,
-  type Ref,
-  type InjectionKey,
-  type PropType
-} from "vue-demi";
 import type { EChartsType, LoadingOptions } from "../types";
 
 export const LOADING_OPTIONS_KEY =

src/demo/CodeGen.vue

@@ -324,10 +324,6 @@ input[type="number"] {
   overflow: hidden;
   background-color: #fff;
   box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
-
-  h2 {
-    margin-top: 0;
-  }
 }
 
 .options {

src/demo/Demo.vue

@@ -56,12 +56,23 @@ watch(codeOpen, open => {
       <a href="https://github.com/ecomfe/vue-echarts">Vue-ECharts</a>
     </h1>
     <p class="desc">
-      Vue.js component for Apache ECharts. (<a
+      Vue.js component for Apache ECharts™. (<a
         href="https://github.com/ecomfe/vue-echarts#readme"
         >docs</a
       >)
     </p>
 
+    <h2 class="sep">Examples</h2>
+    <p>
+      <small
+        >See
+        <a href="https://echarts.apache.org/examples/en/index.html"
+          >echarts.apache.org/examples</a
+        >
+        for all examples.</small
+      >
+    </p>
+
     <bar-chart />
     <pie-chart />
     <polar-chart />
@@ -132,6 +143,19 @@ body {
 a {
   color: inherit;
   text-decoration: none;
+  box-shadow: 0 1px 0 0 #42b983;
+  transition: box-shadow 0.2s;
+
+  &:hover {
+    box-shadow: 0 2px 0 0 #42b983;
+  }
+}
+
+h1,
+h2,
+h3 {
+  color: #2c3e50;
+  font-weight: 400;
 }
 
 h1 {
@@ -139,13 +163,32 @@ h1 {
   font-family: Inter, "Helvetica Neue", Arial, sans-serif;
 }
 
-h1,
 h2 {
-  color: #2c3e50;
+  margin-top: 1em;
-  font-weight: 400;
+  margin-bottom: 1em;
 }
 
-h2 {
+.sep {
+  margin-top: 6em;
+  margin-bottom: 1.8em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  font-size: 1.25em;
+  color: #7f8c8d;
+  opacity: 0.6;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    width: 48px;
+    border-bottom: 1px dotted currentColor;
+  }
+}
+
+h3 {
   margin-top: 2em;
   padding-top: 1em;
   font-size: 1.2em;
@@ -208,15 +251,18 @@ footer {
   a {
     display: inline-block;
     margin: 0 5px;
-    padding: 3px 0 6px;
     color: #7f8c8d;
     font-size: 2em;
-    text-decoration: none;
   }
+}
 
+h1,
+h2,
+h3 {
+  a,
   a:hover {
-    padding-bottom: 3px;
+    text-decoration: none;
-    border-bottom: 3px solid #42b983;
+    box-shadow: none;
   }
 }
 

src/demo/data/logo.js

@@ -25,6 +25,10 @@ export default {
             return "";
           }
         }
+      },
+      itemStyle: {
+        shadowBlur: 12,
+        shadowColor: "rgba(0, 0, 0, 0.25)"
       }
     }
   ]

src/demo/examples/Example.vue

@@ -1,10 +1,10 @@
 <template>
-  <h2 :id="id">
+  <h3 :id="id">
     <a :href="`#${id}`">
       {{ title }}
       <small v-if="desc">{{ desc }}</small>
     </a>
-  </h2>
+  </h3>
   <section>
     <figure class="fig hero" v-if="!split">
       <slot />

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

src/index.vue2_7.d.ts

@@ -0,0 +1,63 @@
+/* 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 };

src/style.css

@@ -1 +1,2 @@
-x-vue-echarts,.echarts-inner{display:block;width:100%;height:100%;min-width:0}
+x-vue-echarts{display:flex;flex-direction:column;width:100%;height:100%;min-width:0}
+.vue-echarts-inner{flex-grow:1;min-width:0}

src/types.ts

@@ -1,6 +1,6 @@
 import { init } from "echarts/core";
+import type { Ref } from "vue-demi";
 import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts";
-import type { Ref } from "vue";
 
 export type Injection<T> = T | null | Ref<T | null> | { value: T | null };
 

src/utils.ts

@@ -1,4 +1,5 @@
 import { unref } from "vue-demi";
+
 import type { Injection } from "./types";
 
 type Attrs = {

vue.config.js

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