Composables

useMfeContext

Composable per accedere al MFEContext iniettato dalla shell. Throw se il contesto non è disponibile.

Signature

function useMfeContext(): MFEContext

Recupera il MFEContext precedentemente esposto dalla shell con app.provide(MFE_CONTEXT_KEY, ctx). È un wrapper tipizzato su inject() di Vue.

Comportamento

Ritorna MFEContext se presente.
Throw se non disponibile:

Error: MFEContext non disponibile. Il componente deve essere montato dentro il MFE.
Assicurarsi che la shell faccia provide(MFE_CONTEXT_KEY, context).

La logica "throw se non c'è" è intenzionale: tipizza il ritorno come MFEContext (non MFEContext | undefined), e qualsiasi uso fuori dal mount del MFE è un bug — meglio fallire forte che restituire undefined.

Uso base

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

const ctx = useMfeContext()

// Accesso a tutti i campi del MFEContext
const user = ctx.getUser?.()
const isDark = ctx.theme?.isDark ?? false
const env = ctx.env?.mode

const { data } = await ctx.http.get('/api/qualcosa')

ctx.onNavigate('/altra-route')
ctx.eventBus?.emit('qualcosa-è-successo', { id: 1 })
</script>

Setup lato MFE

Il MFE deve esporre il contesto via provide() durante il mount():

import { MFE_CONTEXT_KEY } from '@pzeta/mfe-contracts'

async mount(container, context) {
  app = createApp(AppRoot)
  app.provide(MFE_CONTEXT_KEY, context) // ← critico
  app.mount(container)
}

Senza questo, ogni chiamata a useMfeContext() dei componenti figli lancerà l'errore sopra.

`MFE_CONTEXT_KEY`

import { MFE_CONTEXT_KEY } from '@pzeta/mfe-contracts'
// InjectionKey<MFEContext>

InjectionKey tipizzato esportato dalla libreria. Usalo nel provide() lato shell e in inject() se vuoi gestire manualmente il caso "contesto assente" senza throw:

import { inject } from 'vue'
import { MFE_CONTEXT_KEY } from '@pzeta/mfe-contracts'

const ctx = inject(MFE_CONTEXT_KEY) // MFEContext | undefined
if (!ctx) {
  // gestione custom (es. fallback a contesto mock per Storybook)
}

Pattern: Storybook / preview

Per renderizzare componenti del MFE fuori dalla shell (Storybook, Playground), fornisci un contesto mock:

import { MFE_CONTEXT_KEY } from '@pzeta/mfe-contracts'
import type { MFEContext } from '@pzeta/mfe-contracts'

const mockContext: MFEContext = {
  basePath: '/',
  onNavigate: (path) => console.log('nav:', path),
  http: {
    get: async () => ({ data: [], status: 200, statusText: 'OK', headers: new Headers() }),
    // ... altri metodi
  } as any,
}

app.provide(MFE_CONTEXT_KEY, mockContext)

Test unitari

In Vitest, usa global.provide di @vue/test-utils:

import { mount } from '@vue/test-utils'
import { MFE_CONTEXT_KEY } from '@pzeta/mfe-contracts'
import MyComponent from './MyComponent.vue'

test('legge env mode dal contesto', () => {
  const ctx = { /* ... mock MFEContext ... */ }
  const wrapper = mount(MyComponent, {
    global: { provide: { [MFE_CONTEXT_KEY as symbol]: ctx } },
  })
  // ...
})

Sorgenti

useMfeContext — composable
MFE_CONTEXT_KEY — InjectionKey<MFEContext>

Tipi correlati

MFEContext — tipo restituito

useErrorToast

Watcher su Ref<string | null> che chiama una callback toast quando l'errore cambia. Cleanup automatico via setup scope Vue.

Loader

Caricamento dinamico di microfrontend via ESM import con cache, dedup delle promise, validazione URL e CSS auto-loading.