https://github.com/stencil-community/stencil-router
A simple router for Stencil apps and sites
https://github.com/stencil-community/stencil-router
stencil stencil-apps stencil-router stenciljs
Last synced: 11 days ago
JSON representation
A simple router for Stencil apps and sites
- Host: GitHub
- URL: https://github.com/stencil-community/stencil-router
- Owner: stencil-community
- License: mit
- Created: 2017-07-18T15:08:56.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-05T15:18:37.000Z (about 1 year ago)
- Last Synced: 2024-05-02T06:09:36.434Z (12 months ago)
- Topics: stencil, stencil-apps, stencil-router, stenciljs
- Language: TypeScript
- Homepage: https://stenciljs.com/
- Size: 1.63 MB
- Stars: 187
- Watchers: 21
- Forks: 55
- Open Issues: 55
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-stencil - stencil-router - A simple router for Stencil apps and sites. (Plugins / Community)
- awesome-stencil - stencil-router - A simple router for Stencil apps and sites. (Plugins / Community)
README
# @stencil-community/router
Stencil Router V2 is an experimental new router for stencil that focus in:
- **Lightweight** (600bytes)
- **Treeshakable** (not used features are not included in the final build)
- **Simple**, provide the bare mininum but it make it extendable with hooks.
- **No DOM**: Router is not render any extra DOM element, to keep styling simple.
- **Fast**: As fast and lightweight as writing your own router with if statements.
## How does it work?
This router backs up the `document.location` in a `@stencil/store`, this way we can respond to changes in document.location is a much simpler, way, not more subscribes, no more event listeners events to connect and disconnect.
Functional Components are the used to collect the list of routes, finally the `Switch` renders only the selected route.
## Install
```bash
npm install @stencil-community/router --save-dev
```
## Examples
```tsx
import { createRouter, Route } from '@stencil-community/router';
const Router = createRouter();
@Component({
tag: 'app-root',
})
export class AppRoot {
render() {
return (
Welcome
Welcome to the new stencil-router demo
);
}
}
```
### Redirects
```tsx
```
### Params
Route can take an optional `render` property that will pass down the params. This method should be used instead of JSX children.
Regex or functional matches have the chance to generate an object of params when the URL matches.
```tsx
import { createRouter, Route, match } from '@stencil-community/router';
const Router = createRouter();
(
{params[1]}
)}
/>
}
/>
{
if (url.includes('hello')) {
return {user: 'hello'}
}
return undefined;
}}
render={({user}) => (
User: {user}
)}
/>
```
A simple router, inspired by React Router v4, for Stencil apps and vanilla Web Component apps.
### Links
The `href()` function will inject all the handles to an native `anchor`, without extra DOM.
```tsx
import { createRouter, Route, href } from '@stencil-community/router';
const Router = createRouter();
```
### Dynamic routes (guards)
```tsx
@Component({
tag: 'app-root',
})
export class AppRoot {
@State() logged = false;
render() {
return (
{this.logged && (
)}
{!this.logged && (
)
);
}
}
```
### Subscriptions to route changes
Because the router uses `@stencil/store` its trivial to subscribe to changes in the locations, activeRoute, or even the list of routes.
```tsx
import { createRouter, Route } from '@stencil-community/router';
const Router = createRouter();
@Component({
tag: 'app-root',
})
export class AppRoot {
componentWillLoad() {
Router.onChange('url', (newValue: InternalRouterState['url'], _oldValue: InternalRouterState['url']) => {
// Access fields such as pathname, search, etc. from newValue
// This would be a good place to send a Google Analytics event, for example
});
}
render() {
const activePath = Router.state.activeRoute?.path;
Welcome
Welcome to the new stencil-router demo
);
}
}
```
The routes state includes:
```tsx
url: URL;
activeRoute?: RouteEntry;
urlParams: { [key: string]: string };
routes: RouteEntry[];
```
[wiki]: https://github.com/stencil-community/stencil-router/wiki
[npm-badge]: https://img.shields.io/npm/v/@stencil-community/router.svg
[npm-badge-url]: https://www.npmjs.com/package/@stencil-community/router