Skip to content

Commit ce60b67

Browse files
HerringtonDarkholmeyyx990803
authored andcommitted
Add Type declaration file (#57)
* typing file skeleton * add initial typing * add type tests * update package.json * address code review and improve types
1 parent cde4f9d commit ce60b67

File tree

7 files changed

+177
-10
lines changed

7 files changed

+177
-10
lines changed

Diff for: package-lock.json

+15-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@
2525
"dev": "rollup -c rollup.config.js -w",
2626
"build": "rollup -c rollup.config.js",
2727
"lint": "eslint src test example --fix",
28-
"test": "jest",
28+
"test": "npm run test:unit && npm run test:types",
29+
"test:unit": "jest",
30+
"test:types": "tsc -p types/test",
2931
"dev:test": "jest --watch",
3032
"prebuild": "npm run lint",
3133
"pretest": "npm run build",
@@ -41,6 +43,7 @@
4143
"rollup-plugin-buble": "^0.15.0",
4244
"rollup-watch": "^3.2.2",
4345
"rxjs": "^5.2.0",
46+
"typescript": "^2.5.2",
4447
"vue": "^2.2.4"
4548
},
4649
"eslintConfig": {

Diff for: types/index.d.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Vue = require('vue')
2+
import { WatchOptions } from 'vue'
3+
import { Observable } from 'rxjs/Observable'
4+
5+
export type Observables = Record<string, Observable<any>>
6+
declare module 'vue/types/options' {
7+
interface ComponentOptions<V extends Vue> {
8+
subscriptions?: Observables | ((this: V) => Observables)
9+
domStreams?: string[]
10+
observableMethods?: string[] | Record<string, string>
11+
}
12+
}
13+
14+
export interface WatchObservable<T> {
15+
newValue: T
16+
oldValue: T
17+
}
18+
declare module "vue/types/vue" {
19+
interface Vue {
20+
$observables: Observables;
21+
$watchAsObservable(expr: string, options?: WatchOptions): Observable<WatchObservable<any>>
22+
$watchAsObservable<T>(fn: (this: this) => T, options?: WatchOptions): Observable<WatchObservable<T>>
23+
$eventToObservable(event: string): Observable<{name: string, msg: any}>
24+
$subscribeTo<T>(
25+
observable: Observable<T>,
26+
next: (t: T) => void,
27+
error?: (e: any) => void,
28+
complete?: () => void): void
29+
$fromDOMEvent(selector: string | null, event: string): Observable<Event>
30+
$createObservableMethod(methodName: string): Observable<any>
31+
}
32+
}
33+
34+
export declare function install(V: typeof Vue): void

Diff for: types/test/index.ts

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import Vue = require('vue')
2+
import * as VueRX from '../index'
3+
import * as Rx from 'rxjs/Rx'
4+
5+
Vue.use(VueRX, Rx)
6+
7+
var vm = new Vue({
8+
el: '#app',
9+
subscriptions: {
10+
msg: Rx.Observable.interval(100)
11+
}
12+
})
13+
14+
vm.$observables.msg.subscribe(msg => console.log(msg))
15+
16+
Vue.component('foo', {
17+
subscriptions: function () {
18+
return {
19+
msg: Rx.Observable.interval(100)
20+
}
21+
}
22+
})
23+
24+
new Vue({
25+
domStreams: ['plus$']
26+
})
27+
28+
var vm = new Vue({
29+
data: {
30+
a: 1
31+
},
32+
subscriptions () {
33+
// declaratively map to another property with Rx operators
34+
return {
35+
aPlusOne: this.$watchAsObservable('a')
36+
.pluck('newValue')
37+
.map((a: number) => a + 1)
38+
}
39+
}
40+
})
41+
42+
// or produce side effects...
43+
vm.$watchAsObservable('a')
44+
.subscribe(
45+
({ newValue, oldValue }) => console.log('stream value', newValue, oldValue),
46+
err => console.error(err),
47+
() => console.log('complete')
48+
)
49+
50+
51+
var vm = new Vue({
52+
created () {
53+
this.$eventToObservable('customEvent')
54+
.subscribe((event) => console.log(event.name,event.msg))
55+
}
56+
})
57+
58+
var vm = new Vue({
59+
mounted () {
60+
this.$subscribeTo(Rx.Observable.interval(1000), function (count) {
61+
console.log(count)
62+
})
63+
}
64+
})
65+
66+
var vm = new Vue({
67+
subscriptions () {
68+
return {
69+
inputValue: this.$fromDOMEvent('input', 'keyup').pluck('target', 'value')
70+
}
71+
}
72+
})
73+
74+
var vm = new Vue({
75+
subscriptions () {
76+
return {
77+
// requires `share` operator
78+
formData: this.$createObservableMethod('submitHandler')
79+
}
80+
}
81+
})
82+
83+
var vm = new Vue({
84+
subscriptions () {
85+
return {
86+
// requires `share` operator
87+
formData: this.$createObservableMethod('submitHandler')
88+
}
89+
}
90+
})

Diff for: types/test/tsconfig.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"target": "es5",
5+
"lib": [
6+
"es5",
7+
"dom",
8+
"es2015.promise",
9+
"es2015.core"
10+
],
11+
"strict": true,
12+
"noEmit": true
13+
}
14+
}

Diff for: types/tsconfig.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"target": "es5",
5+
"lib": [
6+
"es5",
7+
"dom",
8+
"es2015.promise"
9+
],
10+
"strict": true,
11+
"noEmit": true
12+
},
13+
"include": [
14+
"*.d.ts"
15+
]
16+
}

Diff for: types/typings.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "vue-rx",
3+
"main": "index.d.ts"
4+
}

0 commit comments

Comments
 (0)