Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loreanvictor/callbag-router
Routing for single-page applications, using Callbags
https://github.com/loreanvictor/callbag-router
callbag frontend routing spa
Last synced: 2 months ago
JSON representation
Routing for single-page applications, using Callbags
- Host: GitHub
- URL: https://github.com/loreanvictor/callbag-router
- Owner: loreanvictor
- License: mit
- Created: 2020-12-28T12:09:51.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-03T20:19:50.000Z (almost 4 years ago)
- Last Synced: 2024-08-09T05:51:55.006Z (5 months ago)
- Topics: callbag, frontend, routing, spa
- Language: TypeScript
- Homepage:
- Size: 361 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# callbag-router
[](https://github.com/loreanvictor/callbag-router/actions?query=workflow%3A%22Test+and+Report+Coverage%22)
[](https://codecov.io/gh/loreanvictor/callbag-router)
[](https://www.npmjs.com/package/callbag-router)
Routing for single-page applications, using [Callbags](https://github.com/callbag/callbag).
- Integrates with [`callbag-jsx`](https://loreanvictor.github.io/callbag-jsx/)
- Can be used independently though (or with other UI libraries and frameworks)
- Supports normal routing and hash-based routing (all routes start with `#`) out of the box
- You can plug in your own [routing environment](https://github.com/loreanvictor/callbag-router/blob/main/src/env.ts), for use outside of browser
- Supports [glob](https://en.wikipedia.org/wiki/Glob_(programming)) route matching, i.e. `**/hellow`
- Supports route parameters, i.e. `/hellow/:name`
- Supports relative navigation, i.e. `navigate('../wherever')`
```bash
npm i callbag-router
```
👉 Use with [`callbag-jsx`](https://loreanvictor.github.io/callbag-jsx/):
```tsx
import { Route } from 'callbag-router'
import { pipe, map } from 'callbag-common'
import { makeRenderer } from 'callbag-jsx'
const renderer = makeRenderer()
renderer.render(
<>
Hellow {params.name}!}
/>
GoodBye!}/>
>
).on(document.body)
```
👉 Navigate around:
```ts
import { navigate } from 'callbag-router'
// --> navigates to /hellow/world
navigate('/hellow/world')
// --> navigates to /hellow?name=World
navigate('/hellow', {
query: {
name: 'World'
}
})
// --> navigates to /hellow/World
navigate('hellow/:name', {
route: {
name: 'World'
}
})
// --> navigates to /hellow/john
navigate('../john')
```
👉 Listen to query parameter changes:
```ts
import { query } from 'callbag-router'
import { pipe, subscribe } from 'callbag-common'
pipe(
query(),
subscribe(console.log) // --> logs an object of query parameters
)
```
👉 Update query parameters:
```ts
import { query, navigate } from 'callbag-router'
import { pipe, subscribe } from 'callbag-common'
navigate('hellow')
query().sub('name').set('world') // --> set query parameter `name` to 'world'
```
👉 Manually listen to route changes:
```ts
import { match } from 'callbag-router'
import { pipe, subscribe } from 'callbag-common'
pipe(
match('hellow/**'), // --> matches `/hellow/x`, `/hellow/x/y/z`, etc.
subscribe(matched => {
if (matched) {
console.log('Hellow there!')
}
})
)
```
👉 Hash-based routing:
```ts
import { initialize } from 'callbag-router'
import { BrowserHashRoutingEnvironment } from 'callbag-router/browser'
initialize({
environment: new BrowserHashRoutingEnvironment()
})
```
## Contribution
Play nice and respectful. Useful commands for development:
```bash
git clone https://github.com/loreanvictor/callbag-router.git
```
```bash
npm i # --> install dependencies
```
```bash
npm start # --> serve samples/index.tsx on localhost:3000
```
```bash
npm test # --> run tests
```
```bash
npm run cov:view # --> view coverage
```