Skip to content

Commit

Permalink
Update declaration (vuejs#218)
Browse files Browse the repository at this point in the history
* Update the declaration and its dependency for typings

* Add a test for the declaration

* Add README for the types directory

* Fix test case because of incorrect usage

* Remove deprecated watch API from types

* Update types for 1.0

- middlewares -> plugins
- new method: replaceState, on, once, off and emit

* Add test cases for plugins, replaceState and events

* Fix type of logger plugin
  • Loading branch information
ktsn authored and yyx990803 committed Jul 1, 2016
1 parent 86b64bd commit acbb2dd
Show file tree
Hide file tree
Showing 9 changed files with 334 additions and 32 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@ lib
docs/_book
logger.js
examples/**/build.js
types/typings
types/test/*.js
20 changes: 0 additions & 20 deletions index.d.ts

This file was deleted.

12 changes: 0 additions & 12 deletions tsconfig.json

This file was deleted.

7 changes: 7 additions & 0 deletions types/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
This is the TypeScript declaration of Vuex.

## Testing

```sh
$ tsc -p test/tsconfig.json
```
95 changes: 95 additions & 0 deletions types/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
declare namespace Vuex {
class Store<S> {
constructor(options: StoreOption<S>);

state: S;

dispatch(mutationName: string, ...args: any[]): void;
dispatch<P>(mutation: MutationObject<P>): void;

replaceState(state: S): void;

watch<T>(getter: Getter<S, T>, cb: (value: T) => void, options?: WatchOption): void;

hotUpdate(options: {
mutations?: MutationTree<S>;
modules?: ModuleTree;
}): void;

on(event: string, cb: (...args: any[]) => void): void;
once(event: string, cb: (...args: any[]) => void): void;
off(event?: string, cb?: (...args: any[]) => void): void;
emit(event: string, ...args: any[]): void;
}

function install(Vue: vuejs.VueStatic): void;

interface StoreOption<S> {
state?: S;
mutations?: MutationTree<S>;
modules?: ModuleTree;
plugins?: Plugin<S>[];
strict?: boolean;
}

type Getter<S, T> = (state: S) => T;
type Action<S> = (store: Store<S>, ...args: any[]) => any;
type Mutation<S> = (state: S, ...args: any[]) => void;
type Plugin<S> = (store: Store<S>) => void;

interface MutationTree<S> {
[key: string]: Mutation<S>;
}

interface MutationObject<P> {
type: string;
silent?: boolean;
payload?: P;
}

interface Module<S> {
state: S;
mutations: MutationTree<S>;
}

interface ModuleTree {
[key: string]: Module<any>;
}

interface ComponentOption<S> {
getters: { [key: string]: Getter<S, any> };
actions: { [key: string]: Action<S> };
}

interface WatchOption {
deep?: boolean;
immidiate?: boolean;
}

function createLogger<S>(option: LoggerOption<S>): Plugin<S>;

interface LoggerOption<S> {
collapsed?: boolean;
transformer?: (state: S) => any;
mutationTransformer?: (mutation: MutationObject<any>) => any;
}
}

declare namespace vuejs {
interface ComponentOption {
vuex?: Vuex.ComponentOption<any>;
store?: Vuex.Store<any>;
}

interface Vue {
$store?: Vuex.Store<any>;
}
}

declare module 'vuex' {
export = Vuex
}

declare module 'vuex/logger' {
export default Vuex.createLogger;
}
200 changes: 200 additions & 0 deletions types/test/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
import * as Vue from 'vue';
import * as Vuex from 'vuex';
import createLogger from 'vuex/logger';

Vue.use(Vuex);

interface ISimpleState {
count: number;
}

const INCREMENT = 'INCREMENT';
const INCREMENT_OBJECT = 'INCREMENT_OBJECT';

function createStore(): Vuex.Store<ISimpleState> {
const state: ISimpleState = {
count: 0
};

const mutations: Vuex.MutationTree<ISimpleState> = {
[INCREMENT] (state: ISimpleState, amount: number) {
state.count = state.count + amount;
},
[INCREMENT_OBJECT] (state: ISimpleState, payload: number) {
state.count = state.count + payload;
}
};

return new Vuex.Store({
state,
mutations,
strict: true
});
}

namespace TestDispatch {
const store = createStore();

store.dispatch(INCREMENT, 1);
store.dispatch({
type: INCREMENT_OBJECT,
silent: true,
payload: 10
});
}

namespace TestWithComponent {
const store = createStore();

const a: vuejs.ComponentOption = {
vuex: {
getters: {
count: (state: ISimpleState) => state.count
},
actions: {
incrementCounter({ dispatch, state }: Vuex.Store<ISimpleState>) {
dispatch(INCREMENT, 1);
}
}
}
};

const app = new Vue({
el: '#app',
components: { a },
store
});

const b: number = app.$store.state.count;
}

namespace TestModules {
interface IModuleAState {
value: number;
}

interface IModuleBState {
value: string;
}

interface IModuleState {
a: IModuleAState;
b: IModuleBState;
}

const aState: IModuleAState = { value: 1 };
const bState: IModuleBState = { value: 'test' };

const aMutations: Vuex.MutationTree<IModuleAState> = {
INCREMENT (state: IModuleAState) {
state.value = state.value + 1;
}
};

const bMutations: Vuex.MutationTree<IModuleBState> = {
APPEND (state: IModuleBState, value: string) {
state.value = state.value + value;
}
};

const a = { state: aState, mutations: aMutations };
const b = { state: bState, mutations: bMutations };

const store = new Vuex.Store<IModuleState>({
modules: { a, b }
});

const valA: number = store.state.a.value;
const valB: string = store.state.b.value;
}

namespace TestPlugin {
const a = (store: Vuex.Store<any>) => {};

const b = (store: Vuex.Store<ISimpleState>) => {};

new Vuex.Store<ISimpleState>({
state: { count: 1 },
plugins: [a, b]
});
}

namespace TestReplaceState {
const store = createStore();

store.replaceState({ count: 10 });
}

namespace TestWatch {
const store = createStore();

store.watch(state => state.count, value => {
const a: number = value;
}, {
deep: true,
immidiate: true
});
}

namespace TestHotUpdate {
const store = createStore();

store.hotUpdate({
mutations: {
INCREMENT (state) {
state.count += 10;
}
}
});

store.hotUpdate({
modules: {
a: {
state: 1,
mutations: {
INCREMENT (state) {
state.value++;
}
}
},
b: {
state: 'test',
mutations: {
APPEND (state, value) {
state.value += value;
}
}
}
}
});
}

namespace TestEvents {
const store = createStore();

const handler = (mutation: Vuex.MutationObject<any>, state: ISimpleState) => {
state.count += 1;
};

store.on('mutation', handler);
store.once('mutation', handler);

store.off();
store.off('mutation');
store.off('mutation', handler);

store.emit('some-event', 1, 'a', []);
}

namespace TestLogger {
const logger = createLogger<ISimpleState>({
collapsed: false,
transformer: state => state.count,
mutationTransformer: m => m
});

new Vuex.Store<ISimpleState>({
state: { count: 1 },
plugins: [logger]
});
}
12 changes: 12 additions & 0 deletions types/test/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true
},
"files": [
"index.ts",
"../index.d.ts",
"../typings/index.d.ts"
]
}
11 changes: 11 additions & 0 deletions types/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true
},
"files": [
"index.d.ts",
"typings/index.d.ts"
]
}
7 changes: 7 additions & 0 deletions types/typings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"name": "vuex",
"main": "index.d.ts",
"globalDependencies": {
"vue": "registry:dt/vue#1.0.21+20160423143248"
}
}

0 comments on commit acbb2dd

Please sign in to comment.