From 9276e302d7ce0e588eaa771f6967e28e7643dfeb Mon Sep 17 00:00:00 2001 From: ZHAO Jinxiang Date: Tue, 30 Nov 2021 16:31:27 +0800 Subject: [PATCH 1/4] fix: export Directives type (#864) --- src/component/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/index.ts b/src/component/index.ts index a54967f3..99a9f45e 100644 --- a/src/component/index.ts +++ b/src/component/index.ts @@ -25,4 +25,5 @@ export { DirectiveHook, ObjectDirective, FunctionDirective, + Directive, } from './directives' From 73524d26f2af142d00a648229d48f30cbb34875e Mon Sep 17 00:00:00 2001 From: Leaf Stark <695549485@qq.com> Date: Sat, 4 Dec 2021 21:05:20 +0800 Subject: [PATCH 2/4] docs: update Chinese docs (#868) --- README.zh-CN.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.zh-CN.md b/README.zh-CN.md index 1d9f8fdc..abc21328 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -111,6 +111,10 @@ export default { } ``` +## 浏览器兼容性 + +`@vue/composition-api` 支持所有现代浏览器以及IE11+。对于更低版本的IE浏览器你需要安装`WeakMap` polyfill (例如使用 `core-js`库)。 + ## 限制 > :white_check_mark: 支持     :x: 不支持 @@ -448,6 +452,24 @@ defineComponent({ +### `computed().effect` + +
+ +⚠️ computed() 拥有一个被设置为 true 的 effect 属性，用来代替 ReactiveEffect。 + + +由于实现上的不同, 在 `@vue/composition-api` 中没有 `ReactiveEffect` 这种概念。 因此, `effect` 为 `true` 只是为了能够区分 computed 和 refs: + +```ts +function isComputed(o: ComputedRef | unknown): o is ComputedRef +function isComputed(o: any): o is ComputedRef { + return !!(isRef(o) && o.effect) +} +``` + +
+ ### 缺失的 API 以下在 Vue 3 新引入的 API ，在本插件中暂不适用： From e84b48837eadc756667a1caacb3afc3b7b8f415a Mon Sep 17 00:00:00 2001 From: MinatoHikari <35342316+MinatoHikari@users.noreply.github.com> Date: Sat, 18 Dec 2021 06:59:22 +0800 Subject: [PATCH 3/4] fix: resolve conflicts with vue2 interface (#869) --- src/component/componentProxy.ts | 21 ++++++++++-- src/runtimeContext.ts | 18 ++++++++--- test-dts/defineComponent-vue2.d.tsx | 50 +++++++++++++++++++++++++++++ test-dts/tsconfig.vue3.json | 3 +- tsconfig.json | 1 + 5 files changed, 85 insertions(+), 8 deletions(-) create mode 100644 test-dts/defineComponent-vue2.d.tsx diff --git a/src/component/componentProxy.ts b/src/component/componentProxy.ts index 39202732..5199e2c6 100644 --- a/src/component/componentProxy.ts +++ b/src/component/componentProxy.ts @@ -19,6 +19,7 @@ import { } from './componentOptions' import { ComponentInternalInstance, + ComponentRenderEmitFn, EmitFn, EmitsOptions, ObjectEmitsOptions, @@ -67,8 +68,24 @@ export type ComponentRenderProxy< ? Partial & Omit

: P & PublicProps > - $attrs: Data - $emit: EmitFn + $attrs: Record + $emit: ComponentRenderEmitFn< + Emits, + keyof Emits, + ComponentRenderProxy< + P, + B, + D, + C, + M, + Mixin, + Extends, + Emits, + PublicProps, + Defaults, + MakeDefaultsOptional + > + > } & Readonly

