Storeon Router

Storeon Router solves the problems of routing while seamlessly providing full control.

Its size is 577 bytes (minified and gzipped) and uses Size Limit to control size.

import { createStoreon } from 'storeon'
import { createRouter, routerChanged, routerKey, routerNavigate } from '@storeon/router'

const store = createStoreon([
  createRouter([
    ['/', () => ({ page: 'home' })],
    ['/blog', () => ({ page: 'blog' })],
    ['/blog/post/*', (id) => ({ page: 'post', id })],

    [
      /^blog\/post\/(\d+)\/(\d+)$/,
      (year, month) => ({ page: 'post', year, month })
    ]
  ])
])

setData(store.get()[routerKey])

store.on(routerChanged, function (_, data) {
  setData(data)
})

function navigateToFirstPost () {
  store.dispatch(routerNavigate, '/blog/post/first-post')
}

function setData (data) {
  document
    .querySelector('.data')
    .innerText = JSON.stringify(data)
}

Installation

npm install @storeon/router
# or
yarn add @storeon/router

Examples

• Vanilla
• React/Preact
• Svelte

API

import { createRouter } from '@storeon/router'

const moduleRouter = createRouter([
  [path, callback]
])

Function createRouter could have options:

• path: path name can be a string or RegExp.
• callback: the callback function must return an object with parameters for this path.

routerKey – key for store.

routerNavigate – navigation action.

routerChanged – change event of pathname.

Ignore link

Add data-ignore-router attribute to the link so that the router ignores it.