https://github.com/storeon/router

Storeon module for URL routing
https://github.com/storeon/router

Last synced: 3 months ago
JSON representation

Storeon module for URL routing

• Host: GitHub
• URL: https://github.com/storeon/router
• Owner: storeon
• License: mit
• Created: 2019-05-12T21:23:51.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:51:05.000Z (over 1 year ago)
• Last Synced: 2024-01-18T08:07:29.880Z (5 months ago)
• Language: JavaScript
• Homepage: https://storeon.github.io/router/
• Size: 1.29 MB
• Stars: 67
• Watchers: 5
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-stars - router
• awesome-stars - storeon/router - Storeon module for URL routing (JavaScript)

README

        
# 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.

[Storeon]: https://github.com/storeon/storeon

[Size Limit]: https://github.com/ai/size-limit

```js

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](./examples/vanilla/)

* [React/Preact](./examples/react/)

* [Svelte](./examples/svelte/)

## API

```js

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.