Demo-v2

Questo progetto è una dimostrazione di come creare e gestire widget modulari e riutilizzabili utilizzando Svelte. La struttura del progetto si basa su un'architettura che separa il template (composizione visiva e reattività) dalla logica (gestione dello stato e comportamento), implementando ereditarietà e composizione per massimizzare la riusabilità e la manutenibilità del codice.

Struttura dei Widget

I widget sono organizzati in due livelli principali:

1. Template: Definisce la struttura visiva e utilizza il concetto di composizione per ereditare elementi comuni.
2. Logica: Implementa il comportamento e lo stato del widget utilizzando classi TypeScript.

1. Template: Composizione con Ereditarietà e Reattività

Il template dei widget è implementato utilizzando componenti Svelte che ereditano elementi comuni tramite composizione. Il componente base BaseWidget.svelte fornisce una struttura comune che può essere estesa da altri widget.Il widget PlotWidget estende il template di BaseWidget e aggiunge funzionalità specifiche per il rendering di grafici utilizzando Plotly. È importante sottilineare che le rune di Svelte 5+ continuano a gestire la reattività.

2. Logica: Classi per Stato e Comportamento

La logica di ogni widget è implementata utilizzando classi TypeScript che estendono una classe base comune. Questo approccio consente di centralizzare la gestione dello stato e il comportamento, mantenendo il template pulito e focalizzato sulla presentazione. Si tratta di file di estensione .svelte.ts che permettono di utilizzare le rune in file Typescript. Infatti, in questi file, è spostato lo stato del Widget rappresentato dalle rune $state.