@dharmax/state-router 2.0.1 → 2.1.1

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.js

@@ -8,8 +8,7 @@ export class StateManager {
     static dispatcher = dispatcher;
     changeAuthorities = [];
     constructor(mode = 'hash') {
-        router.mode = mode;
-        router.listen();
+        router.listen(mode);
     }
     onChange(handler) {
         return StateManager.dispatcher.on('state:changed', handler);
@@ -43,10 +42,9 @@ export class StateManager {
     }
     /** 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);
     }
     /**
      *

package/package.json

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

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 = {
@@ -22,11 +21,14 @@ export class StateManager {
     public static dispatcher = dispatcher
     private changeAuthorities: ChangeAuthority[] = [];
 
-    constructor(mode: RoutingMode = 'hash') {
+    constructor(private mode: RoutingMode = 'hash', autostart= true) {
 
-        router.mode = mode
-        router.listen()
+        if (autostart)
+            router.listen(mode)
+    }
 
+    start() {
+        router.listen( this.mode )
     }
 
     onChange(handler: (event: PubSubEvent, data: any) => void): IPubSubHandle {
@@ -68,10 +70,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>