Store builder plus a little coverage

Author: Ben Crowl

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vuex-typex",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "description": "A TypeScript pattern for strongly-typed access to Vuex Store modules",
     "files": [
         "dist/index.js",

src/bah.ts

@@ -1,5 +1,5 @@
 
-import { ActionContext, ActionTree, GetterTree, Module, MutationTree, Store } from "vuex"
+import { ActionContext, ActionTree, GetterTree, Module, MutationTree, Store, StoreOptions, ModuleTree } from "vuex"
 
 const useRootNamespace = { root: true }
 
@@ -15,14 +15,16 @@ export interface BareActionContext<S, R>
     rootState: R
 }
 
-export class ModuleBuilder<S, R> {
-    private store: RootStore<R>
+class ModuleBuilderImpl<S, R={}> implements ModuleBuilder<S, R> {
+    private _store: RootStore<R>
 
-    private getters: GetterTree<S, R> = {}
-    private mutations: MutationTree<S> = {}
-    private actions: ActionTree<S, R> = {}
+    private _getters: GetterTree<S, R> = {}
+    private _mutations: MutationTree<S> = {}
+    private _actions: ActionTree<S, R> = {}
 
-    constructor(private namespace: string, private state: S) { }
+    private _vuexModule: Module<S, R> | undefined
+
+    constructor(public readonly namespace: string, private state: S) { }
 
     commit<P>(handler: MutationHandler<S, void>): () => void
     commit<P>(handler: MutationHandler<S, P>): (payload: P) => void
@@ -31,8 +33,8 @@ export class ModuleBuilder<S, R> {
     commit<P>(handler: MutationHandler<S, P>, name?: string)
     {
         const { key, namespacedKey } = qualifyKey(handler, this.namespace, name)
-        this.mutations[key] = handler
-        return ((payload: P) => this.store.commit(namespacedKey, payload, useRootNamespace)) as any
+        this._mutations[key] = handler
+        return ((payload: P) => this._store.commit(namespacedKey, payload, useRootNamespace)) as any
     }
 
     dispatch<P, T>(handler: ActionHandler<S, R, void, void>): () => Promise<void>
@@ -46,40 +48,44 @@ export class ModuleBuilder<S, R> {
     dispatch<P, T>(handler: any, name?: string): any
     {
         const { key, namespacedKey } = qualifyKey(handler, this.namespace, name)
-        this.actions[key] = handler
-        return (payload: P) => this.store.dispatch(namespacedKey, payload, useRootNamespace)
+        this._actions[key] = handler
+        return (payload: P) => this._store.dispatch(namespacedKey, payload, useRootNamespace)
     }
 
     read<T>(handler: GetterHandler<S, R, T>): () => T
     read<T>(handler: GetterHandler<S, R, T>, name: string): () => T
     read<T>(handler: GetterHandler<S, R, T>, name?: string): () => T
     {
         const { key, namespacedKey } = qualifyKey(handler, this.namespace, name)
-        this.getters[key] = handler
+        this._getters[key] = handler
         return () =>
         {
-            if (this.store.rootGetters)
+            if (this._store.rootGetters)
             {
-                return this.store.rootGetters[namespacedKey] as T
+                return this._store.rootGetters[namespacedKey] as T
             }
-            return this.store.getters[namespacedKey] as T
+            return this._store.getters[namespacedKey] as T
         }
     }
 
-    provideStore(): (store: Store<R>) => void
+    vuexModule(): Module<S, R>
     {
-        return (store) => this.store = store
+        if (!this._vuexModule)
+        {
+            this._vuexModule = {
+                namespaced: true,
+                state: this.state,
+                getters: this._getters,
+                mutations: this._mutations,
+                actions: this._actions
+            }
+        }
+        return this._vuexModule
     }
 
-    toVuexModule(): Module<S, R>
+    _provideStore(store: Store<R>)
     {
-        return {
-            namespaced: true,
-            state: this.state,
-            getters: this.getters,
-            mutations: this.mutations,
-            actions: this.actions
-        }
+        this._store = store
     }
 }
 
@@ -91,4 +97,101 @@ function qualifyKey(handler: Function, namespace: string | undefined, name?: str
         throw new Error(`Vuex handler functions must not be anonymous. Possible causes: fat-arrow functions, uglify`)
     }
     return namespace ? { key, namespacedKey: `${namespace}/${key}` } : { key, namespacedKey: key }
+}
+
+export interface ModuleBuilder<S, R={}>
+{
+    /** The namespace of this ModuleBuilder */
+    readonly namespace: string
+
+    /** Returns a strongly-typed commit function for the provided mutation handler */
+    commit<P>(handler: MutationHandler<S, void>): () => void
+    commit<P>(handler: MutationHandler<S, P>): (payload: P) => void
+    commit<P>(handler: MutationHandler<S, void>, name: string): () => void
+    commit<P>(handler: MutationHandler<S, P>, name: string): (payload: P) => void
+
+    /** Returns a strongly-typed dispatch function for the provided action handler */
+    dispatch<P, T>(handler: ActionHandler<S, R, void, void>): () => Promise<void>
+    dispatch<P, T>(handler: ActionHandler<S, R, P, void>): (payload: P) => Promise<void>
+    dispatch<P, T>(handler: ActionHandler<S, R, void, T>): () => Promise<T>
+    dispatch<P, T>(handler: ActionHandler<S, R, P, T>): (payload: P) => Promise<T>
+    dispatch<P, T>(handler: ActionHandler<S, R, void, void>, name: string): () => Promise<void>
+    dispatch<P, T>(handler: ActionHandler<S, R, P, void>, name: string): (payload: P) => Promise<void>
+    dispatch<P, T>(handler: ActionHandler<S, R, void, T>, name: string): () => Promise<T>
+    dispatch<P, T>(handler: ActionHandler<S, R, P, T>, name: string): (payload: P) => Promise<T>
+
+    /** Returns a strongly-typed read function for the provided getter function */
+    read<T>(handler: GetterHandler<S, R, T>): () => T
+    read<T>(handler: GetterHandler<S, R, T>, name: string): () => T
+
+    /** Returns a Vuex Module.  Called after all strongly-typed functions have been obtained */
+    vuexModule(): Module<S, R>
+
+    _provideStore(store: Store<R>): void
+}
+
+class StoreBuilderImpl<R> implements StoreBuilder<R> {
+    private _moduleBuilders: ModuleBuilder<any, R>[] = []
+    private _vuexStore: Store<R> | undefined
+
+    constructor() { }
+
+    module<S>(namespace: string, state: S): ModuleBuilder<S, R>
+    {
+        if (this._vuexStore)
+        {
+            throw new Error("Can't call module() after vuexStore() has been called")
+        }
+        const builder = new ModuleBuilderImpl<S, R>(namespace, state)
+        this._moduleBuilders.push(builder)
+        return builder
+    }
+
+    vuexStore(): Store<R>
+    {
+        if (!this._vuexStore)
+        {
+            const options: StoreOptions<R> = this.createStoreOptions()
+            const store = new Store<R>(options)
+            this._moduleBuilders.forEach(m => m._provideStore(store))
+            this._vuexStore = store
+        }
+        return this._vuexStore
+    }
+
+    private createStoreOptions(): StoreOptions<R>
+    {
+        const modules: ModuleTree<R> = {}
+        this._moduleBuilders.forEach(m => modules[m.namespace] = m.vuexModule())
+        return { modules }
+    }
+}
+
+export interface StoreBuilder<R>
+{
+    /** Get a ModuleBuilder for the namespace provided */
+    module<S>(namespace: string, state: S): ModuleBuilder<S, R>
+
+    /** Output a Vuex Store after all modules have been built */
+    vuexStore(): Store<R>
+}
+
+const storeBuilderSingleton = new StoreBuilderImpl<any>()
+const namedStoreBuilderMap: { [name: string]: StoreBuilderImpl<any> } = Object.create(null)
+
+/** Get a reference to the default store builder */
+export function getStoreBuilder<R>(): StoreBuilder<R>
+/** Get a reference to a named store builder */
+export function getStoreBuilder<R>(name: string): StoreBuilder<R>
+export function getStoreBuilder<R>(name?: string): StoreBuilder<R>
+{
+    // the default store builder
+    if (!name)
+    {
+        return storeBuilderSingleton
+    }
+
+    // a named store builder    
+    const builder = namedStoreBuilderMap[name] || (namedStoreBuilderMap[name] = new StoreBuilderImpl<R>())
+    return builder
 }

src/index.ts

@@ -0,0 +1,55 @@
+import { expect } from "chai"
+import * as Vue from "vue"
+import * as Vuex from "vuex"
+import { buildStore } from "./store"
+import { RootState } from "./store/index"
+import birthday, { birthdayModuleBuilder } from "./store/birthday/birthday"
+import auth from "./store/auth/auth"
+import { getStoreBuilder } from "../index"
+import { StoreBuilder, ModuleBuilder } from "../index"
+
+interface AnonState { age: number }
+
+describe("Create an anon store", () =>
+{
+    let moduleBuilder: ModuleBuilder<AnonState>
+    beforeEach(() =>
+    {
+        moduleBuilder = getStoreBuilder("anon").module("anon", { age: 36 })
+    })
+
+    describe("try to create a getter with anon function", () =>
+    {
+        it("should fail", () =>
+        {
+
+            expect(() =>
+            {
+                const readApproxDaysAlive = moduleBuilder.read((state: AnonState) => Math.round(state.age * 365.25))
+            }).to.throw()
+        })
+    })
+
+    describe("try to create a getter with explicit name", () =>
+    {
+        it("should succeed", () =>
+        {
+            expect(() =>
+            {
+                const readApproxDaysAlive = moduleBuilder.read((state: AnonState) => Math.round(state.age * 365.25), "daysAlive")
+            }).to.not.throw()
+        })
+    })
+
+    const daysAliveGetter = (state: AnonState) => Math.round(state.age * 365.25) // <-- named function
+    describe("try to create a getter with named function", () =>
+    {
+        it("should succeed", () =>
+        {
+            expect(() =>
+            {
+                const readApproxDaysAlive = moduleBuilder.read(daysAliveGetter)
+            }).to.not.throw()
+        })
+    })
+})

src/tests/anon-handler.spec.ts

@@ -1,19 +1,18 @@
 import { expect } from "chai"
 import * as Vue from "vue"
 import * as Vuex from "vuex"
-import { createStore } from "./store"
-import { RootState } from "./store/index"
+import { buildStore, RootState } from "./store/index"
 import birthday from "./store/birthday/birthday"
 import auth from "./store/auth/auth"
 
-describe("Running an action", () =>
+describe("Run an action", () =>
 {
     let store: Vuex.Store<RootState>
 
     beforeEach(() =>
     {
         Vue.use(Vuex)
-        store = createStore()
+        store = buildStore()
         store.replaceState({
             birthday: {
                 birthdays: [
@@ -28,11 +27,9 @@ describe("Running an action", () =>
             },
             auth: { isLoggedIn: false, userID: "" }
         })
-        auth.provideStore(store)
-        birthday.provideStore(store)
     })
 
-    describe("remove first 2 birthdays", () =>
+    describe("that removes first 2 birthdays with delays", () =>
     {
         it("should show Bertram after removing first two birthdays", async () =>
         {

src/tests/store.spec.ts renamed to src/tests/complete.spec.ts

@@ -1,7 +1,7 @@
 import { expect } from "chai"
 import * as Vue from "vue"
 import * as Vuex from "vuex"
-import { createStore } from "./store"
+import { buildStore } from "./store"
 import { RootState } from "./store/index"
 import birthday from "./store/birthday/birthday"
 import auth from "./store/auth/auth"
@@ -11,7 +11,7 @@ let store: Vuex.Store<RootState>
 async function test()
 {
     Vue.use(Vuex)
-    store = createStore()
+    store = buildStore()
     store.replaceState({
         birthday: {
             birthdays: [
@@ -26,8 +26,6 @@ async function test()
         },
         auth: { isLoggedIn: false, userID: "" }
     })
-    auth.provideStore(store)
-    birthday.provideStore(store)
     expect(birthday.oldestName).equal("Erlich")
     await birthday.dispatchRemoveFirstAfterDelay(20)
     await birthday.dispatchRemoveFirstAfterDelay(20)

src/tests/main.ts

@@ -4,23 +4,23 @@ import { ModuleBuilder } from "../../.."
 import { AuthState } from "./state"
 import { RootState } from "../index"
 import { Module } from "vuex"
+import { getStoreBuilder } from "../../.."
 
 const initialState: AuthState = {
     userID: "b6c8185c6d0af2f5d968",
     isLoggedIn: true 
 }
 
-const a = new ModuleBuilder<AuthState, RootState>("auth", initialState)
+const storeBuilder = getStoreBuilder<RootState>()
+const moduleBuilder = storeBuilder.module<AuthState>("auth", initialState)
 
 const auth = {
-    commitSetUserID: a.commit((state, payload: { userID: string }) => state.userID = payload.userID, "setUserID"),
-    commitSetIsLoggedIn: a.commit((state, payload: { isLoggedIn: boolean }) => state.isLoggedIn = payload.isLoggedIn, "isLoggedIn"),
-    dispatchLogin: a.dispatch((context) =>
+    commitSetUserID: moduleBuilder.commit((state, payload: { userID: string }) => state.userID = payload.userID, "setUserID"),
+    commitSetIsLoggedIn: moduleBuilder.commit((state, payload: { isLoggedIn: boolean }) => state.isLoggedIn = payload.isLoggedIn, "isLoggedIn"),
+    dispatchLogin: moduleBuilder.dispatch((context) =>
     {
         return
-    }, "login"),
-    provideStore: a.provideStore()
+    }, "login")
 }
 
-export default auth
-export const authModule: Module<AuthState, RootState> = a.toVuexModule()
+export default auth