@breautek/router 5.0.0-beta.0 → 5.0.0

package/dist/router.js

@@ -375,19 +375,17 @@ class RouteMatcher {
         }
         let props = {
             url: url,
-            base: base + componentToRender.props.url,
-            matcher: this,
+            __base: base + componentToRender.props.url,
+            __matcher: this,
             component: componentToRender.props.component,
             entryTransition: componentToRender.props.entryTransition,
             exitTransition: componentToRender.props.exitTransition,
-            componentProps: {
-                url: url,
-                router: this.$strategy
-            }
+            componentProps: componentToRender.props.componentProps,
+            __componentProps: Object.assign(Object.assign({}, componentToRender.props.componentProps), { url: url, router: this.$strategy })
         };
         if (params) {
             for (let i in params) {
-                props.componentProps[i] = params[i];
+                props.__componentProps[i] = params[i];
             }
         }
         return React.cloneElement(componentToRender, props);
@@ -502,7 +500,7 @@ class Router extends React__namespace.Component {
                 // currentRoute must be rendered as an array; because, exiting and incoming is rendered as an array.
                 // if currentRoute is not rendered as an array, a bug happens where the exiting screen is reloaded 
                 // calling the constructor again.
-                return React__namespace.createElement(Root, { router: this.getRouterStrategy(), url: this.state.url }, [currentRoute]);
+                return React__namespace.createElement(Root, Object.assign({}, this.props.componentProps, { router: this.getRouterStrategy(), url: this.state.url }), [currentRoute]);
             }
             else {
                 return currentRoute;
@@ -604,14 +602,6 @@ class Router extends React__namespace.Component {
         return null;
     }
 }
-/**
- * @deprecated Use Router.getInstance() instead.
- * @returns {RouterStrategy}
- */
-let getRouter = () => {
-    console.warn('getRouter() is deprecated. use Router.getInstance() instead.');
-    return Router.getInstance();
-};
 
 /**
  * @notice Using the URLStrategy requires some backend configuration
@@ -759,6 +749,7 @@ class View extends React__namespace.Component {
     constructor(props) {
         super(props);
         this.$node = null;
+        this.state = this._initState();
     }
     /**
      * Return the CSS class on this view
@@ -842,15 +833,15 @@ class Route extends React__namespace.Component {
     }
     $getComponentsToRender(component) {
         let url = component.props.url;
-        let base = component.props.base || '';
+        let base = component.props.__base || '';
         // eslint-disable-next-line @typescript-eslint/naming-convention
         let ViewComponent = component.props.component;
         let child;
-        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);
         }
-        return (React__namespace.createElement(ViewComponent, Object.assign({}, component.props.componentProps, { ref: (node) => {
+        return (React__namespace.createElement(ViewComponent, Object.assign({}, component.props.componentProps, component.props.__componentProps, { ref: (node) => {
                 if (node) {
                     if (node instanceof View) {
                         this.$node = node;
@@ -1019,7 +1010,7 @@ class TransitionSlide extends TransitionStrategy {
     }
 }
 
-var version = "5.0.0-beta.0";
+var version = "5.0.0";
 var packageInfo = {
 	version: version};
 
@@ -1036,6 +1027,5 @@ exports.TransitionSlide = TransitionSlide;
 exports.TransitionStrategy = TransitionStrategy;
 exports.URLStrategy = URLStrategy;
 exports.View = View;
-exports.getRouter = getRouter;
 exports.version = VERSION;
 //# sourceMappingURL=router.js.map

package/dist/src/Route.d.ts

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

package/dist/src/Router.d.ts

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { RouterStrategy } from './RouterStrategy';
 import { IRouterStrategyClass } from './IRouterStrategyClass';
 import { IOnNoRoute } from './IOnNoRoute';
-export interface IRouterProps {
+export interface IRouterProps<T = any> {
     strategy?: IRouterStrategyClass;
     component: React.ComponentClass<any>;
+    componentProps?: T;
     children?: React.ReactNode;
     onNoRoute?: IOnNoRoute;
 }
@@ -13,7 +14,7 @@ export interface IRouterState {
     url: string;
     shouldTransition: boolean;
 }
-export declare class Router<TRouterProps extends IRouterProps = IRouterProps> extends React.Component<TRouterProps, IRouterState> {
+export declare class Router<TUserProps = any, TRouterProps extends IRouterProps<TUserProps> = IRouterProps<TUserProps>> extends React.Component<TRouterProps, IRouterState> {
     state: IRouterState;
     private $lastRenderedRoute;
     private $matcher;
@@ -82,8 +83,3 @@ export declare class Router<TRouterProps extends IRouterProps = IRouterProps> ex
      */
     private $getIndexRoute;
 }
