Tutoriel frontend — « Memo »

Interactions & surcharges

C'est ici que les modules s'interconnectent et se surchargent — toujours dynamiquement, jamais par import direct.

Services inter-modules #

import { ModuleServiceRegistry } from '@kubuno/sdk'

// Memo PUBLIE un contrat que d'autres modules pourront appeler (s'ils existent)
ModuleServiceRegistry.publish('memo', {
  openNote: (id: string) => {
    useMemoStore.getState().select(id)
    if (!location.pathname.startsWith('/memo')) {
      history.pushState({}, '', `/memo/${id}`)
      dispatchEvent(new PopStateEvent('popstate'))
    }
  },
})
// …et CONSOMME un service d'un autre module, de façon optionnelle
const createMeeting = ModuleServiceRegistry.get<MeetingFn>('chat', 'createMeeting')
const meeting = await createMeeting?.('Réunion sur la note', attendeeIds)
// `?.` : si le module `chat` n'est pas installé, l'appel n'a simplement pas lieu
Note

Découverte dynamique + appel optionnel (?.) : un module ne suppose jamais la présence d'un autre.

Slots, surcharges, extensions & widgets #

// Surcharger / étendre des emplacements du shell
SlotRegistry.register('app-dialogs', 'memo', MemoBackgroundWorker)   // monté partout
SlotRegistry.register('dashboard-stats-cards', 'memo', MemoStatsCard)
// Remplacer une surface du host par la sienne quand le module est actif
SlotRegistry.registerOverride('empty-state', 'memo', MemoEmptyState)

// Points d'extension ouverts (un module expose, d'autres garnissent)
ExtensionRegistry.register('note-actions', 'memo', { id: 'export-pdf', Component: ExportPdfButton })
const actions = ExtensionRegistry.getAll('note-actions')

// Vignette de tableau de bord
WidgetRegistry.register({ id: 'memo-recent', moduleId: 'memo', Component: RecentNotesWidget, size: 'medium', order: 30 })

SlotRegistry.register injecte un composant dans un emplacement nommé ; registerOverride remplace une surface du host quand votre module est actif ; ExtensionRegistry ouvre des points que d'autres garnissent ; WidgetRegistry ajoute une vignette au tableau de bord.

À retenir

Singletons partagés (React, stores, Radix…) : restent external, jamais re-bundlés — sinon doublons et UI cassée.