router/README.md

97 lines
2.2 KiB
Markdown
Raw Normal View History

2024-04-25 20:49:38 +08:00
# @elexis/router
Single page app router extension for [ElexisJS](https://github.com/defaultkavy/elexis)
## Installation
```
npm i @elexis/router
```
## Usage
```ts
import 'elexis';
import '@elexis/router';
import { Router, Route } from '@elexis/router'
// create new Router with base path '/',
const router = new Router('/');
// append router view element
const $app = $('app').content([
router.$view
])
const home_page_route = new Route('/', () => {
// which this callback function return will be appended
// into router view element when path match
return $('h1').content('This is a Homepage!')
})
// Add home_page_route into router
router.addRoute(home_page_route);
// Router starting listen location path change
router.listen();
```
> Without `Router.listen()`, Router will do nothing when page loaded.
## Global $ Methods
```ts
import 'elexis';
import '@elexis/router';
$.open('/about') // open /about page without load page
$.back() // back
$.replace('/hello') // replace current page history state with url
```
## Events
### Router event: load
```ts
const gallery_route = new Route('/gallery', ({loaded}) => {
async function $ImageList() {
// fetch images and return elements
// after all image loaded, using loaded function.
// this will trigger load event on anccestor router
loaded();
}
return $('div').content([
$ImageList()
])
})
router.on('load', () => {...})
```
### RouteRecord event: open
```ts
const viewer_route = new Route('/viewer', ({record}) => {
const page_open_count$ = $.state(0);
// this event will be fire everytime this page opened
record.on('open', () => {
page_open_count$.set( page_open_count$.value + 1 );
})
return $('div').content(page_open_count$)
})
```
### Router event: notfound
```ts
// Route will remove all child of view when path is not exist.
// Using preventDefault function to prevent this action.
router.on('notfound', ({preventDefault}) => {
preventDefault(); // prevent remove all child of view
... // do something
})
```
### `static` Router event: pathchange
```ts
// This event fired on location change happened
Router.on('pathchange', () => {
... // do something
})
```