-/**
- * @deprecated Use Router.getInstance() instead.
- * @returns {RouterStrategy}
- */
-export declare let getRouter: () => RouterStrategy;

package/dist/src/View.d.ts

@@ -8,12 +8,17 @@ export interface IViewProps {
     entryTransition?: TransitionStrategy;
     exitTransition?: TransitionStrategy;
 }
-export declare abstract class View<TPageProps extends IViewProps = IViewProps> extends React.Component<TPageProps> {
+export interface IViewState {
+}
+export interface IViewSnapshotState {
+}
+export declare abstract class View<TPageProps extends IViewProps = IViewProps, TPageState extends IViewState = IViewState, TPageSnapshotState extends IViewSnapshotState = IViewSnapshotState> extends React.Component<TPageProps, TPageState, TPageSnapshotState> {
     private $node;
     /**
      * @param props See [IViewProps]
      */
     constructor(props: TPageProps);
+    protected abstract _initState(): TPageState;
     /**
      * Return the CSS class on this view
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breautek/router",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0",
   "description": "An alternate react router.",
   "main": "dist/router.js",
   "types": "dist/src/api.d.ts",
@@ -37,31 +37,32 @@
     "react-dom": "16.x || 17.x || 18.x || 19.x"
   },
   "devDependencies": {
-    "@jest/types": "30.0.5",
-    "@rollup/plugin-commonjs": "28.0.6",
+    "@jest/types": "30.2.0",
+    "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-json": "6.1.0",
-    "@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",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@totalpave/eslint-plugin": "7.0.17",
     "@types/jest": "30.0.0",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
+    "@types/react": "19.2.10",
+    "@types/react-dom": "19.2.3",
     "ajv": "8.17.1",
-    "glob": "11.0.3",
+    "glob": "13.0.1",
     "ignore-styles": "5.0.1",
-    "jest": "30.0.5",
-    "jest-environment-jsdom": "30.0.5",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "rollup": "4.45.1",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "rollup": "4.57.1",
     "rollup-plugin-progress": "1.1.2",
     "rollup-plugin-sass": "1.15.3",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.89.2",
-    "ts-jest": "29.4.0",
+    "sass": "1.97.3",
+    "ts-jest": "29.4.6",
     "ts-node": "10.9.2",
-    "typescript": "5.8.3"
+    "typescript": "5.9.3"
   },
   "dependencies": {
     "@types/events": "3.0.3",

package/src/Route.tsx

@@ -5,30 +5,30 @@ import { RouteMatcher } from './RouteMatcher';
 import { RouterStrategy } from './RouterStrategy';
 import { TransitionStrategy } from './TransitionStrategy';
 
-export interface IRouteProps<T extends IComponentProps = IComponentProps> {
+export interface IRouteProps<TUserProps = any, TInternalProps extends IComponentProps = IComponentProps> {
     url: string;
     component: React.ComponentClass<any>;
     index?: boolean;
     entryTransition?: TransitionStrategy;
     exitTransition?: TransitionStrategy;
     children?: React.ReactElement<IRouteProps> | React.ReactElement<IRouteProps>[];
-
+    componentProps?: TUserProps;
     ref?: React.Ref<Route>;
 
     /**
      * @internal
      */
-    base?: string;
+    __base?: string;
 
     /**
      * @internal
      */
-    componentProps?: T;
+    __componentProps?: TInternalProps;
 
     /**
      * @internal
      */
-    matcher?: RouteMatcher;
+    __matcher?: RouteMatcher;
 }
 
 export interface IComponentProps {
@@ -64,20 +64,23 @@ export class Route<TComponentProps extends IComponentProps = IComponentProps, TR
 
     private $getComponentsToRender(component: React.ReactElement<IRouteProps> | React.Component<IRouteProps>): React.ReactNode {
         let url: string = component.props.url;
-        let base: string = component.props.base || '';
+        let base: string = component.props.__base || '';
 
         // eslint-disable-next-line @typescript-eslint/naming-convention
         let ViewComponent: React.ElementType = component.props.component;
         let child: React.ReactNode;
 
-        let routeComponent: React.ReactElement<IRouteProps> = 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 as any}
+                {...{
+                    ...component.props.componentProps,
+                    ...component.props.__componentProps
+                }}
                 ref={(node: React.Component) => {
                     if (node) {
                         if (node instanceof View) {

package/src/RouteMatcher.ts

@@ -63,14 +63,16 @@ export class RouteMatcher {
             return null;
         }
 
-        let props: IRouteProps<IComponentProps> = {
+        let props: IRouteProps<any, IComponentProps> = {
             url : url,
-            base: base + componentToRender.props.url,
-            matcher: this,
+            __base: base + componentToRender.props.url,
+            __matcher: this,
             component: componentToRender.props.component,
             entryTransition: componentToRender.props.entryTransition,
             exitTransition: componentToRender.props.exitTransition,
-            componentProps: {
+            componentProps: componentToRender.props.componentProps,
+            __componentProps: {
+                ...componentToRender.props.componentProps,
                 url : url,
                 router: this.$strategy
             }
@@ -78,7 +80,7 @@ export class RouteMatcher {
 
         if (params) {
             for (let i in params) {
-                props.componentProps[i] = params[i];
+                props.__componentProps[i] = params[i];
             }
         }
 

package/src/Router.tsx

@@ -8,9 +8,10 @@ import { IRouterStrategyClass } from './IRouterStrategyClass';
 import {IOnNoRoute} from './IOnNoRoute';
 import { IRouteProps, Route } from "./Route";
 
-export interface IRouterProps {
+export interface IRouterProps<T = any> {
     strategy?: IRouterStrategyClass;
     component: React.ComponentClass<any>;
+    componentProps?: T;
     children?: React.ReactNode;
     onNoRoute?: IOnNoRoute;
 }
@@ -21,7 +22,7 @@ export interface IRouterState {
     shouldTransition: boolean;
 }
 
-export class Router<TRouterProps extends IRouterProps = IRouterProps> extends React.Component<TRouterProps, IRouterState> {
+export class Router<TUserProps = any, TRouterProps extends IRouterProps<TUserProps> = IRouterProps<TUserProps>> extends React.Component<TRouterProps, IRouterState> {
     public state: IRouterState;
     
     private $lastRenderedRoute: any;
@@ -161,7 +162,7 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
                 // currentRoute must be rendered as an array; because, exiting and incoming is rendered as an array.
                 // if currentRoute is not rendered as an array, a bug happens where the exiting screen is reloaded 
                 // calling the constructor again.
-                return <Root router={this.getRouterStrategy()} url={this.state.url}>{[ currentRoute ]}</Root>;
+                return <Root {...this.props.componentProps} router={this.getRouterStrategy()} url={this.state.url}>{[ currentRoute ]}</Root>;
             }
             else {
                 return currentRoute;
@@ -275,12 +276,3 @@ export class Router<TRouterProps extends IRouterProps = IRouterProps> extends Re
         return null;
     }
 }
-
-/**
- * @deprecated Use Router.getInstance() instead.
- * @returns {RouterStrategy}
- */
-export let getRouter = (): RouterStrategy => {
-    console.warn('getRouter() is deprecated. use Router.getInstance() instead.');
-    return Router.getInstance();
-}

package/src/View.tsx

@@ -12,7 +12,11 @@ export interface IViewProps {
     exitTransition?: TransitionStrategy;
 }
 
-export abstract class View<TPageProps extends IViewProps = IViewProps> extends React.Component<TPageProps> {
+export interface IViewState {}
+
+export interface IViewSnapshotState {}
+
+export abstract class View<TPageProps extends IViewProps = IViewProps, TPageState extends IViewState = IViewState, TPageSnapshotState extends IViewSnapshotState = IViewSnapshotState> extends React.Component<TPageProps, TPageState, TPageSnapshotState> {
     private $node: HTMLDivElement;
 
     /**
@@ -21,8 +25,11 @@ export abstract class View<TPageProps extends IViewProps = IViewProps> extends R
     public constructor(props: TPageProps) {
         super(props);
         this.$node = null;
+        this.state = this._initState();
     }
 
+    protected abstract _initState(): TPageState;
+
     /**
      * Return the CSS class on this view
      */