From 43b47cd512f9755f34bdb0b7db487aa347f4bcb2 Mon Sep 17 00:00:00 2001 From: Andy Date: Fri, 9 Dec 2016 08:50:18 -0800 Subject: [PATCH] Revert "Vue provides its own typings (#13230)" (#13235) This reverts commit fd18042829bc98599cb23fd1f52e9f8661ad171d. --- notNeededPackages.json | 6 - vue-resource/package.json | 5 - vue-router/package.json | 5 - vue/index.d.ts | 268 ++++++++++++++++++++++++++++++++++++ vue/tsconfig.json | 19 +++ vue/vue-tests.ts | 276 ++++++++++++++++++++++++++++++++++++++ 6 files changed, 563 insertions(+), 16 deletions(-) delete mode 100644 vue-resource/package.json delete mode 100644 vue-router/package.json create mode 100644 vue/index.d.ts create mode 100644 vue/tsconfig.json create mode 100644 vue/vue-tests.ts diff --git a/notNeededPackages.json b/notNeededPackages.json index eee68b5219..472a3881ca 100644 --- a/notNeededPackages.json +++ b/notNeededPackages.json @@ -94,12 +94,6 @@ "typingsPackageName": "normalizr", "sourceRepoURL": "https://github.com/paularmstrong/normalizr", "asOfVersion": "2.0.18" - }, - { - "libraryName": "vuejs", - "typingsPackageName": "vue", - "sourceRepoURL": "https://github.com/vuejs/vue", - "asOfVersion": "2.0.0" } ] } diff --git a/vue-resource/package.json b/vue-resource/package.json deleted file mode 100644 index 1fe0305da3..0000000000 --- a/vue-resource/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "dependencies": { - "@types/vue": "^1.0.31" - } -} diff --git a/vue-router/package.json b/vue-router/package.json deleted file mode 100644 index 1fe0305da3..0000000000 --- a/vue-router/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "dependencies": { - "@types/vue": "^1.0.31" - } -} diff --git a/vue/index.d.ts b/vue/index.d.ts new file mode 100644 index 0000000000..02e4f70463 --- /dev/null +++ b/vue/index.d.ts @@ -0,0 +1,268 @@ +// Type definitions for vuejs 1.0.21 +// Project: https://github.com/vuejs/vue +// Definitions by: odangosan , kaorun343 +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +interface Array { + $remove(item: T): Array; + $set(index: any, val: T): T; +} + +declare namespace vuejs { + + interface PropOption { + type?: { new (...args: any[]): any; } | { new (...args: any[]): any; }[]; + required?: boolean; + default?: any; + twoWay?: boolean; + validator?(value: any): boolean; + coerce?(value: any): any; + } + + interface ComputedOption { + get(): any; + set(value: any): void; + } + + interface WatchOption { + handler(val: any, oldVal: any): void; + deep?: boolean; + immidiate?: boolean; + } + + interface DirectiveOption { + bind?(): any; + update?(newVal?: any, oldVal?: any): any; + unbind?(): any; + params?: string[]; + deep?: boolean; + twoWay?: boolean; + acceptStatement?: boolean; + terminal?: boolean; + priority?: number; + [key: string]: any; + } + + interface Directive { + el: HTMLElement; + vm: Vue; + expression: string; + arg?: string; + name: string; + modifiers: { [key: string]: boolean }; + descriptor: any; + params?: { [key: string]: any }; + } + + interface FilterOption { + read?: Function; + write?: Function; + } + + interface TransitionOption { + css?: boolean; + animation?: string; + enterClass?: string; + leaveClass?: string; + beforeEnter?(el: HTMLElement): void; + enter?(el: HTMLElement, done?: () => void): void; + afterEnter?(el: HTMLElement): void; + enterCancelled?(el: HTMLElement): void; + beforeLeave?(el: HTMLElement): void; + leave?(el: HTMLElement, done?: () => void): void; + afterLeave?(el: HTMLElement): void; + leaveCancelled?(el: HTMLElement): void; + stagger?(index: number): number; + enterStagger?(index: number): number; + leaveStagger?(index: number): number; + [key: string]: any; + } + + interface ComponentOption { + data?: { [key: string]: any } | Function; + props?: string[] | { [key: string]: (PropOption | { new (...args: any[]): any; } | { new (...args: any[]): any; }[]) }; + computed?: { [key: string]: (Function | ComputedOption) }; + methods?: { [key: string]: Function }; + watch?: { [key: string]: ((val: any, oldVal: any) => void) | string | WatchOption }; + el?: string | HTMLElement | (() => HTMLElement); + template?: string; + replace?: boolean; + init?(): void; + created?(): void; + beforeCompile?(): void; + compiled?(): void; + ready?(): void; + attached?(): void; + detached?(): void; + beforeDestroy?(): void; + destroyed?(): void; + activate?: (done: () => void) => void; + directives?: { [key: string]: (DirectiveOption | Function) }; + elementDirectives?: { [key: string]: (DirectiveOption | Function) }; + filters?: { [key: string]: (Function | FilterOption) }; + components?: { [key: string]: any }; + transitions?: { [key: string]: TransitionOption }; + partials?: { [key: string]: string }; + parent?: Vue; + events?: { [key: string]: ((...args: any[]) => (boolean | void)) | string }; + mixins?: Object[]; + name?: string; + [key: string]: any; + } + + interface Vue { + $data: any; + $el: HTMLElement; + $options: Object; + $parent: Vue; + $root: Vue; + $children: Vue[]; + $refs: Object; + $els: Object; + + // instance/api/data.js + $get(exp: string, asStatement?: boolean): any; + $set(key: string | number, value: T): T; + $delete(key: string): void; + $eval(expression: string): string; + $interpolate(expression: string): string; + $log(keypath?: string): void; + $watch(expOrFn: string | Function, callback: ((newVal: any, oldVal?: any) => any) | string, options?: { deep?: boolean, immidiate?: boolean }): Function; + // instance/api/dom.js + $nextTick(callback: Function): void; + $appendTo(target: (HTMLElement | string), callback?: Function, withTransition?: boolean): this; + $prependTo(target: (HTMLElement | string), callback?: Function, withTransition?: boolean): this; + $before(target: (HTMLElement | string), callback?: Function, withTransition?: boolean): this; + $after(target: (HTMLElement | string), callback?: Function, withTransition?: boolean): this; + $remove(callback?: Function): this; + // instance/api/events.js + $on(event: string, callback: Function): this; + $once(event: string, callback: Function): this; + $off(event: string, callback?: Function): this; + $emit(event: string, ...args: any[]): this; + $broadcast(event: string, ...args: any[]): this; + $dispatch(event: string, ...args: any[]): this; + // instance/api/lifecycle.js + $mount(elementOrSelector?: (HTMLElement | string)): this; + $destroy(remove?: boolean): void; + $compile(el: Element | DocumentFragment, host?: Vue): Function; + + _init(options?: ComponentOption): void; + } + + interface VueConfig { + debug: boolean; + delimiters: [string, string]; + unsafeDelimiters: [string, string]; + silent: boolean; + async: boolean; + devtools: boolean; + } + + interface VueUtil { + // util/lang.js + set(obj: Object, key: string, value: any): void; + del(obj: Object, key: string): void; + hasOwn(obj: Object, key: string): boolean; + isLiteral(exp: string): boolean; + isReserved(str: string): boolean; + _toString(value: any): string; + toNumber(value: T): T | number; + toBoolean(value: T): T | boolean; + stripQuotes(str: string): string; + camelize(str: string): string; + hyphenate(str: string): string; + classify(str: string): string; + bind(fn: Function, ctx: Object): Function; + toAarray(list: ArrayLike, start?: number): Array; + extend(to: T, from: F): (T & F); + isObject(obj: any): boolean; + isPlainObject(obj: any): boolean; + isArray: typeof Array.isArray; + def(obj: Object, key: string, value: any, enumerable?: boolean): void; + debounce(func: Function, wait: number): Function; + indexOf(arr: Array, obj: T): number; + cancellable(fn: Function): Function; + looseEqual(a: any, b: any): boolean; + // util/env.js + hasProto: boolean; + inBrowser: boolean; + isIE9: boolean; + isAndroid: boolean; + transitionProp: string; + transitionEndEvent: string; + animationProp: string; + animationEndEvent: string; + nextTick(cb: Function, ctx?: Object): void; + // util/dom.js + query(el: string | Element): Element; + inDoc(node: Node): boolean; + getAttr(node: Node, _attr: string): string; + getBindAttr(node: Node, name: string): string; + before(el: Element, target: Element): void; + after(el: Element, target: Element): void; + remove(el: Element): void; + prepend(el: Element, target: Element): void; + replace(target: Element, el: Element): void; + on(el: Element, event: string, cb: Function): void; + off(el: Element, event: string, cb: Function): void; + addClass(el: Element, cls: string): void; + removeClass(el: Element, cls: string): void; + extractContent(el: Element, asFragment: boolean): (HTMLDivElement | DocumentFragment); + trimNode(node: Node): void; + isTemplate(el: Element): boolean; + createAnchor(content: string, persist: boolean): (Comment | Text); + findRef(node: Element): string; + mapNodeRange(node: Node, end: Node, op: Function): void; + removeNodeRange(start: Node, end: Node, vm: any, frag: DocumentFragment, cb: Function): void; + // util/options.js + mergeOptions(parent: P, child: C, vm?: any): (P & C); + resolveAsset(options: Object, type: string, id: string): (Object | Function); + assertAsset(val: any, type: string, id: string): void; + // util/component.js + commonTagRE: RegExp; + checkComponentAttr(el: Element, options?: Object): Object; + initProp(vm: Vue, prop: Object, value: any): void; + assertProp(prop: Object, value: any): boolean; + // util/debug.js + warn(msg: string, e?: Error): void; + // observer/index.js + defineReactive(obj: Object, key: string, val: any): void; + } + + // instance/api/global.js + interface VueStatic { + new (options?: ComponentOption): Vue; + prototype: Vue; + util: VueUtil; + config: VueConfig; + set(object: Object, key: string, value: any): void; + delete(object: Object, key: string): void; + nextTick(callback: Function): any; + + cid: number; + + extend(options?: ComponentOption): VueStatic; + use(callback: Function | { install: Function, [key: string]: any }, option?: Object): VueStatic; + mixin(mixin: Object): void; + + directive(id: string, definition: T): T; + directive(id: string): any; + elementDirective(id: string, definition: T): T; + elementDirective(id: string): any; + filter(id: string, definition: T): T; + filter(id: string): any; + component(id: string, definition: ComponentOption): any; + component(id: string): any; + transition(id: string, hooks: T): T; + transition(id: string): TransitionOption; + partial(id: string, partial: string): string; + partial(id: string): string; + } +} + +declare var Vue: vuejs.VueStatic; + +declare module "vue" { + export = Vue; +} diff --git a/vue/tsconfig.json b/vue/tsconfig.json new file mode 100644 index 0000000000..152a23449d --- /dev/null +++ b/vue/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es6", + "noImplicitAny": true, + "strictNullChecks": false, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "vue-tests.ts" + ] +} \ No newline at end of file diff --git a/vue/vue-tests.ts b/vue/vue-tests.ts new file mode 100644 index 0000000000..429ec3682b --- /dev/null +++ b/vue/vue-tests.ts @@ -0,0 +1,276 @@ + + +namespace TestConfig { + "use strict"; + + Vue.config.debug = true; + Vue.config.delimiters = ["${", "}"]; + Vue.config.unsafeDelimiters = ['{!!', '!!}']; + Vue.config.silent = true; + Vue.config.async = false; + Vue.config.devtools = true; +} + +namespace TestGlobalAPI { + "use strict"; + + var AppConstructor = Vue.extend({}); + var extendedApp = new AppConstructor(); + Vue.nextTick(() => {}); + Vue.set({}, "key", "value"); + Vue.delete({}, "key"); + Vue.directive("directive", { + bind: function() {}, + update: function(val: any, oldVal: any) {}, + unbind: function() {}, + params: ['a'], + paramWatchers: { + a: function(val: any, oldVal: any) {} + }, + twoWay: true, + acceptStatement: true, + priority: 1, + terminal: true, + count: 30 + }); + Vue.directive("my-directive", function() { + const d = this as vuejs.Directive; + d.el; + d.vm; + d.expression; + d.arg; + d.name; + d.modifiers; + d.descriptor; + d.params; + }); + var myDirective = Vue.directive("my-directive"); + var elementDirective = Vue.elementDirective("element-directive"); + Vue.elementDirective("element-directive", elementDirective); + Vue.elementDirective("element-directive", { + bind: function() {}, + unbind: function() {} + }); + var filter = Vue.filter("filter"); + Vue.filter("filter", filter); + Vue.filter("filter", function(val: any) { + return val; + }); + Vue.filter("filter", { + read: function(val: any) {}, + write: function(val: any, oldVal: any) {} + }); + var Component = Vue.component("component"); + Vue.component("component", Component); + Vue.component("component", { + data: function() { + return { d: 0 } + }, + methods: { + action: function() {} + }, + props: ["a", "b"], + computed: { + a: function() { return this.d; }, + b: { + get: function() { return this.a; }, + set: function(val: number) { this.d = val; } + } + } + }); + Vue.component("component", { + props: { + a: [String, Number], + b: { + type: [Number, Function], + required: true + } + }, + init: function() {} + }); + Vue.component("component", { + activate: function(callback: Function) { + callback(); + } + }); + var transition = Vue.transition("transition"); + Vue.transition("transition", transition); + Vue.transition("transition", { + css: false, + stagger: function(index) { + return index; + }, + beforeEnter: function(el) { + el.textContent = 'beforeEnter'; + }, + enter: function(el, done) { + el.textContent = 'enter'; + setTimeout(function() { + done(); + }, 1000); + }, + afterEnter: function(el) { + el.textContent = 'afterEnter'; + }, + enterCancelled: function(el) { + el.textContent = 'enterCancelled'; + }, + beforeLeave: function (el) { + el.textContent = 'beforeLeave'; + }, + leave: function (el, done) { + el.textContent = 'leave'; + done(); + }, + afterLeave: function (el) { + el.textContent = 'afterLeave'; + }, + leaveCancelled: function (el) { + el.textContent = 'leaveCancelled'; + } + }); + var myPartial: string = Vue.partial("my-partial", "
Hello
"); + myPartial = Vue.partial("my-partial"); + Vue.use(() => {}, {}); + Vue.use({install: () => {}, option: () => {}}); + Vue.mixin({ready() {}}); +} + +namespace TestInstanceProperty { + "use strict"; + + var vm = new Vue({el: '#app'}); + var data: any = vm.$data; + var el: HTMLElement = vm.$el; + var options: any = vm.$options; + var parent: any = vm.$parent; + var root: any = vm.$root; + var children: any[] = vm.$children; + var refs: any = vm.$refs; + var els: any = vm.$els; +} + +namespace TestInscanceMethods { + "use strict"; + + var vm = new Vue({el: '#app'}); + vm.$watch('a.b.c', function(newVal: string, oldVal: number) {}); + vm.$watch(function() {return this.a + this.b}, function(newVal: string, oldVal: string) {}); + var unwatch = vm.$watch('a', (value: any) => {}); + unwatch(); + vm.$watch('someObject', (value: any) => {}, {deep: true}); + vm.$watch('a', (value: any) => {}, {immidiate: true}); + vm.$get('a.b'); + vm.$set('a.b', 2); + vm.$delete('a'); + var s: string = vm.$eval('msg | uppercase'); + s = vm.$interpolate('{{msg}} world!'); + vm.$log(); + vm.$log('item'); + + vm + .$on('test', (msg: any) => {}) + .$once('testOnce', (msg: any) => {}) + .$off("event", () => {}) + .$emit("event", 1, 2) + .$dispatch("event", 1, 2, 3) + .$broadcast("event", 1, 2, 3, 4) + + .$appendTo(document.createElement("div"), () => {}) + .$before('#app', () => {}) + .$after(document.getElementById('app')) + .$remove(() => {}) + .$nextTick(() => {}); + + vm + .$mount('#app') + .$destroy(false); +} + +namespace TestVueUtil { + "use strict"; + + var _ = Vue.util; + var target = document.createElement('div'); + var child = document.createElement('div'); + var parent = document.createElement('div'); + var a: any[]; + var b: boolean; + var f: Function; + var n: number; + var s: string; + var o: any; + o = _.checkComponentAttr(target, {}); + _.warn('oops', new Error()); + b = _.inDoc(target); + s = _.getAttr(target, 'v-test'); + _.before(target, child); + _.after(target, child); + _.remove(target); + _.prepend(target, parent); + _.replace(child, target); + _.on(target, 'click', () => {}); + _.off(target, 'click', () => {}); + _.removeClass(target, 'header'); + _.addClass(target, 'header'); + _.nextTick(() => {}, {}); + b = _.isLiteral('123'); + s = _._toString('hi'); + var ns: number | string = _.toNumber('12'); + s = _.stripQuotes('"123"'); + s = _.camelize('abc'); + s = _.hyphenate('whatsUp'); + s = _.classify('abc'); + f = _.bind(() => {}, {}); + a = _.toAarray(document.getElementsByClassName('target')); + o = _.extend({}, {a: 1, b: 2}); + b = _.isObject({}); + b = _.isPlainObject({}); + b = _.isArray([]); + _.def({}, 'test', 123); + _.def({}, 'test2', 123, true); + f = _.debounce(() => {}, 100); + b = _.looseEqual(1, '1'); +} + +namespace TestExplicitExtend { + "use strict"; + + export class Application extends Vue { + text: string; + constructor() { + super(); + this._init({ + // data is necessary to always write in init() + data: { + text: "hello world." + }, + methods: { + action: this.action + }, + props: { + propA: Object, + propB: { + type: Application, + default: () => new Application(), + twoWay: true, + coerce(value: any) {} + } + } + }); + } + action(): void { + console.log("action"); + this.$on("event", (value: any) => {}).anotherAction(); + } + anotherAction(): void { + this.$emit("event"); + } + $els: { + target: HTMLDivElement; + } + } + + var app = new Application(); + app.$mount("#main").$destroy(); +}