feat: add createMapper convenience utility (#264)

Author: danielroe

Diff for: docs/pages/en/2.accessor/1..accessor-introduction.md renamed to docs/pages/en/2.accessor/1.accessor-introduction.md

@@ -86,7 +86,7 @@ export default defineComponent({
     const counter = computed(() => root.$accessor.counter)
 
     return {
-      counter
+      counter,
     }
   },
 })
@@ -107,7 +107,8 @@ you may want to explicitly define accessor types like in the following example:
 import { wrapProperty } from '@nuxtjs/composition-api'
 import { accessorType } from '~/store'
 
-export const useAccessor = (): typeof accessorType => (wrapProperty('$accessor', false))()
+export const useAccessor = (): typeof accessorType =>
+  wrapProperty('$accessor', false)()
 ```
 
 ### Middleware
@@ -120,3 +121,40 @@ export default ({ redirect, app: { $accessor } }: Context) => {
   if ($accessor.email) return redirect('/')
 }
 ```
+
+## Mapping properties into your component
+
+`typed-vuex` also exports a convenience helper function to allow you to easily map the accessor into your component.
+
+```ts{}[components/sampleComponent.vue]
+import Vue from 'vue'
+
+// Nuxt
+import { accessorType } from '~/store'
+const mapper = createMapper(accessorType)
+// Vue
+import { accessor } from './src/store'
+const mapper = createMapper(accessor)
+
+export default Vue.extend({
+  computed: {
+    // Direct mapping to a property
+    ...mapper('name'),
+    // or array of properties
+    ...mapper(['name', 'email']),
+    // or submodules
+    ...mapper('submodule', ['name', 'email']),
+  },
+  methods: {
+    // All your methods should be included in the methods object,
+    // whether they are mutations, actions (or even a method returned
+    // by a getter or stored in state)
+    ...mapper('resetName'),
+    resetEmail() {
+      // You can access directly off your component instance
+      console.log(this.name, this.email)
+      this.resetName()
+    },
+  },
+})
+```

Diff for: packages/nuxt-typed-vuex/test/fixture/pages/index.vue

@@ -12,6 +12,7 @@
 
 <script>
 import Vue from 'vue'
