Skip to content

Commit 76e6940

Browse files
author
lorenzo
committed
Added useRoute hook
1 parent 28db9a1 commit 76e6940

File tree

5 files changed

+43
-21
lines changed

5 files changed

+43
-21
lines changed

app/test.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { defineWompo, html } from 'wompo';
2-
import { Routes, Route, ChildRoute, Link, useParams } from '../dist/wompo-router.js';
2+
import { Routes, Route, ChildRoute, Link, useParams, useRoute } from '../dist/wompo-router.js';
33
import Dashboard from './dashboard.js';
44

55
function Elem() {
66
const params = useParams();
7-
console.log(params);
7+
const route = useRoute();
8+
console.log(route);
89
return html`
910
<h1>BBB</h1>
1011
<${ChildRoute} />
@@ -20,6 +21,9 @@ export default function Test() {
2021
<${Routes} notFoundElement=${html`OMGGGG 404 NOT FOUNDDD`}>
2122
<${Route} path="/" element=${html`<${Elem} />`}>
2223
<${Route} path="file-manager/*" element=${html`<${Dashboard} />`} />
24+
<${Route} path="a" element=${html`AAAA`}>
25+
<${Route} path="b" element=${html`BBBB`} />
26+
</${Route}>
2327
</${Route}>
2428
<${Route} path="/:key" element=${html`<h1>AAAA</h1>`} />
2529
<${Route} path="/:key/code" element=${html`<h1>CODE</h1>`} />

dist/wompo-router.js

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "wompo-router",
3-
"version": "1.2.6",
3+
"version": "1.3.0",
44
"author": "Lorenzo Lannino <[email protected]>",
55
"description": "Wompo-Router allows to create a Single Page Application using Wompo.",
66
"license": "MIT",

ts/wompo-router.d.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ interface RouteStructure extends Omit<RouteProps, 'index' | 'children' | 'lazy'>
77
parent: RouteStructure;
88
element: RenderHtml;
99
path: string;
10+
fullPath?: string;
1011
children: RouteStructure[];
1112
index: RouteStructure;
1213
nextRoute?: RouteStructure;
@@ -159,10 +160,14 @@ export declare const useParams: () => any;
159160
*/
160161
export declare const useNavigate: () => (newValue: string, push?: boolean) => void;
161162
/**
162-
* This hook will return all the data of the current route, and will re-render the component whenver
163-
* the current route changes.
163+
* This hook will return the current path, and will re-render the component whenever it changes.
164164
*/
165165
export declare const useCurrentRoute: () => string;
166+
/**
167+
* This hook will return all the data of the current route, and will re-render the component
168+
* whenever the current route changes.
169+
*/
170+
export declare const useRoute: () => RouteStructure;
166171
/**
167172
* This hook will return the whole routes object that the `Routes` component uses to render the
168173
* correct routes.

ts/wompo-router.ts

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ const getRoutes = (
6666
const slash =
6767
(parent && !parent.endsWith('/')) || (!parent && !route.path.startsWith('/')) ? '/' : '';
6868
newRoute += parent + slash + route.path;
69+
route.fullPath = newRoute;
6970
paths.push([newRoute, route]);
7071
}
7172
if (route.children) {
@@ -240,6 +241,7 @@ interface RouteStructure extends Omit<RouteProps, 'index' | 'children' | 'lazy'>
240241
parent: RouteStructure;
241242
element: RenderHtml;
242243
path: string;
244+
fullPath?: string;
243245
children: RouteStructure[];
244246
index: RouteStructure;
245247
nextRoute?: RouteStructure;
@@ -253,13 +255,15 @@ interface RouterContext {
253255
currentRoute: string;
254256
setNewRoute: (newValue: string, push?: boolean) => void;
255257
routes: [string, RouteStructure][];
258+
route: RouteStructure;
256259
}
257260
const RouterContext = createContext<RouterContext>({
258261
params: null,
259262
hash: null,
260263
currentRoute: null,
261264
setNewRoute: null,
262265
routes: [],
266+
route: null,
263267
});
264268

265269
const scrollIntoView = (hash: string) => {
@@ -355,6 +359,7 @@ export function Routes({ origin, notFoundElement, children }: RoutesProps) {
355359
currentRoute: currentRoute,
356360
setNewRoute: setNewRoute,
357361
routes: routes,
362+
route: route,
358363
} as RouterContext),
359364
[currentRoute]
360365
);
@@ -392,7 +397,7 @@ export function Routes({ origin, notFoundElement, children }: RoutesProps) {
392397
}
393398

394399
defineWompo(Routes, {
395-
name: 'womp-routes',
400+
name: 'wompo-routes',
396401
});
397402

398403
/*
@@ -662,14 +667,22 @@ export const useNavigate = () => {
662667
};
663668

664669
/**
665-
* This hook will return all the data of the current route, and will re-render the component whenver
666-
* the current route changes.
670+
* This hook will return the current path, and will re-render the component whenever it changes.
667671
*/
668672
export const useCurrentRoute = () => {
669673
const routerContext = useContext(RouterContext);
670674
return routerContext.currentRoute;
671675
};
672676

677+
/**
678+
* This hook will return all the data of the current route, and will re-render the component
679+
* whenever the current route changes.
680+
*/
681+
export const useRoute = () => {
682+
const routerContext = useContext(RouterContext);
683+
return routerContext.route;
684+
};
685+
673686
/**
674687
* This hook will return the whole routes object that the `Routes` component uses to render the
675688
* correct routes.

0 commit comments

Comments
 (0)