@dharmax/state-router 3.2.0 → 3.2.1

package/src/router.ts

@@ -1,141 +0,0 @@
-type RouteHandler = (...args: any[]) => void;
-
-interface Route {
-    pattern: RegExp | null;
-    handler: RouteHandler;
-}
-
-export type RoutingMode = 'history' | 'hash';
-
-class Router {
-    private mode: RoutingMode = 'hash';
-    private routes: Route[] = [];
-    private root: string = '/';
-    private baseLocation: string | null = null;
-    public staticFilters: ((url: string) => boolean)[] = []
-
-    constructor() {
-        this.staticFilters.push(url => {
-            const staticFileExtensions = ['.json', '.css', '.js', '.png', '.jpg', '.svg', '.webp', '.md', '.ejs', '.jsm', '.txt'];
-            return staticFileExtensions.some(ext => url.endsWith(ext));
-
-        })
-    }
-
-    private cleanPathString(path: string): string {
-        path = path.replace(/\/$/, '').replace(/^\//, '');
-        return path = path.replace(/#{2,}/g, '#');
-    }
-
-    private clearQuery(url: string): string {
-        const [path, query] = url.split('?');
-        if (!query) return path;
-        const [_, hash] = query.split('#');
-        return hash ? `${path}#${hash}` : path;
-    }
-
-    private isStaticFile(url: string): boolean {
-        return (this.staticFilters || []).some(filter => filter(url))
-    }
-
-    public resetRoot(root: string): void {
-        this.root = '/' + this.cleanPathString(root) + '/';
-    }
-
-    public getLocation(): string {
-        if (this.mode === 'history') {
-            let fragment = this.cleanPathString(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]) : '';
-        }
-    }
-
-    public add(pattern: RegExp | RouteHandler, handler?: RouteHandler): Router {
-        if (typeof pattern === 'function') {
-            handler = pattern;
-            pattern = /^.*$/; // Match any path
-        }
-        this.routes.push({pattern, handler: handler as RouteHandler});
-        return this;
-    }
-
-    /**
-     *
-     * @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 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
-                const queryParams = Object.fromEntries(new URLSearchParams(window.location.search));
-                route.handler( {queryParams}, match);
-                return true
-            }
-        }
-
-        console.warn(`No routing found for ${path}`);
-        return false
-    }
-
-    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);
-                });
-        }
-
-        function handleInternalNavigation(event: any) {
-            const node = event.target
-            const href = node.getAttribute('href')
-            if (href) {
-                event.preventDefault();
-                history.pushState({path: href}, '', href);
-                handler(href);
-            }
-        }
-
-        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()
-    }
-}
-
-export const router = new Router();

package/src/state-manager.ts

@@ -1,141 +0,0 @@
-import {router, RoutingMode} from "./router";
-import dispatcher, {IPubSubHandle, PubSubEvent} from "@dharmax/pubsub";
-
-export type ApplicationStateName = string
-
-export type ApplicationState = {
-    name: ApplicationStateName
-    pageName: string
-    route: RegExp
-    mode?: string | string[]
-}
-
-export type ChangeAuthority = (state: ApplicationState) => Promise<boolean>
-
-export class StateManager {
-    private allStates: { [name: string]: ApplicationState } = {}
-    private appState: ApplicationState
-    private previousState: ApplicationState
-    private stateContext: ApplicationState
-
-    public static dispatcher = dispatcher
-    private changeAuthorities: ChangeAuthority[] = [];
-
-    constructor(private mode: RoutingMode = 'hash', autostart = true) {
-
-        if (autostart)
-            router.listen(mode)
-    }
-
-    start() {
-        router.listen(this.mode)
-    }
-
-    onChange(handler: (event: PubSubEvent, data: any) => void): IPubSubHandle {
-
-        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: (targetState: ApplicationState) => Promise<boolean>) {
-        this.changeAuthorities.push(authorityCallback)
-    }
-
-    getState(): ApplicationState {
-        return this.appState || <ApplicationState>{}
-    }
-
-    get previous() {
-        return this.previousState
-    }
-
-    get context() {
-        return this.stateContext
-    }
-
-    /**
-     * 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)) {
-            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))
-            return
-        router.navigate(defaultState)
-    }
-
-    /**
-     *
-     * @param stateName state
-     * @param context extra context (e.g. sub-state)
-     */
-    async setState(stateName: ApplicationStateName, context?: any): Promise<boolean> {
-
-        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
-        dispatcher.trigger('state-manager', 'state', 'changed', this.appState)
-        return true
-    }
-
-    /**
-     * Define an application state
-     * @param name
-     * @param pageName by default it equals the name (you can null it)
-     * @param route by default it equals the pageName (ditto)
-     * @param mode optional
-     */
-    addState(name: string, pageName?: string, route?: RegExp | string, mode?: string | string[]) {
-
-        pageName = pageName || name
-        route = route || pageName
-        if (typeof route === "string") {
-            let newRoute = route.split('%').join('?(.*)')
-            route = new RegExp(`^${newRoute}$`)
-        }
-        this.registerStateByState({
-            name,
-            pageName,
-            route,
-            mode
-        })
-    }
-
-    registerStateByState(state: ApplicationState) {
-        this.allStates[state.name] = state
-        router.add(state.route, async (context: any) => {
-            if (await this.setState(state.name, context)) {
-
-                // @ts-ignore
-                window.pageChangeHandler && window.pageChangeHandler('send', 'pageview', `/${state.name}/${context || ''}`);
-                // @ts-ignore
-                window.ga && window.ga('send', 'pageview', `/${state.name}/${context || ''}`);
-            }
-        })
-    }
-}
-

package/test/index.html

@@ -1,21 +0,0 @@
-
-<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>

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": [
-      "DOM",
-      "ES2022"
-    ],
-    "module": "ES6",
-    "moduleResolution": "Node",
-    "declaration": true,
-    "outDir": "./dist",
-    "strictNullChecks": false,
-    "strict": true
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "dist/",
-    "node_modules",
-    "**/__tests__/*"
-  ]
-}