@breautek/router 1.0.2 → 2.0.1

package/src/Router.tsx

@@ -8,8 +8,8 @@ import {DefaultStrategy} from './DefaultStrategy';
 import {RouteMatcher} from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
 import { IRouterStrategyClass } from './IRouterStrategyClass';
-import {View} from './View';
 import {IOnNoRoute} from './IOnNoRoute';
+import { Route } from "./Route";
 
 export interface IRouterProps {
     strategy?: IRouterStrategyClass;
@@ -26,13 +26,13 @@ export interface IRouterState {
 export class Router<TRouterProps extends IRouterProps = IRouterProps> extends React.Component<TRouterProps, IRouterState> {
     public state: IRouterState;
     
-    private _lastRenderedRoute: any;
-    private _matcher: RouteMatcher;
-    private _awaitingTransition: boolean;
-    private _incomingNode: View;
-    private _exitingNode: View;
+    private $lastRenderedRoute: any;
+    private $matcher: RouteMatcher;
+    private $awaitingTransition: boolean;
+    private $incomingRoute: Route;
+    private $exitingRoute: Route;
 
-    private static _instance: Router;
+    private static $instance: Router;
 
     public constructor(props: TRouterProps) {
         super(props);
@@ -54,17 +54,17 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
             shouldTransition: false
         };
 
-        this._lastRenderedRoute = null;
-        this._onURLChange = this._onURLChange.bind(this);
-        this._matcher = new RouteMatcher(strategy);
+        this.$lastRenderedRoute = null;
+        this.$onURLChange = this.$onURLChange.bind(this);
+        this.$matcher = new RouteMatcher(strategy);
     }
 
     public static getInstance(): RouterStrategy {
-        if (!Router._instance) {
+        if (!Router.$instance) {
             return null;
         }
     
-        return Router._instance.getRouterStrategy();
+        return Router.$instance.getRouterStrategy();
     }
 
     /**
@@ -77,7 +77,7 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
     /**
      * @ignore
      */
-    private _onURLChange(url: string): void {
+    private $onURLChange(url: string): void {
         if (url !== this.state.url) {
             this.setState({
                 url: url,
@@ -87,8 +87,8 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
     }
 
     public componentDidMount(): void {
-        Router._instance = this;
-        this.state.strategy.addURLChangeCallback(this._onURLChange);
+        Router.$instance = this;
+        this.state.strategy.addURLChangeCallback(this.$onURLChange);
     }
 
     /**
@@ -96,9 +96,9 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
      */
     public UNSAFE_componentWillReceiveProps(nextProps: TRouterProps): void {
         if (nextProps.strategy && (this.state.strategy instanceof nextProps.strategy)) {
-            this.state.strategy.removeURLChangeCallback(this._onURLChange);
+            this.state.strategy.removeURLChangeCallback(this.$onURLChange);
             let strat: RouterStrategy = new nextProps.strategy(this);
-            strat.addURLChangeCallback(this._onURLChange);
+            strat.addURLChangeCallback(this.$onURLChange);
             this.setState({
                 strategy: strat
             });
@@ -109,15 +109,15 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
      * @ignore
      */
     public componentWillUnmount(): void {
-        Router._instance = null;
-        this.state.strategy.removeURLChangeCallback(this._onURLChange);
+        Router.$instance = null;
+        this.state.strategy.removeURLChangeCallback(this.$onURLChange);
     }
 
     /**
      * @ignore
      */
     public render(): React.ReactNode {
-        let currentRoute: React.ReactElement = this._matcher.match(this.state.url || '/', this._getChildren(), '', this._getIndexRoute(), this.props.onNoRoute);
+        let currentRoute: React.ReactElement = this.$matcher.match(this.state.url || '/', this.$getChildren(), '', this.$getIndexRoute(), this.props.onNoRoute);
         // eslint-disable-next-line @typescript-eslint/naming-convention
         let Root: React.ElementType = null;
         if (this.props.component) {
@@ -127,25 +127,25 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
         if (
             this.state.shouldTransition && (
                 currentRoute.props.entryTransition || (
-                    this._lastRenderedRoute &&
-                    this._lastRenderedRoute.props.exitTransition
+                    this.$lastRenderedRoute &&
+                    this.$lastRenderedRoute.props.exitTransition
                 )
             )
         ) {
-            this._awaitingTransition = true;
+            this.$awaitingTransition = true;
             let exiting: React.ReactElement = null;
-            if (this._lastRenderedRoute) {
-                exiting = React.cloneElement(this._lastRenderedRoute, {
-                    ref : (node: View) => {
-                        this._exitingNode = node;
+            if (this.$lastRenderedRoute) {
+                exiting = React.cloneElement(this.$lastRenderedRoute, {
+                    ref : (route: Route) => {
+                        this.$exitingRoute = route;
                     }
                 });
             }
 
             // Incoming will always be safe to render, hence no defensive checks
             let incoming: React.ReactElement = React.cloneElement(currentRoute, {
-                ref : (node: View) => {
-                    this._incomingNode = node;
+                ref : (route: Route) => {
+                    this.$incomingRoute = route;
                 }
             });
 
@@ -157,7 +157,7 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
             }
         }
         else {
-            this._lastRenderedRoute = currentRoute;
+            this.$lastRenderedRoute = currentRoute;
 
             if (Root) {
                 // currentRoute must be rendered as an array; because, exiting and incoming is rendered as an array.
@@ -175,11 +175,11 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
      * @ignore
      */
     public componentDidUpdate(): void {
-        if (this._awaitingTransition) {
-            this._awaitingTransition = false;
+        if (this.$awaitingTransition) {
+            this.$awaitingTransition = false;
             let exitTransitionPromise: Promise<void> = null;
-            if (this._exitingNode && this._exitingNode.props.exitTransition) {
-                exitTransitionPromise = this._exitingNode.props.exitTransition.execute(this._incomingNode, this._exitingNode);
+            if (this.$exitingRoute && this.$exitingRoute.props.exitTransition) {
+                exitTransitionPromise = this.$exitingRoute.props.exitTransition.execute(this.$incomingRoute.getView(), this.$exitingRoute.getView());
             }
             else {
                 exitTransitionPromise = Promise.resolve();
@@ -187,8 +187,8 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
 
             exitTransitionPromise.then(() => {
                 let entryTransitionPromise = null;
-                if (this._incomingNode.props.entryTransition) {
-                    entryTransitionPromise = this._incomingNode.props.entryTransition.execute(this._incomingNode, this._exitingNode);
+                if (this.$incomingRoute.props.entryTransition) {
+                    entryTransitionPromise = this.$incomingRoute.props.entryTransition.execute(this.$incomingRoute.getView(), this.$exitingRoute.getView());
                 }
                 else {
                     entryTransitionPromise = Promise.resolve();
@@ -197,8 +197,8 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
             }).catch((error: Error) => {
                 console.error(error);
             }).then(() => {
-                this._incomingNode = null;
-                this._exitingNode = null;
+                this.$incomingRoute = null;
+                this.$exitingRoute = null;
                 this.setState({shouldTransition: false});
             });
         }
@@ -247,7 +247,7 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
     /**
      * Gets the potential routes
      */
-    private _getChildren(): React.ReactElement[] {
+    private $getChildren(): React.ReactElement[] {
         let children: React.ReactElement[] = null;
 
         if (this.props.children instanceof Array) {
@@ -263,8 +263,8 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
     /**
      * Finds the index route. Returns null if there are no indexed routes.
      */
-    private _getIndexRoute(): React.ReactElement {
-        let children: React.ReactElement[] = this._getChildren();
+    private $getIndexRoute(): React.ReactElement {
+        let children: React.ReactElement[] = this.$getChildren();
         for (let i: number = 0; i < children.length; i++) {
             let child: React.ReactElement = children[i];
             if (child.props.index) {

package/src/RouterStrategy.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from 'events';
-import {IDictionary} from '@totalpave/interfaces';
 import { Router } from './Router';
 
 export const EVENT_URL_CHANGE: string = 'urlchange';
@@ -7,18 +6,18 @@ export const EVENT_URL_CHANGE: string = 'urlchange';
 export type URLChangeCallback = (url: string) => void;
 
 export abstract class RouterStrategy extends EventEmitter {
-    private _router: Router;
+    private $router: Router;
 
     public constructor(router: Router) {
         super();
-        this._router = router;
+        this.$router = router;
     }
 
     /**
      * Gets the router
      */
     public getRouter(): Router {
-        return this._router;
+        return this.$router;
     }
 
     /**
@@ -153,7 +152,7 @@ export abstract class RouterStrategy extends EventEmitter {
      * @param url 
      * @param state 
      */
-    public abstract pushState(url: string, state?: IDictionary): void;
+    public abstract pushState(url: string, state?: Record<any, any>): void;
 
     /**
      * Replaces the current entry in the history stack with the new location.
@@ -161,7 +160,7 @@ export abstract class RouterStrategy extends EventEmitter {
      * @param url
      * @param state 
      */
-    public abstract replaceState(url: string, state?: IDictionary): void;
+    public abstract replaceState(url: string, state?: Record<any, any>): void;
 
     /**
      * Clears the history stack.

package/src/TransitionSlide.ts

@@ -10,15 +10,15 @@ export enum TransitionSlideDirection {
 }
 
 export class TransitionSlide extends TransitionStrategy {
-    private _slideDirection: TransitionSlideDirection;
-    private _slideSpeed: number;
-    private _transitionTimeout: number;
+    private $slideDirection: TransitionSlideDirection;
+    private $slideSpeed: number;
+    private $transitionTimeout: number;
 
     public constructor(slideDirection: TransitionSlideDirection, slideSpeed: number) {
         super();
 
-        this._slideDirection = slideDirection || TransitionSlideDirection.LEFT;
-        this._slideSpeed = slideSpeed || 0.25;
+        this.$slideDirection = slideDirection || TransitionSlideDirection.LEFT;
+        this.$slideSpeed = slideSpeed || 0.25;
     }
 
     protected _execute(incoming: View, exiting: View): Promise<void> {
@@ -36,7 +36,7 @@ export class TransitionSlide extends TransitionStrategy {
             exitingNode.style.pointerEvents = 'none';
             exitingNode.style.zIndex = '2';
 
-            switch (this._slideDirection) {
+            switch (this.$slideDirection) {
                 case TransitionSlideDirection.LEFT:
                     incomingNode.style.left = '100%';
                     exitingNode.style.left = '0%';
@@ -56,7 +56,7 @@ export class TransitionSlide extends TransitionStrategy {
             }
 
             //Set the appropriate transition string
-            let transitionString = this._getTransitionString(this._slideDirection);
+            let transitionString = this.$getTransitionString(this.$slideDirection);
             incomingNode.style.transition = transitionString;
             exitingNode.style.transition = transitionString;
 
@@ -88,7 +88,7 @@ export class TransitionSlide extends TransitionStrategy {
 
             //Apply transition logic
             setTimeout(() => {
-                switch (this._slideDirection) {
+                switch (this.$slideDirection) {
                     case TransitionSlideDirection.LEFT:
                         incomingNode.style.left = '0%';
                         exitingNode.style.left = '-100%';
@@ -110,9 +110,9 @@ export class TransitionSlide extends TransitionStrategy {
         });
     }
 
-    private _getTransitionString(direction: TransitionSlideDirection): string {
+    private $getTransitionString(direction: TransitionSlideDirection): string {
         let dir: string = null;
-        let speed: string = `${this._slideSpeed}s`;
+        let speed: string = `${this.$slideSpeed}s`;
         switch (direction) {
             case TransitionSlideDirection.LEFT:
             case TransitionSlideDirection.RIGHT:
@@ -124,10 +124,10 @@ export class TransitionSlide extends TransitionStrategy {
                 break;
         }
 
-        return `${dir} ${speed} ${this._getSlideStyle()}`
+        return `${dir} ${speed} ${this.$getSlideStyle()}`
     }
 
-    private _getSlideStyle(): string {
+    private $getSlideStyle(): string {
         return 'ease-in-out';
     }
 }

package/src/URLParser.ts

@@ -7,8 +7,8 @@ export interface IURLParams {
  * Parses the URL for router paths and url-based variables.
  */
 export class URLParser {
-    private _allowPartialMatch: boolean;
-    private _pattern: string;
+    private $allowPartialMatch: boolean;
+    private $pattern: string;
 
     /**
      * 
@@ -18,8 +18,8 @@ export class URLParser {
      *                                      Defaults to false.
      */
     public constructor(pattern: string, allowPartialMatch: boolean = false) {
-        this._allowPartialMatch = allowPartialMatch;
-        this._pattern = this._stripURL(pattern);
+        this.$allowPartialMatch = allowPartialMatch;
+        this.$pattern = this.$stripURL(pattern);
     }
 
     /**
@@ -29,11 +29,11 @@ export class URLParser {
      * @param {string} url The url to test
      */
     public parse(url: string): IURLParams {
-        url = this._stripURL(url);
-        let parts: Array<string> = this._getParts(url);
-        let patternParts: Array<string> = this._getParts(this._pattern);
+        url = this.$stripURL(url);
+        let parts: Array<string> = this.$getParts(url);
+        let patternParts: Array<string> = this.$getParts(this.$pattern);
 
-        if ((!this._allowPartialMatch && parts.length !== patternParts.length) || url === '') {
+        if ((!this.$allowPartialMatch && parts.length !== patternParts.length) || url === '') {
             return null;
         }
 
@@ -66,7 +66,7 @@ export class URLParser {
      * @private
      * @param {string} url URL to strip
      */
-    private _stripURL(url: string): string {
+    private $stripURL(url: string): string {
         while (url.charAt(0) === '/') {
             url = url.slice(1);
         }
@@ -84,8 +84,8 @@ export class URLParser {
      * @private
      * @param {string} url URL to split
      */
-    private _getParts(url: string): Array<string> {
-        url = this._stripURL(url);
+    private $getParts(url: string): Array<string> {
+        url = this.$stripURL(url);
         return url.split('/');
     }
 }

package/src/URLStrategy.ts

@@ -1,7 +1,6 @@
 
 import {RouterStrategy} from './RouterStrategy';
 import { Router } from './Router';
-import { IDictionary } from '@totalpave/interfaces';
 
 /**
  * @notice Using the URLStrategy requires some backend configuration
@@ -12,9 +11,9 @@ import { IDictionary } from '@totalpave/interfaces';
  * to the application vs other resources such as images.
  */
 export class URLStrategy extends RouterStrategy {
-    private _base: string;
-    private _stack: Array<string>;
-    private _position: number;
+    private $base: string;
+    private $stack: Array<string>;
+    private $position: number;
 
     /**
      * 
@@ -23,18 +22,18 @@ export class URLStrategy extends RouterStrategy {
     public constructor(router: Router) {
         super(router);
 
-        this._base = window.location.origin + '/r'
-        this._stack = [];
-        this._position = -1;
+        this.$base = window.location.origin + '/r'
+        this.$stack = [];
+        this.$position = -1;
 
         window.addEventListener('popstate', () => {
             this._fireURLChange(this.getLocation());
         });
 
-        this._init();
+        this.$init();
     }
 
-    private _init(): void {
+    private $init(): void {
         this.pushState(this.getLocation());
     }
 
@@ -43,7 +42,7 @@ export class URLStrategy extends RouterStrategy {
     }
 
     public getLocationAt(position: number): string {
-        return this._stack[this._position + position];
+        return this.$stack[this.$position + position];
     }
 
     public getHistoryLength(): number {
@@ -55,11 +54,11 @@ export class URLStrategy extends RouterStrategy {
     }
 
     public peek(to: number): string {
-        return this._stack[this._position + to];
+        return this.$stack[this.$position + to];
     }
 
     public canGo(to: number): boolean {
-        return this._stack[this._position + to] !== undefined;
+        return this.$stack[this.$position + to] !== undefined;
     }
 
     public go(to: number): void {
@@ -67,11 +66,11 @@ export class URLStrategy extends RouterStrategy {
             return;
         }
 
-        this._position += to;
-        this._navigate(this._stack[this._position]);
+        this.$position += to;
+        this.$navigate(this.$stack[this.$position]);
     }
 
-    public pushState(url: string, state?: IDictionary): void {
+    public pushState(url: string, state?: Record<any, any>): void {
         if (state) {
             console.warn('Warning: The state parameter is not implemented yet.');
         }
@@ -81,15 +80,15 @@ export class URLStrategy extends RouterStrategy {
             return;
         }
 
-        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 (state) {
             console.warn('Warning: The state parameter is not implemented yet.');
         }
@@ -99,26 +98,26 @@ export class URLStrategy extends RouterStrategy {
             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, replace: boolean = false): void {
+    private $navigate(url: string, replace: boolean = false): void {
         if (replace) {
-            window.history.replaceState({}, null, this._base + url);
+            window.history.replaceState({}, null, this.$base + url);
         }
         else {
-            window.history.pushState({}, null, this._base + url);
+            window.history.pushState({}, null, this.$base + url);
         }
         this._fireURLChange(this.getLocation());
     }

package/src/View.tsx

@@ -5,7 +5,6 @@ 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';
 
@@ -18,14 +17,14 @@ export interface IViewProps {
 }
 
 export abstract class View<TPageProps extends IViewProps = IViewProps> extends React.Component<TPageProps> {
-    private _node: HTMLDivElement;
+    private $node: HTMLDivElement;
 
     /**
      * @param props See [IViewProps]
      */
     public constructor(props: TPageProps) {
         super(props);
-        this._node = null;
+        this.$node = null;
     }
 
     /**
@@ -70,7 +69,7 @@ export abstract class View<TPageProps extends IViewProps = IViewProps> extends R
      * Gets the underlying HTML node for this View
      */
     public getNode(): HTMLElement {
-        return this._node;
+        return this.$node;
     }
 
     /**
@@ -84,7 +83,7 @@ export abstract class View<TPageProps extends IViewProps = IViewProps> extends R
      * Get the inline styles for this view.
      * Use React style notation.
      */
-    public getViewStyles(): IDictionary<string> {
+    public getViewStyles(): Record<any, string> {
         return {};
     }
 
@@ -95,7 +94,7 @@ export abstract class View<TPageProps extends IViewProps = IViewProps> extends R
         return (
             <div
                 className={`View${cssClass ? ' ' + cssClass : ''}`}
-                ref={(n) => { this._node = n; }}
+                ref={(n) => { this.$node = n; }}
                 style={this.getViewStyles()}
             >
                 {this._renderView()}