riot-routing
Lightweight Riot.js client sided router built on top of the 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.
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:
npm install riot-routing
For a quick start using jsdelivr:
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:
... components: Router LinkTo
or
// will expose the `Router` and `LinkTo` components globally
The module also supports es2015:
const install =
When referencing from a browser, a global definition RiotRouting
will be exposed:
Example
The router component takes three props (
default-path
andfallback
are optional):
Routes are defined in the form:
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 (john@neetgroup.net)
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
.
- Branches for bugs and features should be structured like so,
- 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 andnpm run pretty
to format.
- Use
- Include your name and email in the contributors list.
Copyright (c) 2020 John Nolette Licensed under the MIT license.