& ShallowUnwrapRef & D & diff --git a/src/runtimeContext.ts b/src/runtimeContext.ts index 15c8eb3b..3df241ff 100644 --- a/src/runtimeContext.ts +++ b/src/runtimeContext.ts @@ -9,6 +9,7 @@ import { UnionToIntersection, isFunction, } from './utils' +import Vue$1 from 'vue' let vueDependency: VueConstructor | undefined = undefined @@ -121,19 +122,26 @@ export type EmitsOptions = ObjectEmitsOptions | string[] export type EmitFn< Options = ObjectEmitsOptions, - Event extends keyof Options = keyof Options + Event extends keyof Options = keyof Options, + ReturnType extends void | Vue$1 = void > = Options extends Array - ? (event: V, ...args: any[]) => void + ? (event: V, ...args: any[]) => ReturnType : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function - ? (event: string, ...args: any[]) => void + ? (event: string, ...args: any[]) => ReturnType : UnionToIntersection< { [key in Event]: Options[key] extends (...args: infer Args) => any - ? (event: key, ...args: Args) => void - : (event: key, ...args: any[]) => void + ? (event: key, ...args: Args) => ReturnType + : (event: key, ...args: any[]) => ReturnType }[Event] > +export type ComponentRenderEmitFn< + Options = ObjectEmitsOptions, + Event extends keyof Options = keyof Options, + T extends Vue$1 | void = void +> = EmitFn + export type Slots = Readonly export interface SetupContext { diff --git a/test-dts/defineComponent-vue2.d.tsx b/test-dts/defineComponent-vue2.d.tsx new file mode 100644 index 00000000..bb27617f --- /dev/null +++ b/test-dts/defineComponent-vue2.d.tsx @@ -0,0 +1,50 @@ +import { + defineComponent, + describe, + expectError, + expectType, + Ref, + ref, +} from './index' +import Vue from 'vue' + +describe('emits', () => { + const testComponent = defineComponent({ + emits: { + click: (n: number) => typeof n === 'number', + input: (b: string) => b.length > 1, + }, + created() { + this.$emit('click', 1) + this.$emit('click', 1).$emit('click', 1) + this.$emit('input', 'foo') + this.$emit('input', 'foo').$emit('click', 1) + expectType>(this.$attrs) + // @ts-expect-error + expectError(this.$emit('input', 1).$emit('nope')) + }, + }) + + // interface of vue2's $emit has no generics, notice that untyped types will be "event: string, ...args: any[]) => this" when using vue-class-component. + // but we can get correct type when we use correct params + // maybe we need vue 2.7 to fully support emit type + type VueClass = { new (...args: any[]): V & Vue } & typeof Vue + + function useComponentRef>() { + return ref>(undefined!) as Ref> + } + + const foo = useComponentRef() + + foo.value.$emit('click', 1) + foo.value.$emit('input', 'foo') + foo.value.$emit('click', 1).$emit('click', 1) + // @ts-expect-error + expectError(foo.value.$emit('blah').$emit('click', 1)) + // @ts-expect-error + expectError(foo.value.$emit('click').$emit('click', 1)) + // @ts-expect-error + expectError(foo.value.$emit('blah').$emit('click', 1)) + // @ts-expect-error + expectError(foo.value.$emit('blah')) +}) diff --git a/test-dts/tsconfig.vue3.json b/test-dts/tsconfig.vue3.json index 18344ced..12e21409 100644 --- a/test-dts/tsconfig.vue3.json +++ b/test-dts/tsconfig.vue3.json @@ -4,5 +4,6 @@ "paths": { "@vue/composition-api": ["../node_modules/vue3/dist/vue.d.ts"] } - } + }, + "exclude": ["./defineComponent-vue2.d.tsx"] } diff --git a/tsconfig.json b/tsconfig.json index 2ad05247..bf2a457b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,6 +8,7 @@ "moduleResolution": "node", "skipLibCheck": true, "esModuleInterop": true, + "experimentalDecorators": true, "strict": true, "strictNullChecks": true, "strictFunctionTypes": true, From 5f8d385444774d9ec3bf544c8951f9d29d3370b9 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sat, 18 Dec 2021 07:00:03 +0800 Subject: [PATCH 4/4] chore: release v1.4.2 --- CHANGELOG.md | 11 +++++++++++ README.md | 2 +- README.zh-CN.md | 2 +- package.json | 2 +- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 273c81ec..1899848f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ + +## [1.4.2](https://github.com/vuejs/composition-api/compare/v1.4.1...v1.4.2) (2021-12-17) + + +### Bug Fixes + +* export Directives type ([#864](https://github.com/vuejs/composition-api/issues/864)) ([9276e30](https://github.com/vuejs/composition-api/commit/9276e30)) +* resolve conflicts with vue2 interface ([#869](https://github.com/vuejs/composition-api/issues/869)) ([e84b488](https://github.com/vuejs/composition-api/commit/e84b488)) + + + ## [1.4.1](https://github.com/vuejs/composition-api/compare/v1.4.0...v1.4.1) (2021-11-30) diff --git a/README.md b/README.md index 25c854ef..8f94f8e6 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Include `@vue/composition-api` after Vue and it will install itself automaticall ```html - + ``` diff --git a/README.zh-CN.md b/README.zh-CN.md index abc21328..0d27d04a 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -40,7 +40,7 @@ import { ref, reactive } from '@vue/composition-api' ```html - + ``` diff --git a/package.json b/package.json index a29819d6..7574a0c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vue/composition-api", - "version": "1.4.1", + "version": "1.4.2", "description": "Provide logic composition capabilities for Vue.", "keywords": [ "vue",