@dharmax/state-router 2.0.0 → 2.1.0

package/dist/router.d.ts

@@ -1,21 +1,26 @@
 type RouteHandler = (...args: string[]) => void;
 export type RoutingMode = 'history' | 'hash';
 declare class Router {
-    mode: RoutingMode;
+    private mode;
     private routes;
     private root;
     private baseLocation;
     staticFilters: ((url: string) => boolean)[];
     constructor();
-    private clearSlashes;
+    private cleanPathString;
     private clearQuery;
     private isStaticFile;
     resetRoot(root: string): void;
     getLocation(): string;
     add(pattern: RegExp | RouteHandler, handler?: RouteHandler): Router;
-    process(location?: string): Router;
-    listen(): void;
-    navigate(path?: string): Router;
+    /**
+     *
+     * @param location
+     * @return true if it was intercepted or false if not handled
+     */
+    handleChange(location?: string): boolean;
+    listen(mode?: RoutingMode): void;
+    navigate(path?: string): boolean;
 }
 export declare const router: Router;
 export {};

package/dist/router.js

@@ -6,13 +6,13 @@ class Router {
     staticFilters = [];
     constructor() {
         this.staticFilters.push(url => {
-            const staticFileExtensions = ['.json', '.css', '.js', '.png', '.jpg', '.svg', '.webp', 'md'];
+            const staticFileExtensions = ['.json', '.css', '.js', '.png', '.jpg', '.svg', '.webp', '.md', '.ejs', '.jsm', '.txt'];
             return staticFileExtensions.some(ext => url.endsWith(ext));
         });
-        window.addEventListener(this.mode === 'hash' ? 'hashchange' : 'popstate', this.listen.bind(this));
     }
-    clearSlashes(path) {
-        return path.replace(/\/$/, '').replace(/^\//, '');
+    cleanPathString(path) {
+        path = path.replace(/\/$/, '').replace(/^\//, '');
+        return path = path.replace(/#{2,}/g, '#');
     }
     clearQuery(url) {
         const [path, query] = url.split('?');
@@ -25,11 +25,11 @@ class Router {
         return (this.staticFilters || []).some(filter => filter(url));
     }
     resetRoot(root) {
-        this.root = '/' + this.clearSlashes(root) + '/';
+        this.root = '/' + this.cleanPathString(root) + '/';
     }
     getLocation() {
         if (this.mode === 'history') {
-            let fragment = this.clearSlashes(decodeURI(window.location.pathname + window.location.search));
+            let fragment = this.cleanPathString(decodeURI(window.location.pathname + window.location.search));
             fragment = this.clearQuery(fragment);
             return this.root !== '/' ? fragment.replace(this.root, '') : fragment;
         }
@@ -46,36 +46,69 @@ class Router {
         this.routes.push({ pattern, handler: handler });
         return this;
     }
-    process(location) {
+    /**
+     *
+     * @param location
+     * @return true if it was intercepted or false if not handled
+     */
+    handleChange(location) {
         const path = location || this.getLocation();
         if (this.isStaticFile(path))
-            return this; // Bypass routing for static files
+            return false; // Bypass routing for static files
         for (const route of this.routes) {
             const match = path.match(route.pattern);
             if (match) {
                 match.shift(); // Remove the full match element
                 route.handler.apply({}, match);
-                return this;
+                return true;
             }
         }
         console.warn(`No routing found for ${path}`);
-        return this;
+        return false;
     }
-    listen() {
-        const currentLocation = this.getLocation();
-        if (this.baseLocation !== currentLocation) {
-            this.baseLocation = currentLocation;
-            this.process(currentLocation);
+    listen(mode = 'hash') {
+        const self = this;
+        this.mode = mode;
+        switch (mode) {
+            case "hash":
+                window.addEventListener('hashchange', () => handler());
+                break;
+            case "history":
+                window.addEventListener('popstate', event => handler(event.state?.path));
+                document.addEventListener('click', handleInternalNavigation);
+                document.addEventListener('keydown', event => {
+                    // @ts-ignore
+                    if (event.key === 'Enter' && event.target.tagName === 'A')
+                        handleInternalNavigation(event);
+                });
         }
-    }
-    navigate(path = '') {
-        if (this.mode === 'history') {
-            history.pushState(null, null, this.root + this.clearSlashes(path));
+        function handleInternalNavigation(event) {
+            const node = event.target;
+            const href = node.getAttribute('href');
+            if (href) {
+                event.preventDefault();
+                history.pushState({ path: href }, '', href);
+                handler(href);
+            }
         }
-        else {
-            window.location.hash = '#' + this.clearSlashes(path);
+        function handler(path) {
+            path = path || location.href.split('#')[0];
+            if (self.isStaticFile(path))
+                return;
+            const currentLocation = self.getLocation();
+            if (self.baseLocation !== currentLocation) {
+                self.baseLocation = currentLocation;
+                self.handleChange(currentLocation);
+            }
         }
-        return this;
+        handler();
+    }
+    navigate(path = '') {
+        if (this.mode === 'history')
+            history.pushState(null, null, this.root + this.cleanPathString(path));
+        else
+            window.location.hash = this.cleanPathString(path);
+        return this.handleChange();
     }
 }
 export const router = new Router();

package/dist/state-manager.d.ts

@@ -7,14 +7,17 @@ export type ApplicationState = {
     route: RegExp;
     mode?: string | string[];
 };
+export type ChangeAuthority = (state: ApplicationState) => Promise<boolean>;
 export declare class StateManager {
     private allStates;
     private appState;
     private previousState;
     private stateContext;
-    static dispatcher: import("@dharmax/pubsub").Pubsub;
+    static dispatcher: import("@dharmax/pubsub").PubSub;
+    private changeAuthorities;
     constructor(mode?: RoutingMode);
     onChange(handler: (event: PubSubEvent, data: any) => void): IPubSubHandle;
+    registerChangeAuthority(authorityCallback: (targetState: ApplicationState) => Promise<boolean>): void;
     getState(): ApplicationState;
     get previous(): ApplicationState;
     get context(): ApplicationState;
@@ -23,14 +26,14 @@ export declare class StateManager {
      * @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]);
-    /** attempts to restore state from current url */
+    /** attempts to restore state from current url. Currently, works only in hash mode */
     restoreState(defaultState: ApplicationStateName): void;
     /**
      *
      * @param stateName state
      * @param context extra context (e.g. sub-state)
      */
-    setState(stateName: ApplicationStateName, context?: any): boolean;
+    setState(stateName: ApplicationStateName, context?: any): Promise<boolean>;
     /**
      * Define an application state
      * @param name

package/dist/state-manager.js

@@ -6,13 +6,21 @@ export class StateManager {
     previousState;
     stateContext;
     static dispatcher = dispatcher;
+    changeAuthorities = [];
     constructor(mode = 'hash') {
-        router.mode = mode;
-        router.listen();
+        router.listen(mode);
     }
     onChange(handler) {
         return StateManager.dispatcher.on('state:changed', handler);
     }
+    /*
+    Add a hook which enable conditional approval of state change. It can be more than one; when a state
+    change is requested, all the registered authorities must return true (asynchronously) otherwise the change
+    requested doesn't happen.
+    **/
+    registerChangeAuthority(authorityCallback) {
+        this.changeAuthorities.push(authorityCallback);
+    }
     getState() {
         return this.appState || {};
     }
@@ -32,24 +40,28 @@ export class StateManager {
         else
             this.setState(state);
     }
-    /** attempts to restore state from current url */
+    /** attempts to restore state from current url. Currently, works only in hash mode */
     restoreState(defaultState) {
-        let dest = window.location.hash;
-        if (dest == '#login' || dest == '')
-            dest = '#' + defaultState;
-        router.navigate(dest);
+        if (router.navigate(window.location.pathname))
+            return;
+        router.navigate(defaultState);
     }
     /**
      *
      * @param stateName state
      * @param context extra context (e.g. sub-state)
      */
-    setState(stateName, context) {
+    async setState(stateName, context) {
         const newState = this.allStates[stateName];
         if (!newState) {
             alert(`Undefined app state ${stateName}`);
             return false;
         }
+        // check if the state change was declined by any change authority and if so - don't do it and return false
+        const changeConfirmations = await Promise.all(this.changeAuthorities.map(authority => authority(newState)));
+        if (changeConfirmations.includes(false))
+            return false;
+        // perform the change
         this.previousState = this.appState;
         this.stateContext = context;
         this.appState = newState;
@@ -79,8 +91,8 @@ export class StateManager {
     }
     registerStateByState(state) {
         this.allStates[state.name] = state;
-        router.add(state.route, (context) => {
-            if (this.setState(state.name, context)) {
+        router.add(state.route, async (context) => {
+            if (await this.setState(state.name, context)) {
                 // @ts-ignore
                 if (window.ga) {
                     // @ts-ignore

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@dharmax/state-router",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "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",
@@ -27,6 +28,6 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@dharmax/pubsub": "^1.0.1"
+    "@dharmax/pubsub": "^1.1.0"
   }
 }

package/src/router.ts

@@ -8,23 +8,23 @@ interface Route {
 export type RoutingMode = 'history' | 'hash';
 
 class Router {
-    mode: RoutingMode = 'hash';
+    private mode: RoutingMode = 'hash';
     private routes: Route[] = [];
     private root: string = '/';
     private baseLocation: string | null = null;
-    public staticFilters:((url:string) => boolean)[] = []
+    public staticFilters: ((url: string) => boolean)[] = []
 
     constructor() {
-        this.staticFilters.push( url => {
-            const staticFileExtensions = ['.json', '.css', '.js', '.png', '.jpg', '.svg', '.webp','md'];
+        this.staticFilters.push(url => {
+            const staticFileExtensions = ['.json', '.css', '.js', '.png', '.jpg', '.svg', '.webp', '.md', '.ejs', '.jsm', '.txt'];
             return staticFileExtensions.some(ext => url.endsWith(ext));
 
         })
-        window.addEventListener(this.mode === 'hash' ? 'hashchange' : 'popstate', this.listen.bind(this));
     }
 
-    private clearSlashes(path: string): string {
-        return path.replace(/\/$/, '').replace(/^\//, '');
+    private cleanPathString(path: string): string {
+        path = path.replace(/\/$/, '').replace(/^\//, '');
+        return path = path.replace(/#{2,}/g, '#');
     }
 
     private clearQuery(url: string): string {
@@ -35,16 +35,16 @@ class Router {
     }
 
     private isStaticFile(url: string): boolean {
-        return (this.staticFilters || []).some(  filter => filter(url))
+        return (this.staticFilters || []).some(filter => filter(url))
     }
 
     public resetRoot(root: string): void {
-        this.root = '/' + this.clearSlashes(root) + '/';
+        this.root = '/' + this.cleanPathString(root) + '/';
     }
 
     public getLocation(): string {
         if (this.mode === 'history') {
-            let fragment = this.clearSlashes(decodeURI(window.location.pathname + window.location.search));
+            let fragment = this.cleanPathString(decodeURI(window.location.pathname + window.location.search));
             fragment = this.clearQuery(fragment);
             return this.root !== '/' ? fragment.replace(this.root, '') : fragment;
         } else {
@@ -58,44 +58,82 @@ class Router {
             handler = pattern;
             pattern = /^.*$/; // Match any path
         }
-        this.routes.push({ pattern, handler: handler as RouteHandler });
+        this.routes.push({pattern, handler: handler as RouteHandler});
         return this;
     }
 
-    public process(location?: string): Router {
+    /**
+     *
+     * @param location
+     * @return true if it was intercepted or false if not handled
+     */
+    public handleChange(location?: string): boolean {
         const path = location || this.getLocation();
         if (this.isStaticFile(path))
-            return this; // Bypass routing for static files
-
+            return false; // Bypass routing for static files
 
         for (const route of this.routes) {
             const match = path.match(route.pattern);
             if (match) {
                 match.shift(); // Remove the full match element
                 route.handler.apply({}, match);
-                return this;
+                return true
             }
         }
 
         console.warn(`No routing found for ${path}`);
-        return this;
+        return false
     }
 
-    listen(): void {
-        const currentLocation = this.getLocation();
-        if (this.baseLocation !== currentLocation) {
-            this.baseLocation = currentLocation;
-            this.process(currentLocation);
+    listen(mode: RoutingMode = 'hash'): void {
+        const self = this
+        this.mode = mode
+        switch (mode) {
+            case "hash":
+                window.addEventListener('hashchange', () => handler())
+                break
+            case "history":
+                window.addEventListener('popstate', event => handler(event.state?.path));
+                document.addEventListener('click', handleInternalNavigation);
+                document.addEventListener('keydown', event => {
+                    // @ts-ignore
+                    if (event.key === 'Enter' && event.target.tagName === 'A')
+                        handleInternalNavigation(event);
+                });
         }
-    }
 
-    public navigate(path: string = ''): Router {
-        if (this.mode === 'history') {
-            history.pushState(null, null, this.root + this.clearSlashes(path));
-        } else {
-            window.location.hash = '#' + this.clearSlashes(path);
+        function handleInternalNavigation(event: any) {
+            const node = event.target
+            const href = node.getAttribute('href')
+            if (href) {
+                event.preventDefault();
+                history.pushState({path: href}, '', href);
+                handler(href);
+            }
         }
-        return this;
+
+        function handler(path?: string) {
+            path = path || location.href.split('#')[0]
+
+            if (self.isStaticFile(path))
+                return
+            const currentLocation = self.getLocation();
+            if (self.baseLocation !== currentLocation) {
+                self.baseLocation = currentLocation;
+                self.handleChange(currentLocation);
+            }
+        }
+
+        handler()
+    }
+
+
+    navigate(path: string = ''): boolean {
+        if (this.mode === 'history')
+            history.pushState(null, null, this.root + this.cleanPathString(path));
+        else
+            window.location.hash = this.cleanPathString(path);
+        return this.handleChange()
     }
 }
 

package/src/state-manager.ts

@@ -1,7 +1,6 @@
 import {router, RoutingMode} from "./router";
 import dispatcher, {IPubSubHandle, PubSubEvent} from "@dharmax/pubsub";
 
-
 export type ApplicationStateName = string
 
 export type ApplicationState = {
@@ -24,8 +23,7 @@ export class StateManager {
 
     constructor(mode: RoutingMode = 'hash') {
 
-        router.mode = mode
-        router.listen()
+        router.listen(mode)
 
     }
 
@@ -68,10 +66,9 @@ export class StateManager {
 
     /** attempts to restore state from current url. Currently, works only in hash mode */
     restoreState(defaultState: ApplicationStateName) {
-        let dest = window.location.hash
-        if (dest == '#login' || dest == '')
-            dest = '#' + defaultState
-        router.navigate(dest)
+        if ( router.navigate(window.location.pathname))
+            return
+        router.navigate(defaultState)
     }
 
     /**

package/test/index.html

@@ -0,0 +1,21 @@
+
+<html>
+
+<a href="one">one</a>
+<a href="two">two</a>
+<a href="three.json">three</a>
+<a href="four">four</a>
+
+<script type="module">
+    import {router} from '../dist/router.js'
+    // router.mode ='history'
+    router.add('one', ()=>alert(1))
+    router.add('two', ()=>alert(2))
+    router.add('four', ()=>alert(4))
+    // router.add('one', ()=>alert(1))
+    router.listen('history')
+
+
+</script>
+
+</html>