@dharmax/state-router 1.2.1 → 2.0.0

package/ReadMe.md

@@ -6,48 +6,43 @@ What is a functional router? it's a router that captures a url changes and
 per specific pattern of url, it simply triggers a handler. It supports hash notation 
 as well as normal url patterns. It also supports contexts (url parameters).
 
-Together with the **state manager** included here - which will be the main object you'd need 
-to work with, you get a very friendly and strong semantic application state management: 
+Together with the state manager - which will be the main object you'd need 
+to work with, you get a very simple semantic application state management: 
 each state can be given a logical name, route and an associated page/component.
 
-# Features
-* Very easy to use
-* Purely Functional - no need for anything by simple JS 
-* Only one tiny dependency 
-* Easily allow any authorization logic to be used 
-* Tiny footprint
-* Doesn't monopolise the URL 
-* Supports state contexts 
+The router by default ignores file extensions '.json', '.css', '.js', '.png', '.jpg', '.svg', '.webp','md'
+and you can access the router's staticFilters member to replace or add other rules
+for static serving support.
+
+you can use the hash notation or not (set the router's mode to 'history' or 'hash')
+
 
 # Example
 
 ## state definitions
 
 ```javascript
-
-    // this is how you define the states: logical name, component name, route (as string or regex) 
     stateManager.addState('main', 'main-page', /main$/);
     stateManager.addState('login', 'login-box', 'login')
     stateManager.addState('signup', 'signup-box', /signup/)
     stateManager.addState('my-profile') // will assume the page name and the route are the same...
-    stateManager.addState('inbox') // automatically assume the logical name, component and route are the same 
+    stateManager.addState('inbox')
     stateManager.addState('about')
-    stateManager.addState('discussion', 'discussion-page', 'discussion/%') // route with parameter (the % is added to the state's context )
-
-    // this is an example of how you handle the state change (navigation events) 
-    stateManager.onChange( event => {
-        // this specific example works with RiotJs, but you get the drift
-        this.update({
-            currentPage: event.data.pageName
-        })
-    })
+    stateManager.addState('discussion', 'discussion-page', 'discussion/%')
+```
+
+## usage in the gui
 
-    // this is how you can add hooks by which you can block navigation based
-    //  on any logic you want.
-    stateManager.registerChangeAuthority( async targetState => {
-        if ( ! await PermissionManager.isUserAllowedToSeePage(targetState.pageName))
-            return false
-        return openConfirmDialog('Confirm leaving this page')
+In your main component, you write something like that:
+
+```javascript
+
+stateManager.onChange( event => {
+    // this specific example works with RiotJs, but you get the drift
+    this.update({
+        currentPage: event.data.pageName
     })
-    
+})
+
+
 ```

package/dist/router.d.ts

@@ -1,21 +1,21 @@
-declare class Route {
-    constructor();
-    re: RegExp;
-    handler: Function;
-}
+type RouteHandler = (...args: string[]) => void;
 export type RoutingMode = 'history' | 'hash';
-export declare const router: {
+declare class Router {
     mode: RoutingMode;
-    routes: Route[];
-    root: string;
-    baseLocation: string | null;
+    private routes;
+    private root;
+    private baseLocation;
+    staticFilters: ((url: string) => boolean)[];
+    constructor();
+    private clearSlashes;
+    private clearQuery;
+    private isStaticFile;
     resetRoot(root: string): void;
     getLocation(): string;
-    clearSlashes(path: string): string;
-    clearQuery(url: string): string;
-    add(re: Function | RegExp, handler: Function): any;
-    process(location?: string): any;
-    listen(): any;
-    navigate(path?: string): any;
-};
+    add(pattern: RegExp | RouteHandler, handler?: RouteHandler): Router;
+    process(location?: string): Router;
+    listen(): void;
+    navigate(path?: string): Router;
+}
+export declare const router: Router;
 export {};

package/dist/router.js

@@ -1,94 +1,81 @@
-class Route {
+class Router {
+    mode = 'hash';
+    routes = [];
+    root = '/';
+    baseLocation = null;
+    staticFilters = [];
     constructor() {
-        this.re = null;
-        this.handler = null;
+        this.staticFilters.push(url => {
+            const staticFileExtensions = ['.json', '.css', '.js', '.png', '.jpg', '.svg', '.webp', 'md'];
+            return staticFileExtensions.some(ext => url.endsWith(ext));
+        });
+        window.addEventListener(this.mode === 'hash' ? 'hashchange' : 'popstate', this.listen.bind(this));
     }
-}
-export const router = new class {
-    constructor() {
-        this.mode = 'hash';
-        this.routes = [];
-        this.root = '/';
-        this.baseLocation = null;
+    clearSlashes(path) {
+        return path.replace(/\/$/, '').replace(/^\//, '');
+    }
+    clearQuery(url) {
+        const [path, query] = url.split('?');
+        if (!query)
+            return path;
+        const [_, hash] = query.split('#');
+        return hash ? `${path}#${hash}` : path;
+    }
+    isStaticFile(url) {
+        return (this.staticFilters || []).some(filter => filter(url));
     }
     resetRoot(root) {
         this.root = '/' + this.clearSlashes(root) + '/';
     }
     getLocation() {
-        let fragment = '';
         if (this.mode === 'history') {
-            fragment = this.clearSlashes(decodeURI(location.pathname + location.search));
+            let fragment = this.clearSlashes(decodeURI(window.location.pathname + window.location.search));
             fragment = this.clearQuery(fragment);
-            fragment = fragment.replace(/\?(.*)$/, '');
-            fragment = this.root != '/' ? fragment.replace(this.root, '') : fragment;
+            return this.root !== '/' ? fragment.replace(this.root, '') : fragment;
         }
         else {
             const match = window.location.href.match(/#(.*)$/);
-            fragment = this.clearQuery(fragment);
-            fragment = match ? match[1] : '';
+            return match ? this.clearQuery(match[1]) : '';
         }
-        return this.clearSlashes(fragment);
-    }
-    clearSlashes(path) {
-        return path.toString().replace(/\/$/, '').replace(/^\//, '');
-    }
-    clearQuery(url) {
-        if (url.indexOf('?') === -1)
-            return url;
-        const a = url.split('?');
-        const afterHash = a[1].split('#');
-        if (!afterHash)
-            return a[0];
-        return `${a[0]}#${afterHash}`;
     }
-    add(re, handler) {
-        if (typeof re == 'function') {
-            handler = re;
-            re = null;
+    add(pattern, handler) {
+        if (typeof pattern === 'function') {
+            handler = pattern;
+            pattern = /^.*$/; // Match any path
         }
-        this.routes.push({ re: re, handler });
+        this.routes.push({ pattern, handler: handler });
         return this;
     }
     process(location) {
-        const fragment = location || this.getLocation();
-        const matches = this.routes.filter((r) => fragment.match(r.re))
-            .sort((r1, r2) => {
-            const [n1, n2] = [r1, r2].map(r => r.re.source.split('/'));
-            return n2.length - n1.length;
-        })
-            .map(r => {
-            return { r, match: fragment.match(r.re) };
-        });
-        if (!matches.length) {
-            console.warn(`No routing found for ${fragment}`);
-            return;
+        const path = location || this.getLocation();
+        if (this.isStaticFile(path))
+            return this; // 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;
+            }
         }
-        const longestMatch = matches[0];
-        longestMatch.match.shift();
-        longestMatch.r.handler.apply({}, longestMatch.match);
+        console.warn(`No routing found for ${path}`);
         return this;
     }
     listen() {
-        this.baseLocation = this.getLocation();
-        window[this.mode === 'hash' ? 'onhashchange' : 'onpopstate'] = () => {
-            const place = this.getLocation();
-            if (this.baseLocation !== place) {
-                this.baseLocation = place;
-                this.process(place);
-            }
-        };
-        return this;
+        const currentLocation = this.getLocation();
+        if (this.baseLocation !== currentLocation) {
+            this.baseLocation = currentLocation;
+            this.process(currentLocation);
+        }
     }
-    navigate(path) {
-        path = path ? path : '';
+    navigate(path = '') {
         if (this.mode === 'history') {
             history.pushState(null, null, this.root + this.clearSlashes(path));
         }
         else {
-            path = path.startsWith('#') ? path : '#' + path;
-            window.location.href = window.location.href.replace(/#(.*)$/, '') + path;
-            this.process();
+            window.location.hash = '#' + this.clearSlashes(path);
         }
         return this;
     }
-};
+}
+export const router = new Router();

package/dist/state-manager.d.ts

@@ -7,17 +7,14 @@ 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;
-    private changeAuthorities;
+    static dispatcher: import("@dharmax/pubsub").Pubsub;
     constructor(mode?: RoutingMode);
     onChange(handler: (event: PubSubEvent, data: any) => void): IPubSubHandle;
-    registerChangeAuthority(authorityCallback: (state: ApplicationState) => Promise<boolean>): void;
     getState(): ApplicationState;
     get previous(): ApplicationState;
     get context(): ApplicationState;
@@ -33,7 +30,7 @@ export declare class StateManager {
      * @param stateName state
      * @param context extra context (e.g. sub-state)
      */
-    setState(stateName: ApplicationStateName, context?: any): Promise<boolean>;
+    setState(stateName: ApplicationStateName, context?: any): boolean;
     /**
      * Define an application state
      * @param name

package/dist/state-manager.js

@@ -1,23 +1,18 @@
 import { router } from "./router";
 import dispatcher from "@dharmax/pubsub";
 export class StateManager {
+    allStates = {};
+    appState;
+    previousState;
+    stateContext;
+    static dispatcher = dispatcher;
     constructor(mode = 'hash') {
-        this.allStates = {};
-        this.changeAuthorities = [];
         router.mode = mode;
         router.listen();
     }
     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 || {};
     }
@@ -40,7 +35,7 @@ export class StateManager {
     /** attempts to restore state from current url */
     restoreState(defaultState) {
         let dest = window.location.hash;
-        if (dest === '#login' || dest === '')
+        if (dest == '#login' || dest == '')
             dest = '#' + defaultState;
         router.navigate(dest);
     }
@@ -49,17 +44,12 @@ export class StateManager {
      * @param stateName state
      * @param context extra context (e.g. sub-state)
      */
-    async setState(stateName, context) {
+    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(a => a(newState)));
-        if (changeConfirmations.includes(false))
-            return false;
-        // perform the change
         this.previousState = this.appState;
         this.stateContext = context;
         this.appState = newState;
@@ -89,8 +79,8 @@ export class StateManager {
     }
     registerStateByState(state) {
         this.allStates[state.name] = state;
-        router.add(state.route, async (context) => {
-            if (await this.setState(state.name, context)) {
+        router.add(state.route, (context) => {
+            if (this.setState(state.name, context)) {
                 // @ts-ignore
                 if (window.ga) {
                     // @ts-ignore
@@ -100,5 +90,4 @@ export class StateManager {
         });
     }
 }
-StateManager.dispatcher = dispatcher;
 export const stateManager = new StateManager();

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dharmax/state-router",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "A cute and tight router and application state controller",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/router.js",
+  "types": "dist/router.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "npx tsc",
@@ -15,7 +15,6 @@
   },
   "keywords": [
     "router",
-    "navigation",
     "state"
   ],
   "author": "Avi Tshuva, dharmax",
@@ -25,9 +24,9 @@
   },
   "homepage": "https://github.com/dharmax/state-routerr",
   "devDependencies": {
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@dharmax/pubsub": "^1.1.0"
+    "@dharmax/pubsub": "^1.0.1"
   }
 }

package/src/router.ts

@@ -1,108 +1,102 @@
-class Route {
-    constructor() {
-    }
+type RouteHandler = (...args: string[]) => void;
 
-    re: RegExp = null
-    handler: Function = null
+interface Route {
+    pattern: RegExp | null;
+    handler: RouteHandler;
 }
 
-export type RoutingMode = 'history' | 'hash'
-export const router = new class {
+export type RoutingMode = 'history' | 'hash';
 
-    mode: RoutingMode = 'hash'
-    routes: Route[] = []
-    root = '/'
+class Router {
+    mode: RoutingMode = 'hash';
+    private routes: Route[] = [];
+    private root: string = '/';
+    private baseLocation: string | null = null;
+    public staticFilters:((url:string) => boolean)[] = []
 
-    baseLocation: string | null = null;
+    constructor() {
+        this.staticFilters.push( url => {
+            const staticFileExtensions = ['.json', '.css', '.js', '.png', '.jpg', '.svg', '.webp','md'];
+            return staticFileExtensions.some(ext => url.endsWith(ext));
 
-    resetRoot(root: string) {
-        this.root = '/' + this.clearSlashes(root) + '/';
+        })
+        window.addEventListener(this.mode === 'hash' ? 'hashchange' : 'popstate', this.listen.bind(this));
     }
 
+    private clearSlashes(path: string): string {
+        return path.replace(/\/$/, '').replace(/^\//, '');
+    }
 
-    getLocation() {
-        let fragment = '';
-        if (this.mode === 'history') {
-            fragment = this.clearSlashes(decodeURI(location.pathname + location.search));
-            fragment = this.clearQuery(fragment)
-            fragment = fragment.replace(/\?(.*)$/, '');
-            fragment = this.root != '/' ? fragment.replace(this.root, '') : fragment;
-        } else {
-            const match = window.location.href.match(/#(.*)$/);
-            fragment = this.clearQuery(fragment)
-            fragment = match ? match[1] : '';
-        }
-        return this.clearSlashes(fragment);
+    private clearQuery(url: string): string {
+        const [path, query] = url.split('?');
+        if (!query) return path;
+        const [_, hash] = query.split('#');
+        return hash ? `${path}#${hash}` : path;
     }
 
-    clearSlashes(path: string): string {
-        return path.toString().replace(/\/$/, '').replace(/^\//, '');
+    private isStaticFile(url: string): boolean {
+        return (this.staticFilters || []).some(  filter => filter(url))
     }
 
-    clearQuery(url: string): string {
-        if (url.indexOf('?') === -1)
-            return url
-        const a = url.split('?')
-        const afterHash = a[1].split('#')
-        if (!afterHash)
-            return a[0]
-        return `${a[0]}#${afterHash}`
+    public resetRoot(root: string): void {
+        this.root = '/' + this.clearSlashes(root) + '/';
     }
 
-    add(re: Function | RegExp, handler: Function) {
-        if (typeof re == 'function') {
-            handler = re;
-            re = null;
+    public getLocation(): string {
+        if (this.mode === 'history') {
+            let fragment = this.clearSlashes(decodeURI(window.location.pathname + window.location.search));
+            fragment = this.clearQuery(fragment);
+            return this.root !== '/' ? fragment.replace(this.root, '') : fragment;
+        } else {
+            const match = window.location.href.match(/#(.*)$/);
+            return match ? this.clearQuery(match[1]) : '';
         }
-        this.routes.push({re: re as RegExp, handler});
-        return this;
     }
 
-    process(location?: string) {
-        const fragment = location || this.getLocation();
-        const matches = this.routes.filter((r: any) => fragment.match(r.re))
-
-            .sort((r1, r2) => {
-                    const [n1, n2] = [r1, r2].map(r => r.re.source.split('/'))
-                    return n2.length - n1.length
-                }
-            )
-            .map(r => {
-                return {r, match: fragment.match(r.re)}
-            });
-        if (!matches.length) {
-            console.warn(`No routing found for ${fragment}`)
-            return
+    public add(pattern: RegExp | RouteHandler, handler?: RouteHandler): Router {
+        if (typeof pattern === 'function') {
+            handler = pattern;
+            pattern = /^.*$/; // Match any path
         }
-
-        const longestMatch = matches[0]
-        longestMatch.match.shift()
-        longestMatch.r.handler.apply({}, longestMatch.match)
+        this.routes.push({ pattern, handler: handler as RouteHandler });
         return this;
     }
 
-    listen() {
-        this.baseLocation = this.getLocation();
-        window[this.mode === 'hash' ? 'onhashchange' : 'onpopstate'] = () => {
-            const place = this.getLocation();
-            if (this.baseLocation !== place) {
-                this.baseLocation = place;
-                this.process(place);
+    public process(location?: string): Router {
+        const path = location || this.getLocation();
+        if (this.isStaticFile(path))
+            return this; // 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;
             }
         }
+
+        console.warn(`No routing found for ${path}`);
         return this;
     }
 
-    navigate(path?: string) {
-        path = path ? path : '';
+    listen(): void {
+        const currentLocation = this.getLocation();
+        if (this.baseLocation !== currentLocation) {
+            this.baseLocation = currentLocation;
+            this.process(currentLocation);
+        }
+    }
+
+    public navigate(path: string = ''): Router {
         if (this.mode === 'history') {
             history.pushState(null, null, this.root + this.clearSlashes(path));
         } else {
-            path = path.startsWith('#') ? path : '#' + path
-            window.location.href = window.location.href.replace(/#(.*)$/, '') + path;
-            this.process()
+            window.location.hash = '#' + this.clearSlashes(path);
         }
         return this;
     }
 }
 
+export const router = new Router();

package/src/state-manager.ts

@@ -88,8 +88,8 @@ export class StateManager {
         }
 
         // 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.find( c => c === false))
+        const changeConfirmations = await Promise.all(this.changeAuthorities.map(authority => authority(newState)))
+        if (changeConfirmations.includes(false))
             return false
 
         // perform the change

package/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
     "lib": [
       "DOM",
-      "ES2020"
+      "ES2022"
     ],
     "module": "ES6",
     "moduleResolution": "Node",
@@ -16,6 +16,7 @@
     "src"
   ],
   "exclude": [
+    "dist/",
     "node_modules",
     "**/__tests__/*"
   ]