Add a possibility to use aliases in mapFields and mapMethods

README.md

@@ -87,7 +87,7 @@ export default {
 
 ### API Reference
 
-##### `mapFields(store: object, fieldNames: string[]): Object`
+##### `mapFields(store: object, fieldNames: string[] | {[fieldAlias: string]: string}): Object`
 
 `mapFields` do fields' map for you:
 
@@ -100,7 +100,19 @@ const fields = {
 }
 ```
 
-##### `mapMethods(store: object, methodNames: string[]): Object`
+```javascript
+const fields = mapFields(todoStore, {
+ todoList: 'todos',
+ unfinishedTodoList: 'unfinishedTodos'
+})
+// equals
+const fields = {
+ todoList() { return todoStore.todos },
+ unfinishedTodoList() { return todoStore.unfinishedTodos }
+}
+```
+
+##### `mapMethods(store: object, methodNames: string[] | {[methodAlias: string]: string}): Object`
 
 `mapMethods` do methods' map for you:
 
@@ -113,6 +125,18 @@ const methods = {
 }
 ```
 
+```javascript
+const methods = mapMethods(todoStore, {
+ addTodoItem: 'addTodo',
+ checkTodoItem: 'toggleTodo'
+})
+// equals
+const methods = {
+ addTodoItem: todoStore.addTodo.bind(todoStore),
+ checkTodoItem: todoStore.toggleTodo.bind(todoStore)
+}
+```
+
 ### License
 
 [Apache-2.0](https://opensource.org/licenses/Apache-2.0)

src/helpers.ts

@@ -1,17 +1,33 @@
-export function mapFields(store: object, fieldNames: string[]): Object {
- return fieldNames.reduce(
- (result, fieldName) => Object.assign(result, {
- [fieldName]: () => store[fieldName]
- }),
+export type PropList = string[] | { [propAlias: string]: string }
+
+function mapProps(store: object, propNames: PropList, mapProp: (store: object, propName: string) => Function): object {
+ const isArray = Array.isArray(propNames)
+
+ return Object.keys(propNames).reduce(
+ (result, key) => {
+ const propAlias = isArray ? propNames[key] : key
+ const propName = propNames[key]
+
+ return Object.assign(result, {
+ [propAlias]: mapProp(store, propName)
+ })
+ },
  {}
  )
 }
 
-export function mapMethods(store, methodNames: string[]) {
- return methodNames.reduce(
- (result, methodName) => Object.assign(result, {
- [methodName]: store[methodName].bind(store)
- }),
- {}
- )
+function mapField(store: object, fieldName: string): Function {
+ return () => store[fieldName]
 }
+
+export function mapFields(store: object, fieldNames: PropList): object {
+ return mapProps(store, fieldNames, mapField)
+}
+
+function mapMethod(store: object, methodName: string): Function {
+ return store[methodName].bind(store)
+}
+
+export function mapMethods(store: object, methodNames: PropList): object {
+ return mapProps(store, methodNames, mapMethod)
+}

test/index.ts

@@ -183,6 +183,27 @@ test('helper mapFields', () => {
  expect(vm.$el.textContent).toBe('0|1')
 })
 
+test('helper mapFields with alias', () => {
+ Vue.use(Movue, { reaction })
+
+ const counter = new Counter()
+
+ const vm = new Vue({
+ fromMobx: {
+ ...mapFields(counter, {
+ myNum: 'num',
+ myNumPlustOne: 'numPlus'
+ })
+ },
+ render (h) {
+ const vm: any = this
+ return h('div', `${vm.myNum}|${vm.myNumPlustOne}`)
+ }
+ }).$mount()
+
+ expect(vm.$el.textContent).toBe('0|1')
+})
+
 test('helper mapMethods', () => {
  Vue.use(Movue, { reaction })
 
@@ -210,6 +231,36 @@ test('helper mapMethods', () => {
  expect(counter.num).toBe(0)
 })
 
+test('helper mapMethods with alias', () => {
+ Vue.use(Movue, { reaction })
+
+ const counter = new Counter()
+
+ const vm = new Vue({
+ methods: {
+ ...mapMethods(counter, {
+ myPlus: 'plus',
+ myReset: 'reset'
+ })
+ },
+ render (h) {
+ const vm: any = this
+ return h('div', `${vm.num}|${vm.numPlus}`)
+ }
+ }).$mount()
+
+ expect(counter.num).toBe(0)
+
+ vm.myPlus()
+ expect(counter.num).toBe(1)
+
+ vm.myPlus()
+ expect(counter.num).toBe(2)
+
+ vm.myReset()
+ expect(counter.num).toBe(0)
+})
+
 test('clean watchers before destroy', () => {
  Vue.use(Movue, { reaction })