@breautek/router 4.1.2 → 5.0.0-beta.0

package/dist/router.js

@@ -1,18 +1,5 @@
 'use strict';
 
-
-
-function ___$insertStyle(css) {
-    if (!css || typeof window === 'undefined') {
-        return;
-    }
-    const style = document.createElement('style');
-    style.setAttribute('type', 'text/css');
-    style.innerHTML = css;
-    document.head.appendChild(style);
-    return css;
-}
-
 var React = require('react');
 var events = require('events');
 
@@ -550,6 +537,8 @@ class Router extends React__namespace.Component {
                 this.$incomingRoute = null;
                 this.$exitingRoute = null;
                 this.setState({ shouldTransition: false });
+            }).catch((error) => {
+                console.error(error);
             });
         }
     }
@@ -733,7 +722,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 function __awaiter(thisArg, _arguments, P, generator) {
@@ -751,7 +740,17 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-___$insertStyle(".View {\n  position: static;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}");
+function insertStyle(css) {
+    if (typeof window === 'undefined')
+        return;
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
+}
+
+insertStyle(".View {\n  position: static;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}");
 
 class View extends React__namespace.Component {
     /**
@@ -779,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();
@@ -1018,88 +1019,9 @@ class TransitionSlide extends TransitionStrategy {
     }
 }
 
-var name = "@breautek/router";
-var version = "4.1.2";
-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": "25.0.7",
-	"@rollup/plugin-json": "6.1.0",
-	"@rollup/plugin-node-resolve": "15.2.3",
-	"@testing-library/jest-dom": "6.4.5",
-	"@testing-library/react": "15.0.7",
-	"@types/jest": "29.5.12",
-	"@types/react": "18.3.2",
-	"@types/react-dom": "18.3.0",
-	"@typescript-eslint/eslint-plugin": "7.9.0",
-	"@typescript-eslint/parser": "7.9.0",
-	ajv: "8.13.0",
-	eslint: "8.56.0",
-	"eslint-plugin-react": "7.34.1",
-	glob: "10.3.15",
-	"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.17.2",
-	"rollup-plugin-progress": "1.1.2",
-	"rollup-plugin-sass": "1.12.22",
-	"rollup-plugin-typescript2": "0.36.0",
-	"ts-jest": "29.1.2",
-	"ts-node": "10.9.2",
-	typescript: "5.4.5"
-};
+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,14 +3,25 @@ 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
+     */
     base?: string;
+    /**
+     * @internal
+     */
     componentProps?: T;
+    /**
+     * @internal
+     */
     matcher?: RouteMatcher;
 }
 export interface IComponentProps {

package/dist/src/RouteMatcher.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { IRouteProps } from './Route';
 import { RouterStrategy } from './RouterStrategy';
 /**
  * Will be invoked when no routes are found. Default implementation is to simply return the `indexRoute`.
@@ -7,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
@@ -26,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/dist/src/RouterStrategy.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from 'events';
 import { Router } from './Router';
 import { View } from './View';

package/dist/src/View.d.ts

@@ -38,7 +38,7 @@ export declare abstract class View<TPageProps extends IViewProps = IViewProps> e
      * Get the inline styles for this view.
      * Use React style notation.
      */
-    getViewStyles(): Record<any, string>;
+    getViewStyles(): React.CSSProperties;
     protected abstract _renderView(): React.ReactNode;
     render(): React.ReactNode;
 }

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.2",
+  "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": "25.0.7",
+    "@jest/types": "30.0.5",
+    "@rollup/plugin-commonjs": "28.0.6",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "15.2.3",
-    "@testing-library/jest-dom": "6.4.5",
-    "@testing-library/react": "15.0.7",
-    "@types/jest": "29.5.12",
-    "@types/react": "18.3.2",
-    "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.9.0",
-    "@typescript-eslint/parser": "7.9.0",
-    "ajv": "8.13.0",
-    "eslint": "8.56.0",
-    "eslint-plugin-react": "7.34.1",
-    "glob": "10.3.15",
+    "@rollup/plugin-node-resolve": "16.0.1",
+    "@testing-library/jest-dom": "6.6.3",
+    "@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",
+    "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.17.2",
+    "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.12.22",
+    "rollup-plugin-sass": "1.15.3",
     "rollup-plugin-typescript2": "0.36.0",
-    "ts-jest": "29.1.2",
+    "sass": "1.89.2",
+    "ts-jest": "29.4.0",
     "ts-node": "10.9.2",
-    "typescript": "5.4.5"
+    "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,15 +5,29 @@ 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
+     */
     base?: string;
+
+    /**
+     * @internal
+     */
     componentProps?: T;
+
+    /**
+     * @internal
+     */
     matcher?: RouteMatcher;
 }
 
@@ -27,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
@@ -51,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 || '';
 
@@ -59,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) {
@@ -86,8 +97,8 @@ 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) {
             component = this;
@@ -98,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());
@@ -87,7 +89,7 @@ export abstract class View<TPageProps extends IViewProps = IViewProps> extends R
      * Get the inline styles for this view.
      * Use React style notation.
      */
-    public getViewStyles(): Record<any, string> {
+    public getViewStyles(): React.CSSProperties {
         return {};
     }