fix(types): fix types for vue < 2.7

Author: Justineo

CHANGELOG.md

@@ -1,3 +1,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
-npm install echarts vue-echarts
+```sh
+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
@@ -475,7 +476,7 @@ The following breaking changes are introduced in `vue-echarts@6`:
 
 ### Vue 2 support
 
-- If you are using version prior to `[email protected]`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2.
+- If you are using version prior to `[email protected]`, `@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
-npm install echarts vue-echarts
+```sh
+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
@@ -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
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <[email protected]>",
   "scripts": {
@@ -73,6 +73,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 +82,9 @@
   "peerDependenciesMeta": {
     "@vue/composition-api": {
       "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
     }
   },
   "repository": "https://github.com/ecomfe/vue-echarts.git",

pnpm-lock.yaml

@@ -6,6 +6,7 @@ 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"
 };
 
@@ -36,6 +37,8 @@ if (!Vue || typeof Vue.version !== "string") {
   );
 } 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 {

scripts/postinstall.js

@@ -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.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 };