voir's Introduction

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.

class MyPageRoute extends PageRoute {
  constructor() {
    super("/blog/(?<postId>.*)")
  }
  
  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 and voir as ES modules

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.

var session = { counter: 0 };

Now lets think about its lifecycle a bit

class CounterPageRoute extends PageRoute {
  constructor() {
    // all pages route to counter
    super("/*")
  }

  async onRender() {
    // use lit to render to content holder
    render(
      html`
        <div>
          ${session.counter}<button @click=${this.onAdd.bind(this)}>+</button>
        </div>
      `,
      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

register([
  CounterPageRoute
  // other routes would go here
])

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

voir's People

Contributors

Stargazers

Watchers

voir's Issues

actions of mutation functions overwriting each other

it seems that having different mutation handlers is just a way to group actions for easier code reading, as it is not possible to dispatch an action to a specific handler - am I right?

so in this scenario:

function someMutations(state,action){
    switch(action.type){
        case "increment":
          state.first_counter += 1
          return;
    }
  }

  function someOtherMutations(state,action){
    switch(action.type){
        case "increment":
          state.second_counter += 1
          return;
    }
  }

dispatch('increment') would always increment state.first_counter, and never state.second_counter

besides that, really great work!

Recommend Projects