From 7bcf57e77bd65d4ea9659de3274a3e2b1141c3d2 Mon Sep 17 00:00:00 2001 From: Justineo Date: Tue, 26 Dec 2023 14:54:37 +0800 Subject: [PATCH] fix(types): fix types for vue < 2.7 --- CHANGELOG.md | 4 +++ README.md | 15 +++++----- README.zh-Hans.md | 15 +++++----- package.json | 6 +++- pnpm-lock.yaml | 3 ++ scripts/postinstall.js | 3 ++ src/index.vue2.d.ts | 3 +- src/index.vue2_7.d.ts | 63 ++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 96 insertions(+), 16 deletions(-) create mode 100644 src/index.vue2_7.d.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index c89558b..aa10c9d 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/README.md b/README.md index 298bec2..967bfcd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

Vue-ECharts

-

Vue.js (v2/v3) component for Apache ECharts (v5).

+

Vue.js (v2/v3) component for Apache ECharts™ (v5).

View Demo →

Open in Codeflow Edit in CodeSandbox

@@ -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 `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 ``` diff --git a/README.zh-Hans.md b/README.zh-Hans.md index b131020..10c53db 100644 --- a/README.zh-Hans.md +++ b/README.zh-Hans.md @@ -1,6 +1,6 @@

Vue-ECharts

-

Apache ECharts (v5) 的 Vue.js (v2/v3) 组件。

+

Apache ECharts™ (v5) 的 Vue.js (v2/v3) 组件。

查看 Demo →

Open in Codeflow Edit in CodeSandbox

@@ -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 ``` diff --git a/package.json b/package.json index 2eb7439..dc74507 100644 --- a/package.json +++ b/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 ", "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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b84cb8..f5e3eda 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@vue/runtime-core': + specifier: ^3.0.0 + version: 3.3.7 resize-detector: specifier: ^0.3.0 version: 0.3.0 diff --git a/scripts/postinstall.js b/scripts/postinstall.js index b79f53d..1647a7f 100644 --- a/scripts/postinstall.js +++ b/scripts/postinstall.js @@ -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 { diff --git a/src/index.vue2.d.ts b/src/index.vue2.d.ts index d2f671c..914a965 100644 --- a/src/index.vue2.d.ts +++ b/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, diff --git a/src/index.vue2_7.d.ts b/src/index.vue2_7.d.ts new file mode 100644 index 0000000..d2f671c --- /dev/null +++ b/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; + autoresize?: boolean; + option?: Option; + theme?: string | Record; + 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; + +declare const Chart: DefineComponent< + ChartProps, + { + root: Ref; + chart: Ref; + }, + {}, + {}, + ChartMethods, + {}, + {}, + Emits +>; + +export default Chart; +export { INIT_OPTIONS_KEY, LOADING_OPTIONS_KEY, THEME_KEY, UPDATE_OPTIONS_KEY };