@atomico/router

@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.

Syntax

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

Events

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

Examples

Pokeapi