diff --git a/package-lock.json b/package-lock.json index 2f5c26a..e0e1e25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3325,15 +3325,6 @@ } } }, - "string_decoder": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", - "dev": true, - "requires": { - "safe-buffer": "5.1.1" - } - }, "string-length": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz", @@ -3354,6 +3345,15 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", @@ -3547,6 +3547,12 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, + "typescript": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.5.2.tgz", + "integrity": "sha1-A4qV99m7tCCxvzW6MdTFwd0//jQ=", + "dev": true + }, "uglify-js": { "version": "2.8.29", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", diff --git a/package.json b/package.json index 2124424..a9c3532 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,9 @@ "dev": "rollup -c rollup.config.js -w", "build": "rollup -c rollup.config.js", "lint": "eslint src test example --fix", - "test": "jest", + "test": "npm run test:unit && npm run test:types", + "test:unit": "jest", + "test:types": "tsc -p types/test", "dev:test": "jest --watch", "prebuild": "npm run lint", "pretest": "npm run build", @@ -41,6 +43,7 @@ "rollup-plugin-buble": "^0.15.0", "rollup-watch": "^3.2.2", "rxjs": "^5.2.0", + "typescript": "^2.5.2", "vue": "^2.2.4" }, "eslintConfig": { diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 0000000..75f09ca --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1,34 @@ +import Vue = require('vue') +import { WatchOptions } from 'vue' +import { Observable } from 'rxjs/Observable' + +export type Observables = Record> +declare module 'vue/types/options' { + interface ComponentOptions { + subscriptions?: Observables | ((this: V) => Observables) + domStreams?: string[] + observableMethods?: string[] | Record + } +} + +export interface WatchObservable { + newValue: T + oldValue: T +} +declare module "vue/types/vue" { + interface Vue { + $observables: Observables; + $watchAsObservable(expr: string, options?: WatchOptions): Observable> + $watchAsObservable(fn: (this: this) => T, options?: WatchOptions): Observable> + $eventToObservable(event: string): Observable<{name: string, msg: any}> + $subscribeTo( + observable: Observable, + next: (t: T) => void, + error?: (e: any) => void, + complete?: () => void): void + $fromDOMEvent(selector: string | null, event: string): Observable + $createObservableMethod(methodName: string): Observable + } +} + +export declare function install(V: typeof Vue): void diff --git a/types/test/index.ts b/types/test/index.ts new file mode 100644 index 0000000..ed6b91b --- /dev/null +++ b/types/test/index.ts @@ -0,0 +1,90 @@ +import Vue = require('vue') +import * as VueRX from '../index' +import * as Rx from 'rxjs/Rx' + +Vue.use(VueRX, Rx) + +var vm = new Vue({ + el: '#app', + subscriptions: { + msg: Rx.Observable.interval(100) + } +}) + +vm.$observables.msg.subscribe(msg => console.log(msg)) + +Vue.component('foo', { + subscriptions: function () { + return { + msg: Rx.Observable.interval(100) + } + } +}) + +new Vue({ + domStreams: ['plus$'] +}) + +var vm = new Vue({ + data: { + a: 1 + }, + subscriptions () { + // declaratively map to another property with Rx operators + return { + aPlusOne: this.$watchAsObservable('a') + .pluck('newValue') + .map((a: number) => a + 1) + } + } +}) + +// or produce side effects... +vm.$watchAsObservable('a') + .subscribe( + ({ newValue, oldValue }) => console.log('stream value', newValue, oldValue), + err => console.error(err), + () => console.log('complete') + ) + + +var vm = new Vue({ + created () { + this.$eventToObservable('customEvent') + .subscribe((event) => console.log(event.name,event.msg)) + } +}) + +var vm = new Vue({ + mounted () { + this.$subscribeTo(Rx.Observable.interval(1000), function (count) { + console.log(count) + }) + } +}) + +var vm = new Vue({ + subscriptions () { + return { + inputValue: this.$fromDOMEvent('input', 'keyup').pluck('target', 'value') + } + } +}) + +var vm = new Vue({ + subscriptions () { + return { + // requires `share` operator + formData: this.$createObservableMethod('submitHandler') + } + } +}) + +var vm = new Vue({ + subscriptions () { + return { + // requires `share` operator + formData: this.$createObservableMethod('submitHandler') + } + } +}) diff --git a/types/test/tsconfig.json b/types/test/tsconfig.json new file mode 100644 index 0000000..92c948e --- /dev/null +++ b/types/test/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es5", + "lib": [ + "es5", + "dom", + "es2015.promise", + "es2015.core" + ], + "strict": true, + "noEmit": true + } +} diff --git a/types/tsconfig.json b/types/tsconfig.json new file mode 100644 index 0000000..8b72d79 --- /dev/null +++ b/types/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es5", + "lib": [ + "es5", + "dom", + "es2015.promise" + ], + "strict": true, + "noEmit": true + }, + "include": [ + "*.d.ts" + ] +} diff --git a/types/typings.json b/types/typings.json new file mode 100644 index 0000000..4f37001 --- /dev/null +++ b/types/typings.json @@ -0,0 +1,4 @@ +{ + "name": "vue-rx", + "main": "index.d.ts" +}