+import { mapper } from '~/store'
 
 export default Vue.extend({
   asyncData() {
@@ -24,12 +25,20 @@ export default Vue.extend({
     this.int = setInterval(() => {
       this.date = Date.now()
     }, 1000)
+    this.setEmail('[email protected]')
+    console.log(this.fullEmail)
+    this.setFirstName('John')
   },
   computed: {
+    ...mapper('fullEmail'),
     computedDate() {
       return new Date(this.date)
     },
   },
+  methods: {
+    ...mapper(['setEmail']),
+    ...mapper('submodule', ['setFirstName']),
+  },
   beforeDestroy() {
     clearInterval(this.int)
   },

Diff for: packages/nuxt-typed-vuex/test/fixture/store/index.ts

@@ -4,6 +4,7 @@ import {
   getAccessorType,
   mutationTree,
   actionTree,
+  createMapper,
 } from '../../../../typed-vuex/src'
 
 import * as submodule from './submodule'
@@ -56,3 +57,4 @@ export const pattern = {
 export const storeType = getStoreType(pattern)
 
 export const accessorType = getAccessorType(pattern)
+export const mapper = createMapper(accessorType)

Diff for: packages/typed-vuex/package.json

@@ -33,6 +33,7 @@
     "test:types": "yarn tsd"
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0",
     "tsd": "^0.19.1",
     "vue": "^2.6.14",
     "vuex": "^3.6.2"

Diff for: packages/typed-vuex/src/accessor.ts

@@ -12,7 +12,7 @@ export const getAccessorType = <
 >(
   store: Partial<NuxtStoreInput<T, G, M, A, S>>
 ) => {
-  return {} as MergedStoreType<typeof store & BlankStore>
+  return (undefined as any) as MergedStoreType<typeof store & BlankStore>
 }
 
 const getNestedState = (parent: any, namespaces: string[]): any => {

Diff for: packages/typed-vuex/src/index.ts

@@ -2,4 +2,6 @@ export * from './types/store'
 export * from './types/actions'
 export * from './types/getters'
 export * from './types/mutations'
+export * from './types/utils'
 export { useAccessor, getAccessorType, getAccessorFromStore } from './accessor'
+export { createMapper } from './utils'

Diff for: packages/typed-vuex/src/types/utils.ts

@@ -0,0 +1,13 @@
+export type ComputedState<T extends Record<string, any>> = {
+  [K in keyof T]: T[K] extends Function ? T[K] : () => T[K]
+}
+
+export interface Mapper<T extends Record<string, any>> {
+  <M extends keyof T, P extends keyof T[M] = string>(
+    prop: M,
+    properties: P[]
+  ): ComputedState<Pick<T[M], P>>
+  <M extends keyof T, _P extends keyof T[M] = string>(
+    prop: M | M[]
+  ): ComputedState<Pick<T, M>>
+}

Diff for: packages/typed-vuex/src/utils.ts

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { Mapper } from './types/utils'
+
+export const createMapper = <T extends Record<string, any>>(accessor: T) => {
+  const mapper: Mapper<T> = (prop: any, properties?: string[]) => {
+    if (!properties) {
+      return Object.fromEntries(
+        (Array.isArray(prop) ? prop : [prop]).map(property => [
+          property,
+          function(...args: any[]) {
+            const value = accessor
+              ? accessor[property]
+              : // @ts-ignore
+                this.$accessor[property]
+            if (value && typeof value === 'function') return value(...args)
+            return value
+          },
+        ])
+      )
+    }
+    return Object.fromEntries(
+      properties.map(property => [
+        property,
+        function(...args: any[]) {
+          const value =
+            // @ts-ignore
+            accessor ? accessor[prop][property] : this.$accessor[prop][property]
+          if (value && typeof value === 'function') return value(...args)
+          return value
+        },
+      ])
+    )
+  }
+  return mapper
+}

Diff for: packages/typed-vuex/test/__snapshots__/utils.test.ts.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mapper works within a component with injected accessor 1`] = `
+"email: \\"\\"
+        firstName: \\"\\"
+        fullEmail: \\"\\"
+        fullName: \\" \\""
+`;
+
+exports[`mapper works within a component with injected accessor 2`] = `
+"<pre>        email: \\"[email protected]\\"
+        firstName: \\"\\"
+        fullEmail: \\"[email protected]\\"
+        fullName: \\" Smith\\"
+      </pre>"
+`;

Diff for: packages/typed-vuex/test/tsd/map-state.test-d.ts

@@ -0,0 +1,63 @@
+import Vue from 'vue'
+import { getAccessorType, createMapper } from 'typed-vuex'
+import { expectType } from 'tsd'
+
+import { getters, state, actions, mutations } from '../fixture'
+
+import * as submodule from '../fixture/submodule'
+import { CommitOptions, DispatchOptions } from 'vuex/types/index'
+
+const pattern = {
+  getters,
+  state,
+  actions,
+  mutations,
+  modules: {
+    submodule: {
+      ...submodule,
+      namespaced: true,
+      modules: {
+        nestedSubmodule: {
+          ...submodule,
+          namespaced: true,
+        },
+      },
+    },
+  },
+}
+
+const accessor = getAccessorType(pattern)
+const mapper = createMapper(accessor)
+
+Vue.extend({
+  computed: {
+    ...mapper(['email']),
+    ...mapper('fullEmail'),
+    ...mapper('submodule', ['fullName']),
+  },
+  methods: {
+    ...mapper('submodule', ['setFirstName', 'setName']),
+    ...mapper(['resetEmail', 'initialiseStore']),
+    test(): void {
+      // actions
+      expectType<(options?: DispatchOptions | undefined) => Promise<void>>(
+        this.resetEmail
+      )
+      expectType<
+        (payload: string, options?: DispatchOptions | undefined) => void
+      >(this.setName)
+      // getter
+      expectType<string>(this.fullEmail)
+      expectType<string>(this.fullName)
+      // state
+      expectType<string>(this.email)
+      // mutations
+      expectType<
+        (payload: string, options?: CommitOptions | undefined) => void
+      >(this.setFirstName)
+      expectType<(options?: CommitOptions | undefined) => void>(
+        this.initialiseStore
+      )
+    },
+  },
+})

Diff for: packages/typed-vuex/test/utils.test.ts

@@ -0,0 +1,96 @@
+/** @jest-environment jsdom */
+
+import { useAccessor, getAccessorType, createMapper, Mapper } from 'typed-vuex'
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vuex, { Store } from 'vuex'
+
+import { getters, state, actions, mutations } from './fixture'
+import * as submodule from './fixture/submodule'
+
+const pattern = {
+  getters,
+  state,
+  actions,
+  mutations,
+  modules: {
+    submodule: {
+      ...submodule,
+      namespaced: true,
+      modules: {
+        nestedSubmodule: {
+          ...submodule,
+          namespaced: true,
+        },
+      },
+    },
+  },
+}
+
+const accessorType = getAccessorType(pattern)
+
+describe('mapper', () => {
+  let store: Store<any>
+  let accessor: typeof accessorType
+  let mapper: Mapper<typeof accessorType>
+  let Vue
+  // let nuxtMapper: Mapper<typeof accessorType>
+
+  beforeEach(() => {
+    Vue = createLocalVue()
+    Vue.use(Vuex)
+    store = new Store(pattern)
+    accessor = useAccessor(store, pattern)
+    mapper = createMapper(accessor)
+  })
+
+  test('mapper works with state', () => {
+    expect(mapper('email').email()).toEqual('')
+    expect(mapper('submodule', ['firstName']).firstName()).toEqual('')
+  })
+  test('mapper works with getters', () => {
+    expect(mapper('fullEmail').fullEmail()).toEqual('')
+    expect(mapper('submodule', ['fullName']).fullName()).toEqual(' ')
+  })
+  test('mapper works with mutations', () => {
+    mapper('setEmail').setEmail('[email protected]')
+    expect(accessor.email).toEqual('[email protected]')
+    mapper('submodule', ['setLastName']).setLastName('Smith')
+    expect(accessor.submodule.fullName).toEqual(' Smith')
+  })
+  test('mapper works with actions', () => {
+    mapper('resetEmail').resetEmail()
+    expect(accessor.email).toEqual('[email protected]')
+  })
+  test('works within a component with injected accessor', async () => {
+    const mapper = createMapper(accessorType)
+    Vue.prototype.$accessor = accessor
+    const Component = {
+      template: `<pre>
+        email: {{ JSON.stringify(email) }}
+        firstName: {{ JSON.stringify(firstName) }}
+        fullEmail: {{ JSON.stringify(fullEmail) }}
+        fullName: {{ JSON.stringify(fullName) }}
+      </pre>`,
+      computed: {
+        ...mapper('email'),
+        ...mapper('submodule', ['firstName']),
+        ...mapper('fullEmail'),
+        ...mapper('submodule', ['fullName']),
+      },
+      methods: {
+        ...mapper(['setEmail', 'resetEmail']),
+        ...mapper('submodule', ['setLastName']),
+      },
+    }
+    const wrapper = mount(Component, {
+      store,
+      localVue: Vue,
+    })
+    expect(wrapper.text()).toMatchSnapshot()
+    wrapper.vm.setEmail('[email protected]')
+    wrapper.vm.setLastName('Smith')
+    await Vue.nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})