Links

@atomico/router

powerful router for Webcomponents, React and Preact
@atomico/router aims to facilitate the creation of SPA-type applications through the following strategies:
  1. 1.
    slot: you can reference a slot within the Router Switch to show on a specific path.
  2. 2.
    elements: you will be able to mount CustomElements through Instantable elements.
  3. 3.
    asynchronous generators: through asynchronous generators you will be able to show multiple views according to the load state, for example transitions.

Syntax

Atomico JSX
HTML
import { render } from "atomico";
import { RouterSwitch, RouterCase } from "@atomico/router";
render(
<RouterSwitch>
<RouterCase path="/" for="home"></RouterCase>
<RouterCase path="/user/{id}" load={async function *()({id}){
yield <h1>loading...</h1>;
const data = await getUser(id);
return <User {...data}/>
}}></RouterCase>
<h1 slot="config">home</h1>
</RouterSwitch>,
document.body
)
<router-switch>
<router-case path="/" for="home"></router-case>
<router-case path="/config" for="config"></router-case>
<section slot="home">...</section>
<section slot="config">...</section>
</router-switch>

Elements

RouterSwitch

Properties

Props
Description
Type
Event
case
slot to associate at the time of the match with path
String - read only
match

Events

Event
JSX
Text
Match
onMatch
It is dispatched every time the router matches a new route.

RouterCase

Component that declares the behavior of the route, with it you can:
  1. 1.
    Define a slot to show instantly when matching the browser path.
  2. 2.
    Define a load callback to execute when matching the browser route.

Properties

Props
Description
Type
load
asynchronous content loader
Function
for
slot to associate at the time of the match with path
String
path
expression for path
String
memo
memorize the state resolved by load according to the concurrent path
Boolean
destroy
Remove associated view on route change
Boolean

Examples

Pokeapi