@pzeta/utils
Services

widgetRegistry

Registry singleton per gestione dinamica, lazy loading e caching dei componenti widget.

Panoramica

widgetRegistry e un singleton esportato dal pacchetto che mantiene la mappa tra WidgetType e funzioni di import dinamico. Si occupa di:

  • inizializzare al boot la registrazione di tutti i widget integrati (mappa WIDGET_PATHS);
  • fornire lazy loading on-demand dei componenti Vue;
  • mantenere una cache in-memory dei componenti gia caricati per riutilizzarli senza re-import;
  • esporre API per registrare widget custom a runtime.

E usato internamente da <PzetaDashboard> ma puo essere invocato manualmente per scenari custom.

Import

import { widgetRegistry, WidgetType } from '@pzeta/vue-widget'

API

MetodoFirmaDescrizione
registerWidget(type: WidgetType, loader: AsyncWidgetComponent) => voidRegistra un widget custom
hasWidget(type: WidgetType) => booleanVerifica se un widget e registrato
getWidgetLoader(type: WidgetType) => AsyncWidgetComponent | undefinedRitorna la funzione di import
loadWidget(type: WidgetType) => Promise<Component>Carica e ritorna il componente (cache automatica)
getRegisteredTypes() => WidgetType[]Lista di tutti i tipi registrati
clearCache() => voidPulisce la cache componenti caricati
// Verifica disponibilita widget
if (widgetRegistry.hasWidget(WidgetType.CrmMetricsWidget)) {
  const component = await widgetRegistry.loadWidget(WidgetType.CrmMetricsWidget)
}

// Lista dei widget integrati
const types = widgetRegistry.getRegisteredTypes()
// [WidgetType.AudiencesMetrics, WidgetType.AccountsWidget, ...]

Registrazione widget custom

Per estendere la dashboard con widget proprietari, registra il loader prima di renderizzare la dashboard. Il WidgetType deve essere un valore stringa univoco (cast a WidgetType per coerenza tipi):

import { widgetRegistry, WidgetType } from '@pzeta/vue-widget'

widgetRegistry.registerWidget(
  'CustomDashboardKpi' as WidgetType,
  () => import('./widgets/CustomDashboardKpi.vue')
)

// Ora puoi usarlo nella DashboardConfig
const config = {
  widgets: [
    {
      id: 'kpi',
      type: 'CustomDashboardKpi' as WidgetType,
      width: 6, height: 1,
      props: { /* ... */ },
    },
  ],
}

Il componente custom riceve automaticamente le BaseWidgetProps (widgetId, widgetType, currency) iniettate dal Dashboard. Per emettere eventi sull'event bus condiviso usa useWidgetEvent(widgetId, widgetType).

Tipo AsyncWidgetComponent

type AsyncWidgetComponent = () => Promise<{
  default: Component | DefineComponent<...>
}>

E lo stesso tipo restituito dalle import dinamiche di Vite (() => import('./MyComp.vue')), quindi e direttamente compatibile.

Cache e lifecycle

loadWidget() salva il componente in cache dopo il primo caricamento. Le invocazioni successive con lo stesso WidgetType ritornano il riferimento cached senza nuovi import.

In produzione la cache va lasciata attiva. In test o scenari di hot-reload puoi invocare widgetRegistry.clearCache() per forzare il ricaricamento. Il registro (mapping type → loader) non viene mai svuotato, solo la cache dei moduli caricati.

Mappa widget integrati — WIDGET_PATHS

La libreria espone anche WIDGET_PATHS, mappa Record<WidgetType, AsyncWidgetComponent> con i loader di tutti i widget integrati. E utile per ispezione o per costruire UI di selezione widget:

import { WIDGET_PATHS, WidgetType } from '@pzeta/vue-widget'

const totalIntegratedWidgets = Object.keys(WIDGET_PATHS).length
// >= 50

const audiencesLoader = WIDGET_PATHS[WidgetType.AudiencesMetrics]

Grid Layout

useGridClass e useFixedGridClass per classi CSS grid responsive.

Vue Attachment

Libreria Vue 3 per la gestione allegati con upload, download, preview ed eliminazione. Architettura Adapter Strategy + componenti Presentational/Connected.