Merge pull request #1 from michaelolof/master

tiagoroldao · web-flow · commit 170bd19a8b90 · 2020-06-06T14:29:57.000+02:00
Updated master to source
diff --git a/README.md b/README.md
@@ -92,7 +92,7 @@ export const store = new Vuex.Store({
 
 // Creating proxies.
 const vxm = {
-  user: createProxy( UserStore ),
+  user: createProxy( store, UserStore ),
 }
 ```
 
@@ -260,4 +260,4 @@ export class UserStore extends createModule({ target: "nuxt" }) {
 ```
 
 ## See Old API
-[Old API >](old-api-readme.md)
+[Old API >](old-api-readme.md)
diff --git a/dist/interfaces.d.ts b/dist/interfaces.d.ts
@@ -70,8 +70,8 @@ export interface ProxyWatchers {
         deep: boolean;
         immediate: boolean;
     }): () => void;
-    $subscribe(mutationfield: string, callback: (payload: any) => void): void;
-    $subscribeAction(actionField: string, callbackOrObj: SubScribeActionCallback | SubScribeActionObject): void;
+    $subscribe(mutationfield: string, callback: (payload: any) => void): () => void;
+    $subscribeAction(actionField: string, callbackOrObj: SubScribeActionCallback | SubScribeActionObject): () => void;
 }
 declare type SubScribeActionCallback = (payload: any) => void;
 declare type SubScribeActionObject = {
diff --git a/js/interfaces.d.ts b/js/interfaces.d.ts
@@ -70,8 +70,8 @@ export interface ProxyWatchers {
         deep: boolean;
         immediate: boolean;
     }): () => void;
