@pzeta/utils
Types

MFERoute

Definizione di una rotta esposta dal microfrontend. Path, label, icon, permessi, ruoli, sezione (app/settings), order, badge.

Contratto

interface MFERoute {
  /** Path assoluto della rotta (es: "/crm/dashboard") */
  path: string

  /** Label visualizzata nel menu di navigazione */
  label: string

  /** Icona PrimeIcons per menu (es: "pi-chart-line") */
  icon?: string

  /** Categoria per raggruppamento nel menu */
  category?: string

  /** Permesso richiesto per accedere alla rotta */
  permission?: string

  /** Metadata aggiuntiva per routing */
  meta?: {
    /** Richiede autenticazione */
    requiresAuth?: boolean
    /** Ruoli autorizzati ad accedere */
    roles?: string[]
    /** Ordine di visualizzazione nel menu */
    order?: number
    /** Nascondi dal menu principale */
    hidden?: boolean
    /** Badge dinamico (es: contatore notifiche) */
    badge?: string | (() => string | number)
    /** Sezione del rail di navigazione */
    section?: 'app' | 'settings'
  }
}

Campi principali

CampoTipoRequiredDescrizione
pathstring✓Path assoluto. Convenzione: prefisso col name del MFE per evitare collisioni (es. /crm/dashboard)
labelstring✓Testo visualizzato nel menu
iconstring—Classe PrimeIcons o Lucide
categorystring—Raggruppa più rotte sotto lo stesso header. Default: manifest.name
permissionstring—Singolo permesso richiesto. Per più permessi (OR) usa manifest.permissions o controlla a livello componente

meta — opzioni di routing

CampoTipoDefaultDescrizione
requiresAuthbooleanfalseLa rotta richiede utente autenticato
rolesstring[]—Lista ruoli ammessi (logica OR). Valutato da checkRouteAccess
ordernumber99 (menu) / 999 (sortRoutes)Ordine di visualizzazione nel menu
hiddenbooleanfalseNascondi dal menu principale (resta navigabile via URL)
badgestring | (() => string | number)—Badge dinamico (es. counter notifiche)
section'app' | 'settings''app'Sezione di destinazione nella shell

Sezione app vs settings

Le route con meta.section: 'settings' vengono montate dalla shell sotto /settings/{manifest.name}/...:

// Manifest del MFE
{
  path: '/utenti',
  label: 'Gestione utenti',
  meta: { section: 'settings' },
}

// Shell costruisce automaticamente il path completo via
// buildSettingsMenuFromManifests(manifests) →
//   /settings/crm-module/utenti

Vedi buildSettingsFullPath.

Badge dinamici

Il badge può essere una stringa statica o una funzione valutata al rendering del menu:

{
  path: '/notifications',
  label: 'Notifiche',
  meta: {
    badge: () => unreadCount.value > 0 ? String(unreadCount.value) : '',
  },
}
La funzione del badge viene chiamata ogni volta che la shell renderizza il menu. Mantienila pura e veloce (lettura di un ref reattivo, non chiamate API).

Esempi

Rotta nel rail principale

{
  path: '/crm/clienti',
  label: 'Clienti',
  icon: 'pi-users',
  category: 'CRM',
  permission: 'crm.clienti.read',
  meta: { order: 2, requiresAuth: true },
}

Rotta del rail "Impostazioni"

{
  path: '/templates/email',
  label: 'Template email',
  icon: 'pi-envelope',
  meta: { section: 'settings', order: 10, roles: ['admin', 'editor'] },
}

Rotta navigabile ma nascosta dal menu

{
  path: '/crm/clienti/:id',
  label: 'Dettaglio cliente',
  meta: { hidden: true, requiresAuth: true },
}

Utility correlate

MFEModule

Modulo MFE con lifecycle hooks. Definisce mount, unmount e gli hook opzionali onLoad, onBeforeUnmount, onRouteChange, getViewComponent.

MFETailwindStyles

Estensione tema Tailwind e classi CSS custom esposte dal MFE. Colori, spacing, fontFamily, fontSize, screens.