https://github.com/ionic-team/stencil-router-v2
https://github.com/ionic-team/stencil-router-v2
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ionic-team/stencil-router-v2
- Owner: ionic-team
- License: other
- Archived: true
- Created: 2020-05-07T18:18:03.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T12:56:11.000Z (almost 3 years ago)
- Last Synced: 2025-01-18T21:58:42.605Z (about 1 year ago)
- Language: TypeScript
- Size: 688 KB
- Stars: 44
- Watchers: 10
- Forks: 13
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stencil-router-v2
⚠️ This project has been archived. ⚠️
Stencil Router V2 was an experimental router that did not reach v1.0 status, and should be considered unsupported.
Individuals and teams looking for a Stencil-based router solution should see the
[Stencil Community Router project](https://github.com/stencil-community/stencil-router).
The project can continue to be downloaded in its current state from the NPM registry, and may
be forked by individuals wishing to build directly off of it.
The documentation below is kept for historical purposes only.
---
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-router-v2 --save-dev
```
## Examples
```tsx
import { createRouter, Route } from 'stencil-router-v2';
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-router-v2';
const Router = createRouter();
(
{params[1]}
)}
/>
}
/>
{
if (url.includes('hello')) {
return {user: 'hello'}
}
return undefined;
}}
render={({user}) => (
User: {user}
)}
/>
```
### Links
The `href()` function will inject all the handles to an native `anchor`, without extra DOM.
```tsx
import { createRouter, Route, href } from 'stencil-router-v2';
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-router-v2';
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[];
```