Merge pull request #25 from sascha245/feature/dynamic_modules

Feature/dynamic modules

Author: sascha245

README.md

@@ -144,13 +144,17 @@ You can use the `useStore(store)` function to get the bound module class instanc
 
 import { useStore } from 'vuex-simple';
 import { MyStore } from '@/store/store';
+import { FooModule } from '@/store/modules/foo';
 
 @Component
 export default class MyComponent extends Vue {
 
   // get the module instance from the created store
   public store: MyStore = useStore(this.$store);
 
+  // get the module instance with the given namespace
+  public foo1?: FooModule = useModule(this.$store, ['bar', 'foo1']);
+
   public get readState() {
     // access state like a property
     return this.store.version;
@@ -177,6 +181,28 @@ export default class MyComponent extends Vue {
 }
 ```
 
+## Dynamic modules
+
+To add a dynamic module to your store, you can use the `registerModule` function from this package:
+
+```ts
+registerModule($store, ['dynamic_foo'], new FooModule(6));
+```
+
+You can then use `useModule`, to get the bound class instance of the given namespace:
+
+```ts
+const foo = useModule<FooModule>($store, ['dynamic_foo']);
+```
+
+To remove the dynamic module from the store, you can use the `unregisterModule` function from this package:
+
+```ts
+unregisterModule($store, ['dynamic_foo']);
+```
+
+**Note**: You can also those functions on a standard Vuex store.
+
 ## Example with dependency injections
 
 This section shows how to use dependency injection with this library.

samples/views/Home.ts

@@ -1,7 +1,8 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { Inject } from 'vue-typedi';
 
-import { useStore } from '../../src';
+import { registerModule, unregisterModule, useModule, useStore } from '../../src';
+import { MyModule } from '../store/modules/my';
 import { TestModule } from '../store/modules/test';
 import { MyStore } from '../store/store';
 import tokens from '../store/tokens';
@@ -13,10 +14,26 @@ export default class Home extends Vue {
   @Inject(tokens.TEST)
   public testModule!: TestModule;
 
+  public my1?: MyModule = useModule(this.$store, ['test', 'my1']);
+
   // public get testModule() {
   //   return this.store.test;
   // }
 
+  public mounted() {
+    const test = useModule<TestModule>(this.$store, ['test']);
+
+    registerModule(this.$store, ['dynamic'], new TestModule());
+
+    const dynamicModule = useModule<TestModule>(this.$store, ['dynamic']);
+    if (dynamicModule) {
+      dynamicModule.increment();
+    }
+  }
+  public destroyed() {
+    unregisterModule(this.$store, ['dynamic']);
+  }
+
   public get counter() {
     return this.testModule.counter;
   }

samples/views/Home.vue

@@ -12,8 +12,8 @@
       <button @click="increment">Increment</button>
     </div>
     <div>
-      <p>My1 Counter: {{ testModule.my1.counter }}</p>
-      <button @click="testModule.my1.increment">Increment</button>
+      <p>My1 Counter: {{ my1.counter }}</p>
+      <button @click="my1.increment">Increment</button>
     </div>
     <div>
       <p>My2 Counter: {{ testModule.my2.counter }}</p>
@@ -29,5 +29,4 @@
   </div>
 </template>
 
-<style>
-</style>
+<style></style>

src/decorators.ts

@@ -0,0 +1,24 @@
+import { Action as VuexAction } from 'vuex';
+
+import { StoreBuilder } from '../types';
+import { createDecorator } from '../utils';
+
+function getAction(pModule: any, propertyName: string): VuexAction<any, any> {
+  const action: Function = pModule[propertyName];
+  const boundAction = action.bind(pModule);
+  return (state, payload) => boundAction(payload);
+}
+
+function bindAction(pBuilder: StoreBuilder, pModule: any, propertyName: string) {
+  const options = pBuilder.options;
+  const provider = pBuilder.provider;
+  options.actions![propertyName] = getAction(pModule, propertyName);
+  const nsPath = pBuilder.namespaces.join('/');
+  const actionName = (nsPath ? nsPath + '/' : '') + propertyName;
+
+  pModule[propertyName] = (payload: any) => {
+    return provider.store!.dispatch(actionName, payload);
+  };
+}
+
+export const Action = createDecorator(bindAction);

src/decorators/action.ts

@@ -0,0 +1,31 @@
+import { Getter as VuexGetter } from 'vuex';
+
+import { getterNotFoundError } from '../errors';
+import { StoreBuilder } from '../types';
+import { createDecorator } from '../utils';
+
+function getGetter(pModule: any, propertyName: string): VuexGetter<any, any> {
+  const getter = pModule.__lookupGetter__(propertyName);
+  if (!getter) {
+    const className = pModule.constructor.name;
+    throw getterNotFoundError(propertyName, className);
+  }
+  const boundGetter = getter.bind(pModule);
+  return state => boundGetter();
+}
+
+function bindGetter(pBuilder: StoreBuilder, pModule: any, propertyName: string) {
+  const options = pBuilder.options;
+  const provider = pBuilder.provider;
+  options.getters![propertyName] = getGetter(pModule, propertyName);
+  const nsPath = pBuilder.namespaces.join('/');
+  const getterName = (nsPath ? nsPath + '/' : '') + propertyName;
+
+  Object.defineProperty(pModule, propertyName, {
+    get() {
+      return provider.store!.getters[getterName];
+    }
+  });
+}
+
+export const Getter = createDecorator(bindGetter);

src/decorators/getter.ts

@@ -0,0 +1,5 @@
+export * from './state';
+export * from './getter';
+export * from './mutation';
+export * from './action';
+export * from './module';

src/decorators/index.ts

@@ -0,0 +1,29 @@
+import { transformRecursive } from '../transform';
+import { StoreBuilder } from '../types';
+import { createDecorator } from '../utils';
+
+function bindModule(pBuilder: StoreBuilder, pModule: any, propertyName: string) {
+  const subModule = pModule[propertyName];
+  if (!subModule) {
+    return;
+  }
+  try {
+    const moduleOptions = transformRecursive(
+      pBuilder.provider,
+      subModule,
+      pBuilder.namespaces.concat(propertyName),
+      pBuilder.dynamic
+    );
+    const options = pBuilder.options;
+    options.modules![propertyName] = moduleOptions;
+  } catch (err) {
+    console.error(err);
+  }
+  Object.defineProperty(pModule, propertyName, {
+    get() {
+      return subModule;
+    }
+  });
+}
+
+export const Module = createDecorator(bindModule);

src/decorators/module.ts

@@ -0,0 +1,24 @@
+import { Mutation as VuexMutation } from 'vuex';
+
+import { StoreBuilder } from '../types';
+import { createDecorator } from '../utils';
+
+function getMutation(pModule: any, propertyName: string): VuexMutation<any> {
+  const mutation: Function = pModule[propertyName];
+  const boundMutation = mutation.bind(pModule);
+  return (state, payload) => boundMutation(payload);
+}
+
+function bindMutation(pBuilder: StoreBuilder, pModule: any, propertyName: string) {
+  const options = pBuilder.options;
+  const provider = pBuilder.provider;
+  options.mutations![propertyName] = getMutation(pModule, propertyName);
+  const nsPath = pBuilder.namespaces.join('/');
+  const mutationName = (nsPath ? nsPath + '/' : '') + propertyName;
+
+  pModule[propertyName] = (payload: any) => {
+    provider.store!.commit(mutationName, payload);
+  };
+}
+
+export const Mutation = createDecorator(bindMutation);

src/decorators/mutation.ts

@@ -0,0 +1,33 @@
+import { StoreBuilder } from '../types';
+import { createDecorator } from '../utils';
+
+function getState(pState: any, pNamespace: string[]) {
+  let state = pState;
+  for (const namespace of pNamespace) {
+    state = state[namespace];
+  }
+  return state;
+}
+
+function bindState(pBuilder: StoreBuilder, pModule: any, propertyName: string) {
+  const value = pModule[propertyName];
+  const provider = pBuilder.provider;
+  const options = pBuilder.options;
+  Object.defineProperty(pModule, propertyName, {
+    get() {
+      const state = provider.store
+        ? getState(provider.store.state, pBuilder.namespaces)
+        : options.state;
+      return state[propertyName];
+    },
+    set(val: any) {
+      const state = provider.store
+        ? getState(provider.store.state, pBuilder.namespaces)
+        : options.state;
+      state[propertyName] = val;
+    }
+  });
+  pModule[propertyName] = value;
+}
+
+export const State = createDecorator(bindState);