https://github.com/richardanaya/voir

A simple router for lit-html
https://github.com/richardanaya/voir

Last synced: about 2 months ago
JSON representation

A simple router for lit-html

• Host: GitHub
• URL: https://github.com/richardanaya/voir
• Owner: richardanaya
• License: mit
• Created: 2016-11-06T20:55:53.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-01-29T05:08:01.000Z (almost 5 years ago)
• Last Synced: 2024-11-20T14:51:16.136Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 43 KB
• Stars: 34
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-vue - voir - 保持mutation与视图组件的分离 (实用库)
• awesome - voir - 保持mutation与视图组件的分离 (实用库)
• awesome-vue - voir - 保持mutation与视图组件的分离 (实用库)
• awesome-github-vue - voir - 保持mutation与视图组件的分离 (实用库)

README

        



# Voir

Voir is a minimalistic routing/rendering system for single page applications. I have observed there are three basic operations that occur during the page lifecycle.

* initial loading on first visit of a route

* setting of page state on navigation to a route

* rendering and rerendering of a current route on interations

This library makes it easy to do this.

```javascript

class MyPageRoute extends PageRoute {

  constructor() {

    super("/blog/(?.*)")

  }

  

  async function onInit(){

    // perform some operation on first load

    // get parameters from route regex match

    const pageId = this.match.groups.postId;

  }

  

  async function onLoad(){

    // perform some operation when navigated to

  }

  

  async function onRender(){

    // render from session state and view state

  }

 }

```

Notice that the route paths are simply regex strings. You can take advantage of ES 2018 regex named groups for more expressive route matches.

## Usage

We're going to create a simple counter application.  

First let's import [`lit-html`](https://lit-html.polymer-project.org/) and voir as ES modules

```javascript

import {html, render} from 'https://unpkg.com/lit-html?module';

import {PageRoute} from 'https://cdn.jsdelivr.net/gh/richardanaya/voir@latest/voir.js';

```

Let's start by creating the session state for our app.

```javascript

var session = { counter: 0 };

```

Now lets think about its lifecycle a bit

```javascript

class CounterPageRoute extends PageRoute {

  constructor() {

    // all pages route to counter

    super("/*")

  }

  async onRender() {

    // use lit to render to content holder

    render(

      html`

        


          ${session.counter}+

        

      `,

      document.body

    );

  }

  

  function onAdd() {

    // modify state

    session.counter += 1;

    // rerender current page

    this.renderCurrentPage();

  }

}

```


Finally we register the page routes in the order we'd like them evaluated

```javascript

register([

  CounterPageRoute

  // other routes would go here

])

```

See this demo at: https://richardanaya.github.io/voir/demo.html