@breautek/router 1.0.2 → 2.0.1

package/dist/src/HashStrategy.d.ts

@@ -1,5 +1,4 @@
 import { RouterStrategy } from './RouterStrategy';
-import { IDictionary } from '@totalpave/interfaces';
 import { Router } from './Router';
 /**
     A {@link RouterStrategy} that manages a history stack using inline pound symbols `#`.
@@ -9,11 +8,12 @@ import { Router } from './Router';
     `/#/mylink` will be produced.
 */
 export declare class HashStrategy extends RouterStrategy {
-    private _base;
-    private _stack;
-    private _position;
+    private $base;
+    private $stack;
+    private $position;
+    private $lastFiredLocation;
     constructor(router: Router);
-    private _init;
+    private $init;
     getLocation(): string;
     getLocationAt(position: number): string;
     getHistoryLength(): number;
@@ -21,8 +21,9 @@ export declare class HashStrategy extends RouterStrategy {
     canGo(to: number): boolean;
     peek(to: number): string;
     go(to: number): void;
-    pushState(url: string, state?: IDictionary): void;
-    replaceState(url: string, state?: IDictionary): void;
+    pushState(url: string, state?: Record<any, any>): void;
+    replaceState(url: string, state?: Record<any, any>): void;
     clear(): void;
-    private _navigate;
+    private $navigate;
+    protected _fireURLChange(url: string): void;
 }

package/dist/src/Route.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
+import { View } from './View';
 import { RouteMatcher } from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
+import { TransitionStrategy } from 'TransitionStrategy';
 export interface IRouteProps<T> {
     url: string;
     component: React.ComponentClass<any>;
     index?: boolean;
-    entryTransition?: any;
-    exitTransition?: any;
+    entryTransition?: TransitionStrategy;
+    exitTransition?: TransitionStrategy;
     base?: string;
     componentProps?: T;
     matcher?: RouteMatcher;
@@ -22,9 +24,10 @@ export interface IRouteState {
  * This class represents a route that renders a {@link View} component
  */
 export declare class Route<TComponentProps extends IComponentProps = IComponentProps, TRouteProps extends IRouteProps<TComponentProps> = IRouteProps<TComponentProps>, TRouteState extends IRouteState = IRouteState> extends React.Component<TRouteProps, TRouteState> {
-    private _node;
+    private $node;
     constructor(props: TRouteProps);
     render(): React.ReactNode;
-    private _getComponentsToRender;
-    private _getChildren;
+    getView(): View;
+    private $getComponentsToRender;
+    private $getChildren;
 }

package/dist/src/RouteMatcher.d.ts

@@ -16,9 +16,9 @@ export interface IOnNoRouteFunction {
  * based on the URL and the route url patterns.
  */
 export declare class RouteMatcher {
-    private _strategy;
+    private $strategy;
     constructor(routerStrategy: RouterStrategy);
-    private _defaultNoRouteFunction;
+    private $defaultNoRouteFunction;
     /**
      * Matches the url to the appropriate renderable route
      *

package/dist/src/Router.d.ts

@@ -16,12 +16,12 @@ export interface IRouterState {
 }
 export declare class Router<TRouterProps extends IRouterProps = IRouterProps> extends React.Component<TRouterProps, IRouterState> {
     state: IRouterState;
-    private _lastRenderedRoute;
-    private _matcher;
-    private _awaitingTransition;
-    private _incomingNode;
-    private _exitingNode;
-    private static _instance;
+    private $lastRenderedRoute;
+    private $matcher;
+    private $awaitingTransition;
+    private $incomingRoute;
+    private $exitingRoute;
+    private static $instance;
     constructor(props: TRouterProps);
     static getInstance(): RouterStrategy;
     /**
@@ -31,7 +31,7 @@ export declare class Router<TRouterProps extends IRouterProps = IRouterProps> ex
     /**
      * @ignore
      */
-    private _onURLChange;
+    private $onURLChange;
     componentDidMount(): void;
     /**
      * @ignore
@@ -77,10 +77,10 @@ export declare class Router<TRouterProps extends IRouterProps = IRouterProps> ex
     /**
      * Gets the potential routes
      */
-    private _getChildren;
+    private $getChildren;
     /**
      * Finds the index route. Returns null if there are no indexed routes.
      */
-    private _getIndexRoute;
+    private $getIndexRoute;
 }
 export declare let getRouter: () => RouterStrategy;

package/dist/src/RouterStrategy.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
-import { IDictionary } from '@totalpave/interfaces';
 import { Router } from './Router';
 export declare const EVENT_URL_CHANGE: string;
 export declare type URLChangeCallback = (url: string) => void;
 export declare abstract class RouterStrategy extends EventEmitter {
-    private _router;
+    private $router;
     constructor(router: Router);
     /**
      * Gets the router
@@ -98,14 +97,14 @@ export declare abstract class RouterStrategy extends EventEmitter {
      * @param url
      * @param state
      */
-    abstract pushState(url: string, state?: IDictionary): void;
+    abstract pushState(url: string, state?: Record<any, any>): void;
     /**
      * Replaces the current entry in the history stack with the new location.
      * This will navigate the screen to the new location.
      * @param url
      * @param state
      */
-    abstract replaceState(url: string, state?: IDictionary): void;
+    abstract replaceState(url: string, state?: Record<any, any>): void;
     /**
      * Clears the history stack.
      */

package/dist/src/TransitionSlide.d.ts

@@ -7,11 +7,11 @@ export declare enum TransitionSlideDirection {
     DOWN = 4
 }
 export declare class TransitionSlide extends TransitionStrategy {
-    private _slideDirection;
-    private _slideSpeed;
-    private _transitionTimeout;
+    private $slideDirection;
+    private $slideSpeed;
+    private $transitionTimeout;
     constructor(slideDirection: TransitionSlideDirection, slideSpeed: number);
     protected _execute(incoming: View, exiting: View): Promise<void>;
-    private _getTransitionString;
-    private _getSlideStyle;
+    private $getTransitionString;
+    private $getSlideStyle;
 }

package/dist/src/URLParser.d.ts

@@ -5,8 +5,8 @@ export interface IURLParams {
  * Parses the URL for router paths and url-based variables.
  */
 export declare class URLParser {
-    private _allowPartialMatch;
-    private _pattern;
+    private $allowPartialMatch;
+    private $pattern;
     /**
      *
      * @param {string} pattern The URL pattern
@@ -28,12 +28,12 @@ export declare class URLParser {
      * @private
      * @param {string} url URL to strip
      */
-    private _stripURL;
+    private $stripURL;
     /**
      * Splits the url into an array of URL parts, separated by the forward slash
      *
      * @private
      * @param {string} url URL to split
      */
-    private _getParts;
+    private $getParts;
 }

package/dist/src/URLStrategy.d.ts

@@ -1,6 +1,5 @@
 import { RouterStrategy } from './RouterStrategy';
 import { Router } from './Router';
-import { IDictionary } from '@totalpave/interfaces';
 /**
  * @notice Using the URLStrategy requires some backend configuration
  * to route URLs back to application.
@@ -10,15 +9,15 @@ import { IDictionary } from '@totalpave/interfaces';
  * to the application vs other resources such as images.
  */
 export declare class URLStrategy extends RouterStrategy {
-    private _base;
-    private _stack;
-    private _position;
+    private $base;
+    private $stack;
+    private $position;
     /**
      *
      * @param {Router} router
      */
     constructor(router: Router);
-    private _init;
+    private $init;
     getLocation(): string;
     getLocationAt(position: number): string;
     getHistoryLength(): number;
@@ -26,8 +25,8 @@ export declare class URLStrategy extends RouterStrategy {
     peek(to: number): string;
     canGo(to: number): boolean;
     go(to: number): void;
-    pushState(url: string, state?: IDictionary): void;
-    replaceState(url: string, state?: IDictionary): void;
+    pushState(url: string, state?: Record<any, any>): void;
+    replaceState(url: string, state?: Record<any, any>): void;
     clear(): void;
-    private _navigate;
+    private $navigate;
 }

package/dist/src/View.d.ts

@@ -2,7 +2,6 @@ import "core-js/stable";
 import "regenerator-runtime/runtime";
 import * as React from 'react';
 import { RouterStrategy } from './RouterStrategy';
-import { IDictionary } from '@totalpave/interfaces';
 import { TransitionStrategy } from './TransitionStrategy';
 import { IViewStylesheet } from './IViewStylesheet';
 import "./View.scss";
@@ -12,7 +11,7 @@ export interface IViewProps {
     exitTransition?: TransitionStrategy;
 }
 export declare abstract class View<TPageProps extends IViewProps = IViewProps> extends React.Component<TPageProps> {
-    private _node;
+    private $node;
     /**
      * @param props See [IViewProps]
      */
@@ -45,7 +44,7 @@ export declare abstract class View<TPageProps extends IViewProps = IViewProps> e
      * Get the inline styles for this view.
      * Use React style notation.
      */
-    getViewStyles(): IDictionary<string>;
+    getViewStyles(): Record<any, string>;
     protected abstract _renderView(): React.ReactNode;
     render(): React.ReactNode;
 }

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@breautek/router",
-  "version": "1.0.2",
+  "version": "2.0.1",
   "description": "An alternate react router.",
   "main": "dist/router.js",
   "types": "dist/src/api.d.ts",
   "type": "commonjs",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
   "scripts": {
     "test": "jest",
     "lint": "eslint --ext .ts,.tsx '?(src|spec)/**/*.?(ts|tsx)' --cache",
@@ -35,49 +38,51 @@
     "react-dom": ">=16.9.0 <17.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.14.3",
+    "@babel/core": "7.16.7",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.14.2",
-    "@babel/preset-react": "7.13.13",
-    "@babel/preset-typescript": "7.13.0",
-    "@babel/register": "7.13.16",
-    "@totalpave/eslint-plugin": "4.0.0",
-    "@types/enzyme": "3.10.8",
+    "@babel/preset-env": "7.16.7",
+    "@babel/preset-react": "7.16.7",
+    "@babel/preset-typescript": "7.16.7",
+    "@babel/register": "7.16.7",
+    "@rollup/plugin-babel": "5.3.0",
+    "@rollup/plugin-commonjs": "21.0.1",
+    "@rollup/plugin-json": "4.1.0",
+    "@rollup/plugin-node-resolve": "13.1.3",
+    "@totalpave/eslint-plugin": "5.1.0",
+    "@types/enzyme": "3.10.11",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/jest": "26.0.23",
-    "@typescript-eslint/eslint-plugin": "4.25.0",
-    "@typescript-eslint/parser": "4.25.0",
-    "ajv": "8.5.0",
+    "@types/jest": "27.4.0",
+    "@types/react": "16.14.4",
+    "@types/react-dom": "16.9.11",
+    "@types/react-test-renderer": "17.0.1",
+    "@typescript-eslint/eslint-plugin": "4.30.0",
+    "@typescript-eslint/parser": "4.30.0",
+    "ajv": "8.8.2",
     "auto-changelog": "2.3.0",
-    "babel-jest": "26.6.3",
-    "core-js": "3.12.1",
+    "babel-jest": "27.4.6",
+    "core-js": "3.20.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
-    "eslint": "7.27.0",
-    "eslint-plugin-react": "7.23.2",
-    "glob": "7.1.7",
+    "eslint": "7.32.0",
+    "eslint-plugin-react": "7.25.1",
+    "glob": "7.2.0",
     "ignore-styles": "5.0.1",
-    "jest": "26.6.3",
-    "node-sass": "6.0.0",
+    "jest": "27.4.7",
+    "node-sass": "7.0.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "regenerator-runtime": "0.13.7",
-    "rollup": "2.49.0",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-json": "4.0.0",
-    "rollup-plugin-node-resolve": "5.2.0",
+    "regenerator-runtime": "0.13.9",
+    "rollup": "2.63.0",
     "rollup-plugin-progress": "1.1.2",
-    "rollup-plugin-sass": "1.2.2",
-    "rollup-plugin-typescript2": "0.30.0",
-    "ts-node": "10.0.0",
-    "typedoc": "0.20.36",
-    "typedoc-plugin-markdown": "3.8.1",
-    "typescript": "4.2.4"
+    "rollup-plugin-sass": "1.2.10",
+    "rollup-plugin-typescript2": "0.31.1",
+    "ts-jest": "27.1.2",
+    "ts-node": "10.4.0",
+    "typedoc": "0.21.9",
+    "typedoc-plugin-markdown": "3.10.4",
+    "typescript": "4.3.5"
   },
   "dependencies": {
-    "@rollup/plugin-babel": "5.3.0",
-    "@totalpave/interfaces": "1.0.0",
-    "@types/react": "16.14.4",
-    "@types/react-dom": "16.9.11"
+    "@totalpave/interfaces": "3.0.0"
   }
 }

package/src/HashStrategy.ts

@@ -1,6 +1,5 @@
 
 import {RouterStrategy} from './RouterStrategy';
-import { IDictionary } from '@totalpave/interfaces';
 import { Router } from './Router';
 
 /**
@@ -11,28 +10,36 @@ import { Router } from './Router';
     `/#/mylink` will be produced. 
 */
 export class HashStrategy extends RouterStrategy {
-    private _base: string;
-    private _stack: Array<string>;
-    private _position: number;
+    private $base: string;
+    private $stack: Array<string>;
+    private $position: number;
+    private $lastFiredLocation: string;
 
     public constructor(router: Router) {
         super(router);
-        this._base = '#';
-        this._stack = [];
-        this._position = -1;
+        this.$base = '#';
+        this.$stack = [];
+        this.$position = -1;
+        this.$lastFiredLocation = null; //this.getLocation();
 
         window.addEventListener('popstate', (ev: PopStateEvent) => {
-            this._fireURLChange(this.getLocation());
+            let location = this.getLocation();
+            if (this.$lastFiredLocation !== location) {
+                this._fireURLChange(location);
+            }
         });
 
         window.addEventListener('hashchange', (e: HashChangeEvent) => {
-            this._fireURLChange(this.getLocation());
+            let location = this.getLocation();
+            if (this.$lastFiredLocation !== location) {
+                this._fireURLChange(location);
+            }
         });
 
-        this._init();
+        this.$init();
     }
 
-    private _init(): void {
+    private $init(): void {
         this.pushState(this.getLocation());
     }
 
@@ -41,11 +48,11 @@ export class HashStrategy extends RouterStrategy {
     }
 
     public getLocationAt(position: number): string {
-        return this._stack[this._position + position];
+        return this.$stack[this.$position + position];
     }
 
     public getHistoryLength(): number {
-        return this._stack.length;
+        return this.$stack.length;
     }
 
     public getScrollRestoration(): ScrollRestoration {
@@ -53,11 +60,11 @@ export class HashStrategy extends RouterStrategy {
     }
 
     public canGo(to: number): boolean {
-        return this._stack[this._position + to] !== undefined;
+        return this.$stack[this.$position + to] !== undefined;
     }
 
     public peek(to: number): string {
-        return this._stack[this._position + to];
+        return this.$stack[this.$position + to];
     }
 
     public go(to: number): void {
@@ -65,52 +72,57 @@ export class HashStrategy extends RouterStrategy {
             return;
         }
 
-        this._position += to;
-        let url: string = this._stack[this._position];
+        this.$position += to;
+        let url: string = this.$stack[this.$position];
 
-        this._navigate(url);
+        this.$navigate(url);
     }
 
-    public pushState(url: string, state?: IDictionary): void {
+    public pushState(url: string, state?: Record<any, any>): void {
         if (url === this.getLocation()) {
             //We are already here, so do nothing.
             return;
         }
 
-        if (this._stack.length === 0) {
-            this._stack[++this._position] = this.getLocation();
+        if (this.$stack.length === 0) {
+            this.$stack[++this.$position] = this.getLocation();
         }
 
-        this._stack[++this._position] = url;
+        this.$stack[++this.$position] = url;
 
         //clear everything after position.
-        this._stack = this._stack.slice(0, this._position + 1);
+        this.$stack = this.$stack.slice(0, this.$position + 1);
 
-        this._navigate(url);
+        this.$navigate(url);
     }
 
-    public replaceState(url: string, state?: IDictionary): void {
+    public replaceState(url: string, state?: Record<any, any>): void {
         if (url === this.getLocation()) {
             //We are already here, so do nothing.
             return;
         }
         
-        if (this._position === -1) {
+        if (this.$position === -1) {
             this.pushState(url, state);
         }
         else {
-            this._stack[this._position] = url;
-            this._navigate(url);
+            this.$stack[this.$position] = url;
+            this.$navigate(url);
         }
     }
 
     public clear(): void {
-        this._stack = [];
-        this._position = -1;
+        this.$stack = [];
+        this.$position = -1;
     }
 
-    private _navigate(url: string): void {
-        window.location.hash = this._base + url;
+    private $navigate(url: string): void {
+        window.location.hash = this.$base + url;
         this._fireURLChange(this.getLocation());
     }
+
+    protected _fireURLChange(url: string): void {
+        this.$lastFiredLocation = url;
+        super._fireURLChange(url);
+    }
 }

package/src/Route.tsx

@@ -1,14 +1,16 @@
 
 import * as React from 'react';
+import { View } from './View';
 import { RouteMatcher } from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
+import { TransitionStrategy } from 'TransitionStrategy';
 
 export interface IRouteProps<T> {
     url: string;
     component: React.ComponentClass<any>;
     index?: boolean;
-    entryTransition?: any;
-    exitTransition?: any;
+    entryTransition?: TransitionStrategy;
+    exitTransition?: TransitionStrategy;
 
     base?: string;
     componentProps?: T;
@@ -34,7 +36,7 @@ export interface IRouteState {
  * This class represents a route that renders a {@link View} component
  */
 export class Route<TComponentProps extends IComponentProps = IComponentProps, TRouteProps extends IRouteProps<TComponentProps> = IRouteProps<TComponentProps>, TRouteState extends IRouteState = IRouteState> extends React.Component<TRouteProps, TRouteState> {
-    private _node: React.Component;
+    private $node: View;
 
     constructor(props: TRouteProps) {
         super(props);
@@ -42,10 +44,14 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
     }
 
     public render(): React.ReactNode {
-        return this._getComponentsToRender(this);
+        return this.$getComponentsToRender(this);
     }
 
-    private _getComponentsToRender(component: React.ReactElement | React.Component): React.ReactNode {
+    public getView(): View {
+        return this.$node;
+    }
+
+    private $getComponentsToRender(component: React.ReactElement | React.Component): React.ReactNode {
         let url: string = component.props.url;
         let base: string = component.props.base || '';
 
@@ -53,16 +59,26 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
         let ViewComponent: React.ElementType = component.props.component;
         let child: React.ReactNode;
 
-        let routeComponent = component.props.matcher.match(url, this._getChildren(component), base);
+        let routeComponent = component.props.matcher.match(url, this.$getChildren(component), base);
         if (routeComponent) {
-            child = this._getComponentsToRender(routeComponent);
+            child = this.$getComponentsToRender(routeComponent);
         }
 
         return (
             <ViewComponent
                 {...component.props.componentProps}
                 ref={(node: React.Component) => {
-                    this._node = node;
+                    if (node) {
+                        if (node instanceof View) {
+                            this.$node = node;
+                        }
+                        else {
+                            throw new Error('Routed components should be a View, but got ' + Object.getPrototypeOf(node).constructor.name + ' instead.');
+                        }
+                    }
+                    else {
+                        this.$node = null;
+                    }
                 }}
             >
                 {child}
@@ -70,7 +86,7 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
         );
     }
 
-    private _getChildren(component: React.Component | React.ReactElement): React.ReactElement[] {
+    private $getChildren(component: React.Component | React.ReactElement): React.ReactElement[] {
         let children: React.ReactElement[] = null;
 
         if (!component) {

package/src/RouteMatcher.ts

@@ -21,13 +21,13 @@ export interface IOnNoRouteFunction {
  * based on the URL and the route url patterns.
  */
 export class RouteMatcher {
-    private _strategy: RouterStrategy;
+    private $strategy: RouterStrategy;
 
     public constructor(routerStrategy: RouterStrategy) {
-        this._strategy = routerStrategy;
+        this.$strategy = routerStrategy;
     }
 
-    private _defaultNoRouteFunction(indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement {
+    private $defaultNoRouteFunction(indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement {
         return indexRoute;
     }
 
@@ -55,7 +55,7 @@ export class RouteMatcher {
         }
 
         if (!componentToRender) {
-            componentToRender = (onNoRoute ? onNoRoute : this._defaultNoRouteFunction)(indexRoute, children);
+            componentToRender = (onNoRoute ? onNoRoute : this.$defaultNoRouteFunction)(indexRoute, children);
         }
 
         if (!componentToRender) {
@@ -74,7 +74,7 @@ export class RouteMatcher {
             exitTransition: componentToRender.props.exitTransition,
             componentProps: {
                 url : url,
-                router: this._strategy
+                router: this.$strategy
             }
         };