@atomico/router@3

The new Atomico router dispatches any asynchronous resolution of load to Atomico's suspense API.

<RouterSwitch>
    <RouterCase default load={()=><Home/>}/>
    <RouterCase path="/config" load={()=><Config/>}/>
</RouterSwitch>

Improvements

RouterCase

1. default property: ensures this route is executed whenever there is no match with the switch.
2. stream property: allows rendering each variation within the route without replacing the previous DOM, achieving progressive DOM regeneration.

Fix exports in github actions

2.0.1

fix github action

v2

@atomico/router@2 eliminates the transitions by css, to now be delegated by load with the use of asynchronous generators, example:

 <RouterSwitch>
      <RouterCase
        path="/{folder}"
        memo
        load={async function* (params) {
          yield <h1>Loading...</h1>;

          await delay(1000);

          return (
            <h1>
              welcome! ({JSON.stringify(params)}) <a href="/">to home</a>
            </h1>
          );
        }}
      ></RouterCase>
</RouterSwitch>

The objective of simplifying the core is to give space to functionalities that are more related to the logic and optimization of routes for SPA applications.

Update to atomico@1.51.0

1.2.0

multiple support

Add support to the element property

RouterCase.element

This new property allows defining a customElement to mount at the time of the match, example:

<RouterSwitch>
        <RouterCase path="/" element={MyHome} />
        <RouterCase path="/login" element="my-login" />
</RouterSwitch>

Fix

1. load executes correctly, without the need to define memo

Fix devDep

1.0.1

fix dep

Publish

@atomico/router

Documentation in atomico.gitbook.com.

New Api

import { render } from "atomico";
import { RouterSwitch, RouterCase } from "@atomico/router";

render(
    <RouterSwitch>
        <RouterCase path="/" for="home"></RouterCase>
        <RouterCase path="/user/{id}" load={async ({id})=>{
            const data = await getUser(id);
            return <User {...data}/>
        }}></RouterCase>
        <h1 slot="config">home</h1>
    </RouterSwitch>,
    document.body
)