Shell applicatif complet

Ce pattern montre comment une vraie application assemble les packages Plumile: CSS global d’abord, providers theme/notifications, Relay, puis shell router.

import { StrictMode, type JSX } from 'react';
import { ThemeProvider, ToastProvider } from '@plumile/ui';
import { RelayProvider } from '@plumile/backoffice-react';

import { RouterShell } from './RouterShell.js';

import '@plumile/ui/style.css';
import '@plumile/backoffice-react/style.css';

export function App(): JSX.Element {
  return (
    <StrictMode>
      <ThemeProvider>
        <ToastProvider>
          <RelayProvider>
            <RouterShell />
          </RelayProvider>
        </ToastProvider>
      </ThemeProvider>
    </StrictMode>
  );
}

Gardez le shell router separe du shell applicatif global. Il peut ainsi lire l’environnement Relay, creer l’instrumentation router et nettoyer l’instance router sans melanger ces responsabilites avec les providers globaux.

Etapes suivantes:

• Lire Shell applicatif Router.
• Lire Styling applicatif.
• Lire Setup provider pour un shell backoffice.