@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. slot: you can reference a slot within the Router Switch to show on a specific path.
2. elements: you will be able to mount CustomElements through Instantable elements.
3. asynchronous generators: through asynchronous generators you will be able to show multiple views according to the load state, for example transitions.

GitHub - atomicojs/routerGitHub

Syntax

Atomico JSX

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
)

HTML

<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
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. Define a slot to show instantly when matching the browser path.
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