Dobato NPM | npm.io

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 dobato

import Dobato from 'dobato';

<script src="https://unpkg.com/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() {}
 }

class App {
  constructor() {
    this.routes = {
      '/': Home,
      '/about/': About
    };

    this.page = new this.routes[location.pathname]();
    this.page.enter();

    this.dobato = new Dobato();

    this.dobato.on('enterStart', ({ path, from }) => {
      this.page = new this.routes[path]();
    });
    this.dobato.on('enterEnd', ({ path, from }) => {
      this.page.enter();
    });
    this.dobato.on('leaveStart', ({ path, to }) => {
      this.page.leave();
    });
    this.dobato.on('leaveEnd', ({ path, to }) => {
      this.page.destroy();
    });
  }
}

new 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 }