Storeon Router

Storeon Router which solves the problem of routing your application, providing full control over the route.
It size is 650 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 router.createRouter
from @storeon/router
and add this module to createStore
.
import createStore from 'storeon'
import useStoreon from 'storeon/react'
import router from '@storeon/router'
const store = createStore([
router.createRouter([
['/', () => ({ page: 'home' })],
['/blog', () => ({ page: 'blog' })],
['/blog/post/*', (id) => ({ page: 'post', id })],
[
/^blog\/post\/(\d+)\/(\d+)$/,
(year, month) => ({ page: 'post', year, month })
]
])
])
function Root() {
const { [router.key]: route } = useStoreon(router.key)
switch (route.match.page) {
case "home":
return <Home/>
case "blog":
return <Blog/>
case "post":
return <Post year={route.match.year} month={route.match.month} id={route.match.id}/>
default:
return <NotFound/>
}
}
store.dispatch(router.navigate, '/')
If you want to use the router with Svelte you should import the router.createRouter
from @storeon/router and add this module to createSvelteStore
instead of createStore
store.js
import { createSvelteStore } from "@storeon/svelte";
import { createRouter } from '@storeon/router'
const connect = createSvelteStore([
createRouter([
['/', () => ({ page: 'home' })],
['/blog', () => ({ page: 'blog' })],
])
])
And use it like:
App.svelte
<script>
import { connect } from "./store.js";
import router from "@storeon/router"
const moduleRouter = connect(router.key)
</script>
You can access the router like default svelte store via $:
{$moduleRouter.match.page}
API
import router from '@storeon/router'
const moduleRouter = router.createRouter([
[path, callback]
])
Function router.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.
router.key
– key for store.
router.navigate
– navigation action.
router.changed
– change event of pathname.
Ignore link
Add data-ignore-router
attribute to the link so that the router ignores it.
LICENSE
MIT