@storeon/router

Storeon Router

Storeon Router which solves the problem of routing your application, providing full control over the route.

It size is 570 bytes (minified and gzipped) and uses Size Limit to control size.

Installation

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

Usage

If you want to use the router you should import the createRouter from @storeon/router and add this module to createStoreon.

import { createStoreon } from 'storeon'
import { createRouter, routerChanged, routerKey } 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 setData (data) {
  document
    .querySelector('.data')
    .innerText = JSON.stringify(data)
}

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.

Sponsor

LICENSE

MIT