@breautek/router 4.1.3 → 5.0.0-beta.0

package/dist/router.js

@@ -537,6 +537,8 @@ class Router extends React__namespace.Component {
                 this.$incomingRoute = null;
                 this.$exitingRoute = null;
                 this.setState({ shouldTransition: false });
+            }).catch((error) => {
+                console.error(error);
             });
         }
     }
@@ -739,9 +741,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 function insertStyle(css) {
-    if (typeof window === 'undefined') {
+    if (typeof window === 'undefined')
         return;
-    }
     const style = document.createElement('style');
     style.setAttribute('type', 'text/css');
     style.innerHTML = css;
@@ -777,6 +778,8 @@ class View extends React__namespace.Component {
     componentDidMount() {
         this.getTitle().then((title) => {
             this.props.router.setTitle(title);
+        }).catch((e) => {
+            console.error(e);
         });
         document.body.classList.add(this.$getViewBodyClass());
         let stylesheet = this.getViewStylesheet();
@@ -864,7 +867,6 @@ class Route extends React__namespace.Component {
     $getChildren(component) {
         let children = null;
         if (!component) {
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
             component = this;
         }
         if (!component.props.children) {
@@ -1017,88 +1019,9 @@ class TransitionSlide extends TransitionStrategy {
     }
 }
 
-var name = "@breautek/router";
-var version = "4.1.3";
-var description = "An alternate react router.";
-var main = "dist/router.js";
-var types = "dist/src/api.d.ts";
-var type = "commonjs";
-var publishConfig = {
-	registry: "https://registry.npmjs.org"
-};
-var scripts = {
-	test: "jest",
-	lint: "eslint --ext .ts,.tsx '?(src|spec)/**/*.?(ts|tsx)' --cache",
-	build: "rollup -c rollup.config.js --bundleConfigAsCjs",
-	"publish-beta": "npm publish --tag beta",
-	prepublishOnly: "npm run build",
-	version: "npm run-script build",
-	postversion: "git push && git push --tags"
-};
-var repository = {
-	type: "git",
-	url: "https://github.com/breautek/router"
-};
-var keywords = [
-	"react",
-	"router",
-	"page",
-	"screen",
-	"navigation"
-];
-var author = "norman@normanbreau.com";
-var license = "MIT";
-var homepage = "https://github.com/breautek/router";
-var peerDependencies = {
-	react: "16.x || 17.x || 18.x",
-	"react-dom": "16.x || 17.x || 18.x"
-};
-var devDependencies = {
-	"@rollup/plugin-commonjs": "28.0.1",
-	"@rollup/plugin-json": "6.1.0",
-	"@rollup/plugin-node-resolve": "15.3.0",
-	"@testing-library/jest-dom": "6.6.3",
-	"@testing-library/react": "16.0.1",
-	"@types/jest": "29.5.14",
-	"@types/react": "18.3.12",
-	"@types/react-dom": "18.3.1",
-	"@typescript-eslint/eslint-plugin": "7.18.0",
-	"@typescript-eslint/parser": "7.18.0",
-	ajv: "8.17.1",
-	eslint: "8.57.1",
-	"eslint-plugin-react": "7.37.2",
-	glob: "11.0.0",
-	"ignore-styles": "5.0.1",
-	jest: "29.7.0",
-	"jest-environment-jsdom": "29.7.0",
-	"node-sass": "9.0.0",
-	react: "18.3.1",
-	"react-dom": "18.3.1",
-	rollup: "4.24.4",
-	"rollup-plugin-progress": "1.1.2",
-	"rollup-plugin-sass": "1.14.0",
-	"rollup-plugin-typescript2": "0.36.0",
-	"ts-jest": "29.2.5",
-	"ts-node": "10.9.2",
-	typescript: "5.5.4"
-};
+var version = "5.0.0-beta.0";
 var packageInfo = {
-	name: name,
-	version: version,
-	description: description,
-	main: main,
-	types: types,
-	type: type,
-	publishConfig: publishConfig,
-	scripts: scripts,
-	repository: repository,
-	keywords: keywords,
-	author: author,
-	license: license,
-	homepage: homepage,
-	peerDependencies: peerDependencies,
-	devDependencies: devDependencies
-};
+	version: version};
 
 const VERSION = packageInfo.version;
 

package/dist/src/IOnNoRoute.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IRouteProps } from 'Route';
 export interface IOnNoRoute {
-    (indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement;
+    (indexRoute: React.ReactElement<IRouteProps>, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps>;
 }

package/dist/src/Route.d.ts

@@ -3,12 +3,14 @@ import { View } from './View';
 import { RouteMatcher } from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
 import { TransitionStrategy } from './TransitionStrategy';
-export interface IRouteProps<T> {
+export interface IRouteProps<T extends IComponentProps = IComponentProps> {
     url: string;
     component: React.ComponentClass<any>;
     index?: boolean;
     entryTransition?: TransitionStrategy;
     exitTransition?: TransitionStrategy;
+    children?: React.ReactElement<IRouteProps> | React.ReactElement<IRouteProps>[];
+    ref?: React.Ref<Route>;
     /**
      * @internal
      */

package/dist/src/RouteMatcher.d.ts

@@ -1,3 +1,4 @@
+import { IRouteProps } from './Route';
 import { RouterStrategy } from './RouterStrategy';
 /**
  * Will be invoked when no routes are found. Default implementation is to simply return the `indexRoute`.
@@ -6,7 +7,7 @@ import { RouterStrategy } from './RouterStrategy';
  * @returns {React.ReactElement} An `ReactElement` of a `Route`
  */
 export interface IOnNoRouteFunction {
-    (indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement;
+    (indexRoute: React.ReactElement, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps>;
 }
 /**
  * This class is reponsible for determing which route to render
@@ -25,5 +26,5 @@ export declare class RouteMatcher {
      * @param indexRoute
      * @param onNoRoute
      */
-    match(url: string, children: Array<React.ReactElement>, base: string, indexRoute?: React.ReactElement, onNoRoute?: IOnNoRouteFunction): React.ReactElement;
+    match(url: string, children: React.ReactElement<IRouteProps>[], base: string, indexRoute?: React.ReactElement<IRouteProps>, onNoRoute?: IOnNoRouteFunction): React.ReactElement<IRouteProps>;
 }

package/eslint.config.js

@@ -0,0 +1,14 @@
+
+let commonConfig = require('@totalpave/eslint-plugin').default;
+
+module.exports = [
+    ...commonConfig,
+    {
+        languageOptions: {
+            parserOptions: {
+                "project": "./spec/tsconfig.json",
+                "tsconfigRootDir": __dirname
+            }
+        }
+    }
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breautek/router",
-  "version": "4.1.3",
+  "version": "5.0.0-beta.0",
   "description": "An alternate react router.",
   "main": "dist/router.js",
   "types": "dist/src/api.d.ts",
@@ -10,7 +10,8 @@
   },
   "scripts": {
     "test": "jest",
-    "lint": "eslint --ext .ts,.tsx '?(src|spec)/**/*.?(ts|tsx)' --cache",
+    "lint": "eslint ./src ./spec",
+    "lint:fix": "eslint --fix ./src ./spec",
     "build": "rollup -c rollup.config.js --bundleConfigAsCjs",
     "publish-beta": "npm publish --tag beta",
     "prepublishOnly": "npm run build",
@@ -32,36 +33,39 @@
   "license": "MIT",
   "homepage": "https://github.com/breautek/router",
   "peerDependencies": {
-    "react": "16.x || 17.x || 18.x",
-    "react-dom": "16.x || 17.x || 18.x"
+    "react": "16.x || 17.x || 18.x || 19.x",
+    "react-dom": "16.x || 17.x || 18.x || 19.x"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "28.0.1",
+    "@jest/types": "30.0.5",
+    "@rollup/plugin-commonjs": "28.0.6",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "15.3.0",
+    "@rollup/plugin-node-resolve": "16.0.1",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.0.1",
-    "@types/jest": "29.5.14",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
+    "@testing-library/react": "16.3.0",
+    "@totalpave/eslint-plugin": "7.0.14",
+    "@types/jest": "30.0.0",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
     "ajv": "8.17.1",
-    "eslint": "8.57.1",
-    "eslint-plugin-react": "7.37.2",
-    "glob": "11.0.0",
+    "glob": "11.0.3",
     "ignore-styles": "5.0.1",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "node-sass": "9.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "rollup": "4.24.4",
+    "jest": "30.0.5",
+    "jest-environment-jsdom": "30.0.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "rollup": "4.45.1",
     "rollup-plugin-progress": "1.1.2",
-    "rollup-plugin-sass": "1.14.0",
+    "rollup-plugin-sass": "1.15.3",
     "rollup-plugin-typescript2": "0.36.0",
-    "ts-jest": "29.2.5",
+    "sass": "1.89.2",
+    "ts-jest": "29.4.0",
     "ts-node": "10.9.2",
-    "typescript": "5.5.4"
+    "typescript": "5.8.3"
+  },
+  "dependencies": {
+    "@types/events": "3.0.3",
+    "events": "3.3.0",
+    "tslib": "2.8.1"
   }
 }

package/pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - node-sass
+  - unrs-resolver
+
+publicHoistPattern:
+  - eslint

package/src/HashStrategy.ts

@@ -11,7 +11,7 @@ import { Router } from './Router';
 */
 export class HashStrategy extends RouterStrategy {
     private $base: string;
-    private $stack: Array<string>;
+    private $stack: string[];
     private $position: number;
     private $lastFiredLocation: string;
 

package/src/IOnNoRoute.ts

@@ -1,6 +1,7 @@
 
 import * as React from 'react';
+import { IRouteProps } from 'Route';
 
 export interface IOnNoRoute {
-    (indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement;
+    (indexRoute: React.ReactElement<IRouteProps>, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps>;
 }

package/src/Route.tsx

@@ -5,12 +5,15 @@ import { RouteMatcher } from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
 import { TransitionStrategy } from './TransitionStrategy';
 
-export interface IRouteProps<T> {
+export interface IRouteProps<T extends IComponentProps = IComponentProps> {
     url: string;
     component: React.ComponentClass<any>;
     index?: boolean;
     entryTransition?: TransitionStrategy;
     exitTransition?: TransitionStrategy;
+    children?: React.ReactElement<IRouteProps> | React.ReactElement<IRouteProps>[];
+
+    ref?: React.Ref<Route>;
 
     /**
      * @internal
@@ -38,10 +41,7 @@ export interface IComponentProps {
     [key: string]: any;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IRouteState {
-
-}
+export interface IRouteState {}
 
 /**
  * This class represents a route that renders a {@link View} component
@@ -62,7 +62,7 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
         return this.$node;
     }
 
-    private $getComponentsToRender(component: React.ReactElement | React.Component): React.ReactNode {
+    private $getComponentsToRender(component: React.ReactElement<IRouteProps> | React.Component<IRouteProps>): React.ReactNode {
         let url: string = component.props.url;
         let base: string = component.props.base || '';
 
@@ -70,14 +70,14 @@ 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: React.ReactElement<IRouteProps> = component.props.matcher.match(url, this.$getChildren(component), base);
         if (routeComponent) {
             child = this.$getComponentsToRender(routeComponent);
         }
 
         return (
             <ViewComponent
-                {...component.props.componentProps}
+                {...component.props.componentProps as any}
                 ref={(node: React.Component) => {
                     if (node) {
                         if (node instanceof View) {
@@ -97,11 +97,10 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
         );
     }
 
-    private $getChildren(component: React.Component | React.ReactElement): React.ReactElement[] {
-        let children: React.ReactElement[] = null;
+    private $getChildren(component: React.Component<IRouteProps> | React.ReactElement<IRouteProps>): React.ReactElement<IRouteProps>[] {
+        let children: React.ReactElement<IRouteProps>[] = null;
 
         if (!component) {
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
             component = this;
         }
         
@@ -110,10 +109,10 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
         }
 
         if (component.props.children instanceof Array) {
-            children = component.props.children as React.ReactElement[];
+            children = component.props.children as React.ReactElement<IRouteProps>[];
         }
         else {
-            children = [ component.props.children as React.ReactElement ];
+            children = [ component.props.children as React.ReactElement<IRouteProps> ];
         }
 
         return children;

package/src/RouteMatcher.ts

@@ -11,7 +11,7 @@ import {RouterStrategy} from './RouterStrategy';
  * @returns {React.ReactElement} An `ReactElement` of a `Route`
  */
 export interface IOnNoRouteFunction {
-    (indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement;
+    (indexRoute: React.ReactElement, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps>;
 }
 
 /**
@@ -25,7 +25,7 @@ export class RouteMatcher {
         this.$strategy = routerStrategy;
     }
 
-    private $defaultNoRouteFunction(indexRoute: React.ReactElement, routes: Array<React.ReactElement>): React.ReactElement {
+    private $defaultNoRouteFunction(indexRoute: React.ReactElement<IRouteProps>, routes: React.ReactElement<IRouteProps>[]): React.ReactElement<IRouteProps> {
         return indexRoute;
     }
 
@@ -38,11 +38,11 @@ export class RouteMatcher {
      * @param indexRoute 
      * @param onNoRoute
      */
-    public match(url: string, children: Array<React.ReactElement>, base: string, indexRoute?: React.ReactElement, onNoRoute?: IOnNoRouteFunction): React.ReactElement {
-        let componentToRender: React.ReactElement = null;
+    public match(url: string, children: React.ReactElement<IRouteProps>[], base: string, indexRoute?: React.ReactElement<IRouteProps>, onNoRoute?: IOnNoRouteFunction): React.ReactElement<IRouteProps> {
+        let componentToRender: React.ReactElement<IRouteProps> = null;
         let params: IURLParams = null;
         for (let i: number = 0; i < children.length; i++) {
-            let route: React.ReactElement = children[i];
+            let route: React.ReactElement<IRouteProps> = children[i];
             let shouldAllowPartialMatching: boolean = !!route.props.children;
             let parser: URLParser = new URLParser(base + route.props.url, shouldAllowPartialMatching);
             params = parser.parse(url);

package/src/Router.tsx

@@ -6,7 +6,7 @@ import {RouteMatcher} from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
 import { IRouterStrategyClass } from './IRouterStrategyClass';
 import {IOnNoRoute} from './IOnNoRoute';
-import { Route } from "./Route";
+import { IRouteProps, Route } from "./Route";
 
 export interface IRouterProps {
     strategy?: IRouterStrategyClass;
@@ -115,7 +115,7 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
      * @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<IRouteProps> = 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) {
@@ -141,7 +141,7 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
             }
 
             // Incoming will always be safe to render, hence no defensive checks
-            let incoming: React.ReactElement = React.cloneElement(currentRoute, {
+            let incoming: React.ReactElement<IRouteProps> = React.cloneElement(currentRoute, {
                 ref : (route: Route) => {
                     this.$incomingRoute = route;
                 }
@@ -198,6 +198,8 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
                 this.$incomingRoute = null;
                 this.$exitingRoute = null;
                 this.setState({shouldTransition: false});
+            }).catch((error: Error) => {
+                console.error(error);
             });
         }
     }
@@ -245,14 +247,14 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
     /**
      * Gets the potential routes
      */
-    private $getChildren(): React.ReactElement[] {
-        let children: React.ReactElement[] = null;
+    private $getChildren(): React.ReactElement<IRouteProps>[] {
+        let children: React.ReactElement<IRouteProps>[] = null;
 
         if (this.props.children instanceof Array) {
-            children = this.props.children as React.ReactElement[];
+            children = this.props.children as React.ReactElement<IRouteProps>[];
         }
         else {
-            children = [ this.props.children as React.ReactElement ];
+            children = [ this.props.children as React.ReactElement<IRouteProps> ];
         }
 
         return children;
@@ -261,10 +263,10 @@ 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<IRouteProps> {
+        let children: React.ReactElement<IRouteProps>[] = this.$getChildren();
         for (let i: number = 0; i < children.length; i++) {
-            let child: React.ReactElement = children[i];
+            let child: React.ReactElement<IRouteProps> = children[i];
             if (child.props.index) {
                 return child;
             }

package/src/TransitionSlide.ts

@@ -61,7 +61,7 @@ export class TransitionSlide extends TransitionStrategy {
             exitingNode.style.transition = transitionString;
 
             //Add transition listener
-            let onTransitionEnd = () => {
+            let onTransitionEnd = (): void => {
                 //cleanup
                 incomingNode.removeEventListener('transitionend', onTransitionEnd);
                 

package/src/URLParser.ts

@@ -30,8 +30,8 @@ export class URLParser {
      */
     public parse(url: string): IURLParams {
         url = this.$stripURL(url);
-        let parts: Array<string> = this.$getParts(url);
-        let patternParts: Array<string> = this.$getParts(this.$pattern);
+        let parts: string[] = this.$getParts(url);
+        let patternParts: string[] = this.$getParts(this.$pattern);
 
         if ((!this.$allowPartialMatch && parts.length !== patternParts.length) || url === '') {
             return null;
@@ -84,7 +84,7 @@ export class URLParser {
      * @private
      * @param {string} url URL to split
      */
-    private $getParts(url: string): Array<string> {
+    private $getParts(url: string): string[] {
         url = this.$stripURL(url);
         return url.split('/');
     }

package/src/URLStrategy.ts

@@ -12,7 +12,7 @@ import { Router } from './Router';
  */
 export class URLStrategy extends RouterStrategy {
     private $base: string;
-    private $stack: Array<string>;
+    private $stack: string[];
     private $position: number;
 
     /**

package/src/View.tsx

@@ -44,6 +44,8 @@ export abstract class View<TPageProps extends IViewProps = IViewProps> extends R
     public componentDidMount(): void {
         this.getTitle().then((title: string) => {
             this.props.router.setTitle(title);
+        }).catch((e) => {
+            console.error(e);
         });
 
         document.body.classList.add(this.$getViewBodyClass());