Getting Started
Installazione
Installazione di @pzeta/mfe-contracts, peer dependencies e subpath exports per ottimizzare il bundle.
Installazione
npm install @pzeta/mfe-contracts
Type-first: la libreria è scritta in TypeScript stretto ed espone principalmente contratti tipizzati (
MFEManifest, MFEModule, MFEContext, ...) usati come interfaccia stabile tra shell e microfrontend. Le parti runtime (MFELoader, composables, helpers) sono opzionali e isolate via subpath exports.Peer dependencies
| Pacchetto | Versione |
|---|---|
vue | ^3.4.0 |
Engine
| Tool | Versione minima |
|---|---|
| Node.js | >=22.0.0 |
| npm | >=10.0.0 |
Subpath exports
Per minimizzare il bundle dei consumer la libreria espone import selettivi:
// Import completo (tutto)
import { MFELoader, validateManifest, useCrudView } from '@pzeta/mfe-contracts'
// Solo tipi (zero runtime cost — tree-shaken in produzione)
import type { MFEManifest, MFEModule, MFEContext } from '@pzeta/mfe-contracts/types'
// Solo loader
import { MFELoader } from '@pzeta/mfe-contracts/loader'
// Solo helpers
import { validateManifest, checkPermissions } from '@pzeta/mfe-contracts/helpers'
// Solo composables
import { useCrudView, useDetailForm } from '@pzeta/mfe-contracts/composables'
// Solo utilities
import { extractErrorMessage, debounce } from '@pzeta/mfe-contracts/utils'
| Subpath | Cosa esporta | Quando usarlo |
|---|---|---|
/types | Solo type definitions (MFEManifest, MFEModule, ...) | MFE che vuole consumare solo i contratti |
/loader | MFELoader, mfeLoader | Shell che carica MFE dinamicamente via ESM |
/helpers | validateManifest, buildMenuFromManifest, checkPermissions, ... | Logica di shell (menu, RBAC, validazione) |
/composables | useMfeContext, useCrudView, useDetailForm, ... | MFE che implementano viste CRUD |
/utils | extractErrorMessage, debounce, stripShellPrefix, ... | Utilities pure |
ESM only
Il pacchetto è ESM puro ("type": "module"). I consumer devono usare ESM o tooling con interop (Vite, esbuild, Webpack 5+).
{
"type": "module",
"main": "./dist/index.js",
"module": "./dist/index.js",
"types": "./dist/index.d.ts"
}
Verifica
Una prova minima per verificare che i tipi siano disponibili:
import type { MFEManifest, MFEModule, MFEContext } from '@pzeta/mfe-contracts'
import { validateManifest } from '@pzeta/mfe-contracts/helpers'
const manifest: MFEManifest = {
name: 'demo-module',
version: '1.0.0',
description: 'MFE demo',
routes: [{ path: '/demo', label: 'Demo' }],
}
const { valid, errors } = validateManifest(manifest)
console.log(valid, errors) // true, []
Se valid === true, l'installazione e i tipi sono OK.