[WIP] Type safe store binding helper

package.json

@@ -46,15 +46,16 @@
     "rollup": "^0.50.0",
     "rollup-plugin-replace": "^2.0.0",
     "sinon": "^4.0.1",
+    "testdouble": "^3.3.2",
     "testem": "^1.18.4",
     "ts-loader": "^3.0.2",
     "tslint": "^5.7.0",
     "tslint-config-ktsn": "^2.1.0",
     "typescript": "^2.5.3",
     "uglify-js": "^3.1.4",
-    "vue": "^2.5.2",
-    "vue-class-component": "^6.0.0",
-    "vuex": "^3.0.0",
+    "vue": "^2.5.13",
+    "vue-class-component": "^6.1.2",
+    "vuex": "github:ktsn/vuex#8b6a6f9",
     "webpack": "^3.8.1",
     "webpack-espower-loader": "^1.0.2"
   },

scripts/webpack.config.test.js

@@ -2,7 +2,8 @@ const path = require('path')
 const glob = require('glob')
 
 module.exports = {
-  entry: ['es6-promise/auto'].concat(glob.sync(path.resolve(__dirname, '../test/**/*.ts'))),
+  entry: ['es6-promise/auto', path.resolve(__dirname, '../test/setup.ts')]
+    .concat(glob.sync(path.resolve(__dirname, '../test/**/*.spec.ts'))),
   output: {
     path: path.resolve(__dirname, '../.tmp'),
     filename: 'test.js'

src/bind-store.ts

@@ -0,0 +1,107 @@
+import Vue, { VueConstructor, ComponentOptions } from 'vue'
+import { merge, mapValues } from './utils'
+
+export interface Class<Instance> {
+  new (...args: any[]): Instance
+}
+
+export type MutationMethod<P> = (payload: P) => void
+export type ActionMethod<P> = (payload: P) => Promise<any>
+
+export interface StoreBinder<Instance extends Vue, State, Getters, Mutations, Actions> {
+  create(): Class<Instance> & typeof Vue
+
+  state<Key extends keyof State>(map: Key[]): StoreBinder<Instance & { [K in Key]: State[K] }, State, Getters, Mutations, Actions>
+  state<Map extends Record<string, keyof State>>(map: Map): StoreBinder<Instance & { [K in keyof Map]: State[Map[K]] }, State, Getters, Mutations, Actions>
+
+  getters<Key extends keyof Getters>(map: Key[]): StoreBinder<Instance & { [K in Key]: Getters[K] }, State, Getters, Mutations, Actions>
+  getters<Map extends Record<string, keyof Getters>>(map: Map): StoreBinder<Instance & { [K in keyof Map]: Getters[Map[K]] }, State, Getters, Mutations, Actions>
+
+  mutations<Key extends keyof Mutations>(map: Key[]): StoreBinder<Instance & { [K in Key]: MutationMethod<Mutations[K]> }, State, Getters, Mutations, Actions>
+  mutations<Map extends Record<string, keyof Mutations>>(map: Map): StoreBinder<Instance & { [K in keyof Map]: MutationMethod<Mutations[Map[K]]> }, State, Getters, Mutations, Actions>
+
+  actions<Key extends keyof Actions>(map: Key[]): StoreBinder<Instance & { [K in Key]: ActionMethod<Actions[K]> }, State, Getters, Mutations, Actions>
+  actions<Map extends Record<string, keyof Actions>>(map: Map): StoreBinder<Instance & { [K in keyof Map]: ActionMethod<Actions[Map[K]]> }, State, Getters, Mutations, Actions>
+}
+
+export function bindStore<State, Getters, Mutations, Actions>(namespace?: string): StoreBinder<Vue, State, Getters, Mutations, Actions> {
+  return createBinder({})
+}
+
+function createBinder(options: ComponentOptions<Vue>): StoreBinder<Vue, {}, {}, {}, {}> {
+  return {
+    state(map: string[] | Record<string, string>) {
+      const computed = merge(
+        options.computed || {},
+        mapPoly(map, value => makeComputed(value, 'state'))
+      )
+
+      const newOptions = merge(options, { computed })
+
+      return createBinder(newOptions)
+    },
+
+    getters(map: string[] | Record<string, string>) {
+      const computed = merge(
+        options.computed || {},
+        mapPoly(map, value => makeComputed(value, 'getters'))
+      )
+
+      const newOptions = merge(options, { computed })
+
+      return createBinder(newOptions)
+    },
+
+    mutations(map: string[] | Record<string, string>) {
+      const methods = merge(
+        options.methods || {},
+        mapPoly(map, value => makeMethod(value, 'commit'))
+      )
+
+      const newOptions = merge(options, { methods })
+
+      return createBinder(newOptions)
+    },
+
+    actions(map: string[] | Record<string, string>) {
+      const methods = merge(
+        options.methods || {},
+        mapPoly(map, value => makeMethod(value, 'dispatch'))
+      )
+
+      const newOptions = merge(options, { methods })
+
+      return createBinder(newOptions)
+    },
+
+    create() {
+      return Vue.extend(options)
+    }
+  }
+}
+
+function mapPoly<R>(
+  map: string[] | Record<string, string>,
+  fn: (value: string, key: string) => R
+): Record<string, R> {
+  if (Array.isArray(map)) {
+    map = map.reduce<Record<string, string>>((acc, value) => {
+      acc[value] = value
+      return acc
+    }, {})
+  }
+
+  return mapValues(map, fn)
+}
+
+function makeComputed(key: string, type: 'state' | 'getters'): () => any {
+  return function boundComputed (this: Vue): any {
+    return this.$store[type][key]
+  }
+}
+
+function makeMethod(key: string, type: 'dispatch' | 'commit'): (payload: any) => any {
+  return function boundMethod (this: Vue, payload: any): any {
+    return (this.$store[type] as Function)(key, payload)
+  }
+}

src/bindings.ts → src/decorators.ts

@@ -6,13 +6,16 @@ import {
   mapActions,
   mapMutations
 } from 'vuex'
+import { merge } from './utils'
 
 export type VuexDecorator = <V extends Vue> (proto: V, key: string) => void
 
 export type StateTransformer = (state: any, getters: any) => any
 
-export type MapHelper = typeof mapState | typeof mapGetters
-  | typeof mapActions | typeof mapMutations
+export interface MapHelper {
+  (map: string[] | Record<string, string>): Record<string, any>
+  (namespace: string, map: string[] | Record<string, string>): Record<string, any>
+}
 
 export interface BindingOptions {
   namespace?: string
@@ -105,13 +108,3 @@ function extractNamespace (options: BindingOptions | undefined): string | undefi
 
   return n
 }
-
-function merge <T, U> (a: T, b: U): T & U {
-  const res: any = {}
-  ;[a, b].forEach((obj: any) => {
-    Object.keys(obj).forEach(key => {
-      res[key] = obj[key]
-    })
-  })
-  return res
-}

src/index.ts

@@ -4,4 +4,4 @@ export {
   Action,
   Mutation,
   namespace
-} from './bindings'
+} from './decorators'

src/utils.ts

@@ -0,0 +1,20 @@
+export function merge <T, U> (a: T, b: U): T & U {
+  const res: any = {}
+  ;[a, b].forEach((obj: any) => {
+    Object.keys(obj).forEach(key => {
+      res[key] = obj[key]
+    })
+  })
+  return res
+}
+
+export function mapValues<T, R>(
+  obj: Record<string, T>,
+  fn: (value: T, key: string) => R
+): Record<string, R> {
+  const res: Record<string, R> = {}
+  Object.keys(obj).forEach(key => {
+    res[key] = fn(obj[key], key)
+  })
+  return res
+}