Global api hmr and local trigger

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuex-plus",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Opinionated library that handles module instances in Vuex",
   "main": "dist/vuex+.js",
   "scripts": {

src/instanceHandling/addStore.js

@@ -1,4 +1,5 @@
 import newStore from './newStore.js';
+import { api, remapBaseStore } from './api.js';
 import { getStoreInstanceName, toCamelCase } from './helpers.js';
 import { registerForHMR, unregisterForHMR } from './hmrHandler.js';
 
@@ -45,6 +46,9 @@ export function add(baseStoreName) {
         if (!this.$store._modules.root._children[this['$vuex+'].storeInstanceName]) { // eslint-disable-line
           this.$store.registerModule(this['$vuex+'].storeInstanceName, store);
 
+          const remappedApi = remapBaseStore(store.$api, this['$vuex+'].baseStoreName, this['$vuex+'].storeInstanceName);
+          api[this['$vuex+'].storeInstanceName] = remappedApi;
+
           if (module.hot) {
             this.$hmrHandler = new HmrHandler(this['$vuex+'].storeInstanceName, getNewInstanceStore);
             registerForHMR(this.$hmrHandler, baseStoreName, this['$vuex+'].storeInstanceName);
@@ -58,6 +62,8 @@ export function add(baseStoreName) {
         if (!this.preserve && counter[this['$vuex+'].storeInstanceName] === 0) {
           this.$store.unregisterModule(this['$vuex+'].storeInstanceName);
 
+          // delete api[this['$vuex+'].storeInstanceName];
+
           if (module.hot) {
             unregisterForHMR(this.$hmrHandler);
           }

src/instanceHandling/api.js

@@ -1,7 +1,3 @@
-import { toCamelCase } from './helpers.js';
-
-let importer;
-
 /**
  * The api for all stores
  * The api is autogenerated once the module importer has been set
@@ -11,14 +7,52 @@ let importer;
  */
 export const api = {};
 
+// /**
+//  * Set the importer that can read all stores via require.context
+//  */
+//
+// export const generateAPI = (newImporter) => {
+//   importer = newImporter;
+//   const modules = importer.getModules();
+//   Object.keys(modules).forEach((module) => {
+//     const camelCasedName = toCamelCase(modules[module].name);
+//     api[camelCasedName] = modules[module].$api;
+//   });
+// };
+
 /**
- * Set the importer that can read all stores via require.context
+ * Private method that modifies magics strings to contain their parents
  */
-export const generateAPI = (newImporter) => {
-  importer = newImporter;
-  const modules = importer.getModules();
-  Object.keys(modules).forEach((module) => {
-    const camelCasedName = toCamelCase(modules[module].name);
-    api[camelCasedName] = modules[module].$api;
+export function addModuleToNames(name, subapi) {
+  const result = {};
+  Object.keys(subapi).forEach((type) => {
+    if (type === 'get' || type === 'act' || type === 'mutate') {
+      result[type] = {};
+      Object.keys(subapi[type]).forEach((pathName) => {
+        const path = subapi[type][pathName];
+        result[type][pathName] = name + '/' + path;
+      });
+    } else {
+      result[type] = addModuleToNames(name, subapi[type]);
+    }
   });
-};
+
+  return result;
+}
+
+export function remapBaseStore(storeApi, baseStoreName, newStoreName) {
+  newStoreName = newStoreName || baseStoreName;
+  const result = {};
+  Object.keys(storeApi).forEach((type) => {
+    if (type === 'get' || type === 'act' || type === 'mutate') {
+      result[type] = {};
+      Object.keys(storeApi[type]).forEach((pathName) => {
+        result[type][pathName] = storeApi[type][pathName].replace(baseStoreName, newStoreName);
+      });
+    } else {
+      result[type] = remapBaseStore(storeApi[type], baseStoreName, newStoreName);
+    }
+  });
+
+  return result;
+}

src/instanceHandling/hmrHandler.js

@@ -1,3 +1,4 @@
+import { api, remapBaseStore } from './api.js';
 import { toCamelCase } from './helpers.js';
 
 let handlers = [];
@@ -27,6 +28,10 @@ export const hmrHandler = (updatedModules) => {
       .forEach((handler) => {
         modules[handler.storeInstanceName] = handler.newStore(updatedModules[key]);
       });
+
+    Object.keys(modules).forEach((m) => {
+      api[m] = remapBaseStore(modules[m].$api, modules[m].name, m);
+    });
     store.hotUpdate({ modules });
   });
 };

src/instanceHandling/storeWrapper.js

@@ -1,24 +1,7 @@
 import clone from 'clone';
 import { toCamelCase } from './helpers.js';
+import { addModuleToNames } from './api.js';
 
-/**
- * Private method that modifies magics strings to contain their parents
- */
-function addModuleToNames(name, subapi) {
-  const result = {};
-  Object.keys(subapi).forEach((type) => {
-    if (type === 'get' || type === 'act' || type === 'mutate') {
-      result[type] = {};
-      Object.keys(subapi[type]).forEach((pathName) => {
-        const path = subapi[type][pathName];
-        result[type][pathName] = name + '/' + path;
-      });
-    } else {
-      result[type] = addModuleToNames(name, subapi[type]);
-    }
-  });
-  return result;
-}
 
 /**
  * Modify Vuex Module to contain an api with magic strings

src/vuex+.js

@@ -5,7 +5,7 @@ import storeWrapper from './instanceHandling/storeWrapper.js';
 import { hmrHandler, setStore } from './instanceHandling/hmrHandler.js';
 import { getLocalPath } from './instanceHandling/helpers.js';
 import { add, setup } from './instanceHandling/addStore.js';
-import * as apiManager from './instanceHandling/api.js';
+import { api } from './instanceHandling/api.js';
 
 export const addStore = add;
 
@@ -32,10 +32,9 @@ function searchDeeper(map, key) {
 const getFullPath = (config) => {
   const suffix = config.instance ? '$' + config.instance : '';
   const getterKey = config.subpath.match(/[a-zA-Z]*/)[0];
-  let localApi = apiManager.api[config.vuexPlus.baseStoreName];
-
+  let localApi = api[config.vuexPlus.baseStoreName];
   if (getterKey !== config.vuexPlus.baseStoreName) {
-    localApi = searchDeeper(apiManager.api[config.vuexPlus.baseStoreName], getterKey + suffix);
+    localApi = searchDeeper(api[config.vuexPlus.baseStoreName], getterKey + suffix);
   }
 
   if (!localApi) {
@@ -145,24 +144,35 @@ export const newInstance = function newInstance(substore, instance) {
  * @returns {any} - Value from Vuex getter
  */
 export const global = {
-  api: apiManager.api,
+  get api() {
+    return clone(api);
+  },
 
-  get({ path, context }) {
-    const localPath = getLocalPath(path, context);
+  get({ path, context, local }) {
+    if (local) {
+      const localPath = getLocalPath(path, context);
+      return context.rootGetters[localPath];
+    }
 
-    return context.rootGetters[localPath];
+    return context.rootGetters[path];
   },
 
-  dispatch({ path, data, context }) {
-    const localPath = getLocalPath(path, context);
+  dispatch({ path, data, context, local }) {
+    if (local) {
+      const localPath = getLocalPath(path, context);
+      return context.dispatch(localPath, data, { root: true });
+    }
 
-    return context.dispatch(localPath, data, { root: true });
+    return context.dispatch(path, data, { root: true });
   },
 
-  commit({ path, data, context }) {
-    const localPath = getLocalPath(path, context);
+  commit({ path, data, context, local }) {
+    if (local) {
+      const localPath = getLocalPath(path, context);
+      return context.commit(localPath, data, { root: true });
+    }
 
-    return context.commit(localPath, data, { root: true });
+    return context.commit(path, data, { root: true });
   },
 };
 
@@ -175,7 +185,6 @@ export default {
         if (!setupDone && this.$store) {
           setStore(this.$store);
           const importer = contextHmr.getNewInstance();
-          apiManager.generateAPI(importer);
           setup(importer);
           importer.getModules();
           importer.setupHMR(hmrHandler);