1.0.4 • Published 8 months ago

nextbone-routing v1.0.4

Weekly downloads
5
License
MIT
Repository
github
Last release
8 months ago

Nextbone Routing

NPM version NPM downloads Build Status Dependency Status

An advanced router for Web Components

Features

    ✓ Nested routes / states / rendering     ✓ Handles asynchronous data fetching     ✓ Lazy loading of routes with code splitting     ✓ Exposes events through a pub/sub mechanism     ✓ Implements route context for scoped messaging     ✓ Handles nested asynchronous rendering (LitElement, SkateJs)     ✓ Automatic configuration of router links     ✓ Inherits from Slick Router     ✓ Minimal dependencies: slick-router and Events class from nextbone

Installation

$ npm install --save nextbone-routing nextbone lodash-es

Requires a ES6 Promise implementation attached in window (native or polyfill)

Usage

Configure and start the router

import { Router } from 'nextbone-routing'
import LoginComponent from './login/component'
import ContactsRoute from './contacts/route'

function AsyncTasksRoute() {
  return import('./tasks/route.js')
}

async function AsyncRegisterComponent() {
  await import('./register-component.js')
  return 'register-component'
}

// callback function that defines the route tree
// can be defined also as an array
const routes = function (route) {
  route('application', { path: '/' }, function () {
    route('home', { path: '', component: 'home-component' }) // define component with a tag name...
    route('login', { component: LoginComponent }) // ... or with a constructor
    route('register', { component: AsyncRegisterComponent }) // lazy load component definition
    route('contacts', { class: ContactsRoute }) // define a route class that can control lifecycle and component
    route('tasks', { class: AsyncTasksRoute }) // lazy load a route class. Webpack and Rollup does code splitting 
  })
}

const router = new Router({
  routes,
  outlet: '#app-container', // element where the root routes will be rendered. Can be an HTML element instance, a selector or a function returning a HTML element
  log: true, 
  logError: true
});

//start listening to URL changes
router.listen();

//listen an react to events
router.on('before:activate', function(transition, route) {
  const isAuthenticate = checkAuth();
  if (!isAuthenticate && route.requiresAuth) {
    transition.redirectTo('login');
  }
})

Define a Route class

import { Route } from 'nextbone-routing';
import { API } from '../data-api';
import ContactsComponent from './component';

export default class extends Route {
  static component = ContactsComponent,

  activate(){
    // the route children will only be activated after API.getContactList is resolved 
    return API.getContactList().then(contacts => {
      this.contacts = contacts
    });
  }

  prepareEl(el) {
    // called just after creating the element and before rendering the element
    // @property decorator can also be used to bind route properties to el
    el.contacts = this.contacts
  }
})

Documentation

Examples

Related Projects

License

Copyright © 2020 Luiz Américo Pereira Câmara. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.

1.0.4

8 months ago

1.0.2

12 months ago

1.0.1

12 months ago

1.0.0

1 year ago

1.0.3

12 months ago

0.14.0

5 years ago

0.13.0

5 years ago

0.13.1

5 years ago

0.12.0

6 years ago

0.11.0

6 years ago

0.10.0

6 years ago

0.9.0

6 years ago

0.8.0

6 years ago

0.7.0

6 years ago

0.6.0

6 years ago

0.5.1

6 years ago

0.5.0

6 years ago

0.4.0

6 years ago

0.3.0

6 years ago

0.2.0

6 years ago

0.1.0

6 years ago