0.0.1 • Published 12 months ago
@roukara/dobato v0.0.1
@roukara/dobato
A simple client-side routing library that helps you create smooth page transitions without having to reload.
Features
- Easy to use.
- Uses caching and prefetching to speed up page transition.
- Offers transition hooks.
Prefetch is inspired by quicklink
Install
npm install @roukara/dobato
import Dobato from '@roukara/dobato';
or
<script src="https://unpkg.com/@roukara/dobato"></script>
Basic usage
<body>
<nav>
<a href="/" dobato-link>Home</a>
<a href="/about/" dobato-link>About</a>
</nav>
<div dobato>
// will replace.
</div>
</body>
class Home {
constructor() {}
enter() {}
leave() {}
destroy() {}
}
class About {
constructor() {}
enter() {}
leave() {}
destroy() {}
}
function app() {
const routes = {
'/': Home,
'/about/': About
};
let page = new routes[location.pathname]();
page.enter();
const dobato = new Dobato();
dobato.on('enterStart', ({ path, from }) => {
page = new routes[path]();
});
dobato.on('enterEnd', ({ path, from }) => {
page.enter();
});
dobato.on('leaveStart', ({ path, to }) => {
page.leave();
});
dobato.on('leaveEnd', ({ path, to }) => {
page.destroy();
});
}
app();
Options
Option | Type | Default | Description |
---|---|---|---|
container | String | '[dobato]' | The container that have content replaced on page transition. |
link | String | 'a[dobato-link]' | The anchor links will trigger page transition. |
historyState | Object | The state object will be associated with a browser history entry. | |
prefetch | Boolean | true | Whether to prefetch links that are in the viewport. |
Method
Method | Arguments | Description |
---|---|---|
on(eventName: string, callback: ({ path: string, from?: string, to?: string }) => void) | eventName : The name of transition event.callback : A callback function that will be called when the transition event occurs. | Add a transition hook. |
off(eventName: string, callback: ({ path: string, from?: string, to?: string }) => void) | eventName : The name of transition event.callback : A callback function that will be called when the transition event occurs. | Remove a transition hook. |
Transition hooks
Name | Description | Callback arguments |
---|---|---|
leaveStart | Start leave transition. d-leave-start class will be added to body. | { path, to } |
leaveEnd | End leave transition. d-leave-end class will be added to body. | { path, to } |
enterStart | Start enter transition. d-enter-start class will be added to body. | { path, from } |
enterEnd | End enter transition. d-enter-end class will be added to body. | { path, from } |
License
0.0.1
12 months ago