Types
I contratti
@pzeta/mfe-contracts/types è la superficie tipizzata della libreria. Definisce le interfacce che shell e MFE concordano per integrarsi senza accoppiamento implementativo. Tutti i tipi sono importabili come pure type (zero runtime cost):
import type {
MFEManifest,
MFEModule,
MFEContext,
MFERoute,
MFEComponent,
MFEUser,
MFEEventBus,
MFEHttpClient,
MFETheme,
MFEConfig,
} from '@pzeta/mfe-contracts/types'
Mappa concettuale
SHELL MICROFRONTEND
┌─ MFEConfig ──────┐ ┌── MFEModule ──────┐
│ name, url, │ 1. load via │ getManifest() │
│ scope, module │ ─────────────────► │ mount(el, ctx) │
│ environment │ │ unmount() │
└──────────────────┘ │ onLoad?, ... │
└─────────┬─────────┘
│
│ 2. ritorna
▼
┌── MFEManifest ────┐
│ name, version │
│ description, icon │
│ routes[] │
│ components[]? │
│ permissions[]? │
│ tailwindStyles? │
└─────────┬─────────┘
│
│ 3. mount()
▼
┌── MFEContext ─────┐
│ basePath │
│ onNavigate(path) │
│ http │
│ eventBus? │
│ getUser? │
│ getToken? │
│ env? │
│ theme? │
└───────────────────┘
Tipi disponibili
Manifest e lifecycle
| Tipo | Descrizione |
|---|---|
MFEManifest | Metadata del MFE (nome, versione, route, componenti, permessi) |
MFEModule | Lifecycle hooks (mount/unmount obbligatori; onLoad/onBeforeUnmount/onRouteChange/getViewComponent opzionali) |
MFEConfig | Configurazione di caricamento (URL ESM, scope, environment) |
MFELoadedComponent | Componente Vue caricato dinamicamente + metadata |
Runtime context
| Tipo | Descrizione |
|---|---|
MFEContext | Bridge shell → MFE (basePath, http, eventBus, theme, onNavigate, ...) |
MFEUser | Utente autenticato (id, username, email, roles, permissions) |
MFEEventBus | Bus eventi cross-MFE (emit/on/off) |
MFEHttpClient | Client HTTP fornito dalla shell (auth gestita) — get/post/put/patch/delete |
MFETheme | Stato e API tema condiviso (light/dark/system) |
Routing e componenti
| Tipo | Descrizione |
|---|---|
MFERoute | Definizione rotta esposta (path, label, icon, permission, meta) |
MFEComponent | Componente Vue esposto dal MFE (nome, props, eventi, esempi) |
Stili
| Tipo | Descrizione |
|---|---|
MFETailwindStyles | Estensione tema Tailwind e classi CSS custom esposte dal MFE |
Sotto-pagine
MFEComponent
Componente Vue riutilizzabile esposto dal MFE. Include MFEComponentProp e MFEComponentEvent per documentare props ed eventi.
MFEConfig & MFELoadedComponent
Configurazione di caricamento dinamico (URL ESM, scope, environment) e wrapper runtime del componente caricato.
MFEContext
Bridge runtime shell → MFE. Contiene basePath, navigazione, HTTP client autenticato, event bus, tema condiviso, utente e ambiente.
MFEEventBus
Bus eventi globale per comunicazione cross-MFE. API minimale emit/on/off con payload typed.
MFEHttpClient
Client HTTP fornito dalla shell con autenticazione e refresh token gestiti automaticamente. Include MFEHttpRequestOptions e MFEHttpResponse.
MFEManifest
Metadata descrittiva del microfrontend esposta alla shell. Nome, versione, descrizione, rotte, componenti, permessi e configurazione tema.
MFEModule
Modulo MFE con lifecycle hooks. Definisce mount, unmount e gli hook opzionali onLoad, onBeforeUnmount, onRouteChange, getViewComponent.
MFERoute
Definizione di una rotta esposta dal microfrontend. Path, label, icon, permessi, ruoli, sezione (app/settings), order, badge.
MFETailwindStyles
Estensione tema Tailwind e classi CSS custom esposte dal MFE. Colori, spacing, fontFamily, fontSize, screens.
MFETheme
Gestione tema condiviso tra shell e microfrontend. Stato reattivo isDark, mode light/dark/system e API setTheme/toggleTheme.
MFEUser
Utente autenticato nell'applicazione. ID, username, email, ruoli e permessi. Estendibile per campi custom di progetto.