Skip to content

Commit

Permalink
fixed: update code formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
GianlucaGuarini committed Oct 13, 2023
1 parent 78f1987 commit 8f92d73
Show file tree
Hide file tree
Showing 17 changed files with 221 additions and 224 deletions.
12 changes: 6 additions & 6 deletions .codeclimate.yml
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
ratings:
paths:
- "src/**.js"
- 'src/**.js'

exclude_paths:
- "route.js"
- "route.esm.js"
- "route.standalone.js"
- "test/**"
- "demos/**"
- 'route.js'
- 'route.esm.js'
- 'route.standalone.js'
- 'test/**'
- 'demos/**'
11 changes: 5 additions & 6 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,17 @@ name: test

on:
push:
branches: [ main, dev ]
branches: [main, dev]
pull_request:
branches: [ dev ]
branches: [dev]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [14.x, 15.x, 16.x, 17.x]
node-version: [16.x, 17.x, 18.x, 19.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v2
Expand All @@ -24,10 +23,10 @@ jobs:
- run: npm i
- run: npm test
- name: Generate Coverage
if: ${{ success() && github.event_name != 'pull_request' && matrix.node-version == '15.x' }}
if: ${{ success() && github.event_name != 'pull_request' && matrix.node-version == '19.x' }}
run: npm run cov
- name: Coveralls
if: ${{ success() && github.event_name != 'pull_request' && matrix.node-version == '15.x' }}
if: ${{ success() && github.event_name != 'pull_request' && matrix.node-version == '19.x' }}
uses: coverallsapp/github-action@master
with:
path-to-lcov: ./coverage/lcov.info
Expand Down
68 changes: 26 additions & 42 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ The Riot.js Router is the minimal router implementation with such technologies:
- [erre.js streams](https://github.com/GianlucaGuarini/erre) and javascript async generators
- [rawth.js](https://github.com/GianlucaGuarini/rawth) urls parsing


It doesn't need Riot.js to work and can be used as standalone module.

**For Riot.js 3 and the older route version please check the [v3 branch](https://github.com/riot/route/tree/v3)**
Expand All @@ -28,19 +27,19 @@ It doesn't need Riot.js to work and can be used as standalone module.

We have 2 editions:

edition | file
:-- | :--
**UMD Version** | `index.umd.js`
**ESM Module** | `index.js`
**Commonjs Module** | `index.cjs`
| edition | file |
| :------------------ | :------------- |
| **UMD Version** | `index.umd.js` |
| **ESM Module** | `index.js` |
| **Commonjs Module** | `index.cjs` |

### Script injection

```html
<script src="https://unpkg.com/@riotjs/route@x.x.x/route.js"></script>
```

*Note*: change the part `x.x.x` to the version numbers what you want to use: ex. `4.5.0` or `4.7.0`.
_Note_: change the part `x.x.x` to the version numbers what you want to use: ex. `4.5.0` or `4.7.0`.

### ESM module

Expand Down Expand Up @@ -68,7 +67,6 @@ You can import the `<router>` and `<route>` components in your application and u
```html
<app>
<router>

<!-- These links will trigger automatically HTML5 history events -->
<nav>
<a href="/home">Home</a>
Expand All @@ -77,16 +75,9 @@ You can import the `<router>` and `<route>` components in your application and u
</nav>

<!-- Your application routes will be rendered here -->
<route path="/home">
Home page
</route>
<route path="/about">
About
</route>
<route path="/team/:person">
Hello dear { route.params.person }
</route>

<route path="/home"> Home page </route>
<route path="/about"> About </route>
<route path="/team/:person"> Hello dear { route.params.person } </route>
</router>

<script>
Expand Down Expand Up @@ -135,17 +126,15 @@ You can also specify the base of your application via component attributes:
The router component has also an `onStarted` callback that will be called asynchronously after the first route event will be called

```html
<router onStarted={onRouterStarted}></router>
<router onStarted="{onRouterStarted}"></router>
```

#### Route

The `<route>` component provides the `route` property to its children (it's simply a [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object) allowing you to detect the url params and queries.

```html
<route path="/:some/:route/:param">
{JSON.stringify(route.params)}
</route>
<route path="/:some/:route/:param"> {JSON.stringify(route.params)} </route>

<route path="/search(.*)">
<!-- Assuming the URL is "/search?q=awesome" -->
Expand Down Expand Up @@ -182,12 +171,12 @@ This module works on node and on any modern browser, it exports the `router` and
import { route, router, setBase } from '@riotjs/route'

// required to set base first
setBase('/');
setBase('/')

// create a route stream
const aboutStream = route('/about')

aboutStream.on.value(url => {
aboutStream.on.value((url) => {
console.log(url) // URL object
})

Expand All @@ -196,7 +185,7 @@ aboutStream.on.value(() => {
})

// triggered on each route event
router.on.value(path => {
router.on.value((path) => {
// path is always a string in this function
console.log(path)
})
Expand Down Expand Up @@ -226,12 +215,12 @@ setBase(`#`)
Setting the base path of your application route is mandatory and is the first you probably are going to do before creating your route listeners.

#### DOM binding

The example above is not really practical in case you are working in a browser environment. In that case you might want to bind your router to the DOM listening all the click events that might trigger a route change event.
Window history `popstate` events should be also connected to the router.
With the `initDomListeners` method you can automatically achieve all the features above:

```js

import { initDomListeners } from '@riotjs/route'

const unsubscribe = initDomListeners()
Expand All @@ -249,19 +238,14 @@ import { initDomListeners } from '@riotjs/route'
initDomListeners(document.querySelector('.main-navigation'))
```


[ci-image]:https://img.shields.io/github/workflow/status/riot/route/test?style=flat-square
[ci-url]:https://github.com/riot/route/actions

[license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]:LICENSE.txt

[npm-version-image]:http://img.shields.io/npm/v/@riotjs/route.svg?style=flat-square
[npm-downloads-image]:http://img.shields.io/npm/dm/@riotjs/route.svg?style=flat-square
[npm-url]:https://npmjs.org/package/@riotjs/route

[coverage-image]:https://img.shields.io/coveralls/riot/route/main.svg?style=flat-square
[coverage-url]:https://coveralls.io/github/riot/route/?branch=main

[codeclimate-image]:https://api.codeclimate.com/v1/badges/1487b171ba4409b5c302/maintainability
[codeclimate-url]:https://codeclimate.com/github/riot/route
[ci-image]: https://img.shields.io/github/workflow/status/riot/route/test?style=flat-square
[ci-url]: https://github.com/riot/route/actions
[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE.txt
[npm-version-image]: http://img.shields.io/npm/v/@riotjs/route.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/@riotjs/route.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/route
[coverage-image]: https://img.shields.io/coveralls/riot/route/main.svg?style=flat-square
[coverage-url]: https://coveralls.io/github/riot/route/?branch=main
[codeclimate-image]: https://api.codeclimate.com/v1/badges/1487b171ba4409b5c302/maintainability
[codeclimate-url]: https://codeclimate.com/github/riot/route
40 changes: 20 additions & 20 deletions demos/riot-history.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Riot.js history</title>
<script src="https://unpkg.com/riot/riot.min.js"></script>
<script src="../route.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module">
import App from './components/app.js'
import User from './components/user.js'
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Riot.js history</title>
<script src="https://unpkg.com/riot/riot.min.js"></script>
<script src="../route.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module">
import App from './components/app.js'
import User from './components/user.js'

riot.register('route', route.Route)
riot.register('router', route.Router)
riot.register('user', User)
riot.component(App)(app)
</script>
</body>
</html>
riot.register('route', route.Route)
riot.register('router', route.Router)
riot.register('user', User)
riot.component(App)(app)
</script>
</body>
</html>
56 changes: 28 additions & 28 deletions demos/standalone-hash.html
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Standalone Hash Demo</title>
<script src="../route.standalone.js"></script>
</head>
<body>
<nav>
<a href="#/hello">Hello</a>
<a href="#/user">User</a>
<a href="#/user/gianluca">Username</a>
<a href="#/goodbye">goodbye</a>
</nav>
<div id="root">
</div>
<script type="module">
const { initDomListeners, setBase, router } = route
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Standalone Hash Demo</title>
<script src="../route.standalone.js"></script>
</head>
<body>
<nav>
<a href="#/hello">Hello</a>
<a href="#/user">User</a>
<a href="#/user/gianluca">Username</a>
<a href="#/goodbye">goodbye</a>
</nav>
<div id="root"></div>
<script type="module">
const { initDomListeners, setBase, router } = route

setBase('#')
setBase('#')

const onRoute = (url) => root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`
const onRoute = (url) =>
(root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`)

route.route('/hello').on.value(onRoute)
route.route('/user').on.value(onRoute)
route.route('/user/:username').on.value(onRoute)
route.route('/goodbye').on.value(onRoute)
route.route('/hello').on.value(onRoute)
route.route('/user').on.value(onRoute)
route.route('/user/:username').on.value(onRoute)
route.route('/goodbye').on.value(onRoute)

router.push(window.location.hash.replace('#', ''))
router.push(window.location.hash.replace('#', ''))

initDomListeners()
</script>
</body>
initDomListeners()
</script>
</body>
</html>
54 changes: 27 additions & 27 deletions demos/standalone-history.html
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Standalone History Demo</title>
<script src="../route.standalone.js"></script>
</head>
<body>
<nav>
<a href="/hello">Hello</a>
<a href="/user">User</a>
<a href="/user/gianluca">Username</a>
<a href="/goodbye">goodbye</a>
</nav>
<div id="root">
</div>
<script type="module">
const { initDomListeners, setBase, router } = route
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Standalone History Demo</title>
<script src="../route.standalone.js"></script>
</head>
<body>
<nav>
<a href="/hello">Hello</a>
<a href="/user">User</a>
<a href="/user/gianluca">Username</a>
<a href="/goodbye">goodbye</a>
</nav>
<div id="root"></div>
<script type="module">
const { initDomListeners, setBase, router } = route

setBase('/')
setBase('/')

const onRoute = (url) => root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`
const onRoute = (url) =>
(root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`)

route.route('/hello').on.value(onRoute)
route.route('/user').on.value(onRoute)
route.route('/user/:username').on.value(onRoute)
route.route('/goodbye').on.value(onRoute)
route.route('/hello').on.value(onRoute)
route.route('/user').on.value(onRoute)
route.route('/user/:username').on.value(onRoute)
route.route('/goodbye').on.value(onRoute)

initDomListeners()
</script>
</body>
initDomListeners()
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"scripts": {
"prepublishOnly": "npm run build && npm test",
"lint": "eslint src test rollup.config.js",
"lint": "eslint src test rollup.config.js && prettier -c .",
"build": "rollup -c && npm run build-demo",
"build-demo": "riot demos/components -o demos/components",
"demo": "npm run build && serve",
Expand Down

0 comments on commit 8f92d73

Please sign in to comment.