Added useRoute hook

Author: lorenzo

app/test.js

@@ -1,10 +1,11 @@
 import { defineWompo, html } from 'wompo';
-import { Routes, Route, ChildRoute, Link, useParams } from '../dist/wompo-router.js';
+import { Routes, Route, ChildRoute, Link, useParams, useRoute } from '../dist/wompo-router.js';
 import Dashboard from './dashboard.js';
 
 function Elem() {
 	const params = useParams();
-	console.log(params);
+	const route = useRoute();
+	console.log(route);
 	return html`
     <h1>BBB</h1>
     <${ChildRoute} />
@@ -20,6 +21,9 @@ export default function Test() {
     <${Routes} notFoundElement=${html`OMGGGG 404 NOT FOUNDDD`}>
       <${Route} path="/" element=${html`<${Elem} />`}>
         <${Route} path="file-manager/*" element=${html`<${Dashboard} />`} />
+        <${Route} path="a" element=${html`AAAA`}>
+          <${Route} path="b" element=${html`BBBB`} />
+        </${Route}>
       </${Route}>
       <${Route} path="/:key" element=${html`<h1>AAAA</h1>`} />
       <${Route} path="/:key/code" element=${html`<h1>CODE</h1>`} />

dist/wompo-router.js

@@ -1,6 +1,6 @@
 {
 	"name": "wompo-router",
-	"version": "1.2.6",
+	"version": "1.3.0",
 	"author": "Lorenzo Lannino <[email protected]>",
 	"description": "Wompo-Router allows to create a Single Page Application using Wompo.",
 	"license": "MIT",

package.json

@@ -7,6 +7,7 @@ interface RouteStructure extends Omit<RouteProps, 'index' | 'children' | 'lazy'>
     parent: RouteStructure;
     element: RenderHtml;
     path: string;
+    fullPath?: string;
     children: RouteStructure[];
     index: RouteStructure;
     nextRoute?: RouteStructure;
@@ -159,10 +160,14 @@ export declare const useParams: () => any;
  */
 export declare const useNavigate: () => (newValue: string, push?: boolean) => void;
 /**
- * This hook will return all the data of the current route, and will re-render the component whenver
- * the current route changes.
+ * This hook will return the current path, and will re-render the component whenever it changes.
  */
 export declare const useCurrentRoute: () => string;
+/**
+ * This hook will return all the data of the current route, and will re-render the component
+ * whenever the current route changes.
+ */
+export declare const useRoute: () => RouteStructure;
 /**
  * This hook will return the whole routes object that the `Routes` component uses to render the
  * correct routes.

ts/wompo-router.d.ts

@@ -66,6 +66,7 @@ const getRoutes = (
 			const slash =
 				(parent && !parent.endsWith('/')) || (!parent && !route.path.startsWith('/')) ? '/' : '';
 			newRoute += parent + slash + route.path;
+			route.fullPath = newRoute;
 			paths.push([newRoute, route]);
 		}
 		if (route.children) {
@@ -240,6 +241,7 @@ interface RouteStructure extends Omit<RouteProps, 'index' | 'children' | 'lazy'>
 	parent: RouteStructure;
 	element: RenderHtml;
 	path: string;
+	fullPath?: string;
 	children: RouteStructure[];
 	index: RouteStructure;
 	nextRoute?: RouteStructure;
@@ -253,13 +255,15 @@ interface RouterContext {
 	currentRoute: string;
 	setNewRoute: (newValue: string, push?: boolean) => void;
 	routes: [string, RouteStructure][];
+	route: RouteStructure;
 }
 const RouterContext = createContext<RouterContext>({
 	params: null,
 	hash: null,
 	currentRoute: null,
 	setNewRoute: null,
 	routes: [],
+	route: null,
 });
 
 const scrollIntoView = (hash: string) => {
@@ -355,6 +359,7 @@ export function Routes({ origin, notFoundElement, children }: RoutesProps) {
 				currentRoute: currentRoute,
 				setNewRoute: setNewRoute,
 				routes: routes,
+				route: route,
 			} as RouterContext),
 		[currentRoute]
 	);
@@ -392,7 +397,7 @@ export function Routes({ origin, notFoundElement, children }: RoutesProps) {
 }
 
 defineWompo(Routes, {
-	name: 'womp-routes',
+	name: 'wompo-routes',
 });
 
 /* 
@@ -662,14 +667,22 @@ export const useNavigate = () => {
 };
 
 /**
- * This hook will return all the data of the current route, and will re-render the component whenver
- * the current route changes.
+ * This hook will return the current path, and will re-render the component whenever it changes.
  */
 export const useCurrentRoute = () => {
 	const routerContext = useContext(RouterContext);
 	return routerContext.currentRoute;
 };
 
+/**
+ * This hook will return all the data of the current route, and will re-render the component
+ * whenever the current route changes.
+ */
+export const useRoute = () => {
+	const routerContext = useContext(RouterContext);
+	return routerContext.route;
+};
+
 /**
  * This hook will return the whole routes object that the `Routes` component uses to render the
  * correct routes.