-    $subscribe(mutationfield: string, callback: (payload: any) => void): void;
-    $subscribeAction(actionField: string, callbackOrObj: SubScribeActionCallback | SubScribeActionObject): void;
+    $subscribe(mutationfield: string, callback: (payload: any) => void): () => void;
+    $subscribeAction(actionField: string, callbackOrObj: SubScribeActionCallback | SubScribeActionObject): () => void;
 }
 declare type SubScribeActionCallback = (payload: any) => void;
 declare type SubScribeActionObject = {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuex-class-component",
-  "version": "2.2.1",
+  "version": "2.3.2",
   "description": "\"A Type Safe Vuex Module or Store Using ES6 Classes and ES7 Decorators written in TypeScript.\"",
   "main": "dist/index.js",
   "directories": {
diff --git a/src/actions.ts b/src/actions.ts
@@ -18,14 +18,13 @@ export function action(...params:any[]) {
   
   if( firstParam === undefined ) return handleMutateActionMode;
   
-  if( firstParam instanceof VuexModule || firstParam instanceof LegacyVuexModule || typeof firstParam === "object" ) { 
+  if( firstParam instanceof VuexModule || firstParam instanceof LegacyVuexModule ) { 
     return handleMutateActionMode( firstParam, params[ 1 ], params[ 2 ] )
   }
-  //@ts-ignore
   switch( firstParam.mode ) {
     case "raw": return handleRawActionMode;
     case "mutate": return handleMutateActionMode;
-    default: return handleMutateActionMode;
+    default: return handleMutateActionMode( firstParam, params[ 1 ], params[ 2 ] );
   }
 
 }
diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -96,9 +96,9 @@ export interface ProxyWatchers {
   $subscribe (
     mutationfield :string,
     callback :( payload :any ) => void,
-  ) :void
+  ) :() => void
 
-  $subscribeAction ( actionField :string, callbackOrObj :SubScribeActionCallback | SubScribeActionObject ) :void
+  $subscribeAction ( actionField :string, callbackOrObj :SubScribeActionCallback | SubScribeActionObject ) :() => void
 
 }
 
@@ -107,4 +107,4 @@ type SubScribeActionCallback = ( payload :any ) => void;
 type SubScribeActionObject = {
   before: ( payload :any ) => void;
   after: ( payload :any ) => void;
-}
+}
diff --git a/src/module.ts b/src/module.ts
@@ -108,7 +108,10 @@ export function getNamespacedPath( cls :VuexModuleConstructor ) {
   
   const namespaced = cls.prototype.__options__ && cls.prototype.__options__.namespaced;
 
-  if( namespaced ) cls.prototype.__namespacedPath__ = namespaced.split("/")[0]
+  if( namespaced ) {
+    const namePaths = namespaced.split("/");
+    cls.prototype.__namespacedPath__ = namePaths[namePaths.length - 1] || namePaths[namePaths.length - 2];
+  }
 
   return cls.prototype.__namespacedPath__;
   
diff --git a/src/proxy.ts b/src/proxy.ts
@@ -1,4 +1,4 @@
-import { extractVuexModule } from "./module";
+import { extractVuexModule, getNamespacedPath } from "./module";
 import { VuexModuleConstructor, Map, VuexModule, ProxyWatchers } from "./interfaces";
 import { getClassPath, toCamelCase, refineNamespacedPath } from "./utils";
 
@@ -36,7 +36,7 @@ export function createProxy<T extends typeof VuexModule>( $store :any, cls :T )
     // If field is a getter use the normal getter path if not use internal getters.
     if( typeof field === "string" && getterNames.indexOf( field ) > -1 ) {
       return $store.watch( 
-        () => $store.getters[ namespacedPath +  field ],
+        () => ($store.rootGetters || $store.getters)[ namespacedPath +  field ],
         callback,
         options,
       )
@@ -45,7 +45,7 @@ export function createProxy<T extends typeof VuexModule>( $store :any, cls :T )
     const className = cls.name.toLowerCase();
 
     return $store.watch( 
-      () => $store.getters[ namespacedPath + `__${className}_internal_getter__`]( field ),
+      () => ($store.rootGetters || $store.getters)[ namespacedPath + `__${className}_internal_getter__`]( field ),
       callback,
       options,
     )
@@ -251,13 +251,13 @@ function createLocalWatchers( cls :VuexModuleConstructor, $store :Map, namespace
 
     if( fieldIsAnExplicitGetter ) {
       $store.watch( 
-        () => $store.getters[ namespacedPath + field ],
+        () => ($store.rootGetters || $store.getters)[ namespacedPath + field ],
         proxiedWatchFunc,
       )
     }
     else { // This is so we can also watch implicit getters.
       $store.watch( 
-        () => $store.getters[ namespacedPath + `__${className}_internal_getter__` ]( field ),
+        () => ($store.rootGetters || $store.getters)[ namespacedPath + `__${className}_internal_getter__` ]( field ),
         proxiedWatchFunc,
       )
     }
@@ -270,7 +270,8 @@ function createSubModuleProxy( $store :Map, cls:VuexModuleConstructor, proxy :Ma
   const store = cls.prototype.__store_cache__ || $store;
   for( let field in modules ) {
     const subModuleClass = cls.prototype.__submodules_cache__[ field ] as VuexModuleConstructor;
-    subModuleClass.prototype.__namespacedPath__ = cls.prototype.__namespacedPath__ + "/" + subModuleClass.prototype.__namespacedPath__;
+    const namespacedPath = getNamespacedPath(subModuleClass);
+    subModuleClass.prototype.__namespacedPath__ = cls.prototype.__namespacedPath__ + "/" + namespacedPath;
     proxy[ field ] = createProxy( store, subModuleClass );
   }
 
@@ -310,17 +311,19 @@ function createGettersAndMutationProxyFromState({ cls, proxy, state, $store, nam
           get: () => { 
             // When creating local proxies getters doesn't exist on that context, so we have to account
             // for that.
-            if( $store.getters ) { 
-              return $store.getters[ namespacedPath + `__${className}_internal_getter__` ]( path )
+            const getters = $store.rootGetters || $store.getters;
+            if( getters ) {
+              const getterPath = refineNamespacedPath(cls.prototype.__namespacedPath__) + `__${className}_internal_getter__`;
+              return getters[ getterPath ]( path )
             }else return $store[ `__${className}_internal_getter__` ]( path ) 
           },
           set: payload => { 
             const commit = $store.commit || cls.prototype.__store_cache__.commit;
-            if( commit ) commit( refineNamespacedPath( cls.prototype.__namespacedPath__ ) + `__${className}_internal_mutator__`, { field: path, payload });
+            if( commit ) commit( refineNamespacedPath( cls.prototype.__namespacedPath__ ) + `__${className}_internal_mutator__`, { field: path, payload }, { root: true });
             else {
               // We must be creating local proxies hence, $store.commit doesn't exist
               const store = cls.prototype.__context_store__!;
-              store.commit( `__${className}_internal_mutator__`, { field: path, payload })
+              store.commit( `__${className}_internal_mutator__`, { field: path, payload }, { root: true })
             }
           },
         })
@@ -401,7 +404,7 @@ function __createGettersAndMutationProxyFromState({ cls, proxy, state, $store, n
           else {
             // We must be creating local proxies hence, $store.commit doesn't exist
             const store = cls.prototype.__context_store__!;
-            store.commit( `__${className}_internal_mutator__`, { field, payload })
+            store.commit( `__${className}_internal_mutator__`, { field, payload }, { root: true })
           }
         },
       })
@@ -437,7 +440,7 @@ function createExplicitMutationsProxy( cls :VuexModuleConstructor, proxy :Map, $
   );
 
   for( let field in mutations ) {
-    proxy[ field ] = ( payload :any ) => commit( namespacedPath + field, payload )
+    proxy[ field ] = ( payload :any ) => commit( namespacedPath + field, payload, { root: true } )
   }
 
 }
@@ -465,21 +468,23 @@ function createGettersAndGetterMutationsProxy({ cls, getters, mutations, proxy,
       
       Object.defineProperty( proxy, field, {
         get: () => {
-          if( $store.getters ) return $store.getters[ namespacedPath + field ]
+          const storeGetters = namespacedPath ? $store.rootGetters : $store.getters;
+          if( storeGetters ) return storeGetters[ namespacedPath + field ]
           else return $store[ namespacedPath + field ];
         },
-        set: ( payload :any ) => $store.commit( namespacedPath + field, payload ),
+        set: ( payload :any ) => $store.commit( namespacedPath + field, payload, { root: !!namespacedPath } ),
       })
       
       continue;
     }
     
     // The field has only a getter.
-    if( proxy[ field ] ) continue;
+    if( Object.prototype.hasOwnProperty.call(proxy, field) ) continue;
     
     Object.defineProperty( proxy, field, {
       get: () => { 
-        if( $store.getters ) return $store.getters[ namespacedPath + field ];
+        const storeGetters = $store.rootGetters || $store.getters;
+        if( storeGetters ) return storeGetters[ namespacedPath + field ];
         else return $store[ namespacedPath + field ];
       }
     })
diff --git a/src/utils.ts b/src/utils.ts
@@ -3,6 +3,7 @@ export function toCamelCase(str :string){
 }
 
 export function getClassPath( path :string ) {
+  if (!path) { return ''; }
   const arr = path.split( "/" );
   return arr[ arr.length - 1 ];
 }
diff --git a/test/create-proxy.spec.ts b/test/create-proxy.spec.ts
@@ -2,7 +2,7 @@
 import Vuex, {Store} from 'vuex'
 // @ts-ignore
 import { createLocalVue } from '@vue/test-utils'
-import { Module, VuexModule, getter, mutation, action } from '../src'
+import { Module, VuexModule, getter, mutation, action, getRawActionContext } from '../src'
 
 
 interface Name {
diff --git a/test/extract-vuex-module.spec.ts b/test/extract-vuex-module.spec.ts
@@ -90,7 +90,7 @@ describe('ExtractVuexModule', () => {
 	it('should extract all properties as state in a function for NuxtUserStore', () => {
 		const { state } = NuxtUserStore.ExtractVuexModule( NuxtUserStore );
 		expect( typeof state ).toBe( "function" );
-		expect( state() ).toEqual({
+		expect( (state as Function)() ).toEqual({
 			firstname: "Michael",
 			lastname: "Olofinjana",
 			speciality: "JavaScript",
@@ -103,7 +103,7 @@ describe('ExtractVuexModule', () => {
 		const { getters } = UserStore.ExtractVuexModule(UserStore)
 		// Note all states are automatically accessible as getters.
 		// This makes th `@getter` decorator redundant. But we have it for backwards compatibility.
-		expect(Object.keys(getters)).toEqual([ 'fullName', `__${UserStore.name.toLowerCase()}_internal_getter__` ])
+		expect(Object.keys(getters)).toEqual([ 'fullName', 'speciality', 'occupation', `__${UserStore.name.toLowerCase()}_internal_getter__` ])
 	})
 
 	it('should extract all actions', () => {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vuex-class-component",`
`3`		`- "version": "2.2.1",`
	`3`	`+ "version": "2.3.2",`
`4`	`4`	`"description": "\"A Type Safe Vuex Module or Store Using ES6 Classes and ES7 Decorators written in TypeScript.\"",`
`5`	`5`	`"main": "dist/index.js",`
`6`	`6`	`"directories": {`
Original file line number	Diff line number	Diff line change
`@@ -18,14 +18,13 @@ export function action(...params:any[]) {`
`18`	`18`
`19`	`19`	`if( firstParam === undefined ) return handleMutateActionMode;`
`20`	`20`
`21`		`- if( firstParam instanceof VuexModule \|\| firstParam instanceof LegacyVuexModule \|\| typeof firstParam === "object" ) {`
	`21`	`+ if( firstParam instanceof VuexModule \|\| firstParam instanceof LegacyVuexModule ) {`
`22`	`22`	`return handleMutateActionMode( firstParam, params[ 1 ], params[ 2 ] )`
`23`	`23`	`}`
`24`		`- //@ts-ignore`
`25`	`24`	`switch( firstParam.mode ) {`
`26`	`25`	`case "raw": return handleRawActionMode;`
`27`	`26`	`case "mutate": return handleMutateActionMode;`
`28`		`- default: return handleMutateActionMode;`
	`27`	`+ default: return handleMutateActionMode( firstParam, params[ 1 ], params[ 2 ] );`
`29`	`28`	`}`
`30`	`29`
`31`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ export function toCamelCase(str :string){`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`export function getClassPath( path :string ) {`
	`6`	`+ if (!path) { return ''; }`
`6`	`7`	`const arr = path.split( "/" );`
`7`	`8`	`return arr[ arr.length - 1 ];`
`8`	`9`	`}`