@dharmax/state-router 1.0.1 → 1.1.2

package/ReadMe.md

@@ -19,7 +19,7 @@ each state can be given a logical name, route and an associated page/component.
     stateManager.addState('main', 'main-page', /main$/);
     stateManager.addState('login', 'login-box', 'login')
     stateManager.addState('signup', 'signup-box', /signup/)
-    stateManager.addState('my-profile')
+    stateManager.addState('my-profile') // will assume the page name and the route are the same...
     stateManager.addState('inbox')
     stateManager.addState('about')
     stateManager.addState('discussion', 'discussion-page', 'discussion/%')
@@ -31,7 +31,7 @@ In your main component, you write something like that:
 
 ```javascript
 
-dispatcher.on('state:changed', event => {
+stateManager.onChange( event => {
     // this specific example works with RiotJs, but you get the drift
     this.update({
         currentPage: event.data.pageName

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./router";
+export * from "./state-manager";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./router";
+export * from "./state-manager";

package/dist/state-manager.d.ts

@@ -1,4 +1,5 @@
 import { RoutingMode } from "./router";
+import { IPubSubHandle, PubSubEvent } from "@dharmax/pubsub";
 export declare type ApplicationStateName = string;
 export declare type ApplicationState = {
     name: ApplicationStateName;
@@ -11,7 +12,9 @@ export declare class StateManager {
     private appState;
     private previousState;
     private stateContext;
+    static dispatcher: import("@dharmax/pubsub").PubSub;
     constructor(mode?: RoutingMode);
+    onChange(handler: (event: PubSubEvent, data: any) => void): IPubSubHandle;
     getState(): ApplicationState;
     get previous(): ApplicationState;
     get context(): ApplicationState;

package/dist/state-manager.js

@@ -6,6 +6,9 @@ export class StateManager {
         router.mode = mode;
         router.listen();
     }
+    onChange(handler) {
+        return StateManager.dispatcher.on('state:changed', handler);
+    }
     getState() {
         return this.appState || {};
     }
@@ -83,4 +86,5 @@ export class StateManager {
         });
     }
 }
+StateManager.dispatcher = dispatcher;
 export const stateManager = new StateManager();

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dharmax/state-router",
-  "version": "1.0.1",
+  "version": "1.1.2",
   "description": "A cute and tight router and application state controller",
-  "main": "dist/router.js",
-  "types": "dist/router.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "npx tsc",
@@ -15,6 +15,7 @@
   },
   "keywords": [
     "router",
+    "navigation",
     "state"
   ],
   "author": "Avi Tshuva, dharmax",
@@ -27,6 +28,6 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "@dharmax/pubsub": "^1.0.1"
+    "@dharmax/pubsub": "^1.1.0"
   }
 }

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./router";
+export * from "./state-manager";

package/src/router.ts

@@ -2,7 +2,7 @@ class Route {
     constructor() {
     }
 
-    re: RegExp  = null
+    re: RegExp = null
     handler: Function = null
 }
 
@@ -13,9 +13,9 @@ export const router = new class {
     routes: Route[] = []
     root = '/'
 
-    baseLocation: string | null= null;
+    baseLocation: string | null = null;
 
-    resetRoot ( root:string) {
+    resetRoot(root: string) {
         this.root = '/' + this.clearSlashes(root) + '/';
     }
 
@@ -49,7 +49,7 @@ export const router = new class {
         return `${a[0]}#${afterHash}`
     }
 
-    add(re: Function | RegExp, handler: Function ) {
+    add(re: Function | RegExp, handler: Function) {
         if (typeof re == 'function') {
             handler = re;
             re = null;
@@ -58,7 +58,7 @@ export const router = new class {
         return this;
     }
 
-     process(location?:string) {
+    process(location?: string) {
         const fragment = location || this.getLocation();
         const matches = this.routes.filter((r: any) => fragment.match(r.re))
 

package/src/state-manager.ts

@@ -1,5 +1,6 @@
 import {router, RoutingMode} from "./router";
-import  dispatcher from "@dharmax/pubsub";
+import dispatcher, {IPubSubHandle, PubSubEvent} from "@dharmax/pubsub";
+
 
 export type ApplicationStateName = string
 
@@ -17,6 +18,8 @@ export class StateManager {
     private previousState: ApplicationState
     private stateContext: ApplicationState
 
+    public static dispatcher = dispatcher
+
     constructor(mode: RoutingMode = 'hash') {
 
         router.mode = mode
@@ -24,6 +27,11 @@ export class StateManager {
 
     }
 
+    onChange(handler: (event: PubSubEvent, data: any) => void):IPubSubHandle {
+
+        return StateManager.dispatcher.on('state:changed', handler)
+    }
+
     getState(): ApplicationState {
         return this.appState || <ApplicationState>{}
     }
@@ -100,7 +108,7 @@ export class StateManager {
 
     registerStateByState(state: ApplicationState) {
         this.allStates[state.name] = state
-        router.add(state.route, (context:any) => {
+        router.add(state.route, (context: any) => {
             if (this.setState(state.name, context)) {
 
                 // @ts-ignore

package/.idea/aws.xml

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="accountSettings">
-    <option name="activeProfile" value="profile:default" />
-    <option name="activeRegion" value="us-east-1" />
-    <option name="recentlyUsedProfiles">
-      <list>
-        <option value="profile:default" />
-      </list>
-    </option>
-    <option name="recentlyUsedRegions">
-      <list>
-        <option value="us-east-1" />
-      </list>
-    </option>
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/state-router.iml" filepath="$PROJECT_DIR$/.idea/state-router.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/state-router.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/pnpm-lock.yaml

@@ -1,23 +0,0 @@
-lockfileVersion: 5.3
-
-specifiers:
-  '@dharmax/pubsub': ^1.0.1
-  typescript: ^4.4.3
-
-dependencies:
-  '@dharmax/pubsub': 1.0.1
-
-devDependencies:
-  typescript: 4.4.4
-
-packages:
-
-  /@dharmax/pubsub/1.0.1:
-    resolution: {integrity: sha512-W4CLQBmZyg/oUe4nHw0yApvGwjqm7+in3Xt2J28HO0uDDfZIGtiEB7rbvGeaWfXiMBiB0ptvctzLn+CKMHykIQ==}
-    dev: false
-
-  /typescript/4.4.4:
-    resolution: {integrity: sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==}
-    engines: {node: '>=4.2.0'}
-    hasBin: true
-    dev: true