Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neetjn/riot-routing
Lightweight client sided router for Riot.js.
https://github.com/neetjn/riot-routing
html html5 javascript js node riot riot4 riotjs route routing web
Last synced: 18 days ago
JSON representation
Lightweight client sided router for Riot.js.
- Host: GitHub
- URL: https://github.com/neetjn/riot-routing
- Owner: neetjn
- License: mit
- Created: 2019-08-18T01:17:33.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:09:02.000Z (almost 2 years ago)
- Last Synced: 2024-10-07T17:05:10.053Z (about 1 month ago)
- Topics: html, html5, javascript, js, node, riot, riot4, riotjs, route, routing, web
- Language: JavaScript
- Homepage:
- Size: 1.88 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# riot-routing
[](https://actions-badge.atrox.dev/neetjn/riot-routing/goto)
[](https://codecov.io/gh/neetjn/riot-routing)
[](https://badge.fury.io/js/riot-routing)
[](https://nodei.co/npm/riot-routing/)
[](https://github.com/prettier/prettier)
[](LICENSE)
Lightweight Riot.js client sided router built on top of the [core-routing](https://github.com/neetjn/core-routing) project using the HTML 5 history api.
### Support
> Support is available for older browsers without the HTML 5 history api, however events may be dispatched irregularly and all features may not be available.
| Chome | Edge | Firefox | Opera | Safari |
|--------|------|---------|----------|--------|
| 5.0+ ✔ | ✔ | 4.0+ ✔ | 11.50+ ✔ | 5.0+ ✔ |
**riot-routing** only supports Riot.js 4.x, for Riot.js 3.x see [riot-view-router](https://github.com/neetjn/riot-view-router).
### About
This project was created in wake of a redesign of the **riot-view-router** project. **riot-routing** consists of two simple exported components leveraging **core-routing** in a lightweight client.
## Install
To install via NPM:
```sh
npm install riot-routing
```
For a quick start using jsdelivr:
```html
```
### Use
The router at it's core is quite simple to use. The project exposes two Riot.js components and an `install` function that can be imported like so:
```js
import { Router, LinkTo } from 'riot-routing'
...
export default {
components: {
Router,
LinkTo
}
}
```
or
```js
import { register } from 'riot'
import { install } from 'riot-routing'
// will expose the `Router` and `LinkTo` components globally
install(register)
```
The module also supports es2015:
```js
const { install } = require('riot-routing')
```
When referencing from a browser, a global definition `RiotRouting` will be exposed:
```html
const { install } = RiotRouting
install(riot.register)
```
### Example
> The router component takes three props (`default-path` and `fallback` are optional):
```html
import { Router, LinkTo } from 'riot-routing'
import Home from './components/home.riot'
import NotFound from './components/not-found.riot'
import UserProfile from './components/user-profile.riot'
const routes = [
{
component: Home,
path: ['/', '/home']
},
{
component: NotFound,
path: '/not-found'
},
{
componentName: 'user-profile',
path: '/user/:userId',
test(data, transition) {
if (data.args.userId) {
...
} else {
transition('/not-found')
}
}
}
]
export default {
components: {
Router,
Home,
NotFound,
UserProfile
},
routes
}
```
Routes are defined in the form:
```ts
interface Route = {
component?: {
css: string,
name: string,
template: ...,
exports: any
},
componentName?: string,
path: string | Array,
test (data: ..., transition: fn(route?: string)): void
}
```
## Development
Refer to the following npm commands to simplify your development workflow:
* **lint** - Lint core project and tests.
* **pretty** - Use prettier to clean/format core project.
* **test** - Run test suite.
* **build:web** - Compile bundle for browser.
* **build:prod** - Compile bundle for production.
* **build** - Lint, compile, and test the project.
## Contributors
* **John Nolette** ([email protected])
Contributing guidelines are as follows,
* Any new features or bug fixes must include either a test.
* Branches for bugs and features should be structured like so, `issue-x-username`.
* Before putting in a pull request, be sure to verify you've built all your changes and your code adheres to the defined TS and JS style rules.
* Use `npm run lint` to lint your code and `npm run pretty` to format.
* Include your name and email in the contributors list.
---
Copyright (c) 2020 John Nolette Licensed under the MIT license.