@dharmax/state-router 3.0.0 → 3.1.0

package/ReadMe.md

@@ -29,6 +29,8 @@ you can use the hash notation or not (set the router's mode to 'history' or 'has
     stateManager.addState('inbox')
     stateManager.addState('about')
     stateManager.addState('discussion', 'discussion-page', 'discussion/%')
+    stateManager.addState('article', 'article-page', 'article/%','article-mode')
+    stateManager.addState('blog', 'article-page', 'blog/%','blog-mode')
 ```
 
 ## usage in the gui
@@ -45,4 +47,11 @@ stateManager.onChange( event => {
 })
 
 
-```
+```
+
+## More
+* pageChangeHandler - it's a global optional page change listener that receives ('send', 'pageview', `/${state.name}/${context || ''}`);
+* google analytics (ga) is automatically used if it was found
+* query parameters are passed to the state context under queryParams object
+* on page change, an event state:changed is fired with the new state (that include the context)
+* in addState, the last (optional) parameter can contain either a string an array of strings and it can be used for in-state special logic, or sub-states within the same parent-component, for example  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dharmax/state-router",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A cute and tight router and application state controller",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/router.ts

@@ -76,7 +76,8 @@ class Router {
             const match = path.match(route.pattern);
             if (match) {
                 match.shift(); // Remove the full match element
-                route.handler.apply({}, match);
+                const queryParams = Object.fromEntries(new URLSearchParams(window.location.search));
+                route.handler.apply({queryParams}, match);
                 return true
             }
         }

package/src/state-manager.ts

@@ -21,14 +21,14 @@ export class StateManager {
     public static dispatcher = dispatcher
     private changeAuthorities: ChangeAuthority[] = [];
 
-    constructor(private mode: RoutingMode = 'hash', autostart= true) {
+    constructor(private mode: RoutingMode = 'hash', autostart = true) {
 
         if (autostart)
             router.listen(mode)
     }
 
     start() {
-        router.listen( this.mode )
+        router.listen(this.mode)
     }
 
     onChange(handler: (event: PubSubEvent, data: any) => void): IPubSubHandle {
@@ -61,16 +61,17 @@ export class StateManager {
      * set current page state
      * @param state can be either just a state or a state and context (which can be sub-state, or anything else)
      */
-    set state(state: ApplicationStateName | [ApplicationStateName, any]) {
-        if (Array.isArray(state))
-            this.setState(state[0], state[1])
-        else
+    set state(state: ApplicationStateName | [ApplicationStateName, ...any]) {
+        if (Array.isArray(state)) {
+            const sName = state.shift()
+            this.setState(sName,state)
+        } else
             this.setState(state)
     }
 
     /** attempts to restore state from current url. Currently, works only in hash mode */
     restoreState(defaultState: ApplicationStateName) {
-        if ( router.navigate(window.location.pathname))
+        if (router.navigate(window.location.pathname))
             return
         router.navigate(defaultState)
     }
@@ -130,10 +131,9 @@ export class StateManager {
             if (await this.setState(state.name, context)) {
 
                 // @ts-ignore
-                if (window.ga) {
-                    // @ts-ignore
-                    window.ga('send', 'pageview', `/${state.name}/${context || ''}`);
-                }
+                window.pageChangeHandler && window.pageChangeHandler('send', 'pageview', `/${state.name}/${context || ''}`);
+                // @ts-ignore
+                window.ga && window.ga('send', 'pageview', `/${state.name}/${context || ''}`);
             }
         })
     }