add optional parameter handling and getGetters utils for getters type inference

Author: Sascha Braun

README.md

@@ -80,6 +80,33 @@ export const actions = {
 
 ```
 
+## Circular referencing
+
+**Warning**: Be careful when returning values from your **actions** and **getters**!
+```ts
+export const actions = {
+  async incrementAsync(context) {
+    const counterModule = Counter.getInstance(context);
+    counterModule.commit.increment();
+    // Circular referencing here, as incrementAsync needs the type from counterModule and counterModule needs the type from incrementAsync
+    // Result: counterModule is cast to any
+    return counterModule.state.count;
+  }
+};
+```
+To avoid this, always manually type your return types:
+```ts
+export const actions = {
+  // specify the return type here
+  async incrementAsync(context): number {
+    const counterModule = Counter.getInstance(context);
+    counterModule.commit.increment();
+    // everything is fine with our counterModule now
+    return counterModule.state.count;
+  }
+};
+```
+
 ## Contributors
 
 If you are interested and want to help out, don't hesitate to contact me or to create a pull request with your fixes / features.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuex-context",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Write fully type inferred Vuex modules",
   "main": "dist/index.common.js",
   "module": "dist/index.esm.js",
@@ -14,7 +14,7 @@
     "vuex",
     "typescript",
     "type inference",
-    "namespace"
+    "context"
   ],
   "scripts": {
     "serve": "vue-cli-service serve ./samples/main.ts",

samples/store/counter.ts

@@ -1,34 +1,39 @@
-import { Context } from '../../src';
+import { Context } from "../../src";
 
-export interface CounterState {
-  count: number;
-}
+export type CounterState = ReturnType<typeof state>;
 
 export const namespaced = true;
 
-export const state = (): CounterState => ({
-  count: 0
+export const state = () => ({
+  count: 0,
+  test: 0
 });
 
 export const mutations = {
-  increment(state: CounterState) {
-    state.count++;
+  increment(state: CounterState, payload: number = 1) {
+    state.count += payload;
   },
   incrementBy(state: CounterState, payload: number) {
     state.count += payload;
   }
 };
 
 export const actions = {
-  async incrementAsync(context) {
+  async incrementAsync(context): Promise<number> {
     const ctx = Counter.getInstance(context);
     ctx.commit.increment();
+    ctx.commit.incrementBy(12);
+    return ctx.state.count;
   }
 };
 
 export const getters = {
-  doubleCount(state: CounterState) {
+  doubleCount(state: CounterState): number {
     return state.count * 2;
+  },
+  quadrupleCount(state: CounterState, context): number {
+    const getters = Counter.getGetters(context);
+    return getters.doubleCount * 2;
   }
 };
 

samples/store/index.ts

@@ -1,13 +1,15 @@
-import Vue from 'vue';
-import Vuex, { Store, StoreOptions } from 'vuex';
+import Vue from "vue";
+import Vuex, { Store, StoreOptions } from "vuex";
 
-import * as todo from './todo';
+import * as counter from "./counter";
+import * as todo from "./todo";
 
 Vue.use(Vuex);
 
 const options: StoreOptions<any> = {
   modules: {
-    todo
+    todo,
+    counter
   }
 };
 

samples/store/todo.ts

@@ -1,4 +1,4 @@
-import { Context } from '../../src';
+import { Context } from "../../src";
 
 export interface Todo {
   id: string;

src/index.ts

@@ -1,47 +1,59 @@
 import {
     ActionContext, ActionTree, CommitOptions, DispatchOptions, GetterTree, MutationTree, Store
-} from 'vuex';
+} from "vuex";
+
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((
+  k: infer I
+) => void)
+  ? I
+  : never;
 
 type InferPayload<T> = T extends (_: any, payload?: any, options?: any) => any
   ? Parameters<T>[1]
   : never;
 
-type InferMutation<T> = T extends undefined | null
+type Mutation<T> = T extends undefined
   ? (() => void) & ((payload: undefined, options?: CommitOptions) => void)
   : (payload: T, options?: CommitOptions) => void;
-type InferMutations<T> = { [Key in keyof T]: InferMutation<InferPayload<T[Key]>> };
 
-type InferAction<T, R> = T extends undefined | null
+type InferMutation<T> = UnionToIntersection<Mutation<InferPayload<T>>>;
+type InferMutations<T> = { [Key in keyof T]: InferMutation<T[Key]> };
+
+type Action<T, R> = T extends undefined
   ? (() => R) & ((payload: undefined, options?: DispatchOptions) => R)
   : (payload: T, options?: DispatchOptions) => R;
+type ActionReturn<T> = T extends (...args: any[]) => infer R ? R : void;
 
-type InferActionReturn<T> = T extends (...args: any[]) => any ? ReturnType<T> : void;
+type InferAction<T> = UnionToIntersection<Action<InferPayload<T>, ActionReturn<T>>>;
+type InferActions<T> = { [Key in keyof T]: InferAction<T[Key]> };
 
-type InferActions<T> = {
-  [Key in keyof T]: InferAction<InferPayload<T[Key]>, InferActionReturn<T[Key]>>
+type InferGetters<T> = {
+  [Key in keyof T]: T[Key] extends (state: any, getters: any) => infer R ? R : never
 };
 
-type InferGetters<T> = { [Key in keyof T]: T extends any ? ReturnType<T[Key]> : never };
+type InferState<S> = S extends () => infer S ? S : S;
 
 export function Context<
   S extends (() => object) | object = {},
   M extends MutationTree<any> = {},
   A extends ActionTree<any, any> = {},
   G extends GetterTree<any, any> = {}
 >() {
-  type State = S extends () => object ? ReturnType<S> : S;
-
-  const InstanceType = (null as unknown) as Readonly<{
-    state: State;
+  type InstanceType = Readonly<{
+    state: InferState<S>;
     commit: InferMutations<M>;
     dispatch: InferActions<A>;
     getters: InferGetters<G>;
   }>;
 
   return {
-    InstanceType,
+    InstanceType: (undefined as unknown) as InstanceType,
+
+    getGetters(getters: any): InstanceType['getters'] {
+      return getters;
+    },
 
-    getInstance(store: Store<any> | ActionContext<any, any>, ns: string = ''): typeof InstanceType {
+    getInstance(store: Store<any> | ActionContext<any, any>, ns: string = ''): InstanceType {
       const splitNs = ns ? ns.split('/').filter(val => !!val) : [];
       const fixedNs = splitNs.length ? splitNs.join('/') + '/' : '';
 

tests/unit/simple.spec.ts

@@ -1,55 +1,64 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import Vue from "vue";
+import Vuex from "vuex";
 
-import { createStore } from '../../samples/store/';
-import { Todo } from '../../samples/store/todo';
+import { createStore } from "../../samples/store/";
+import { Counter } from "../../samples/store/counter";
+import { Todo } from "../../samples/store/todo";
 
 Vue.use(Vuex);
 
 describe('Simple Todo tests', () => {
   let store;
-  let proxy: typeof Todo.InstanceType;
+  let todo: typeof Todo.InstanceType;
+  let counter: typeof Counter.InstanceType;
 
   beforeEach(() => {
     store = createStore();
-    proxy = Todo.getInstance(store, 'todo');
+    todo = Todo.getInstance(store, 'todo');
+    counter = Counter.getInstance(store, 'counter');
   });
 
   it('Add todo', () => {
-    expect(Array.isArray(proxy.state.list));
-    expect(proxy.state.list.length === 0);
+    expect(Array.isArray(todo.state.list));
+    expect(todo.state.list.length === 0);
 
-    expect(typeof proxy.commit.addTodo === 'function');
+    expect(typeof todo.commit.addTodo === 'function');
 
-    proxy.commit.addTodo({
+    todo.commit.addTodo({
       done: false,
       id: 'random',
       text: 'Random todo'
     });
 
-    expect(proxy.state.list.length === 1);
+    expect(todo.state.list.length === 1);
   });
 
   it('Fetch todos', async () => {
-    expect(Array.isArray(proxy.state.list));
-    expect(proxy.state.list.length === 0);
+    expect(Array.isArray(todo.state.list));
+    expect(todo.state.list.length === 0);
 
-    expect(typeof proxy.dispatch.fetchTodos === 'function');
+    expect(typeof todo.dispatch.fetchTodos === 'function');
 
-    const todos = await proxy.dispatch.fetchTodos();
+    const todos = await todo.dispatch.fetchTodos();
     expect(Array.isArray(todos));
   });
 
   it('Destructure mutations', async () => {
-    const { importTodo, addTodo, toggleTodo } = proxy.commit;
+    const { importTodo, addTodo, toggleTodo } = todo.commit;
 
     expect(typeof importTodo === 'function');
     expect(typeof addTodo === 'function');
     expect(typeof toggleTodo === 'function');
   });
 
+  it('Optional payload', async () => {
+    counter.commit.increment();
+    counter.commit.increment(12);
+    expect(true);
+  });
+
   it('Clear filter', () => {
-    proxy.commit.clearFilter();
-    expect(proxy.state.filter === '');
+    todo.commit.clearFilter();
+    expect(todo.state.filter === '');
   });
 });