Animated Router

import { html, animatedRouter, animationPresets, useUtils, renderApp } from 'mates';

const HomePage = () => () => html`<p>Home</p>`;
const AboutPage = () => () => html`<p>About</p>`;

const App = () => {
  const { navigateTo } = useUtils();

  // Mutually exclusive with Router — claimRouterOutlet("animatedRouter")
  const outlet = animatedRouter(
    [
      { path: '/', component: HomePage },
      {
        path: '/about',
        component: AboutPage,
        enter: animationPresets.fadeIn(250),
        exit: animationPresets.fadeOut(200),
      },
    ],
    {
      enter: animationPresets.fadeIn(200),
      exit: animationPresets.fadeOut(150),
    },
  );

  return () => html`
    <nav>
      <button @click=${() => navigateTo('/')}>Home</button>
      <button @click=${() => navigateTo('/about')}>About</button>
    </nav>
    ${outlet}
  `;
};

renderApp(App, document.getElementById('app'));