From 97b27227a046150a21d1b6f0bd22d94686606296 Mon Sep 17 00:00:00 2001 From: kaorun343 Date: Fri, 30 Sep 2016 13:39:28 +0900 Subject: [PATCH 1/2] Fix $createElement and extend --- types/test/options-test.ts | 4 ++++ types/test/vue-test.ts | 3 ++- types/vue.d.ts | 14 ++++++-------- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/types/test/options-test.ts b/types/test/options-test.ts index 3ce83af89ac..5e852a32efe 100644 --- a/types/test/options-test.ts +++ b/types/test/options-test.ts @@ -89,6 +89,10 @@ Vue.component('component', { ref: 'myRef' }, [ createElement("div", {}, "message"), + createElement(Vue.component("component")), + createElement({ mounted() {} }), + createElement({ functional: true }), + createElement(() => Vue.component("component")), "message", [createElement("div", {}, "message")] ]); diff --git a/types/test/vue-test.ts b/types/test/vue-test.ts index 69cb368369b..77e0a24d0f6 100644 --- a/types/test/vue-test.ts +++ b/types/test/vue-test.ts @@ -45,7 +45,7 @@ class Test extends Vue { this.$nextTick(function() { this.$nextTick; }); - this.$createElement("div", {}, "message", ""); + this.$createElement("div", {}, "message"); } static testConfig() { @@ -77,6 +77,7 @@ class Test extends Vue { this.directive("", {bind() {}}); this.filter("", (value: number) => value); this.component("", { data: () => ({}) }); + this.component("", { functional: true }); this.use; this.mixin(Test); this.compile("
{{ message }}
"); diff --git a/types/vue.d.ts b/types/vue.d.ts index 6cd66ebacbb..d1c0cc60a0a 100644 --- a/types/vue.d.ts +++ b/types/vue.d.ts @@ -9,6 +9,8 @@ import { import { VNode, VNodeData, VNodeChildren } from "./vnode"; import { PluginFunction, PluginObject } from "./plugin"; +type Component = typeof Vue | ComponentOptions | FunctionalComponentOptions; + export declare class Vue { constructor(options?: ComponentOptions); @@ -39,10 +41,9 @@ export declare class Vue { $emit(event: string, ...args: any[]): this; $nextTick(callback?: (this: this) => void): void; $createElement( - tag?: string | Vue, + tag?: string | Component | (() => string | Component), data?: VNodeData, - children?: VNodeChildren, - namespace?: string + children?: VNodeChildren ): VNode; @@ -54,7 +55,7 @@ export declare class Vue { keyCodes: { [key: string]: number }; } - static extend(options: ComponentOptions): typeof Vue; + static extend(options: ComponentOptions | FunctionalComponentOptions): typeof Vue; static nextTick(callback: () => void, context?: any[]): void; static set(object: Object, key: string, value: T): T; static set(array: T[], key: number, value: T): T; @@ -65,10 +66,7 @@ export declare class Vue { definition?: DirectiveOptions | DirectiveFunction ): DirectiveOptions; static filter(id: string, definition?: Function): Function; - static component( - id: string, - definition?: ComponentOptions | FunctionalComponentOptions | typeof Vue - ): typeof Vue; + static component(id: string, definition?: Component): typeof Vue; static use(plugin: PluginObject | PluginFunction, options?: T): void; static mixin(mixin: typeof Vue | ComponentOptions): void; From 387be0c5237e61eb726e965d8bdd533f81134a85 Mon Sep 17 00:00:00 2001 From: kaorun343 Date: Fri, 30 Sep 2016 16:03:09 +0900 Subject: [PATCH 2/2] Add AsyncComponent --- types/index.d.ts | 2 ++ types/options.d.ts | 8 +++++++- types/test/options-test.ts | 24 +++++++++++++++++++++++- types/test/tsconfig.json | 6 ++++++ types/vue.d.ts | 8 ++++---- 5 files changed, 42 insertions(+), 6 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 50c5bac3fa4..717171a2669 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -6,6 +6,8 @@ import * as VNode from "./vnode"; // `Vue` in `export = Vue` must be a namespace // All available types are exported via this namespace declare namespace Vue { + export type Component = Options.Component; + export type AsyncComponent = Options.AsyncComponent; export type ComponentOptions = Options.ComponentOptions; export type FunctionalComponentOptions = Options.FunctionalComponentOptions; export type RenderContext = Options.RenderContext; diff --git a/types/options.d.ts b/types/options.d.ts index c1db129ddb3..8e2b0b79d5c 100644 --- a/types/options.d.ts +++ b/types/options.d.ts @@ -7,6 +7,12 @@ type Constructor = { type $createElement = typeof Vue.prototype.$createElement; +export type Component = typeof Vue | ComponentOptions | FunctionalComponentOptions; +export type AsyncComponent = ( + resolve: (component: Component) => void, + reject: (reason?: any) => void +) => Promise | Component | void; + export interface ComponentOptions { data?: Object | ((this: V) => Object); props?: string[] | { [key: string]: PropOptions | Constructor | Constructor[] }; @@ -30,7 +36,7 @@ export interface ComponentOptions { updated?(this: V): void; directives?: { [key: string]: DirectiveOptions | DirectiveFunction }; - components?: { [key: string]: ComponentOptions | FunctionalComponentOptions | typeof Vue }; + components?: { [key: string]: Component | AsyncComponent }; transitions?: { [key: string]: Object }; filters?: { [key: string]: Function }; diff --git a/types/test/options-test.ts b/types/test/options-test.ts index 5e852a32efe..fa1d4215bd2 100644 --- a/types/test/options-test.ts +++ b/types/test/options-test.ts @@ -90,10 +90,23 @@ Vue.component('component', { }, [ createElement("div", {}, "message"), createElement(Vue.component("component")), - createElement({ mounted() {} }), + createElement({} as ComponentOptions), createElement({ functional: true }), + createElement(() => Vue.component("component")), + createElement(() => ( {} as ComponentOptions )), + createElement(() => { + return new Promise((resolve) => { + resolve({} as ComponentOptions); + }) + }), + createElement((resolve, reject) => { + resolve({} as ComponentOptions); + reject(); + }), + "message", + [createElement("div", {}, "message")] ]); }, @@ -158,3 +171,12 @@ Vue.component('functional-component', { return createElement("div", {}, context.children); } } as FunctionalComponentOptions); + +Vue.component("async-component", (resolve, reject) => { + setTimeout(() => { + resolve(Vue.component("component")); + }, 0); + return new Promise((resolve) => { + resolve({ functional: true } as FunctionalComponentOptions); + }) +}); diff --git a/types/test/tsconfig.json b/types/test/tsconfig.json index ad02598e04d..68aca8c1f1e 100644 --- a/types/test/tsconfig.json +++ b/types/test/tsconfig.json @@ -1,6 +1,12 @@ { "compilerOptions": { "target": "es5", + "lib": [ + "es5", + "dom", + "es2015.promise", + "es2015.core" + ], "module": "commonjs", "noImplicitAny": true, "strictNullChecks": true, diff --git a/types/vue.d.ts b/types/vue.d.ts index d1c0cc60a0a..6008ba18d83 100644 --- a/types/vue.d.ts +++ b/types/vue.d.ts @@ -1,4 +1,6 @@ import { + Component, + AsyncComponent, ComponentOptions, FunctionalComponentOptions, WatchOptions, @@ -9,8 +11,6 @@ import { import { VNode, VNodeData, VNodeChildren } from "./vnode"; import { PluginFunction, PluginObject } from "./plugin"; -type Component = typeof Vue | ComponentOptions | FunctionalComponentOptions; - export declare class Vue { constructor(options?: ComponentOptions); @@ -41,7 +41,7 @@ export declare class Vue { $emit(event: string, ...args: any[]): this; $nextTick(callback?: (this: this) => void): void; $createElement( - tag?: string | Component | (() => string | Component), + tag?: string | Component | AsyncComponent, data?: VNodeData, children?: VNodeChildren ): VNode; @@ -66,7 +66,7 @@ export declare class Vue { definition?: DirectiveOptions | DirectiveFunction ): DirectiveOptions; static filter(id: string, definition?: Function): Function; - static component(id: string, definition?: Component): typeof Vue; + static component(id: string, definition?: Component | AsyncComponent): typeof Vue; static use(plugin: PluginObject | PluginFunction, options?: T): void; static mixin(mixin: typeof Vue | ComponentOptions): void;