Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/riadhadrani/dom-router
router for the dom
https://github.com/riadhadrani/dom-router
Last synced: 2 days ago
JSON representation
router for the dom
- Host: GitHub
- URL: https://github.com/riadhadrani/dom-router
- Owner: RiadhAdrani
- License: mit
- Created: 2023-12-03T02:38:12.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2024-02-04T10:15:03.000Z (9 months ago)
- Last Synced: 2024-11-09T13:42:46.772Z (5 days ago)
- Language: TypeScript
- Size: 190 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# dom-router [](https://github.com/RiadhAdrani/dom-router/actions/workflows/checks.yml) [](https://www.npmjs.com/package/@riadh-adrani/dom-router)
A web-based `router` that is framework `agnostic`.
---
## Install
add to your project using :
```bash
npm i @riadh-adrani/dom-router
```
## Router class
create a router object that manages and react to location/history changes.
### constructor
```ts
new Router(RouterConfig);
```
> will throw if `base` is invalid; does not start with `/`.
### unload
unload router and perform need actions.
### processPath
process current path and return a `boolean` that indicates if an update should happen or not.
### navigate
navigate to the given destination and perform necessary updates if needed.
### getElementByDepth
get element at a given depth or `undefined` otherwise.
### getPath
get current path, stripped out of base.
### getParams
get closest route params.
### getSearchParams
get current route search query params.
### toHref
transform a destination route to a valid href string or `undefined` otherwise.
## Helpers
### isUrlNavigatable
check if `url` is valid as a relative path
```ts
function isUrlNavigatable(url: string): boolean;
```
## Types
### RouterType
```ts
enum RouterType {
Browser = 'browser',
Hash = 'hash',
}
```
### RouterConfig
```ts
interface RouterConfig {
/** array of routes that will be considered by the router */
routes: Array>;
/** handler that will run each time the url changes */
onChanged: () => void;
/** router type, ``Browser`` by default */
type?: RouterType;
/** router base, should start with `/` */
base?: string;
/** define if the router should scroll the document body to the top */
correctScrolling?: boolean;
/** function that will transform a title, useful for setting title prefix and suffixes */
transformTitle?: (title?: string) => string;
}
```
### IndexRawRoute
```ts
interface IndexRawRoute {
path: '';
name?: string;
element?: T;
title?: string;
}
```
### CatchRawRoute
```ts
interface CatchRawRoute {
path: '*';
title?: string;
element?: T;
}
```
### PathRawRoute
```ts
interface PathRawRoute {
path: string;
name?: string;
element?: T;
title?: string;
children?: Array>;
}
```
### LayoutRawRoute
```ts
interface LayoutRawRoute {
element: T;
children?: Array>;
}
```
### RawRoute
```ts
type RawRoute =
| LayoutRawRoute
| IndexRawRoute
| CatchRawRoute
| PathRawRoute;
```
### DestinationOptions
```ts
interface DestinationOptions {
replace?: boolean;
}
```
### PathDestinationRequest
```ts
type PathDestinationRequest = string;
```
### RelativeDestinationRequest
```ts
type RelativeDestinationRequest = number;
```
### NamedDestinationRequest
```ts
interface NamedDestinationRequest {
name: string;
query?: Record;
params?: Record;
hash?: string;
}
```
### DestinationRequest
```ts
type DestinationRequest =
| NamedDestinationRequest
| PathDestinationRequest
| RelativeDestinationRequest;
```