MFE Contracts

@pzeta/mfe-contracts
├── Types.ts           # Manifest · Module · Context · Route · Component · User · EventBus · HttpClient · Config · Theme
├── Loader.ts          # MFELoader (caricamento ESM dinamico + cache)
├── Helpers.ts         # validateManifest · buildMenu* · checkPermissions · sanitizeCss · ...
├── Directive.ts       # createCanDirective (v-can)
├── composables/       # useMfeContext · useCrudResource · useCrudView · useDetailForm
│                      # useDialog · useErrorToast
└── utils/             # extractErrorMessage · debounce · stripShellPrefix · buildSettingsFullPath

interface MFEManifest {
  name: string
  version: string
  description: string
  icon?: string
  routes: MFERoute[]
  permissions?: string[]
  components?: MFEComponent[]
}

interface MFEModule {
  getManifest(): MFEManifest
  mount(container: HTMLElement, context: MFEContext): Promise<void>
  unmount(): Promise<void>
}

interface MFEContext {
  user: MFEUser
  basePath: string
  http: MFEHttpClient
  eventBus: MFEEventBus
  theme: MFETheme
  onNavigate(path: string): void
  // ... config + utilities
}

// src/mfe-entry.ts
import { createApp } from 'vue'
import { createRouter, createMemoryHistory } from 'vue-router'
import type { MFEModule, MFEManifest, MFEContext } from '@pzeta/mfe-contracts'
import { MFE_CONTEXT_KEY } from '@pzeta/mfe-contracts'
import App from './App.vue'
import routes from './router/routes'

let app: any = null

export const mfeModule: MFEModule = {
  getManifest(): MFEManifest {
    return {
      name: 'crm-module',
      version: '1.0.0',
      description: 'Gestione clienti, ticket e pipeline CRM',
      icon: 'pi-building',
      routes: [
        {
          path: '/crm/dashboard',
          label: 'Dashboard',
          icon: 'pi-chart-line',
          permission: 'crm.dashboard.read',
          meta: { requiresAuth: true, order: 1 }
        }
      ],
      permissions: ['crm.read']
    }
  },

  async mount(container, context) {
    const router = createRouter({
      history: createMemoryHistory(context.basePath),
      routes
    })
    router.afterEach((to) => context.onNavigate(to.path))

    app = createApp(App)
    app.use(router)
    app.provide(MFE_CONTEXT_KEY, context)
    app.mount(container)
  },

  async unmount() {
    app?.unmount()
    app = null
  }
}

export default mfeModule

import { MFELoader, validateManifest, buildMenuFromManifest } from '@pzeta/mfe-contracts'

const loader = new MFELoader()
const module = await loader.load('https://mfe-crm.example.com/index.js')

if (validateManifest(module.getManifest())) {
  await module.mount(document.getElementById('mfe-slot')!, mfeContext)
}

<script setup lang="ts">
import { useCrudView, useMfeContext } from '@pzeta/mfe-contracts/composables'

const ctx = useMfeContext()
const { items, loading, selected, load, save, remove } = useCrudView({
  list: () => ctx.http.get('/api/clienti'),
  create: (c) => ctx.http.post('/api/clienti', c),
  update: (id, c) => ctx.http.put(`/api/clienti/${id}`, c),
  remove: (id) => ctx.http.delete(`/api/clienti/${id}`),
})
</script>

// Solo tipi (zero runtime cost)
import type { MFEManifest, MFEModule } from '@pzeta/mfe-contracts/types'

// Solo loader
import { MFELoader } from '@pzeta/mfe-contracts/loader'

// Solo composables CRUD
import { useCrudView, useDetailForm } from '@pzeta/mfe-contracts/composables'

// Solo utilities
import { debounce, extractErrorMessage } from '@pzeta/mfe-contracts/utils'

// Solo helpers
import { validateManifest, checkPermissions } from '@pzeta/mfe-contracts/helpers'