From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 8 Apr 2021 11:43:35 +0000 (+0200)
Subject: feat(mapStores): allow custom suffix
X-Git-Tag: v2.0.0-alpha.11~12
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=c957fb97f1b1ffdb927f40dfa0abd0304a8eb998;p=thirdparty%2Fvuejs%2Fpinia.git

feat(mapStores): allow custom suffix
---

diff --git a/__tests__/mapHelpers.spec.ts b/__tests__/mapHelpers.spec.ts
index d256c84c..2ca4170f 100644
--- a/__tests__/mapHelpers.spec.ts
+++ b/__tests__/mapHelpers.spec.ts
@@ -6,6 +6,7 @@ import {
   mapState,
   mapStores,
   PiniaPlugin,
+  setMapStoreSuffix,
 } from '../src'
 import { createLocalVue, mount } from '@vue/test-utils'
 import VueCompositionAPI, {
@@ -103,6 +104,30 @@ describe('Map Helpers', () => {
       expect(wrapper.text()).toBe('2 2 cart')
       expect(fromStore).toHaveBeenCalledTimes(2)
     })
+
+    it('can set custom suffix', async () => {
+      const pinia = createPinia()
+      setMapStoreSuffix('')
+      const Component = defineComponent({
+        template: `<p @click="main.n++">{{ main.n }}</p>`,
+        computed: {
+          ...mapStores(useStore),
+        },
+      })
+
+      const wrapper = mount(Component, { localVue, pinia })
+      // const store = useStore()
+      // const other = useCartStore()
+      expect(wrapper.vm.main).toBeDefined()
+      expect(wrapper.vm.mainStore).not.toBeDefined()
+      expect(wrapper.text()).toBe('0')
+      await nextTick()
+
+      await wrapper.trigger('click')
+      expect(wrapper.text()).toBe('1')
+      await wrapper.trigger('click')
+      expect(wrapper.text()).toBe('2')
+    })
   })
 
   it('mapGetters', () => {
diff --git a/src/index.ts b/src/index.ts
index ed2cbd32..2bddcd00 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,6 +21,7 @@ export {
   mapState,
   mapGetters,
   MapStoresCustomization,
+  setMapStoreSuffix,
 } from './mapHelpers'
 
 // TODO: remove in beta
diff --git a/src/mapHelpers.ts b/src/mapHelpers.ts
index 65e176ba..e67bd994 100644
--- a/src/mapHelpers.ts
+++ b/src/mapHelpers.ts
@@ -7,8 +7,15 @@ import {
   StoreDefinition,
 } from './types'
 
+/**
+ * Interface to allow customizing map helpers. Extend this interface with the
+ * following properties:
+ *
+ * - `suffix`: string. Affects the suffix of `mapStores()`, defaults to `Store`.
+ */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface MapStoresCustomization {
+  // cannot be added or it wouldn't be able to be extended
   // suffix?: string
 }
 
@@ -49,6 +56,23 @@ function getCachedStore<
   return (cache[id] || (cache[id] = useStore(vm.$pinia))) as Store<Id, S, G, A>
 }
 
+export let mapStoreSuffix = 'Store'
+
+/**
+ * Changes the suffix added by `mapStores()`. Can be set to an empty string.
+ * Defaults to `"Store"`. Make sure to extend the MapStoresCustomization
+ * interface if you need are using TypeScript.
+ *
+ * @param suffix - new suffix
+ */
+export function setMapStoreSuffix(
+  suffix: 'suffix' extends keyof MapStoresCustomization
+    ? MapStoresCustomization['suffix']
+    : string // could be 'Store' but that would be annoying for JS
+): void {
+  mapStoreSuffix = suffix
+}
+
 /**
  * Allows using stores without the composition API (`setup()`) by generating an
  * object to be spread in the `computed` field of a component. It accepts a list
@@ -76,7 +100,7 @@ export function mapStores<Stores extends GenericStoreDefinition[]>(
 ): Spread<Stores> {
   return stores.reduce((reduced, useStore) => {
     // @ts-ignore: $id is added by defineStore
-    reduced[useStore.$id + 'Store'] = function (this: Vue) {
+    reduced[useStore.$id + mapStoreSuffix] = function (this: Vue) {
       return getCachedStore(this, useStore)
     }
     return reduced